/* ============================================================
   ACS Dental — hoja de estilos compartida
   Todas las páginas usan este archivo.

   DECISIONES DE DISEÑO, Y POR QUÉ

   1. Sin fuentes web. Un portal de salud tiene que cargar rápido
      en el celular de alguien en la sala de espera con una barra
      de señal. La pila del sistema se ve nativa en cada aparato
      y no cuesta una petición de red.

   2. Base de 17px y objetivos táctiles de 44px. Un consultorio
      dental atiende a gente mayor: la letra chica y los botones
      apretados son un problema real, no una preferencia estética.

   3. Modo oscuro por preferencia del sistema. Un dentista consulta
      el panel entre paciente y paciente, muchas veces en un
      ambiente con poca luz.

   4. Un solo acento, en --acento. Es LO ÚNICO que se cambia para
      dar identidad a un consultorio nuevo. Todos los demás colores
      se derivan de tokens neutros.
   ============================================================ */

:root {
  /* --- El acento del consultorio. Cambiar solo estas dos. --- */
  --acento: #157A52;
  --acento-oscuro: #0E5C3D;

  /* --- Neutros con sesgo hacia el acento --- */
  --fondo: #F4F7F5;
  --superficie: #FFFFFF;
  --superficie-2: #EDF2EF;
  --superficie-alt: #E4EDE8;

  --tinta: #16211E;
  --texto: #37453F;
  --suave: #6B7A73;
  --tenue: #93A29B;

  --linea: #D8E2DC;
  --linea-fuerte: #BECBC4;

  --acento-tenue: #DDF3E8;
  --acento-texto: #0E5C3D;

  /* --- Semánticos: separados del acento a propósito --- */
  --peligro: #B0392C;
  --peligro-tenue: #FBEAE7;
  --alerta: #9A6410;
  --alerta-tenue: #FBF0DC;
  --info: #2B5FA8;
  --info-tenue: #E4EDF9;
  --exito: #1F7A4D;
  --exito-tenue: #DDF3E8;

  /* --- Convención del odontograma (Fase 2) --- */
  --hallazgo: #B0392C;
  --realizado: #2B5FA8;

  --radio: 10px;
  --radio-sm: 7px;
  --sombra: 0 1px 2px rgba(22,33,30,.05), 0 6px 18px -12px rgba(22,33,30,.2);
  --sombra-alta: 0 2px 6px rgba(22,33,30,.08), 0 16px 40px -20px rgba(22,33,30,.3);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --acento: #6ECF9E;
    --acento-oscuro: #93DCB6;

    --fondo: #0F1513;
    --superficie: #18211E;
    --superficie-2: #1F2A26;
    --superficie-alt: #26312D;

    --tinta: #EAF2EE;
    --texto: #C2D0CA;
    --suave: #8B9A93;
    --tenue: #6E7C76;

    --linea: #2A3733;
    --linea-fuerte: #3B4A45;

    --acento-tenue: #17332A;
    --acento-texto: #93DCB6;

    --peligro: #E8877A;
    --peligro-tenue: #33201D;
    --alerta: #D9A94F;
    --alerta-tenue: #2E2617;
    --info: #89ADE2;
    --info-tenue: #1B2635;
    --exito: #6ECF9E;
    --exito-tenue: #17332A;

    --hallazgo: #E8877A;
    --realizado: #89ADE2;

    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -12px rgba(0,0,0,.6);
    --sombra-alta: 0 2px 8px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  }
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinta); margin: 0 0 .5em; line-height: 1.25; text-wrap: balance; }
h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; font-weight: 650; }
h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase;
     letter-spacing: .08em; color: var(--suave); }
p { margin: 0 0 .8em; }
a { color: var(--acento-texto); }
strong { color: var(--tinta); font-weight: 650; }
small { font-size: .84rem; color: var(--suave); }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Estructura ---------- */
.envoltura { max-width: 1060px; margin: 0 auto; padding: 0 16px 72px; }
.envoltura.angosta { max-width: 480px; }

