/* =========================================================================
   Marca Dra. Julieth Valderrama — Consultorio Odontológico
   -------------------------------------------------------------------------
   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.

   La paleta sale del logo, que es monocromo: negro del círculo y blanco del
   monograma «Jv». Sobre ese negro se construye la paleta (carbón para
   botones y menú, hueso cálido para fondos) y un único acento bronce, usado
   con medida, para destacar lo activo sin romper la sobriedad de la marca.
   Contrastes de texto verificados ≥ 4.5:1 (WCAG AA).
   ========================================================================= */

/* 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 */
  --carbon: #1c1c1c;
  --carbon-osc: #0e0e0e;
  --carbon-lateral: #141414;
  --bronce: #c9ab7c;
  --bronce-osc: #86642f;
  --hueso-claro: #f3ede2;
  --piedra: #66635d;

  /* Los nombres antiguos se reasignan: las vistas y las gráficas los usan. */
  --azul: var(--carbon);
  --azul-osc: var(--carbon-osc);
  --azul-claro: #efede8;
  --menta: var(--bronce-osc);
  --texto: #1a1a1a;
  --suave: #5a5853;
  --borde: #e4e0d8;
  --fondo: #f5f3ee;
  --panel: #ffffff;
  --ok: #2f6b43;
  --alerta: #96600f;
  --error: #a63a28;
  --morado: #6d5478;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.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(--bronce); color: var(--carbon-osc); }
:focus-visible { outline-color: var(--bronce-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(--carbon); }

/* ------------------------------ Acceso --------------------------------- */
.login-fondo {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(201,171,124,.18), transparent 60%),
    var(--carbon-lateral);
}
.login-caja {
  border-radius: 24px; padding: 38px 36px 30px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 30px 70px rgba(0,0,0,.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(--hueso-claro); }

/* ------------------------------ Lateral -------------------------------- */
.lateral { background: var(--carbon-lateral); color: #e4e1da; }
.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: #d2cec5; border-radius: 999px; padding: 10px 14px; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.activo { background: var(--bronce); color: var(--carbon-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="configuracion"] { --icono: url(/img/iconos/configuracion.svg); }

.usuario-caja { border-top-color: rgba(201,171,124,.18); }
.usuario-caja .rol { color: var(--bronce); }
.usuario-caja button {
  border-radius: 999px; color: #e4e1da;
  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(236,233,226,.6); }
.buscador-global input:focus { outline: 2px solid var(--bronce); 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(--bronce-osc); width: 1.2em; height: 1.2em; }

/* ------------------------------ Contenido ------------------------------- */
.contenido { padding-top: 28px; }
.cabecera h2 { font-size: 1.55rem; font-weight: 600; color: var(--carbon-osc); letter-spacing: -0.02em; }
.tarjeta { border-color: var(--borde); }
.tarjeta > h3 { font-weight: 600; color: var(--carbon-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(--piedra);
}
.kpi .val { font-weight: 600; color: var(--carbon-osc); letter-spacing: -0.02em; }
.kpi .val.ok { color: var(--ok); } .kpi .val.mal { color: var(--error); }

/* ----------------------------- Formularios ------------------------------ */
.campo label { color: #3a3935; }
.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(--carbon); box-shadow: 0 0 0 3px rgba(28,28,28,.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(--carbon-osc); }
.btn.sec:hover { background: #f6f3ec; }
.btn.peligro:hover { background: #943322; }
.btn.exito:hover { background: #316942; }
.enlace-btn, a { color: var(--carbon); }

/* ------------------------------- Tablas --------------------------------- */
table.tabla th { color: var(--piedra); 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(--hueso-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(--carbon); }

/* ------------------------------- Agenda --------------------------------- */
.pestanas { background: #ebe7de; border-radius: 999px; }
.pestanas button { border-radius: 999px; }
.pestanas button.activo { color: var(--carbon-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(--carbon-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(--bronce-osc); }
.linea .det { color: #4a4843; }

/* ------------------------------- Modales -------------------------------- */
.modal-fondo { background: rgba(0,0,0,.55); }
.modal { border-radius: 22px; box-shadow: 0 30px 70px rgba(0,0,0,.32); }
.modal-pie { border-radius: 0 0 22px 22px; }
.modal-cab h3 { font-weight: 600; color: var(--carbon-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(0,0,0,.16);
}
.aviso::before {
  content: ''; position: absolute; left: 15px; top: 18px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--carbon);
}
.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(--carbon); border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.28);
}
.boton-ayuda:hover { background: var(--carbon-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/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(--bronce); }
.doc-clinica { font-weight: 700; color: var(--carbon-osc); }
.doc-titulo, .titulo-impresion {
  font-family: var(--letra-lema); font-weight: 600; letter-spacing: .08em; color: var(--carbon);
}
.titulo-impresion { border-bottom-color: var(--bronce); }
.hoja { border-radius: 18px; }
.documento { color: #1c1c1b; }

.consent-texto { background: #faf8f4; border-radius: 12px; }
.consent-texto h4 { color: var(--carbon); 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(--carbon); }
.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(201,171,124,.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(201,171,124,.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; }

/* --------------------------- Asistente de IA --------------------------- */
.boton-asistente {
  background: var(--carbon); border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.28);
}
.boton-asistente:hover { background: var(--carbon-osc); }
@media (max-width: 900px) {
  .boton-asistente { padding: 12px; }
}
/* Al pie del menú, junto a «¿Cómo hago…?», en pantallas anchas. */
@media (min-width: 901px) {
  .lateral .boton-asistente {
    position: static; margin: 0 14px 8px; font-size: .88rem; line-height: normal; padding: 10px 14px;
    box-shadow: none; text-align: left; border: 1px solid var(--bronce);
  }
}
.asis-cabeza h2 { font-family: var(--letra-lema); letter-spacing: .06em; font-weight: 600; }
.asis-msg.de-usuaria { background: var(--hueso-claro); }
.asis-accion { border-left-color: var(--bronce); }