/* base.css — reset mínimo + estilos base + utilidades compartidas.
 * Responsive: barra lateral en PC/laptop/tablet, barra inferior en teléfono.
 */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--fuente-cuerpo);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--tamano-base);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2 {
  font-family: var(--fuente-cuerpo);
  color: var(--ink);
  margin: 0 0 var(--espacio-3) 0;
  font-weight: 700;
}
h3 {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamano-sm);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--marca-700);
  font-weight: 700;
  margin: 0 0 var(--espacio-3) 0;
}

h1 { font-size: var(--tamano-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--tamano-lg); }

a { color: var(--marca-500); text-decoration: none; }

/* --- Layout raíz: barra lateral + contenido --- */

#app-raiz {
  display: flex;
  min-height: 100vh;
}

#barra-lateral-montaje.oculta { display: none; }

#columna-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

#contenido-principal {
  flex: 1;
  padding: var(--espacio-6);
  max-width: 980px;
}

/* CORRECCIÓN (pantalla de Login desplazada/cortada, julio 2026):
 * #contenido-principal normalmente limita el ancho a 980px y no se
 * autocentra (queda pegado a la izquierda del espacio disponible), y su
 * padding se sumaba a los 100vh del propio Login, empujando el contenido
 * más allá de una pantalla y cortando la parte superior hasta hacer
 * scroll. Las rutas de pantalla completa (ver router.js) usan esta clase
 * para quitar ese relleno/ancho máximo y ocupar todo el viewport. */
#contenido-principal.contenido-pantalla-completa {
  padding: 0;
  max-width: none;
  width: 100%;
  display: flex;
}

/* --- Encabezado superior (fijo, presente en todas las pantallas) --- */

#encabezado-superior-montaje {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--borde);
  position: sticky;
  top: 0;
  z-index: 20;
}

.fila-encabezado-superior {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  padding: var(--espacio-3) var(--espacio-5);
}

/* Banner(s) global(es) de "consulta sin guardar" — ver
 * estado/borradoresConsulta.js y componentes/EncabezadoSuperior.js.
 * Visibles en cualquier pantalla del sistema mientras haya al menos una
 * consulta (nueva, de control o en edición) de la que se salió sin guardar
 * ni cancelar. Se apilan si hay más de una pendiente. */
#contenedor-banners-borrador:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 var(--espacio-5) var(--espacio-3);
}

.banner-borrador-pendiente {
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-radius: var(--radio-sm);
  padding: 8px 14px;
  font-size: var(--tamano-sm);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}

.boton-icono {
  background: none;
  border: var(--borde);
  border-radius: var(--radio-sm);
  width: 36px;
  height: 36px;
  font-size: var(--tamano-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ink);
}
.boton-icono:hover { background: var(--mist); }

#titulo-encabezado {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamano-lg);
  font-weight: 700;
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pildora-clinica {
  background: var(--marca-100);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: var(--tamano-sm);
  font-weight: 600;
  color: var(--marca-700);
  cursor: pointer;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pildora-clinica:hover { background: #D6EEE1; }

.menu-desplegable {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sutil);
  min-width: 220px;
  max-width: 320px;
  overflow: hidden;
  z-index: 30;
}

.opcion-menu-clinica {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: var(--borde);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--tamano-sm);
  cursor: pointer;
  color: var(--ink);
}
.opcion-menu-clinica:last-child { border-bottom: none; }
.opcion-menu-clinica:hover { background: var(--mist); }

@media (max-width: 600px) {
  .fila-encabezado-superior { padding: var(--espacio-2) var(--espacio-3); }
  #contenedor-banners-borrador:not(:empty) { padding: 0 var(--espacio-3) var(--espacio-2); }
  #titulo-encabezado { font-size: var(--tamano-md); }
  .pildora-clinica { max-width: 160px; }
}

/* --- Tarjeta --- */

.tarjeta {
  background: var(--superficie);
  border: var(--borde);
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-sutil);
  padding: var(--espacio-5);
}

/* Acento de color a la izquierda de una tarjeta/sección — el mismo
   lenguaje visual del sistema anterior para dar personalidad y ayudar a
   escanear información rápido. Uso: <div class="tarjeta tarjeta-acento-azul"> */