.barra {
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 40;
}
.barra-int {
  max-width: 1060px; margin: 0 auto; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.marca { font-weight: 700; color: var(--tinta); font-size: 1.05rem;
         display: flex; align-items: center; gap: 8px; margin-right: auto; }
.marca .logo { color: var(--acento); font-size: 1.2rem; }

.nav { display: flex; gap: 4px; overflow-x: auto; padding: 8px 0;
       border-bottom: 1px solid var(--linea); margin-bottom: 22px;
       scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button {
  background: none; border: 0; padding: 10px 15px; min-height: 44px;
  font: inherit; font-size: .95rem; font-weight: 550; color: var(--suave);
  cursor: pointer; border-radius: var(--radio-sm); white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav button:hover { background: var(--superficie-2); color: var(--tinta); }
.nav button[aria-current="page"] { background: var(--acento-tenue); color: var(--acento-texto); }

.seccion { margin-bottom: 34px; }
.seccion-cab { display: flex; align-items: baseline; gap: 12px;
               flex-wrap: wrap; margin-bottom: 14px; }
.seccion-cab h2 { margin: 0; }
.seccion-cab .extra { margin-left: auto; font-size: .9rem; color: var(--suave); }

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 18px 20px;
  box-shadow: var(--sombra); margin-bottom: 14px;
}
.tarjeta.compacta { padding: 14px 16px; }
.tarjeta > :last-child { margin-bottom: 0; }

.rejilla { display: grid; gap: 14px; }
@media (min-width: 640px) { .rejilla.dos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .rejilla.tres { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  font: inherit; font-size: .96rem; font-weight: 600;
  border-radius: var(--radio-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--acento); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--acento-oscuro); }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .btn-primario { color: #0F1513; }
}
.btn-secundario { background: var(--superficie); color: var(--tinta); border-color: var(--linea-fuerte); }
.btn-secundario:hover:not(:disabled) { background: var(--superficie-2); }
.btn-fantasma { background: none; color: var(--suave); }
.btn-fantasma:hover:not(:disabled) { background: var(--superficie-2); color: var(--tinta); }
.btn-peligro { background: none; color: var(--peligro); border-color: var(--peligro); }
.btn-peligro:hover:not(:disabled) { background: var(--peligro-tenue); }
.btn-bloque { width: 100%; }
.btn-chico { min-height: 36px; padding: 7px 13px; font-size: .87rem; }

.acciones { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 15px; }
.campo label { display: block; font-size: .88rem; font-weight: 600;
               color: var(--tinta); margin-bottom: 5px; }
.campo .ayuda { font-size: .83rem; color: var(--suave); margin: 4px 0 0; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=time], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  font: inherit; font-size: 1rem; color: var(--tinta);
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm); transition: border-color .15s;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--tenue); }

.check { display: flex; align-items: flex-start; gap: 10px;
         padding: 9px 0; cursor: pointer; }
.check input { width: 21px; height: 21px; min-height: 0; flex: none;
               margin: 1px 0 0; accent-color: var(--acento); cursor: pointer; }
.check span { font-size: .95rem; }

fieldset { border: 0; padding: 0; margin: 0 0 8px; }
legend { padding: 0; }

/* ---------- Avisos ---------- */
.aviso {
  border-radius: var(--radio-sm); padding: 13px 16px; margin-bottom: 14px;
  font-size: .93rem; border: 1px solid transparent;
}
.aviso > :last-child { margin-bottom: 0; }
.aviso-info { background: var(--info-tenue); color: var(--info); border-color: var(--info); }
.aviso-exito { background: var(--exito-tenue); color: var(--exito); border-color: var(--exito); }
.aviso-alerta { background: var(--alerta-tenue); color: var(--alerta); border-color: var(--alerta); }
.aviso-peligro { background: var(--peligro-tenue); color: var(--peligro); border-color: var(--peligro); }

/* La alerta de alergias. Tiene que ganarle a todo lo demás en la
   pantalla — es la única información capaz de evitar un accidente. */
.alerta-alergias {
  background: var(--peligro-tenue); color: var(--peligro);
  border: 2px solid var(--peligro); border-radius: var(--radio-sm);
  padding: 12px 16px; margin-bottom: 16px; font-weight: 600;
  display: flex; gap: 10px; align-items: flex-start;
}
.alerta-alergias .ico { font-size: 1.2rem; flex: none; line-height: 1.2; }

