/* =========================================================================
   Marca Mhuri — Odontología Especializada
   -------------------------------------------------------------------------
   Capa de identidad que se carga DESPUÉS de app.css. Todo lo que es marca
   (color, tipografía, logo, iconos, forma) vive aquí; app.css conserva la
   estructura y el comportamiento. Así los cambios de usabilidad en app.css y
   los de marca en este archivo no se pisan.

   La paleta sale del logo: verde bosque de la palabra «mhuri», arena del
   símbolo del diente y salvia del lema. Las hojas y los trazos del logo son
   de un solo grosor con puntas redondas: de ahí los iconos de línea, los
   botones de píldora y las esquinas amplias.
   ========================================================================= */

/* Tipografías guardadas dentro de la app: se ven igual sin internet.
   Figtree es variable (un solo archivo cubre de 400 a 700). Solo el juego
   latino básico, que ya trae tildes, ñ, ¿ y ¡. Licencia SIL OFL 1.1. */
@font-face {
  font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/figtree-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Cinzel"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/fonts/cinzel-600-latin.woff2) format("woff2");
}

:root {
  /* Marca */
  --bosque: #284030;
  --bosque-osc: #1d3024;
  --bosque-lateral: #22372a;
  --arena: #d4b890;
  --arena-osc: #a8844f;
  --arena-claro: #f4ecdf;
  --salvia: #607468;

  /* Los nombres antiguos se reasignan: las vistas y las gráficas los usan. */
  --azul: var(--bosque);
  --azul-osc: var(--bosque-osc);
  --azul-claro: #ebf0ea;
  --menta: var(--arena-osc);
  --texto: #1c2820;
  --suave: #5a685e;
  --borde: #e3ded4;
  --fondo: #f4f2ed;
  --panel: #ffffff;
  --ok: #3b7a4d;
  --alerta: #b0721a;
  --error: #b03f2c;
  --morado: #775a82;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(34,55,42,.06), 0 8px 24px rgba(34,55,42,.06);

  --letra: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-lema: "Cinzel", "Trajan Pro", Georgia, serif;
}

body { font-family: var(--letra); font-feature-settings: "ss01"; }
::selection { background: var(--arena); color: var(--bosque-osc); }
:focus-visible { outline-color: var(--arena-osc); }
h1, h2, h3, h4 { letter-spacing: -0.01em; }

/* ------------------------------ Carga ---------------------------------- */
.pantalla-carga .simbolo-carga { width: 72px; height: auto; opacity: .9; }
.spinner { border-color: var(--borde); border-top-color: var(--bosque); }