.tarjeta-acento-esmeralda, .tarjeta-acento-azul, .tarjeta-acento-purpura,
.tarjeta-acento-ambar, .tarjeta-acento-rojo, .tarjeta-acento-naranja {
  border-left-width: 4px;
  border-left-style: solid;
}
.tarjeta-acento-esmeralda { border-left-color: var(--marca-500); }
.tarjeta-acento-azul { border-left-color: var(--info); }
.tarjeta-acento-purpura { border-left-color: var(--violeta); }
.tarjeta-acento-ambar { border-left-color: var(--amber-alert); }
.tarjeta-acento-rojo { border-left-color: var(--signal-red); }
.tarjeta-acento-naranja { border-left-color: var(--naranja); }

/* --- Botones --- */

.boton {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamano-sm);
  font-weight: 600;
  border-radius: var(--radio-sm);
  padding: var(--espacio-2) var(--espacio-4);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, filter 120ms ease, transform 80ms ease;
}
.boton:focus-visible { outline: 2px solid var(--marca-500); outline-offset: 2px; }
.boton:active { transform: translateY(1px); }

.boton-primario { background: var(--boton-gradiente); color: var(--white); letter-spacing: 0.01em; }
.boton-primario:hover { background: var(--boton-gradiente-hover); }

.boton-secundario { background: var(--superficie); color: var(--ink); border-color: var(--mist-strong); }
.boton-secundario:hover { background: var(--mist); }

/* --- Campos de formulario --- */

.campo { display: flex; flex-direction: column; gap: var(--espacio-1); margin-bottom: var(--espacio-4); }
.campo label { font-size: var(--tamano-sm); color: var(--ink-soft); font-weight: 600; }
.campo input, .campo select, .campo textarea {
  font-family: var(--fuente-cuerpo);
  font-size: var(--tamano-base);
  padding: var(--espacio-2) var(--espacio-3);
  border: var(--borde);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--ink);
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--ink-tenue); }
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--marca-500); outline-offset: 1px;
}

/* --- Rejilla de 2 columnas (formularios) --- */

.rejilla-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--espacio-4);
}
@media (max-width: 600px) {
  .rejilla-2 { grid-template-columns: 1fr; }
}

/* --- Tarjetas de Tipo de Informe (Informes Especializados) --- */

.rejilla-informes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--espacio-3);
}
.tarjeta-tipo-informe {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--espacio-2);
  padding: var(--espacio-4) var(--espacio-3);
  min-height: 110px;
  background: var(--superficie);
  border: 1.5px solid var(--mist-strong);
  border-radius: var(--radio-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.12s ease, background 0.12s ease;
}
.tarjeta-tipo-informe:hover {
  border-color: var(--marca-500);
  background: var(--marca-100);
}
.tarjeta-tipo-informe-icono {
  font-size: 2.25rem;
  line-height: 1;
}
.tarjeta-tipo-informe-nombre {
  font-size: var(--tamano-sm);
  font-weight: 600;
  line-height: 1.25;
}

/* --- Lista de pacientes --- */

.tarjeta-lista { padding: 0; overflow: hidden; }
.fila-paciente {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-4);
  padding: var(--espacio-3) var(--espacio-4);
  border-bottom: var(--borde);
  color: var(--ink);
}
.fila-paciente:last-child { border-bottom: none; }
.fila-paciente:hover { background: var(--superficie-hover); }
.fila-paciente-nombre { font-weight: 600; }
.fila-paciente-detalle {
  display: flex;
  gap: var(--espacio-4);
  color: var(--ink-soft);
  font-size: var(--tamano-sm);
  font-family: var(--fuente-datos);
}
@media (max-width: 600px) {
  .fila-paciente { flex-direction: column; align-items: flex-start; gap: var(--espacio-1); }
}

/* --- Ficha de paciente: bloques de detalle --- */

.ficha-bloque { margin-bottom: var(--espacio-5); }
.ficha-bloque h3 { margin-bottom: var(--espacio-2); }
.ficha-dato { display: flex; gap: var(--espacio-2); font-size: var(--tamano-sm); padding: 2px 0; }
.ficha-dato .etiqueta { color: var(--ink-soft); min-width: 160px; }
.lista-simple { margin: 0; padding-left: var(--espacio-4); font-size: var(--tamano-sm); }