/* ---------- Píldoras ---------- */
.pildora {
  display: inline-block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pildora-acento { background: var(--acento-tenue); color: var(--acento-texto); }
.pildora-neutra { background: var(--superficie-alt); color: var(--suave); }
.pildora-peligro { background: var(--peligro-tenue); color: var(--peligro); }
.pildora-alerta { background: var(--alerta-tenue); color: var(--alerta); }
.pildora-info { background: var(--info-tenue); color: var(--info); }

/* ---------- Lista de citas ---------- */
.cita {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--superficie); border: 1px solid var(--linea);
  border-left: 4px solid var(--acento);
  border-radius: var(--radio-sm); padding: 14px 16px; margin-bottom: 10px;
}
.cita-hora {
  flex: none; min-width: 66px; font-variant-numeric: tabular-nums;
  font-weight: 700; color: var(--tinta); font-size: 1.05rem;
}
.cita-hora small { display: block; font-weight: 500; color: var(--suave);
                   font-size: .78rem; margin-top: 1px; }
.cita-cuerpo { flex: 1; min-width: 0; }
.cita-cuerpo .quien { font-weight: 650; color: var(--tinta); }
.cita-cuerpo .que { font-size: .93rem; color: var(--suave); }
.cita-acciones { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }

/* ---------- Calendario de un mes ---------- */
/* Un solo componente para cuatro usos: elegir horario en el portal,
   ver mis citas, ver la agenda del consultorio y elegir al reagendar. */
/* Ancho acotado: con aspect-ratio 1, un contenedor de escritorio
   convierte cada casilla en un cuadrado de 200px y el mes ocupa la
   pantalla entera. 440px deja casillas de ~58px, cómodas para el
   dedo y proporcionadas en el monitor. */
.cal { background: var(--superficie); border: 1px solid var(--linea);
       border-radius: var(--radio); padding: 14px; box-shadow: var(--sombra);
       max-width: 440px; }
.cal-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cal-cab .mes { font-weight: 700; color: var(--tinta); font-size: 1.02rem;
                text-transform: capitalize; margin-right: auto; }
.cal-nav { background: var(--superficie-2); border: 1px solid var(--linea);
           width: 38px; height: 38px; border-radius: var(--radio-sm);
           font-size: 1.1rem; color: var(--tinta); cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: var(--superficie-alt); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }

.cal-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-dow { text-align: center; font-size: .72rem; font-weight: 700;
           color: var(--tenue); text-transform: uppercase;
           letter-spacing: .04em; padding: 5px 0; }