/* ------------------------------ Acceso --------------------------------- */
.login-fondo {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(212,184,144,.18), transparent 60%),
    var(--bosque-lateral);
}
.login-caja {
  border-radius: 24px; padding: 38px 36px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 30px 70px rgba(10,20,14,.35);
}
.login-caja h1.logo-acceso { margin: 0 auto 6px; text-align: center; line-height: 0; }
.login-caja h1.logo-acceso img { width: 200px; height: auto; }
.login-caja .sub { text-align: center; margin-bottom: 24px; }
.demo-accesos button { background: #f6f4ef; border-color: var(--borde); border-radius: 12px; }
.demo-accesos button:hover { background: var(--arena-claro); }

/* ------------------------------ Lateral -------------------------------- */
.lateral { background: var(--bosque-lateral); color: #d7dfd6; }
.marca { padding: 26px 18px 20px; line-height: 0; text-align: center; }
.marca img { width: 144px; height: auto; }
.marca .logo-horizontal { display: none; }

.nav a { color: #c9d4ca; border-radius: 999px; padding: 10px 14px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.activo { background: var(--arena); color: var(--bosque-osc); font-weight: 600; }

/* Iconos de línea, dibujados con el mismo trazo redondo del logo. El emoji del
   menú sigue en el HTML (lo lee quien no ve la máscara) pero no se pinta. */
.nav .icono {
  font-size: 0; width: 20px; height: 20px; flex: none;
  background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
          mask: var(--icono) center / contain no-repeat;
}
.nav a[data-ruta="hoy"]           { --icono: url(/img/iconos/hoy.svg); }
.nav a[data-ruta="agenda"]        { --icono: url(/img/iconos/agenda.svg); }
.nav a[data-ruta="pacientes"]     { --icono: url(/img/iconos/pacientes.svg); }
.nav a[data-ruta="recordatorios"] { --icono: url(/img/iconos/recordatorios.svg); }
.nav a[data-ruta="ortodoncia"]    { --icono: url(/img/iconos/ortodoncia.svg); }
.nav a[data-ruta="contabilidad"]  { --icono: url(/img/iconos/contabilidad.svg); }
.nav a[data-ruta="panel"]         { --icono: url(/img/iconos/panel.svg); }
.nav a[data-ruta="como-vamos"]    { --icono: url(/img/iconos/como-vamos.svg); }
.nav a[data-ruta="firma-recetas"] { --icono: url(/img/iconos/receta.svg); }
.nav a[data-ruta="configuracion"] { --icono: url(/img/iconos/configuracion.svg); }

.usuario-caja { border-top-color: rgba(212,184,144,.18); }
.usuario-caja .rol { color: var(--arena); }
.usuario-caja button {
  border-radius: 999px; color: #d7dfd6;
  background: transparent; border-color: rgba(255,255,255,.18);
}
.usuario-caja button:hover { background: rgba(255,255,255,.08); }
/* «Mi contraseña»: un enlace discreto debajo de «Cerrar sesión». */
.usuario-caja button.mi-clave {
  display: block; width: auto; margin-top: 4px; padding: 2px; border: 0; background: none; font-size: .78rem;
  text-decoration: underline; text-underline-offset: 2px; opacity: .85;
}
.usuario-caja button.mi-clave:hover { background: none; opacity: 1; }

.buscador-global input {
  border-radius: 999px; padding: 9px 14px;
  border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.07);
}
.buscador-global input::placeholder { color: rgba(231,236,229,.6); }
.buscador-global input:focus { outline: 2px solid var(--arena); outline-offset: 0; }
.resultados-busqueda { border-radius: 14px; }

/* Icono de línea en lugar del emoji de un botón (ver js/iconos.js). El emoji
   sigue dentro del span —lo leen las pruebas y el portapapeles— pero se empuja
   fuera de la caja: un emoji a color no se deja ocultar con `color`. */
.ic {
  display: inline-block; flex: none; vertical-align: -0.2em;
  width: 1.15em; height: 1.15em; overflow: hidden;
  text-indent: 200%; white-space: nowrap; line-height: 1;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
.btn .ic { width: 1.1em; height: 1.1em; }
.btn.chico .ic { width: 1em; height: 1em; }
/* En las pestañas el icono va siempre encima del nombre: con ocho pestañas,
   unas partían el texto y otras no, y el icono saltaba de lugar. */
.pestanas .ic { display: block; margin: 0 auto 3px; }
.tarjeta > h3 .ic { color: var(--arena-osc); width: 1.2em; height: 1.2em; }

/* ------------------------------ Contenido ------------------------------- */
.contenido { padding-top: 28px; }
.cabecera h2 { font-size: 1.55rem; font-weight: 600; color: var(--bosque-osc); letter-spacing: -0.02em; }
.tarjeta { border-color: var(--borde); }
.tarjeta > h3 { font-weight: 600; color: var(--bosque-osc); }

.kpi { border-radius: var(--radio); box-shadow: var(--sombra); }
.kpi .etq {
  font-family: var(--letra-lema); font-weight: 600; letter-spacing: .08em;
  font-size: .74rem; color: var(--salvia);
}
.kpi .val { font-weight: 600; color: var(--bosque-osc); letter-spacing: -0.02em; }
.kpi .val.ok { color: var(--ok); } .kpi .val.mal { color: var(--error); }

/* ----------------------------- Formularios ------------------------------ */
.campo label { color: #3a483e; }
.campo input, .campo select, .campo textarea, .buscador input { border-radius: 12px; }
.campo input:focus, .campo select:focus, .campo textarea:focus, .buscador input:focus {
  border-color: var(--bosque); box-shadow: 0 0 0 3px rgba(40,64,48,.14); outline: none;
}

.btn { border-radius: 999px; padding: 10px 18px; font-weight: 600; letter-spacing: .005em; }
.btn.chico { padding: 6px 13px; }
.btn.sec { background: #fff; border-color: #d9d3c7; color: var(--bosque-osc); }
.btn.sec:hover { background: #f6f3ec; }
.btn.peligro:hover { background: #943322; }
.btn.exito:hover { background: #316942; }
.enlace-btn, a { color: var(--bosque); }

/* ------------------------------- Tablas --------------------------------- */
table.tabla th { color: var(--salvia); font-weight: 600; }
table.tabla tbody tr:hover { background: #faf8f4; }

/* ------------------------------ Etiquetas ------------------------------- */
.eti { font-weight: 600; letter-spacing: .01em; }
.eti.agendada, .eti.baja { background: #e7edf1; color: #33505f; }
.eti.confirmada, .eti.firmado, .eti.completado { background: #e2eee3; color: #2d6440; }
.eti.en_curso, .eti.pendiente, .eti.media { background: #f8ead3; color: #83520e; }
.eti.completada { background: var(--arena-claro); color: #6b5024; }
.eti.cancelada, .eti.rechazado, .eti.cancelado, .eti.alta { background: #f5e1dc; color: #97331f; }
.eti.no_asistio { background: #eceae4; color: #57554e; }
.eti.info { background: var(--azul-claro); color: var(--bosque); }

/* ------------------------------- Agenda --------------------------------- */
.pestanas { background: #ebe7de; border-radius: 999px; }
.pestanas button { border-radius: 999px; }
.pestanas button.activo { color: var(--bosque-osc); }
.agenda-tabla th { background: #f8f6f1; }
.agenda-tabla td { border-color: #eeeae2; }
.agenda-tabla td.hora { background: #fbfaf7; }
.bloque-cita { background: var(--azul-claro); border-radius: 8px; }
.dia-encabezado { background: #f1ede4; color: var(--bosque-osc); }

.hoja-dia { border-radius: var(--radio); }
.renglon-hora { background: #fbfaf7; }
.renglon-dia.vacia { background: repeating-linear-gradient(180deg, transparent, transparent 27px, #f8f6f1 27px, #f8f6f1 28px); }
.linea-cita { border-radius: 12px; }
.hora-libre { border-radius: 12px; }

/* ---------------------------- Línea de tiempo --------------------------- */
.linea .item.tratamiento::before { background: var(--arena-osc); }
.linea .det { color: #4a574e; }

/* ------------------------------- Modales -------------------------------- */
.modal-fondo { background: rgba(22,36,27,.55); }
.modal { border-radius: 22px; box-shadow: 0 30px 70px rgba(12,24,16,.32); }
.modal-pie { border-radius: 0 0 22px 22px; }
.modal-cab h3 { font-weight: 600; color: var(--bosque-osc); }

/* -------------------------------- Avisos -------------------------------- */
/* El color va en un punto, no en una franja: la franja gruesa se leía como
   decoración y competía con el color de doctor de la agenda. */
.aviso {
  position: relative; border: 1px solid var(--borde); border-radius: 14px;
  padding: 12px 16px 12px 36px; box-shadow: 0 10px 30px rgba(22,36,27,.16);
}
.aviso::before {
  content: ''; position: absolute; left: 15px; top: 18px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--bosque);
}
.aviso.error::before { background: var(--error); }
.aviso.exito::before { background: var(--ok); }
.aviso.alerta::before { background: var(--alerta); }

.alerta-caja { border-radius: 12px; background: #fbefec; border-color: #efcfc6; color: #86301f; }
.alerta-caja.ok { background: #eef5ee; border-color: #cfe2d1; color: #285a37; }
.alerta-caja.aviso { background: #fbf3e4; border-color: #efdcb8; color: #75480c; }

/* ------------------------------ Ayuda ----------------------------------- */
.boton-ayuda {
  background: var(--bosque); border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 2px 4px rgba(34,55,42,.2), 0 10px 24px rgba(34,55,42,.28);
}
.boton-ayuda:hover { background: var(--bosque-osc); }
/* Al bajar por la pantalla, solo el icono: el texto completo tapaba lo que se leía. */
.boton-ayuda.compacto { font-size: 0; padding: 12px; line-height: 0; }
.boton-ayuda.compacto .ic { width: 22px; height: 22px; margin: 0; font-size: 16px; }
/* En pantallas anchas va al pie del menú, sin flotar: flotando tapaba la
   leyenda del odontograma y el cobro a 1366×900 (observación del ciclo 123). */
@media (min-width: 901px) {
  .lateral .boton-ayuda {
    position: static; margin: 8px 14px; font-size: .88rem; line-height: normal; padding: 10px 14px;
    box-shadow: none; text-align: left;
  }
}
.lista-ayuda details { border-radius: 14px; }
.lista-ayuda details.de-otros { background: #faf8f4; }

/* ---------------------- Consentimiento y documentos --------------------- */
/* Lo que el paciente ve y firma lleva el logo completo de la clínica. Va como
   fondo con ajuste de impresión exacto para que salga también en el papel. */
.doc-encabezado::before, .membrete::before {
  content: ''; display: block; height: 92px; margin: 0 auto 14px;
  background: url(/img/marca/mhuri-logo.png) center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.membrete { display: block; }
.membrete::before { height: 76px; background-position: left center; margin-left: 0; }
.doc-encabezado, .membrete { border-bottom: 1px solid var(--arena); }
.doc-clinica { font-weight: 700; color: var(--bosque-osc); }
.doc-titulo, .titulo-impresion {
  font-family: var(--letra-lema); font-weight: 600; letter-spacing: .08em; color: var(--bosque);
}
.titulo-impresion { border-bottom-color: var(--arena); }
.hoja { border-radius: 18px; }
.documento { color: #1f2b23; }

.consent-texto { background: #faf8f4; border-radius: 12px; }
.consent-texto h4 { color: var(--bosque); font-family: var(--letra-lema); font-weight: 600; letter-spacing: .06em; }
.firma-campo { background: #fbfaf7; border-radius: 16px; }
.firma-lienzo { background: #fff; border-radius: 12px; }
.firma-lienzo.con-trazo { border-color: var(--bosque); }
.sello-borrador { border-color: var(--alerta); color: var(--alerta); }

.galeria figure { border-radius: 14px; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 900px) {
  .marca { padding: 4px 10px 4px 6px; }
  .marca .logo-apilado { display: none; }
  .marca .logo-horizontal { display: block; width: auto; height: 30px; }
  /* Logo, buscador y sesión en la primera fila; el menú entero en la segunda.
     Compartiendo fila con el buscador, el menú quedaba en una columna de 160 px
     con una sección por renglón. */
  .usuario-caja { order: 2; }
  .nav { order: 3; flex: 1 1 100%; }
  .nav a { padding: 8px 12px; }
  .usuario-caja { border-left-color: rgba(212,184,144,.18); }
  .contenido { padding-top: 18px; }
}
@media (max-width: 560px) {
  /* En el celular el menú va en dos columnas parejas y la sesión en su propia
     fila: envuelto a lo que cupiera, dejaba secciones sueltas y desalineadas. */
  .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; width: 100%; }
  .nav a { padding: 8px 10px; font-size: .84rem; }
  .usuario-caja {
    order: 4; width: 100%; display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap;
    border-left: 0; border-top: 1px solid rgba(212,184,144,.18); padding: 8px 4px 2px;
  }
  .usuario-caja .rol { margin-right: auto; }
  .usuario-caja button { width: auto; margin-top: 0; }
  .login-caja { padding: 30px 22px 24px; }
  .login-caja h1.logo-acceso img { width: 170px; }
  .cabecera h2 { font-size: 1.3rem; }
}

@media print {
  .doc-encabezado::before { height: 80px; }
}
/* Con varias filas de pestañas (tablet), la píldora redonda se deforma. */
.pestanas { border-radius: 18px; }