.ficha-historial-consultas summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  user-select: none;
}
.ficha-historial-consultas summary::-webkit-details-marker { display: none; }
.ficha-historial-consultas summary::before {
  content: '▸';
  display: inline-block;
  margin-right: var(--espacio-2);
  color: var(--ink-soft);
  transition: transform 0.15s ease;
  font-size: var(--tamano-sm);
}
.ficha-historial-consultas[open] summary::before { transform: rotate(90deg); }
.lista-simple li { margin-bottom: var(--espacio-1); }

.boton-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--tamano-sm);
  color: var(--marca-500);
  cursor: pointer;
  text-decoration: underline;
}
.boton-link:hover { opacity: 0.75; }
.boton-link:disabled { opacity: 0.4; cursor: not-allowed; }

.opcion-cie10 {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: none;
  border-bottom: var(--borde);
  padding: var(--espacio-2) var(--espacio-3);
  font-size: var(--tamano-sm);
  color: var(--ink);
  cursor: pointer;
}
.opcion-cie10:last-child { border-bottom: none; }
.opcion-cie10:hover { background: var(--mist); }

.boton-link-tarjeta {
  font: inherit;
  color: var(--ink);
}
.boton-link-tarjeta:hover { opacity: 0.8; }

/* --- Pastilla de estado (sincronización, conflicto) --- */

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-1);
  font-size: var(--tamano-xs);
  font-weight: 600;
  padding: 2px var(--espacio-2);
  border-radius: 999px;
}
.pastilla-sincronizado { background: var(--success-bg); color: var(--success); }
.pastilla-local { background: var(--amber-alert-bg); color: var(--amber-alert); }
.pastilla-conflicto { background: var(--signal-red-bg); color: var(--signal-red); }

/* --- Barra fija de datos del paciente (pantallas de Consulta) ---
 * Se fija justo debajo del encabezado superior (que también es sticky,
 * ver #encabezado-superior-montaje más arriba). --altura-encabezado-superior
 * la calcula y actualiza componentes/EncabezadoSuperior.js en tiempo real
 * (mide su propia altura), para que el offset sea correcto en cualquier
 * tamaño de pantalla sin tener que fijarlo a mano en CSS. */
.barra-paciente-consulta {
  position: sticky;
  top: var(--altura-encabezado-superior, 64px);
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: var(--borde);
  border-radius: var(--radio-sm);
  padding: var(--espacio-2) var(--espacio-3);
  margin-bottom: var(--espacio-3);
}
.barra-paciente-consulta-principal {
  display: flex;
  align-items: baseline;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}
.barra-paciente-consulta-datos {
  color: var(--ink-soft);
  font-size: var(--tamano-sm);
}
.barra-paciente-consulta-problemas {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Barra lateral (PC / laptop / tablet) --- */

.barra-lateral {
  width: var(--ancho-barra-lateral);
  background: var(--sidebar-bg);
  padding: var(--espacio-5) var(--espacio-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.barra-lateral .marca {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 0 var(--espacio-2);
  margin-bottom: var(--espacio-5);
}
.barra-lateral .marca-cruz {
  width: 20px; height: 20px;
  position: relative;
  flex-shrink: 0;
}
.barra-lateral .marca-cruz::before, .barra-lateral .marca-cruz::after {
  content: '';
  position: absolute;
  background: #6FD3A8;
  border-radius: 2px;
}
.barra-lateral .marca-cruz::before { top: 0; left: 7px; width: 6px; height: 20px; }
.barra-lateral .marca-cruz::after { top: 7px; left: 0; width: 20px; height: 6px; }
.barra-lateral .marca-texto {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--tamano-md);
  color: var(--white);
  line-height: 1.15;
}

.enlace-navegacion {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  padding: 9px var(--espacio-3);
  border-radius: var(--radio-sm);
  color: var(--sidebar-texto);
  font-weight: 500;
  font-size: var(--tamano-sm);
}
.enlace-navegacion:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-texto-activo); }
.enlace-navegacion.activo { background: var(--sidebar-activo-bg); color: var(--sidebar-texto-activo); font-weight: 700; }
.enlace-navegacion.proximamente {
  color: rgba(255, 255, 255, 0.4);
  cursor: default;
  justify-content: space-between;
}
.enlace-navegacion.proximamente:hover { background: none; }
.etiqueta-proximamente {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  padding: 1px 6px;
  border-radius: 999px;
}

.barra-lateral .boton-secundario {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-texto);
  border-color: rgba(255, 255, 255, 0.16);
}
.barra-lateral .boton-secundario:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--sidebar-texto-activo);
}