.cal-dia {
  aspect-ratio: 1; min-height: 42px; border: 1px solid transparent;
  background: none; border-radius: var(--radio-sm);
  font: inherit; font-size: .95rem; font-variant-numeric: tabular-nums;
  color: var(--texto); cursor: default; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.cal-dia.vacio { visibility: hidden; }
.cal-dia.libre { background: var(--acento-tenue); color: var(--acento-texto);
                 font-weight: 650; cursor: pointer; }
.cal-dia.libre:hover { background: var(--acento); color: #fff; }
.cal-dia.sel { background: var(--acento); color: #fff; font-weight: 700; }
.cal-dia.apagado { color: var(--tenue); }
.cal-dia.hoy { border-color: var(--acento); font-weight: 700; }
.cal-dia .punto { position: absolute; bottom: 5px; left: 50%;
                  transform: translateX(-50%); width: 5px; height: 5px;
                  border-radius: 50%; background: var(--acento); }
.cal-dia.sel .punto { background: #fff; }

/* ---------- Horarios disponibles ---------- */
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
         gap: 8px; margin-top: 14px; }
.hora {
  min-height: 44px; padding: 10px 6px; text-align: center;
  background: var(--superficie); border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-sm); font: inherit; font-size: .95rem;
  font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta);
  cursor: pointer; transition: background .12s, border-color .12s;
}
.hora:hover { border-color: var(--acento); background: var(--acento-tenue); }
.hora.sel { background: var(--acento); border-color: var(--acento); color: #fff; }

/* ---------- Agenda del día, en columna ---------- */
/* Los bloques son proporcionales a la duración: una cita de dos
   horas se VE del doble de alto que una de una hora. Es la única
   forma de leer un día de un vistazo. */
.dia-col { position: relative; background: var(--superficie);
           border: 1px solid var(--linea); border-radius: var(--radio);
           padding: 0 12px 0 58px; overflow: hidden; }
.dia-hora-marca { position: absolute; left: 0; width: 50px;
                  text-align: right; font-size: .76rem; color: var(--tenue);
                  font-variant-numeric: tabular-nums; padding-right: 8px; }
.dia-linea { position: absolute; left: 58px; right: 0; height: 1px;
             background: var(--linea); }
.dia-bloque {
  position: absolute; left: 62px; right: 10px;
  background: var(--acento-tenue); border-left: 3px solid var(--acento);
  border-radius: var(--radio-sm); padding: 6px 10px; overflow: hidden;
  cursor: pointer; min-height: 24px;
}
.dia-bloque .b-quien { font-weight: 650; color: var(--tinta);
                       font-size: .88rem; line-height: 1.25;
                       white-space: nowrap; overflow: hidden;
                       text-overflow: ellipsis; }
.dia-bloque .b-que { font-size: .79rem; color: var(--suave); line-height: 1.25;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Una cita de veinte minutos no tiene alto para dos líneas. En vez de
   cortar el texto por la mitad, se muestra solo el nombre y el
   procedimiento pasa al title, donde el dentista lo ve al pasar el
   cursor. */
.dia-bloque.corto { padding: 3px 10px; display: flex; align-items: center; }
.dia-bloque.corto .b-que { display: none; }
.dia-bloque.corto .b-quien { font-size: .82rem; }

/* ---------- Tablas ---------- */
.tabla-env { overflow-x: auto; border: 1px solid var(--linea);
             border-radius: var(--radio); background: var(--superficie); }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th { text-align: left; font-size: .74rem; font-weight: 700;
     text-transform: uppercase; letter-spacing: .06em; color: var(--suave);
     padding: 11px 14px; background: var(--superficie-2);
     border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Pacientes ---------- */
.paciente {
  display: block; width: 100%; text-align: left;
  background: var(--superficie); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 15px 17px; cursor: pointer;
  font: inherit; color: var(--texto); transition: border-color .15s;
}
.paciente:hover { border-color: var(--acento); }
.paciente .nombre { font-weight: 650; color: var(--tinta); font-size: 1.02rem;
                    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.paciente .detalle { font-size: .88rem; color: var(--suave); margin-top: 3px; }

/* ---------- Estados vacíos y carga ---------- */
.vacio { text-align: center; padding: 44px 20px; color: var(--suave); }
.vacio .ico { font-size: 2.2rem; display: block; margin-bottom: 10px; opacity: .5; }
.vacio p { margin: 0 0 14px; }

.cargando { text-align: center; padding: 34px; color: var(--suave); font-size: .93rem; }
.cargando::after {
  content: ''; display: block; width: 26px; height: 26px; margin: 12px auto 0;
  border: 2.5px solid var(--linea); border-top-color: var(--acento);
  border-radius: 50%; animation: giro .7s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

/* ---------- Modal ---------- */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(10,18,15,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; z-index: 100;
}
.modal {
  background: var(--superficie); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); padding: 22px 24px;
  max-width: 460px; width: 100%; max-height: 88vh; overflow-y: auto;
}
.modal h3 { margin-top: 0; }

/* ---------- Utilidades ---------- */
.oculto { display: none !important; }
.centro { text-align: center; }
.pila { display: flex; flex-direction: column; gap: 10px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.separador { border: 0; border-top: 1px solid var(--linea); margin: 22px 0; }
.mt { margin-top: 16px; } .mb { margin-bottom: 16px; } .m0 { margin: 0; }
.num-tab { font-variant-numeric: tabular-nums; }

/* ---------- Login y registro ---------- */
.auth { min-height: 100vh; display: flex; align-items: center;
        justify-content: center; padding: 24px 16px; }
.auth-caja { width: 100%; max-width: 400px; }
.auth-caja .marca { justify-content: center; margin: 0 0 6px;
                    font-size: 1.35rem; }
.auth-caja .sub { text-align: center; color: var(--suave);
                  margin-bottom: 22px; font-size: .95rem; }
.auth-pie { text-align: center; margin-top: 18px; font-size: .9rem; }

/* ---------- Odontograma ---------- */
/* El rojo y el azul no son decisión estética: son la convención con
   la que un dentista lee un odontograma en papel desde siempre.
   Rojo es lo que falta hacer, azul lo que ya se hizo. Respetarla es
   lo que hace que la pantalla se entienda sin capacitación. */
.odo { background: var(--superficie); border: 1px solid var(--linea);
       border-radius: var(--radio); padding: 18px 16px 14px;
       box-shadow: var(--sombra); }
.odo-scroll { overflow-x: auto; }
.odo-svg { display: block; margin: 0 auto; min-width: 620px; }

.odo-cara { fill: var(--superficie); stroke: var(--linea-fuerte);
            stroke-width: .8; transition: fill .12s; }
.odo-cara.rojo { fill: var(--hallazgo); }
.odo-cara.azul { fill: var(--realizado); }
.odo-cara.completa { opacity: .82; }
[data-pieza].odo-cara { cursor: pointer; }
[data-pieza].odo-cara:hover { fill: var(--superficie-alt); }
[data-pieza].odo-cara.rojo:hover, [data-pieza].odo-cara.azul:hover { opacity: .75; }

.odo-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
           font-size: 9.5px; font-weight: 600; fill: var(--suave);
           text-anchor: middle; pointer-events: none; }
.odo-num.clic { pointer-events: auto; cursor: pointer; }
.odo-num.clic:hover { fill: var(--acento); }
.odo-guia { stroke: var(--linea-fuerte); stroke-width: .7; opacity: .5; }

.odo-leyenda { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px;
               padding-top: 12px; border-top: 1px solid var(--linea);
               font-size: .84rem; color: var(--suave); }
.odo-leyenda span { display: flex; align-items: center; gap: 7px; }
.odo-sw { width: 12px; height: 12px; border-radius: 2px; flex: none;
          border: 1px solid var(--linea-fuerte); }
.odo-sw.rojo { background: var(--hallazgo); border-color: var(--hallazgo); }
.odo-sw.azul { background: var(--realizado); border-color: var(--realizado); }
.odo-sw.sano { background: var(--superficie); }

/* Selector de estado, al hacer clic en una cara */
.odo-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 14px 0; }
.odo-opcion { display: flex; align-items: center; gap: 8px; text-align: left;
              min-height: 42px; padding: 8px 11px; font: inherit; font-size: .9rem;
              background: var(--superficie); border: 1px solid var(--linea-fuerte);
              border-radius: var(--radio-sm); color: var(--tinta); cursor: pointer; }
.odo-opcion:hover { border-color: var(--acento); background: var(--acento-tenue); }
.odo-opcion .bolita { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.odo-opcion .bolita.rojo { background: var(--hallazgo); }
.odo-opcion .bolita.azul { background: var(--realizado); }

/* ---------- Pestañas de la ficha ---------- */
.pestanas { display: flex; gap: 3px; overflow-x: auto; margin-bottom: 18px;
            border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button { background: none; border: 0; border-bottom: 2px solid transparent;
                   padding: 11px 15px; min-height: 44px; font: inherit;
                   font-size: .93rem; font-weight: 550; color: var(--suave);
                   cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.pestanas button:hover { color: var(--tinta); }
.pestanas button[aria-selected="true"] { color: var(--acento-texto);
                                         border-bottom-color: var(--acento); }

/* ---------- Plan de tratamiento ---------- */
.paso { display: flex; gap: 12px; align-items: flex-start;
        background: var(--superficie); border: 1px solid var(--linea);
        border-radius: var(--radio-sm); padding: 12px 14px; }
.paso.realizado { opacity: .62; }
.paso .p-num { flex: none; width: 26px; height: 26px; border-radius: 50%;
               background: var(--superficie-alt); color: var(--suave);
               display: flex; align-items: center; justify-content: center;
               font-size: .8rem; font-weight: 700; }
.paso.realizado .p-num { background: var(--acento-tenue); color: var(--acento-texto); }
.paso .p-cuerpo { flex: 1; min-width: 0; }
/* En bloque, no en línea: si no, la duración se pega al nombre del
   procedimiento y se lee "pieza 462 horas". */
.paso .p-que { display: block; font-weight: 600; color: var(--tinta); font-size: .95rem; }
.paso .p-detalle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                   font-size: .85rem; color: var(--suave); margin-top: 2px; }
.paso .p-monto { font-variant-numeric: tabular-nums; font-weight: 600;
                 color: var(--tinta); white-space: nowrap; }

.total-plan { display: flex; justify-content: space-between; align-items: center;
              padding: 14px 16px; background: var(--acento-tenue);
              border-radius: var(--radio-sm); margin-top: 12px; }
.total-plan strong { font-size: 1.05rem; color: var(--acento-texto); }
.total-plan .monto { font-variant-numeric: tabular-nums; font-size: 1.15rem;
                     font-weight: 700; color: var(--acento-texto); }

/* ---------- Documento imprimible (presupuesto) ---------- */
/* Vive oculto dentro del panel y solo aparece al imprimir. Evita la
   ventana emergente, que los navegadores bloquean la mitad de las
   veces y arruina el momento de entregarle el presupuesto a alguien
   que está sentado enfrente. */
#impresion { display: none; }

@media print {
  /* Fuera todo lo que no sea el documento */
  body > *:not(#impresion) { display: none !important; }
  #impresion { display: block !important; }

  @page { margin: 18mm 16mm; }
  body { background: #fff; color: #16211E; font-size: 11pt; }
  a[href]::after { content: ''; }
}

.doc { max-width: 720px; margin: 0 auto; color: #16211E; }
.doc-cab { display: flex; justify-content: space-between;
           align-items: flex-start; gap: 24px;
           border-bottom: 2px solid #16211E; padding-bottom: 14px; margin-bottom: 22px; }
.doc-cab .consultorio { font-size: 1.35rem; font-weight: 700; }
.doc-cab .contacto { font-size: .82rem; color: #6B7A73; margin-top: 3px; }
.doc-cab .meta { text-align: right; font-size: .82rem; color: #6B7A73; }
.doc-cab .meta strong { display: block; font-size: 1rem; color: #16211E; }

.doc h2 { font-size: 1.05rem; margin: 0 0 4px; }
.doc .doc-paciente { margin-bottom: 20px; font-size: .92rem; }
.doc table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-bottom: 16px; }
.doc th { text-align: left; font-size: .72rem; text-transform: uppercase;
          letter-spacing: .06em; color: #6B7A73; padding: 8px 10px;
          border-bottom: 1.5px solid #BECBC4; background: none; }
.doc td { padding: 9px 10px; border-bottom: 1px solid #D8E2DC; }
.doc td.der, .doc th.der { text-align: right; font-variant-numeric: tabular-nums; }
.doc tfoot td { border-bottom: 0; border-top: 2px solid #16211E;
                font-weight: 700; font-size: 1.02rem; padding-top: 12px; }
.doc .nota-legal { font-size: .78rem; color: #6B7A73; line-height: 1.5;
                   border-top: 1px solid #D8E2DC; padding-top: 12px; margin-top: 26px; }
.doc .firmas { display: flex; gap: 40px; margin-top: 46px; }
.doc .firma { flex: 1; border-top: 1px solid #16211E; padding-top: 6px;
              font-size: .78rem; color: #6B7A73; text-align: center; }

/* ---------- Editor de horario ---------- */
.franja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
          padding: 8px 0; }
.franja input[type=time] { width: 118px; min-height: 40px; }
.franja .dia { min-width: 104px; font-weight: 600; color: var(--tinta); }
.dia-horario { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.dia-horario:last-child { border-bottom: 0; }
.dia-horario .cab { display: flex; align-items: center; gap: 12px; }
.dia-horario .cab strong { min-width: 104px; }