/* ============================================================
   Dentalplus · layout.css
   Estructura de la aplicación: barra lateral en escritorio,
   barra inferior en móvil, encabezado de paciente pegajoso.
   ============================================================ */

/* El armazón ocupa EXACTAMENTE el alto de la ventana y no scrollea. Solo
   scrollea `.contenido`.

   Antes era `min-height`, así que la rejilla crecía con el contenido y quien
   scrolleaba era el documento entero: la barra lateral y el encabezado se iban
   hacia arriba con la página, y cada recarga —cambiar de día en la agenda,
   cambiar de ceja en el expediente— "mandaba al tope" moviendo también el
   armazón. Con `height` fijo, `overflow-y:auto` de `.contenido` por fin se
   activa: el armazón queda quieto y `position:sticky` del encabezado funciona
   como estaba pensado desde el principio. */
.app {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 236px 1fr;
  background: var(--lienzo);
}


.app__lateral {
  background: var(--n-900);
  padding: var(--e-5) var(--e-3);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.app__lateral-marca { display: flex; align-items: center; gap: var(--e-3); padding: 0 var(--e-2); }
.nav-lateral { display: flex; flex-direction: column; gap: 2px; }
.nav-lateral__item {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-md);
  color: #cbd5e1;
  text-decoration: none;
  font-size: var(--txt-sm);
}
.nav-lateral__item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-lateral__item[aria-current="page"] { background: var(--color-primario); color: var(--texto-sobre-primario); font-weight: var(--peso-semi); }
.app__lateral-usuario { margin-top: auto; display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3); border-radius: var(--r-md); background: rgba(255,255,255,.06); }

/* Móvil y tablet vertical: la barra lateral desaparece y la navegación se va
   abajo, al alcance del pulgar.

   ESTE BLOQUE TIENE QUE IR DESPUÉS DE `.app__lateral`, NO ANTES.
   Un @media NO añade especificidad: `@media(...) { .app__lateral{display:none} }`
   y `.app__lateral{display:flex}` valen lo mismo (0-1-0) y gana la que aparece
   última en el archivo. Estando el media query arriba, `display:flex` lo
   anulaba y la barra lateral se dibujaba SIEMPRE en el celular, como una
   franja a lo ancho encima del contenido. Con el armazón de alto fijo eso
   dejaba a `.contenido` sin altura: se veía el menú, el título y la barra
   inferior, y la página no se podía desplazar. */
@media (max-width: 1023px) {
  .app { grid-template-columns: 1fr; }
  .app__lateral { display: none; }
  .app__lateral[data-abierto] {
    display: flex;
    position: fixed; inset: 0 auto 0 0;
    width: min(280px, 85vw);
    overflow-y: auto;            /* menús largos en pantallas bajas */
    z-index: var(--z-drawer);
  }
}

.app__principal { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

.barra-superior {
  padding: var(--e-4) var(--e-7);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-6);
  position: sticky; top: 0; z-index: var(--z-sticky);
}
@media (max-width: 639px) { .barra-superior { padding: var(--e-3) var(--e-4); } }

/* En escritorio la barra lateral está siempre visible: el hamburguesa sobra.
   El comentario de la plantilla decía «solo móvil» pero nada lo aplicaba. */
@media (min-width: 1024px) { #btn-menu { display: none; } }

/* Utilidad usada por la barra superior para el nombre de la clínica. */
@media (min-width: 768px) { .mostrar-md { display: inline !important; } }

.contenido {
  flex: 1;
  min-height: 0;                 /* sin esto un hijo flex no se deja encoger */
  --pad-y: var(--e-6);           /* la usa .barra-pegajosa para taparlo */
  padding: var(--pad-y) var(--e-7);
  overflow-y: auto;
  overscroll-behavior: contain;  /* que el scroll no se contagie al documento */
  -webkit-overflow-scrolling: touch;
  scroll-padding-top: var(--e-4);
}
@media (max-width: 639px) { .contenido { --pad-y: var(--e-4); padding: var(--pad-y) var(--e-4); } }

/* Encabezado del paciente: se queda fijo con la alerta médica dentro.
   El dentista puede desplazarse por el expediente sin perder de vista
   la contraindicación. */
.encabezado-paciente {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  padding: var(--e-5) var(--e-7) 0;
  display: flex; flex-direction: column; gap: var(--e-4);
}
@media (max-width: 639px) { .encabezado-paciente { padding: var(--e-3) var(--e-4) 0; } }

/* Barra inferior de navegación: solo móvil */
.barra-inferior {
  position: sticky; bottom: 0;
  display: grid;
  /* Las columnas se reparten entre los botones que realmente haya. Estaba fijo
     en 4 y el usuario normal tiene 5 —Tablero, Pacientes, Agenda, Perfil,
     Salir—, así que «Salir» se iba a una segunda fila. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: var(--e-1) var(--e-1) calc(var(--e-2) + env(safe-area-inset-bottom));
  background: var(--superficie);
  border-top: 1px solid var(--borde);
  z-index: var(--z-sticky);
}
.barra-inferior__item {
  min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 11px;
}
.barra-inferior__item[aria-current="page"] { color: var(--primario-texto); font-weight: var(--peso-semi); }
@media (min-width: 1024px) { .barra-inferior { display: none; } }

/* Rejillas de contenido */
.rejilla { display: grid; gap: var(--e-4); }
.rejilla--indicadores { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla--tarjetas { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.rejilla--dos-columnas { grid-template-columns: 1fr 360px; }
@media (max-width: 1023px) { .rejilla--dos-columnas { grid-template-columns: 1fr; } }

/* Formularios: una sola columna en móvil, siempre */
.formulario { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 639px) { .formulario { grid-template-columns: 1fr; } }
.formulario__ancho-completo { grid-column: 1 / -1; }

/* Vista de tablet para la firma del paciente: cero navegación */
.vista-paciente { min-height: 100dvh; display: flex; flex-direction: column; background: var(--superficie); }
.vista-paciente__cuerpo { flex: 1; display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; }
@media (max-width: 899px) { .vista-paciente__cuerpo { grid-template-columns: 1fr; } }