/* --- Responsive: tablet y teléfono --- */

@media (max-width: 900px) {
  #app-raiz { flex-direction: column; }
  .barra-lateral {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
  }
  .barra-lateral .marca { display: none; }
}

@media (max-width: 600px) {
  #contenido-principal { padding: var(--espacio-4); }
  .barra-lateral {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--alto-barra-inferior-movil);
    justify-content: space-around;
    z-index: 10;
  }
  #app-raiz { padding-bottom: var(--alto-barra-inferior-movil); }
  .enlace-navegacion { flex-direction: column; gap: 2px; text-align: center; font-size: var(--tamano-xs); }
}

/* --- Pantalla de Login (momento de marca — fondo oscuro deliberado) --- */

.pantalla-login {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh; /* evita el recorte por la barra de direcciones en móviles */
  width: 100%;
  padding: var(--espacio-5);
  background: var(--login-gradiente);
  background-color: var(--login-bg-profundo);
  /* Si la tarjeta llegara a ser más alta que la pantalla (fuente grande,
   * teclado en pantalla, etc.), permite hacer scroll hacia abajo en vez de
   * recortar la parte de arriba sin forma de verla. */
  overflow-y: auto;
}

.login-tarjeta {
  width: 100%;
  max-width: 420px;
  background: var(--login-vidrio-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--login-vidrio-borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-vidrio);
  padding: var(--espacio-6) var(--espacio-6) var(--espacio-5);
}

.login-encabezado {
  display: flex;
  align-items: center;
  gap: var(--espacio-4);
  margin-bottom: var(--espacio-5);
}

.login-foto {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(145deg, #2A6E58, #123D31);
  border: 2px solid var(--login-vidrio-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--tamano-lg);
  color: var(--login-ink);
  overflow: hidden;
}
.login-foto img { width: 100%; height: 100%; object-fit: cover; }

.login-marca-fila { display: flex; align-items: center; gap: var(--espacio-2); }
.login-cruz {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
}
.login-cruz::before, .login-cruz::after {
  content: '';
  position: absolute;
  background: var(--marca-500);
  border-radius: 3px;
}
.login-cruz::before { top: 0; left: 8px; width: 6px; height: 22px; }
.login-cruz::after { top: 8px; left: 0; width: 22px; height: 6px; }

.login-marca {
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: var(--tamano-md);
  color: var(--login-ink);
  letter-spacing: -0.01em;
}

.login-nombre {
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--tamano-lg);
  color: var(--login-ink);
  margin: var(--espacio-1) 0 0 0;
}

.login-tagline {
  font-size: var(--tamano-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--login-ink-soft);
  margin: 2px 0 0 0;
}

.login-divisor {
  border: none;
  border-top: 1px solid var(--login-vidrio-borde);
  margin: var(--espacio-5) 0;
}

.login-titulo {
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: var(--tamano-lg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--login-ink);
  margin: 0 0 var(--espacio-5) 0;
  line-height: 1.35;
}

.login-tarjeta .campo label { color: var(--login-ink-soft); }
.login-tarjeta .campo input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--login-vidrio-borde);
  color: var(--login-ink);
}
.login-tarjeta .campo input::placeholder { color: var(--login-ink-tenue); }

.login-campo-contrasena { position: relative; }
.login-campo-contrasena input { padding-right: 40px !important; }
.login-boton-ojo {
  position: absolute;
  right: var(--espacio-2);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--login-ink-soft);
  cursor: pointer;
  font-size: var(--tamano-md);
  padding: 4px;
  line-height: 1;
}
.login-boton-ojo:hover { color: var(--login-ink); }

.login-boton-entrar {
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--espacio-3) var(--espacio-4);
  font-size: var(--tamano-sm);
}

.login-pie {
  text-align: center;
  font-size: var(--tamano-xs);
  color: var(--login-ink-tenue);
  margin-top: var(--espacio-5);
}

@media (max-width: 480px) {
  .login-tarjeta { padding: var(--espacio-5) var(--espacio-4); }
  .login-encabezado { flex-direction: column; text-align: center; }
}

/* --- Avisos de recordatorio en el calendario de Citas --- */

@keyframes cit-parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

.cit-emoji-parpadeante {
  animation: cit-parpadeo 1.1s ease-in-out infinite;
}