/*
  pantallas.css — el aspecto de las secciones cuando se abren como pantalla completa.
  Va con pantallas.js. Pedido de Junior: que Inventario, Choferes o Configuración ocupen
  toda la pantalla en vez de expandirse hacia abajo empujando la lista de ventas.
*/

/* la barra de volver, pegada arriba */
.pant-barra {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 11px 14px;
  background: var(--card, #fff);
  border: 1px solid var(--line, #e2e6ec);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(20, 30, 50, .07);
}
.pant-volver {
  flex: 0 0 auto;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  padding: 8px 14px;
  border-radius: 9px;
  border: 1px solid var(--line, #e2e6ec);
  background: var(--bg, #f4f6f9);
  color: var(--ink, #1a2230);
}
.pant-volver:hover { background: var(--line, #e8ecf2); }
.pant-volver:focus-visible { outline: 2px solid var(--blue, #2563eb); outline-offset: 2px; }
.pant-volver span { font-size: 16px; margin-right: 2px; }

.pant-titulo { min-width: 0; line-height: 1.25; }
.pant-titulo b { display: block; font-size: 15.5px; letter-spacing: -.01em; }
.pant-ruta {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted, #6b7480);
}

/* la sección que está en pantalla: sin el marco de tarjeta, para aprovechar el ancho */
details.es-pantalla {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
}
/* su propio título ya lo muestra la barra de arriba */
details.es-pantalla > summary { display: none !important; }
/* la rayita de color del sub-menú tampoco va: acá ya no es un ítem de una lista */
details.es-pantalla::before { display: none !important; }

/* mientras hay una pantalla abierta, el contenido respira más */
body.en-pantalla main { padding-bottom: 40px; }

/* 🎛️ El centro de control NO se ve dentro de un módulo (pedido de Junior, 2026-08-02:
   "cuando entre a cualquier módulo quiero que vea solo lo del módulo, no todo").
   Va por CSS y con !important a propósito: pantallas.js lo oculta al entrar, pero
   renderTablero() lo repinta solo cada vez que refrescan los datos y le devuelve el
   display inline. Sin el !important reaparece solo a los pocos segundos. */
body.en-pantalla #tablero { display: none !important; }
/* nada de acordeones a medio abrir detrás */
body.en-pantalla details.es-pantalla > .conf-lista { display: block; }

/* en el teléfono la barra va de lado a lado */
@media (max-width: 560px) {
  .pant-barra { border-radius: 0; margin-left: -12px; margin-right: -12px; padding: 10px 12px; }
  .pant-titulo b { font-size: 14.5px; }
}