/* ============================================================
   GRAPHY DOCTORES - Estilos
   ============================================================
   Dos temas. El oscuro es el que traía el sistema anterior y es el que
   sale por omisión; el claro está porque un consultorio con ventana a
   mediodía es otro escenario.

   Todo el color pasa por variables: cambiar la marca es tocar :root, no
   buscar naranjas por el archivo. */

:root {
    /* Naranja de Graphy — antes fue el azul de Implatec, ahora vuelve al
       naranja de marca. Es la única línea que hay que tocar para
       recolorear toda la app: botones, enlaces, foco, ítem activo del menú. */
    --marca:        #f4571e;
    --marca-suave:  rgba(244, 87, 30, 0.14);

    --ok:      #10b981;
    --aviso:   #f59e0b;
    --mal:     #ef4444;
    --info:    #3b82f6;

    --radio:   10px;
    --radio-g: 14px;
    --lateral-ancho: 250px;

    --e1: 4px;  --e2: 8px;  --e3: 12px;
    --e4: 16px; --e5: 24px; --e6: 32px;

    --t-xs: 11px; --t-sm: 12px; --t-md: 14px;
    --t-lg: 18px; --t-xl: 26px;

    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --rapido: 0.15s ease;
}

:root[data-tema="oscuro"] {
    --fondo:    #0e1116;
    --sup:      #171b22;
    --sup-2:    #1e242d;
    --sup-hover:#232a34;
    --linea:    #2a323d;
    --linea-suave: #212832;
    --fg:       #e8ecf2;
    --fg-2:     #aab4c2;
    --fg-3:     #7c8797;
    --sombra:   0 8px 24px rgba(0, 0, 0, 0.45);
    /* Un naranja más claro que --marca para TEXTO sobre este fondo casi
       negro — el naranja de marca real ya tiene contraste de sobra aquí,
       pero un poco más de brillo ayuda a la lectura de enlaces y foco.
       Nunca para fondos sólidos, donde --marca sigue siendo el color de
       marca real. */
    --marca-texto: #ff8a50;
}

:root[data-tema="claro"] {
    --fondo:    #f4f6f9;
    --sup:      #ffffff;
    --sup-2:    #f7f9fb;
    --sup-hover:#eef2f7;
    --linea:    #dde3ea;
    --linea-suave: #e9edf2;
    --fg:       #16202c;
    --fg-2:     #4a5666;
    --fg-3:     #7a8595;
    --sombra:   0 8px 24px rgba(16, 32, 48, 0.10);
    /* Sobre fondo claro, el naranja real de la marca ya tiene
       contraste de sobra — no hace falta aclararlo. */
    --marca-texto: var(--marca);
}

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

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: var(--t-md);
    background: var(--fondo);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
}

/* ---- Accesibilidad ---- */
.oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--marca-texto); outline-offset: 2px; }

.salto {
    position: absolute; top: -100px; left: 8px; z-index: 999;
    padding: 10px 16px; border-radius: 0 0 8px 8px;
    background: var(--marca); color: #fff; font-weight: 600; text-decoration: none;
    transition: top var(--rapido);
}
.salto:focus { top: 0; }

/* Quien pidió menos movimiento en su sistema no debería recibir animaciones */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Puerta de acceso ---- */
/* Dos paneles: la marca a la izquierda (decorativo, se oculta en móvil) y
   la tarjeta de acceso a la derecha, siempre centrada y con scroll propio
   por si el formulario (registro) no cabe en pantallas bajas. */
.puerta {
    /* Toda la puerta es SIEMPRE clara, no sigue el tema oscuro/claro de la
       app: va sobre una foto de consultorio muy luminosa, y el texto es
       oscuro. Los tokens se redeclaran aquí (no en :root) para que cada
       campo, botón y texto de adentro —que ya usan var(--sup)/var(--fg)/…—
       hereden el valor claro sin duplicar sus reglas. */
    --fondo: #f7f9fb; --sup: #ffffff; --sup-2: #f7f9fb; --sup-hover: #eef2f7;
    --linea: #dde3ea; --linea-suave: #e9edf2;
    --fg: #16202c; --fg-2: #4a5666; --fg-3: #7a8595;
    --marca-texto: var(--marca);

    position: fixed; inset: 0; z-index: 100; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    color: var(--fg);
    /* La foto cubre TODA la puerta, detrás de los dos lados. */
    background: #f2f3f5 url('../img/login-fondo.png') center / cover no-repeat;
}
.puerta[hidden] { display: none; }

/* Velo blanco que se desvanece hacia la derecha: deja legible el texto
   oscuro sobre la pared del consultorio sin tapar al doctor del centro. */
.puerta::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(255, 255, 255, 0.93) 20%,
        rgba(255, 255, 255, 0.60) 34%,
        rgba(255, 255, 255, 0.12) 48%,
        rgba(255, 255, 255, 0) 60%);
}

.puerta__adorno {
    position: absolute; top: 0; right: 0; height: 100%; width: 42%;
    pointer-events: none;
}

.puerta__marketing {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; justify-content: center; gap: var(--e4);
    padding: var(--e6) calc(var(--e6) * 1.5);
}

.puerta__marca { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--e2); }
.marca-graphy {
    font-size: 40px; font-weight: 800; font-style: italic;
    letter-spacing: -0.02em; color: var(--marca); line-height: 1;
}
.puerta__marca small { font-size: var(--t-md); color: var(--fg-2); }

.puerta__titulo { font-size: 32px; line-height: 1.3; font-weight: 700; max-width: 460px; }
.puerta__titulo--acento { color: var(--marca); }
.puerta__regla { display: block; width: 64px; height: 3px; border-radius: 2px; background: var(--marca); }
.puerta__subtitulo { color: var(--fg-2); max-width: 420px; line-height: 1.7; }

.puerta__caracteristicas { list-style: none; display: flex; flex-direction: column; gap: var(--e4); }
.puerta__caracteristicas li,
.puerta__seguridad { display: flex; align-items: flex-start; gap: var(--e3); }
.puerta__caracteristicas li > div,
.puerta__seguridad > div { display: flex; flex-direction: column; gap: 2px; }
.puerta__caracteristicas b,
.puerta__seguridad b { font-size: var(--t-md); }
.puerta__caracteristicas span,
.puerta__seguridad span { color: var(--fg-2); font-size: var(--t-sm); line-height: 1.5; max-width: 330px; }
/* Recuadro blanco con borde naranja; el de «Seguridad» va relleno, para
   cerrar la columna con algo más firme que las tres características. */
.puerta__caracteristicas i {
    display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px;
    border-radius: 12px; background: #fff; border: 1.5px solid var(--marca);
    color: var(--marca); font-size: var(--t-lg);
}
.puerta__seguridad i {
    display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
    border-radius: 9px; background: var(--marca); color: #fff; font-size: var(--t-md);
}

.puerta__panel {
    position: relative; z-index: 1; overflow-y: auto; overflow-x: hidden;
    display: flex; align-items: center; justify-content: center;
    padding: var(--e5);
}
.puerta__caja {
    /* 440px, no menos: por debajo de eso «Mantener mi sesión iniciada» y
       «¿Olvidaste tu contraseña?» no caben en la misma línea y la fila se
       parte en dos. */
    text-align: center; max-width: 440px; width: 100%;
    background: var(--sup); border-radius: 20px;
    padding: var(--e6) calc(var(--e5) * 1.2);
    box-shadow: 0 24px 60px rgba(20, 30, 45, 0.16);
}
/* Solo la letra naranja, sin recuadro — a diferencia del cuadrado que usa
   la marca en el resto de la app (barra lateral). Va con la especificidad
   de `.puerta` a propósito: `.marca`/`.marca--grande` se declaran DESPUÉS
   en este archivo y, a igualdad de especificidad, ganarían por orden. */
.puerta .puerta__logo-caja {
    display: block; width: auto; height: auto; margin: 0 0 var(--e2);
    background: none; border-radius: 0;
    color: var(--marca); font-size: 56px; line-height: 1; font-weight: 800;
}
.puerta__encabezado { font-size: var(--t-xl); font-weight: 700; }
.puerta__caja > #puertaMsg { color: var(--fg-2); margin: var(--e2) 0 var(--e5); }

.puerta__restringido {
    margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linea-suave);
    font-size: var(--t-xs); color: var(--fg-3);
}

.puerta__divisor {
    display: flex; align-items: center; gap: var(--e3); margin: var(--e4) 0;
    color: var(--fg-3); font-size: var(--t-xs); text-transform: uppercase;
}
.puerta__divisor::before, .puerta__divisor::after { content: ''; flex: 1; height: 1px; background: var(--linea); }

.acceso__fila {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--e2); margin: -6px 0 var(--e4);
}
.casilla--linea { font-size: var(--t-sm); }
.enlace {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--marca-texto); font-size: inherit; font-weight: 600;
}
.enlace:hover { text-decoration: underline; }
.puerta__enlaces { margin-top: var(--e4); font-size: var(--t-sm); }

/* Campo con ícono a la izquierda y, para contraseñas, el ojo a la derecha.
   El ícono/botón se posicionan dentro de .campo__caja (solo la caja del
   input), nunca dentro de .campo entero — así no hay que calcular a mano
   dónde termina la etiqueta. */
.campo__caja { position: relative; }
.campo__caja > i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--fg-3); font-size: 13px; pointer-events: none;
}
/* Especificidad extra (.campo + .campo__caja) a propósito: sin ella,
   `.campo input { padding: ... }` —definida más abajo, con la misma
   especificidad de una sola clase— gana por orden de aparición y cancela
   este padding-left, dejando el ícono encima del texto. */
.campo .campo__caja input { padding-left: 34px; }
.campo__ojo {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 0; background: none; color: var(--fg-3); cursor: pointer; border-radius: 6px;
}
.campo__ojo:hover { background: var(--sup-hover); color: var(--fg); }
.campo__caja:has(.campo__ojo) input { padding-right: 34px; }

@media (max-width: 860px) {
    .puerta { grid-template-columns: 1fr; }
    .puerta__marketing, .puerta__adorno { display: none; }
    /* Sin el panel de marca, el velo ya no tiene que dejar ver al doctor:
       se vuelve parejo para que la tarjeta no compita con la foto. */
    .puerta::before { background: rgba(255, 255, 255, 0.82); }
}

.marca {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: var(--marca); color: #fff; font-weight: 800; font-size: 17px;
}
.marca--grande { width: 56px; height: 56px; font-size: 26px; margin: 0 auto; border-radius: 14px; }

/* Los formularios de la puerta. La tarjeta va centrada pero sus campos
   alineados a la izquierda. */
.acceso { text-align: left; }

/* ---- Estructura ---- */
.marco {
    display: grid;
    grid-template-columns: var(--lateral-ancho) 1fr;
    min-height: 100vh;
}
.marco[hidden] { display: none; }

.lateral {
    display: flex; flex-direction: column;
    background: var(--sup); border-right: 1px solid var(--linea);
    position: sticky; top: 0; height: 100vh;
}
.lateral__top {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e4); border-bottom: 1px solid var(--linea-suave);
}
.lateral__nombre { display: flex; flex-direction: column; line-height: 1.25; }
.lateral__nombre small { color: var(--fg-3); font-size: var(--t-xs); }

.lateral__nav { flex: 1; overflow-y: auto; padding: var(--e3) var(--e2); }
.menu__grupo {
    padding: var(--e4) var(--e3) var(--e2);
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--fg-3);
}
.menu__item {
    display: flex; align-items: center; gap: var(--e3); width: 100%;
    padding: 9px var(--e3); margin-bottom: 2px;
    border: 0; border-radius: var(--radio); background: none;
    color: var(--fg-2); font-size: var(--t-md); font-family: inherit;
    cursor: pointer; text-align: left; transition: background var(--rapido);
}
.menu__item:hover { background: var(--sup-hover); color: var(--fg); }
.menu__item.activo { background: var(--marca-suave); color: var(--marca-texto); font-weight: 600; }
.menu__item i { width: 18px; text-align: center; }

.lateral__pie { padding: var(--e3); border-top: 1px solid var(--linea-suave); }
.yo {
    display: flex; align-items: center; gap: var(--e3); width: 100%;
    padding: var(--e2); border: 0; border-radius: var(--radio);
    background: none; color: var(--fg); cursor: pointer; font-family: inherit;
}
.yo:hover { background: var(--sup-hover); }
.yo__datos { flex: 1; min-width: 0; text-align: left; line-height: 1.3; }
.yo__datos b { display: block; font-size: var(--t-md); overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.yo__datos small { color: var(--fg-3); font-size: var(--t-xs); text-transform: capitalize; }

.avatar {
    display: inline-grid; place-items: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--marca); color: #fff;
    font-size: var(--t-xs); font-weight: 700;
}
.avatar--peq { width: 26px; height: 26px; font-size: 10px; margin-right: var(--e2);
               vertical-align: middle; }

.principal { display: flex; flex-direction: column; min-width: 0; }

.barra {
    display: flex; align-items: center; gap: var(--e3);
    height: 56px; padding: 0 var(--e5);
    background: var(--sup); border-bottom: 1px solid var(--linea);
    position: sticky; top: 0; z-index: 10;
}
.barra__titulo { font-size: var(--t-lg); font-weight: 600; }

.icono {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 0; border-radius: var(--radio); background: none;
    color: var(--fg-2); cursor: pointer; font-size: var(--t-md);
}
.icono:hover { background: var(--sup-hover); color: var(--fg); }

.pagina { padding: var(--e5); flex: 1; }
.cargando { padding: var(--e6); text-align: center; color: var(--fg-3); }

/* ---- Fichas y rejillas ---- */
.ficha {
    background: var(--sup); border: 1px solid var(--linea);
    border-radius: var(--radio-g); overflow: hidden; margin-bottom: var(--e4);
}
.ficha__cabeza {
    padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea-suave);
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
}
.ficha__cabeza h2 { font-size: var(--t-md); font-weight: 600; }
.ficha__cuerpo { padding: var(--e5); }
.ficha__pie {
    padding: var(--e3) var(--e5); border-top: 1px solid var(--linea-suave);
    color: var(--fg-3); font-size: var(--t-sm);
}

.rejilla { display: grid; gap: var(--e4); margin-bottom: var(--e4); }
.rejilla--tarjetas { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rejilla--paquetes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Pares de campos de un formulario (Nombres/Apellidos, Tipo Doc/Número,
   etc.) — una sola columna si no caben los dos, como en el "Solicitar
   acceso" del logo de referencia. */
.rejilla--campos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rejilla--campos .campo { margin-bottom: 0; }

.tarjeta {
    background: var(--sup); border: 1px solid var(--linea);
    border-radius: var(--radio-g); padding: var(--e5);
    display: flex; flex-direction: column; gap: var(--e2);
}
.tarjeta__ico {
    display: grid; place-items: center; width: 34px; height: 34px;
    border-radius: 9px; margin-bottom: var(--e2);
}
.tarjeta__ico--azul  { background: rgba(59, 130, 246, 0.16); color: var(--info); }
.tarjeta__ico--verde { background: rgba(16, 185, 129, 0.16); color: var(--ok); }
.tarjeta__ico--ambar { background: rgba(245, 158, 11, 0.16); color: var(--aviso); }
.tarjeta__ico--rojo  { background: rgba(239, 68, 68, 0.16);  color: var(--mal); }
.tarjeta__valor { font-size: var(--t-xl); font-weight: 700; line-height: 1; }
.tarjeta__etiqueta { color: var(--fg-3); font-size: var(--t-sm); }

.etapas { display: flex; gap: var(--e5); flex-wrap: wrap; }
.etapas__item { display: flex; flex-direction: column; }
.etapas__item b { font-size: var(--t-lg); }
.etapas__item span { color: var(--fg-3); font-size: var(--t-sm); }

/* ---- Tablas ---- */
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-md); }

thead th {
    position: sticky; top: 0; z-index: 1;
    padding: var(--e3) var(--e4); text-align: left; white-space: nowrap;
    background: var(--sup-2); color: var(--fg-3);
    font-size: var(--t-xs); font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    border-bottom: 1px solid var(--linea);
}
tbody td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea-suave);
           vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.pulsable { cursor: pointer; }
tbody tr.pulsable:hover { background: var(--sup-hover); }
.linea li.pulsable { cursor: pointer; padding: var(--e2) var(--e3); border-radius: 6px; margin-left: calc(var(--e4) * -1); }
.linea li.pulsable:hover { background: var(--sup-hover); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: var(--t-sm); }
.nowrap { white-space: nowrap; }
.muted { color: var(--fg-3); }
.vacio { padding: var(--e6) !important; text-align: center; color: var(--fg-3); }
.notas { max-width: 260px; color: var(--fg-2); font-size: var(--t-sm); }

.caso__num { display: block; font-size: var(--t-xs); color: var(--fg-3); font-weight: 700; }
.caso__nombre { display: block; }

/* ---- Barra de etapas ---- */
.barra-pasos { display: flex; align-items: center; margin-bottom: var(--e1); }
.paso {
    display: grid; place-items: center; flex-shrink: 0;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 9px; border: 2px solid var(--linea);
}
.paso--hecha  { background: var(--marca); border-color: var(--marca); color: #fff; }
.paso--actual { border-color: var(--marca-texto); background: transparent;
                box-shadow: 0 0 0 3px var(--marca-suave); }
.paso--futura { background: var(--linea-suave); border-color: var(--linea); }
.paso__union { width: 14px; height: 2px; background: var(--linea); flex-shrink: 0; }
.paso__nombre { font-size: var(--t-sm); font-weight: 600; }
.paso__nota { font-size: var(--t-xs); color: var(--fg-3); }

/* ---- Etiquetas y sellos ---- */
.etiquetas { display: flex; flex-wrap: wrap; gap: var(--e1); max-width: 250px; }
.etiqueta {
    padding: 2px 8px; border-radius: 6px; font-size: var(--t-xs);
    background: rgba(59, 130, 246, 0.14); color: var(--info); white-space: nowrap;
}

.sello {
    display: inline-block; padding: 3px 9px; border-radius: 20px;
    font-size: var(--t-xs); font-weight: 600;
}
.sello--ok     { background: rgba(16, 185, 129, 0.16); color: var(--ok); }
.sello--aviso  { background: rgba(245, 158, 11, 0.16); color: var(--aviso); }
.sello--mal    { background: rgba(239, 68, 68, 0.16);  color: var(--mal); }
.sello--neutro { background: var(--sup-hover); color: var(--fg-3); }

/* ---- Formularios ---- */
.campo { margin-bottom: var(--e4); }
.campo label, .campo legend {
    display: block; margin-bottom: 6px;
    font-size: var(--t-sm); font-weight: 600; color: var(--fg-2);
}
.campo input, .campo select, .campo textarea {
    width: 100%; padding: 9px var(--e3);
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--fondo); color: var(--fg);
    font-family: inherit; font-size: var(--t-md);
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--marca-texto); outline: none;
}
.campo textarea { resize: vertical; }
fieldset.campo { border: 0; }

.casillas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--e2);
}
.casilla { display: flex; align-items: center; gap: var(--e2); font-size: var(--t-sm);
           cursor: pointer; font-weight: 400; }
.casilla input { width: auto; }

.btn {
    display: inline-flex; align-items: center; gap: var(--e2);
    padding: 9px var(--e4);
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--sup); color: var(--fg);
    font-family: inherit; font-size: var(--t-md); font-weight: 500; cursor: pointer;
    transition: background var(--rapido);
    /* Un .btn puede ser <button> o <a> (los contactos de Ayuda). Sin esto
       los que son enlace salen subrayados y no parecen botones. */
    text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--sup-hover); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn--principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn--principal:hover:not(:disabled) { filter: brightness(1.08); background: var(--marca); }
.btn--peligro { color: var(--mal); border-color: var(--mal); }
.btn--peq { padding: 5px var(--e3); font-size: var(--t-sm); }
.btn--ancho { width: 100%; justify-content: center; }

/* `align-items: center` NO es opcional: sin el los hijos directos se
   estiran (el valor por omision de flex es `stretch`) y un boton al lado
   de un bloque de titulo + subtitulo salia del doble de alto que el
   buscador y el selector. Pasaba en Doctores, Perfil, IPR y Ayuda. */
.acciones { display: flex; align-items: center; gap: var(--e3);
            margin-bottom: var(--e4); flex-wrap: wrap; }
.acciones-fila { display: flex; gap: var(--e2); }

.btn--texto { border-color: transparent; background: none; padding-left: 0; padding-right: 0; }
.btn--texto:hover:not(:disabled) { background: none; color: var(--marca-texto); }

/* ---- Tablero de detalle de doctor (Admin/Superadmin) ---- */
.migas { display: flex; align-items: center; gap: var(--e2);
         color: var(--fg-3); font-size: var(--t-sm); margin-bottom: var(--e4); }
/* La ficha manda mas ancho que el plan, como en el diseno (no mitades). */
.rejilla--doctor { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 1100px) { .rejilla--doctor { grid-template-columns: 1fr; } }
.perfil-doctor { display: flex; gap: var(--e4); }
.perfil-doctor__datos { flex: 1; min-width: 0; }
.perfil-doctor__datos h2 { font-size: var(--t-lg); font-weight: 600; }
.avatar--grande { width: 56px; height: 56px; font-size: var(--t-lg); flex-shrink: 0; }
.plan-doctor__nombre { font-size: var(--t-md); font-weight: 600; margin-bottom: var(--e2); }
.progreso { height: 8px; border-radius: 999px; background: var(--sup-hover);
            overflow: hidden; margin-bottom: var(--e2); }
.progreso__relleno { height: 100%; background: var(--marca); border-radius: 999px; }
/* Mismo relleno para un <span> suelto dentro de .progreso: la ficha del
   paciente y el uso de alineadores lo escriben así, y sin esta regla la
   barra dibujaba el carril pero nunca la parte llena. */
.progreso > span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }

.proximamente { text-align: center; padding: var(--e6) var(--e5); }
.proximamente i { font-size: 2rem; color: var(--fg-3); margin-bottom: var(--e4); }
.proximamente h2 { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--e3); }
.proximamente .pista { max-width: 480px; margin: 0 auto; }

/* ---- Galería de Biblioteca ---- */
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--e3); }
.galeria__item {
    display: flex; flex-direction: column; border: 1px solid var(--linea);
    border-radius: var(--radio); overflow: hidden; text-decoration: none;
    color: var(--fg); background: var(--sup); transition: border-color var(--rapido);
}
.galeria__item:hover { border-color: var(--marca); }
.galeria__item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.galeria__archivo {
    width: 100%; height: 120px; display: grid; place-items: center;
    font-size: 2rem; color: var(--fg-3); background: var(--sup-hover);
}
.galeria__pie {
    padding: var(--e2) var(--e3); font-size: var(--t-xs); color: var(--fg-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.buscador { position: relative; flex: 1; min-width: 200px; }
.buscador i { position: absolute; left: var(--e3); top: 50%; transform: translateY(-50%);
              color: var(--fg-3); font-size: var(--t-sm); }
.buscador input {
    width: 100%; padding: 9px var(--e3) 9px 34px;
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--sup); color: var(--fg); font-family: inherit; font-size: var(--t-md);
}

/* ---- Bandas y pistas ---- */
.banda {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e3) var(--e4); border-radius: var(--radio);
    margin-bottom: var(--e4); font-size: var(--t-md);
}
.banda--critico  { background: rgba(239, 68, 68, 0.12);  color: var(--mal);
                   border: 1px solid rgba(239, 68, 68, 0.25); }
.banda--atencion { background: rgba(245, 158, 11, 0.12); color: var(--aviso);
                   border: 1px solid rgba(245, 158, 11, 0.25); }

.pista { color: var(--fg-3); font-size: var(--t-sm); margin-bottom: var(--e4); line-height: 1.6; }
.aviso--error { color: var(--mal); font-size: var(--t-sm); margin-top: var(--e3); }

/* ---- Panel lateral ---- */
.panel { position: fixed; inset: 0; z-index: 90; }
.panel__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.panel__caja {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(520px, 100%);
    background: var(--sup); border-left: 1px solid var(--linea);
    box-shadow: var(--sombra); display: flex; flex-direction: column;
}
.panel__cabeza {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--e4) var(--e5); border-bottom: 1px solid var(--linea);
}
.panel__cabeza h2 { font-size: var(--t-md); font-weight: 600; }
/* Sin título la barra no pinta nada: se queda solo con la cruz, sin borde
   ni relleno inferior, para que el contenido empiece arriba. */
.panel--sin-titulo .panel__cabeza {
    border-bottom: 0; padding: var(--e3) var(--e4) 0; justify-content: flex-end;
}
.panel--sin-titulo .panel__cuerpo { padding-top: var(--e3); }
.panel__cuerpo { flex: 1; overflow-y: auto; padding: var(--e5); }
.panel__pie {
    display: flex; gap: var(--e3); justify-content: flex-end;
    padding: var(--e4) var(--e5); border-top: 1px solid var(--linea);
}
.panel__pie[hidden] { display: none; }

.bloque { margin-bottom: var(--e5); }
.bloque__titulo {
    font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--fg-3); margin-bottom: var(--e3);
}

.datos { display: grid; grid-template-columns: auto 1fr; gap: var(--e2) var(--e4);
         margin-bottom: var(--e5); }
.datos dt { color: var(--fg-3); font-size: var(--t-sm); }

.linea { list-style: none; border-left: 2px solid var(--linea); padding-left: var(--e4); }
.linea li { margin-bottom: var(--e4); position: relative; }
.linea li::before {
    content: ''; position: absolute; left: calc(-1 * var(--e4) - 5px); top: 6px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--marca-texto);
}
.linea b { display: block; }
.linea span { font-size: var(--t-xs); color: var(--fg-3); }
.linea p { font-size: var(--t-sm); color: var(--fg-2); margin-top: 2px; }

/* ---- Paquetes (compra de alineadores) ---- */

/* Banner de cabecera. Reutiliza la foto del login recortada a la derecha;
   el degradado naranja la funde con el panel de texto. */
.banner {
    display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    border-radius: var(--radio-g); overflow: hidden; margin-bottom: var(--e4);
    background: linear-gradient(115deg, #fff7f2 0%, #ffe9dc 55%, #ffd9c4 100%);
}
.banner__texto { padding: var(--e5) calc(var(--e5) * 1.2); color: #16202c; }
.banner__etiqueta {
    display: inline-block; padding: 3px var(--e3); margin-bottom: var(--e3);
    background: rgba(244, 87, 30, 0.14); color: var(--marca);
    border-radius: 999px; font-size: var(--t-xs); font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em;
}
.banner__titulo { font-size: 26px; line-height: 1.3; font-weight: 700; }
.banner__titulo--acento { color: var(--marca); }
.banner__bajada { margin: var(--e2) 0 var(--e4); color: #4a5666; font-size: var(--t-md); line-height: 1.6; max-width: 520px; }
.banner__puntos {
    /* Los 4 puntos en una sola fila, como la referencia. 128px es lo que
       entra en el panel de texto sin que el cuarto salte de línea; por
       debajo de 1200px se reacomodan solos. */
    list-style: none; display: grid; gap: var(--e3);
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}
.banner__puntos li { display: flex; align-items: flex-start; gap: var(--e2); }
.banner__puntos i {
    display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
    border-radius: 9px; background: #fff; color: var(--marca); font-size: var(--t-sm);
}
.banner__puntos b { display: block; font-size: var(--t-sm); color: #16202c; }
.banner__puntos span { font-size: var(--t-xs); color: #6b7686; line-height: 1.4; }
.banner__foto {
    background: url('../img/login-fondo.png') 62% 22% / cover no-repeat;
    /* La foto entra desde la derecha y se funde con el naranja del texto. */
    mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
    min-height: 210px;
}

/* Cuerpo: contenido del paso a la izquierda, resumen fijo a la derecha. */
.compra { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--e4); align-items: start; }
.compra__principal { min-width: 0; }

.pasos { display: flex; flex-wrap: wrap; gap: var(--e4); margin-bottom: var(--e4); }
.pasos__item { display: flex; align-items: center; gap: var(--e2); color: var(--fg-3); font-size: var(--t-sm); }
.pasos__item b {
    display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--sup-hover); color: var(--fg-3); font-size: var(--t-xs);
}
.pasos__item--actual { color: var(--fg); font-weight: 600; }
.pasos__item--actual b { background: var(--marca); color: #fff; }
.pasos__item--hecho b { background: var(--ok); color: #fff; }

.paquete {
    position: relative; text-align: left; cursor: pointer;
    display: flex; flex-direction: column; gap: var(--e2);
    padding: var(--e4); border: 2px solid var(--linea); border-radius: var(--radio-g);
    background: var(--sup); font-family: inherit; color: var(--fg);
}
.paquete:hover { border-color: var(--marca-texto); }
.paquete--elegido { border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.paquete__insignia {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    padding: 3px var(--e3); white-space: nowrap;
    background: var(--marca); color: #fff; border-radius: 999px;
    font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
/* El "radio" de la esquina: es decorativo — el botón entero selecciona. */
.paquete__marca {
    position: absolute; top: var(--e4); right: var(--e4);
    width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linea);
}
.paquete--elegido .paquete__marca { border-color: var(--marca); background: var(--marca); box-shadow: inset 0 0 0 3px #fff; }
.paquete__cabeza { display: flex; align-items: flex-start; gap: var(--e3); padding-right: var(--e5); }
.paquete__icono {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 11px; background: var(--marca-suave); color: var(--marca); font-size: var(--t-lg);
}
.paquete__titulo b { display: block; font-size: var(--t-md); }
.paquete__titulo .pista { margin: 0; font-size: var(--t-xs); line-height: 1.4; }
.paquete__precio { font-size: 28px; font-weight: 700; line-height: 1.1; }
.paquete > .pista { margin: 0; }
.paquete__lista {
    list-style: none; display: flex; flex-direction: column; gap: 6px;
    margin-top: var(--e2); padding-top: var(--e3); border-top: 1px solid var(--linea-suave);
}
.paquete__lista li { display: flex; align-items: flex-start; gap: var(--e2); font-size: var(--t-sm); line-height: 1.4; }
.paquete__lista i { color: var(--ok); margin-top: 3px; font-size: var(--t-xs); }
.paquete--elegido .paquete__lista i { color: var(--marca); }

/* Botones grandes tipo tarjeta (Boleta / Factura). */
.opciones { display: flex; flex-wrap: wrap; gap: var(--e3); }
.opcion {
    display: flex; flex-direction: column; gap: 2px; min-width: 170px;
    padding: var(--e3) var(--e4); cursor: pointer; text-align: left;
    border: 2px solid var(--linea); border-radius: var(--radio);
    background: var(--sup); color: var(--fg); font-family: inherit;
}
.opcion:hover { border-color: var(--marca-texto); }
.opcion--elegida { border-color: var(--marca); background: var(--marca-suave); }
.opcion i { color: var(--marca); margin-bottom: 2px; }
.opcion .pista { margin: 0; font-size: var(--t-xs); }

/* Zona de subida: la etiqueta hace de botón y el input real va oculto. */
.soltar {
    display: flex; flex-direction: column; align-items: center; gap: var(--e2);
    padding: var(--e5) var(--e4); cursor: pointer; text-align: center;
    border: 2px dashed var(--linea); border-radius: var(--radio); background: var(--sup-2);
}
.soltar:hover { border-color: var(--marca); }
.soltar > i { font-size: 26px; color: var(--marca); }
.soltar .pista { margin: 0; }

.paquete-addon__contador { display: flex; align-items: center; gap: var(--e2); }
.paquete-addon__contador span { min-width: 22px; text-align: center; font-weight: 600; }

/* Resumen lateral. */
.resumen {
    position: sticky; top: var(--e4);
    background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio-g);
    padding: var(--e4);
}
.resumen__cabeza {
    display: flex; align-items: center; gap: var(--e2);
    padding-bottom: var(--e3); margin-bottom: var(--e3); border-bottom: 1px solid var(--linea-suave);
    font-weight: 600;
}
.resumen__cabeza i { color: var(--marca); }
.resumen__linea { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e3); }
.resumen__linea > div { flex: 1; min-width: 0; }
.resumen__linea b { display: block; font-size: var(--t-sm); }
.resumen__linea .pista { margin: 0; font-size: var(--t-xs); }
.resumen__caja {
    display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px;
    border-radius: 9px; background: var(--marca-suave); color: var(--marca);
}
.resumen__monto { flex-shrink: 0; font-size: var(--t-sm); }
.resumen__linea--addon { padding-top: var(--e3); border-top: 1px solid var(--linea-suave); }
.resumen__fila {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--e2); font-size: var(--t-sm);
}
.resumen__total {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    margin: var(--e3) 0 var(--e4); padding: var(--e3);
    border-radius: var(--radio); background: var(--marca-suave); font-weight: 600;
}
.resumen__total b { font-size: var(--t-xl); color: var(--marca); }
.resumen__nota {
    display: flex; align-items: center; gap: var(--e2); justify-content: center;
    margin-top: var(--e3); color: var(--fg-3); font-size: var(--t-xs); text-align: center;
}

@media (max-width: 1100px) {
    .compra { grid-template-columns: 1fr; }
    .resumen { position: static; }
}
@media (max-width: 760px) {
    .banner { grid-template-columns: 1fr; }
    .banner__foto { display: none; }
}

/* ---- IPR ---- */
.pestanas {
    display: flex; gap: var(--e5); flex-wrap: wrap;
    margin-bottom: var(--e4); border-bottom: 1px solid var(--linea);
}
.pestana {
    padding: var(--e3) 0; border: 0; background: none; cursor: pointer;
    color: var(--fg-3); font-family: inherit; font-size: var(--t-md);
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestana:hover { color: var(--fg); }
.pestana--activa { color: var(--marca); font-weight: 600; border-bottom-color: var(--marca); }

.rejilla--ipr { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
/* Segunda línea dentro de una celda (edad, hora): bloque para que no se
   pegue al dato principal. */
.pista--linea { display: block; margin: 0; font-size: var(--t-xs); }
.fila--activa { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }

.ipr__cabeza {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
    margin-bottom: var(--e4);
}
.ipr__cabeza h3 { font-size: var(--t-md); font-weight: 600; line-height: 1.3; }
.ipr__cabeza .pista { margin: 2px 0 0; font-size: var(--t-xs); }
/* El sello no se parte en dos lineas por mucho que apriete la columna. */
.ipr__cabeza .sello { white-space: nowrap; flex-shrink: 0; }

/* Datos del panel en columnas: en lista, «Edad —» se comia una fila
   entera para dos caracteres. */
.rejilla--ipr-datos {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--e3); margin-bottom: var(--e4);
}
.rejilla--ipr-datos .pista { display: block; margin: 0; font-size: var(--t-xs); }
.rejilla--ipr-datos b { font-size: 13px; font-weight: 500; }
.ipr__barra {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    gap: var(--e3); margin-bottom: var(--e3);
}
.ipr__barra b { font-size: 13px; }
/* El sello de la tabla tampoco se parte: «IPR disponible» en dos lineas
   estiraba la fila entera. */
.tabla--formal .sello { white-space: nowrap; }
.ipr__visor {
    /* Más alto que antes: sin la barra ni las miniaturas del visor nativo,
       todo el recuadro es documento, y el IPR es una hoja vertical. */
    width: 100%; height: 620px; border: 1px solid var(--linea);
    border-radius: var(--radio);
    /* Fondo blanco: el visor de Chrome pinta gris oscuro alrededor de la
       hoja y en un recuadro pequeño eso es casi todo lo que se veía. */
    background: #fff;
    display: block;
}
.ipr__vacio {
    text-align: center; padding: var(--e6) var(--e4);
    border: 1px dashed var(--linea); border-radius: var(--radio); background: var(--sup-2);
}
.ipr__vacio i { font-size: 30px; color: var(--fg-3); margin-bottom: var(--e3); }
.ipr__vacio .pista { margin: 0; max-width: 320px; margin-inline: auto; }
.ipr__subir { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--linea-suave); }

@media (max-width: 1200px) {
    .rejilla--ipr { grid-template-columns: 1fr; }
}

/* ---- Ayuda ---- */
.ayuda-hero {
    text-align: center; padding: var(--e6) var(--e5); margin-bottom: var(--e5);
    border-radius: var(--radio-g);
    background: linear-gradient(160deg, #fff6f1 0%, #ffe9dc 100%);
    color: #16202c;
}
.ayuda-hero h3 { font-size: var(--t-xl); font-weight: 700; }
.ayuda-hero .pista { color: #6b7686; margin: var(--e2) 0 var(--e4); }
/* El buscador hereda `flex:1` de .buscador; aquí va centrado y acotado. */
.ayuda-hero .buscador { flex: none; max-width: 460px; margin: 0 auto; }

/* Tres por fila como la referencia (los 6 accesos quedan 3+3). Con
   auto-fit entraban 4 en pantallas anchas y la segunda fila quedaba
   coja. */
.rejilla--atajos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .rejilla--atajos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .rejilla--atajos { grid-template-columns: 1fr; } }
.atajo {
    display: flex; align-items: center; gap: var(--e3); cursor: pointer; text-align: left;
    padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--radio-g);
    background: var(--sup); color: var(--fg); font-family: inherit;
}
.atajo:hover { border-color: var(--marca); }
.atajo__ico {
    display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 11px; background: var(--marca-suave); color: var(--marca); font-size: var(--t-lg);
}
.atajo__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.atajo__texto b { font-size: var(--t-md); }
.atajo__texto .pista { margin: 0; font-size: var(--t-xs); line-height: 1.4; }
.atajo__flecha { color: var(--marca); font-size: var(--t-sm); }

.rejilla--ayuda { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }

/* <details> nativo: el acordeón no necesita JavaScript. */
.faq { border-bottom: 1px solid var(--linea-suave); }
.faq:last-child { border-bottom: 0; }
.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e3) 0; cursor: pointer; font-size: var(--t-md); list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { color: var(--fg-3); font-size: var(--t-xs); transition: transform var(--rapido); }
.faq[open] summary { color: var(--marca-texto); font-weight: 600; }
.faq[open] summary i { transform: rotate(180deg); }
.faq p { padding: 0 0 var(--e4); color: var(--fg-2); font-size: var(--t-sm); line-height: 1.65; }

.soporte { text-align: center; }
.soporte__ico {
    display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--e3);
    border-radius: 50%; background: var(--marca-suave); color: var(--marca); font-size: 24px;
}
.soporte .btn { margin-bottom: var(--e2); }
.soporte__horario {
    margin-top: var(--e4); padding-top: var(--e3); border-top: 1px solid var(--linea-suave);
    color: var(--fg-3); font-size: var(--t-xs); line-height: 1.7;
}
.soporte__horario b { color: var(--fg-2); }

@media (max-width: 900px) {
    .rejilla--ayuda { grid-template-columns: 1fr; }
}

/* ---- Campanita de notificaciones ---- */
.campana { position: relative; }
.campana__contador {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
    display: grid; place-items: center; padding: 0 4px;
    background: var(--marca); color: #fff; border-radius: 999px;
    font-size: 10px; font-weight: 700; line-height: 1;
}
.campana__contador[hidden] { display: none; }
.campana__caja {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
    width: min(360px, calc(100vw - var(--e5) * 2));
    background: var(--sup); border: 1px solid var(--linea); border-radius: var(--radio-g);
    box-shadow: var(--sombra); overflow: hidden;
}
.campana__caja[hidden] { display: none; }
.campana__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linea-suave);
}
.campana__lista { max-height: 60vh; overflow-y: auto; }
.notif {
    display: flex; align-items: flex-start; gap: var(--e3); width: 100%;
    padding: var(--e3) var(--e4); cursor: pointer; text-align: left;
    border: 0; border-bottom: 1px solid var(--linea-suave);
    background: none; color: var(--fg); font-family: inherit;
}
.notif:hover { background: var(--sup-hover); }
/* Las no leídas llevan barra de color a la izquierda: se distinguen de un
   vistazo sin depender solo del peso de la fuente. */
.notif--nueva { background: var(--marca-suave); box-shadow: inset 3px 0 0 var(--marca); }
.notif > i { flex-shrink: 0; margin-top: 3px; color: var(--marca); }
.notif__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__texto b { font-size: var(--t-sm); }
.notif__texto span { font-size: var(--t-sm); color: var(--fg-2); line-height: 1.4; }
.notif__texto small { font-size: var(--t-xs); color: var(--fg-3); }

/* ---- Perfil del doctor ---- */
.perfil__h { font-size: var(--t-lg); font-weight: 600; }
.rejilla--perfil { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.rejilla--dos { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.perfil__cabeza { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }

/* El avatar es un <label> del input file: todo el círculo es zona de clic
   para cambiar la foto. */
.perfil__foto {
    position: relative; flex-shrink: 0; cursor: pointer;
    width: 104px; height: 104px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--marca-suave);
    /* SIN overflow:hidden — recortaba el badge de la cámara, que sobresale
       a propósito. El recorte circular lo hace la propia imagen. */
}
.perfil__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.perfil__iniciales { font-size: 34px; font-weight: 700; color: var(--marca); }
.perfil__camara {
    position: absolute; bottom: 2px; right: 2px;
    width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 50%; background: var(--marca); color: #fff;
    border: 2px solid var(--sup); font-size: var(--t-xs);
}
.perfil__id h3 { font-size: var(--t-xl); font-weight: 700; }
.perfil__esp { color: var(--marca-texto); font-weight: 600; margin-bottom: var(--e2); }
.perfil__cmp { margin: var(--e3) 0 0; }
.perfil__dato { display: block; font-size: var(--t-md); font-weight: 500; margin-top: 2px; }

.resumen-pro { display: flex; flex-direction: column; gap: var(--e4); }
.resumen-pro__item { display: flex; align-items: center; gap: var(--e3); }
.resumen-pro__item b { display: block; font-size: var(--t-xl); font-weight: 700; line-height: 1.1; }
.resumen-pro__item .pista { margin: 0; }

@media (max-width: 1100px) {
    .rejilla--perfil { grid-template-columns: 1fr; }
}

/* ---- Avisos flotantes ---- */
.avisos {
    position: fixed; bottom: var(--e5); right: var(--e5); z-index: 200;
    display: flex; flex-direction: column; gap: var(--e2);
}
.nota {
    padding: var(--e3) var(--e4); border-radius: var(--radio);
    background: var(--sup); border: 1px solid var(--linea);
    box-shadow: var(--sombra); font-size: var(--t-md); max-width: 340px;
}
.nota--ok       { border-left: 3px solid var(--ok); }
.nota--error    { border-left: 3px solid var(--mal); }
.nota--atencion { border-left: 3px solid var(--aviso); }

/* ---- Móvil ---- */
.solo-movil { display: none; }

@media (max-width: 900px) {
    .marco { grid-template-columns: 1fr; }
    .lateral {
        position: fixed; z-index: 50; width: var(--lateral-ancho);
        transform: translateX(-100%); transition: transform var(--rapido);
        box-shadow: var(--sombra);
    }
    .lateral.abierto { transform: none; }
    .solo-movil { display: grid; }
    .pagina { padding: var(--e4); }
    .barra { padding: 0 var(--e4); }
}

@media (max-width: 640px) {
    .rejilla--tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .panel__caja { width: 100%; }
    .avisos { left: var(--e4); right: var(--e4); }
    .nota { max-width: none; }

    /* 44px es el mínimo que se acierta con el dedo (WCAG 2.5.5) */
    .btn, .icono { min-height: 44px; }

    /* La primera columna fija: si no, se acaba mirando una etapa sin
       saber de qué paciente es */
    .tabla-scroll thead th:first-child,
    .tabla-scroll tbody td:first-child {
        position: sticky; left: 0; z-index: 2; background: var(--sup);
    }
    .tabla-scroll thead th:first-child { z-index: 3; background: var(--sup-2); }
    thead th, tbody td { padding: var(--e2) var(--e3); }
}

@media print {
    .lateral, .barra, .avisos, .panel, .acciones { display: none !important; }
    .marco { grid-template-columns: 1fr; }
    .pagina { padding: 0; }
    .ficha { border: 1px solid #ddd; box-shadow: none; break-inside: avoid; }
}

/* ---- Ficha del paciente ---- */
/* El nombre va aquí, junto al avatar, y no en la barra del panel: con las
   dos cosas el encabezado quedaba partido y repetido. */
.pac__id { display: flex; align-items: center; gap: var(--e3); margin-bottom: var(--e4); }
.pac__id-texto { min-width: 0; }
/* --t-lg y no --t-xl: dentro de un panel de 520 px, 26 px de nombre es
   tamaño de portada y empuja todo lo demás hacia abajo. */
.pac__id h2 { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; }
.pac__id-linea { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; margin-top: 3px; }
.pac__id-linea .pista { margin: 0; font-size: var(--t-xs); }
.avatar--grande { width: 48px; height: 48px; font-size: var(--t-md); flex-shrink: 0; }

/* Pestañas más juntas y en 13 px: son navegación, no titulares. */
.pac__id + .pestanas { gap: var(--e4); margin-bottom: var(--e3); }
.pac__id + .pestanas .pestana { padding: var(--e2) 0; font-size: 13px; }

/* Las cuatro métricas SIEMPRE en una fila, como la referencia. El panel es
   angosto, así que la tarjeta es compacta; por debajo de 560 px pasa a 2x2
   para que el número no se corte. */
.rejilla--pac-nums {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--e2); margin-bottom: var(--e3);
}
.pac-num {
    display: flex; flex-direction: column; gap: 0; min-width: 0;
    padding: var(--e2) var(--e3); border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--sup);
}
.pac-num b { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.pac-num .pista { margin: 0; font-size: 10px; line-height: 1.25; }
.pac-num .tarjeta__ico { width: 22px; height: 22px; font-size: 10px; margin-bottom: var(--e1); }

/* Cada sección es una tarjeta blanca con su título, no un bloque plano. */
.pac__ficha { margin-bottom: var(--e3); }
.pac__ficha:last-child { margin-bottom: 0; }
.pac__ficha .ficha__cabeza h2 { font-size: 13px; font-weight: 600; }
.pac__ficha .ficha__cabeza h2 i { color: var(--marca); margin-right: var(--e1); }
/* Bastante más ajustado que una ficha de pantalla completa: dentro del
   panel, 24 px de relleno dejaba tarjetas enormes para dos líneas. */
.pac__ficha .ficha__cabeza { padding: var(--e2) var(--e4); }
.pac__ficha .ficha__cuerpo { padding: var(--e3) var(--e4); }

/* Tres columnas como la referencia; una sola en pantallas angostas. */
.rejilla--pac-datos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e3); }
.rejilla--pac-datos .pista { font-size: var(--t-xs); }
.rejilla--pac-datos .perfil__dato { font-size: 13px; line-height: 1.4; }

.pac__progreso {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--e3); margin-top: var(--e2);
}
.pac__progreso b { display: block; font-size: var(--t-md); font-weight: 700; }
.pac__progreso .pista { margin: 0; font-size: var(--t-xs); }
.pac__progreso-der { text-align: right; }

.pac__caso {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave);
}
.pac__caso:first-child { padding-top: 0; }
.pac__caso:last-child { border-bottom: 0; padding-bottom: 0; }
.pac__caso-tit { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.pac__caso-tit b { font-size: 13px; }
.pac__caso .pista { margin: 1px 0 0; font-size: var(--t-xs); }

/* Botón de acción principal en tono de marca pero sin relleno: en una lista
   de casos, varios botones naranjas sólidos compiten entre sí. */
.btn--marca { border-color: var(--marca); color: var(--marca-texto); }
.btn--marca:hover:not(:disabled) { background: var(--marca-suave); }

.pildora {
    padding: 3px var(--e2); border-radius: 999px;
    background: var(--marca-suave); color: var(--marca-texto);
    font-size: var(--t-xs); font-weight: 600;
}

/* Tarjetas de escaneo 3D. minmax(140px,·) mantiene tres por fila en el
   panel lateral, que es el ancho de la referencia. */
.rejilla--stl { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stl {
    display: flex; flex-direction: column; gap: var(--e1); min-width: 0;
    padding: var(--e3); border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--sup-2);
}
.stl b { font-size: var(--t-sm); overflow-wrap: anywhere; }
.stl .pista { margin: 0; font-size: var(--t-xs); }
.stl__ico {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 8px; background: var(--marca-suave); color: var(--marca);
    font-size: 10px; font-weight: 700; margin-bottom: var(--e1);
}
.stl .btn { align-self: flex-start; margin-top: var(--e1); }

@media (max-width: 560px) {
    .rejilla--pac-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rejilla--pac-datos { grid-template-columns: 1fr; }
}

/* ---- Tabla en tono formal ---- */
/* 13 px y no 14: en un listado denso el tamaño de párrafo hace que los
   nombres se vean sueltos y grandes. Con el nombre en semibold y el dato
   secundario en 11 px la fila se lee de un golpe y pesa menos. */
.tabla--formal { font-size: 13px; }
.tabla--formal tbody td { padding: 10px var(--e4); }
.tabla--formal thead th { font-size: 10px; letter-spacing: 0.06em; }

/* Nombre + dato secundario debajo, con el avatar al lado. */
.celda-persona { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.celda-persona b { display: block; font-weight: 600; font-size: 13px; line-height: 1.3; }
.celda-persona .pista { font-size: 11px; margin: 0; line-height: 1.3; }

/* Columna de la flecha: solo indica que la fila se abre. */
.col-flecha { width: 32px; text-align: right; color: var(--fg-3); }
tbody tr.pulsable:hover .col-flecha { color: var(--marca); }

/* Encabezado de vista: mismo tamaño que los de Perfil, IPR y Ayuda. */
.titulo-vista { font-size: var(--t-lg); font-weight: 600; }

/* El buscador ocupa todo el ancho por omisión; en una barra que además
   lleva filtro y botón hay que acotarlo. */
.buscador--corto { flex: 0 1 320px; }
/* Un select suelto en la barra de acciones, sin el margen de un .campo. */
.campo--enlinea { margin: 0; flex: 0 0 auto; }
.campo--enlinea select { min-width: 170px; }

.pie--paginado { display: flex; align-items: center; justify-content: space-between; gap: var(--e3); }
.paginado { display: flex; align-items: center; gap: var(--e2); }
.paginado__actual {
    display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 var(--e2);
    border: 1px solid var(--marca); border-radius: var(--radio);
    color: var(--marca-texto); font-size: var(--t-sm); font-weight: 600;
}

/* ---- Ficha del doctor (Admin) ---- */
.doc-cabeza { margin-bottom: var(--e5); }
.doc-titulo { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap;
              font-size: var(--t-xl); font-weight: 700; }

/* El anillo del plan: un conic-gradient sobre --pct. Sin librería y sin
   SVG — es un dato, no un gráfico. */
.anillo {
    position: relative; flex-shrink: 0; width: 108px; height: 108px; border-radius: 50%;
    display: grid; place-items: center;
    background: conic-gradient(var(--marca) calc(var(--pct) * 1%), var(--linea) 0);
}
.anillo::before {
    content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--sup);
}
.anillo > div { position: relative; text-align: center; line-height: 1.2; }
.anillo b { display: block; font-size: var(--t-lg); font-weight: 700; }
.anillo span { font-size: var(--t-xs); color: var(--fg-3); }

.doc-plan { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.doc-plan__cifras { flex: 1; min-width: 190px; }
.doc-plan__nombre { display: block; font-size: var(--t-lg); font-weight: 700; margin-bottom: var(--e3); }
.doc-plan__fila { display: flex; align-items: baseline; justify-content: space-between;
                  gap: var(--e3); padding: 3px 0; font-size: 13px; }
.doc-plan__fila .pista { margin: 0; }
.regla { border: 0; border-top: 1px solid var(--linea-suave); margin: var(--e4) 0; }

/* Identidad: avatar grande con el visto de verificado sobresaliendo. */
.doc-id { display: flex; align-items: center; gap: var(--e4); margin-bottom: var(--e5); }
.doc-id h3 { font-size: var(--t-lg); font-weight: 700; }
.doc-id .pista { margin: 2px 0 var(--e2); }
.avatar--xl { position: relative; width: 78px; height: 78px; font-size: 26px; flex-shrink: 0; }
.avatar__visto {
    position: absolute; bottom: -2px; right: -2px; font-size: 20px;
    color: var(--ok); background: var(--sup); border-radius: 50%;
}

.rejilla--doc-datos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--e4); }
.doc-dato { display: flex; align-items: flex-start; gap: var(--e3); min-width: 0; }
.doc-dato > i { flex-shrink: 0; margin-top: 3px; color: var(--fg-3); font-size: var(--t-sm); }
.doc-dato .pista { display: block; margin: 0; font-size: var(--t-xs); }
.doc-dato b { font-size: 13px; overflow-wrap: anywhere; }

.doc-notas {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3);
    margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid var(--linea-suave);
}
.doc-notas .pista { display: block; margin: 0; font-size: var(--t-xs); }
.doc-notas b { font-size: 13px; font-weight: 500; }

/* Las métricas van en UNA tarjeta con separadores, no en tres tarjetas
   sueltas: en el diseño son una sola banda. */
.doc-metricas {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    padding: var(--e4) 0; margin-bottom: var(--e4);
}
.doc-metrica {
    display: flex; align-items: center; gap: var(--e3);
    padding: 0 var(--e5); border-left: 1px solid var(--linea-suave);
}
.doc-metrica:first-child { border-left: 0; }
.doc-metrica b { display: block; font-size: var(--t-xl); font-weight: 700; line-height: 1.1; }
.doc-metrica .pista { margin: 0; font-size: var(--t-xs); }

.btn--peligro { border-color: var(--mal); color: var(--mal); }
.btn--peligro:hover:not(:disabled) { background: rgba(239, 68, 68, 0.08); }

/* ---- Planificación (paso 1 de la compra, bajo los paquetes) ---- */
.rejilla--planif { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--e3); }
.planif {
    display: flex; align-items: center; gap: var(--e3); min-width: 0;
    padding: var(--e3) var(--e4); border: 1px solid var(--linea);
    border-radius: var(--radio-g); background: var(--sup);
    transition: border-color var(--rapido);
}
/* Con cantidad > 0 se resalta, igual que el paquete elegido: la fila de
   contadores por sí sola no dice cuál pediste. */
.planif--elegida { border-color: var(--marca); background: var(--marca-suave); }
.planif__ico {
    display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px;
    border-radius: 11px; background: var(--marca-suave); color: var(--marca); font-size: var(--t-lg);
}
.planif--elegida .planif__ico { background: var(--sup); }
.planif__texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.planif__texto b { font-size: var(--t-md); }
.planif__texto .pista { margin: 0; font-size: var(--t-xs); }
.planif__precio { flex-shrink: 0; font-size: var(--t-md); font-weight: 700; }

/* ---- Alineadores ---- */
.rejilla--kpis { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--e4); }
.kpi {
    display: flex; align-items: center; gap: var(--e3); min-width: 0;
    padding: var(--e4); border: 1px solid var(--linea); border-radius: var(--radio-g);
    background: var(--sup);
}
.kpi b { display: block; font-size: var(--t-xl); font-weight: 700; line-height: 1.1; }
.kpi__titulo { display: block; font-size: 13px; font-weight: 500; margin-top: 2px; }
.kpi .pista { margin: 0; font-size: var(--t-xs); }
.kpi .tarjeta__ico { width: 38px; height: 38px; font-size: var(--t-md); }

/* Columna de uso: el porcentaje encima y la barra debajo, para que la
   cifra se lea sin tener que estimarla del ancho. */
.col-uso { min-width: 110px; }
.uso__pct { display: block; font-size: var(--t-xs); color: var(--fg-2); margin-bottom: 3px; }
.progreso--fina { height: 5px; }
/* El color avisa antes de que se acabe: naranja de marca hasta el 80 %,
   ámbar por encima, rojo al agotarse. */
.progreso--fina.barra--alta span { background: var(--aviso); }
.progreso--fina.barra--llena span { background: var(--mal); }

/* ---- Panel de alineadores de un doctor ---- */
.alin-plan { display: flex; align-items: center; gap: var(--e5); flex-wrap: wrap; }
.anillo--peq { width: 92px; height: 92px; }
.anillo--peq::before { inset: 10px; }
.anillo--peq b { font-size: var(--t-lg); }
.alin-lineas { flex: 1; min-width: 170px; display: flex; flex-direction: column; gap: var(--e2); }
.alin-linea { display: flex; align-items: center; gap: var(--e2); font-size: 13px; }
.alin-linea .pista { margin: 0; flex: 1; }
.alin-punto { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

/* Movimiento del kardex: qué pasó a la izquierda, cuánto a la derecha. */
.mov {
    display: flex; align-items: center; gap: var(--e3);
    padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave);
}
.mov:first-child { padding-top: 0; }
.mov:last-child { border-bottom: 0; padding-bottom: 0; }
.mov__ico {
    display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px;
    border-radius: 9px; background: var(--sup-2); color: var(--fg-3); font-size: var(--t-sm);
}
.mov__texto { flex: 1; min-width: 0; }
.mov__texto b { display: block; font-size: 13px; }
.mov__texto .pista { margin: 0; font-size: var(--t-xs); }
.mov__cifra { text-align: right; flex-shrink: 0; }
.mov__cifra b { display: block; font-size: var(--t-md); font-weight: 700; }
.mov__cifra .pista { margin: 0; font-size: var(--t-xs); }
/* Verde lo que entra al plan, naranja lo que sale: el signo solo no se ve
   de un vistazo en una lista larga. */
.mov--entra { color: var(--ok); }
.mov--sale { color: var(--marca-texto); }

/* ---- Planificaciones del caso (inicial + refinamientos) ---- */
.planif-fila {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e2) 0; border-bottom: 1px solid var(--linea-suave);
}
.planif-fila:last-of-type { border-bottom: 0; }
.planif-fila b { font-size: 13px; }
.planif-fila .pista { margin: 1px 0 0; font-size: var(--t-xs); }

/* El bloque de fabricación es la acción que el doctor está esperando
   cuando su plan queda aprobado: se destaca para que no haya que buscarla. */
.bloque--destacado {
    padding: var(--e4); border: 1px solid var(--marca);
    border-radius: var(--radio-g); background: var(--marca-suave);
}
.bloque--destacado .bloque__titulo { color: var(--marca-texto); }

/* ---- Fabricación de alineadores (tandas) ---- */
.rejilla--fab { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); margin-bottom: var(--e3); }
.fab-num {
    padding: var(--e2) var(--e3); border-radius: var(--radio);
    background: var(--sup); border: 1px solid var(--linea);
}
.fab-num b { display: block; font-size: var(--t-lg); font-weight: 700; line-height: 1.2; }
.fab-num .pista { margin: 0; font-size: 10px; line-height: 1.25; }
/* El color dice de qué se habla sin leer la etiqueta: azul lo planificado,
   verde lo ya pedido, ámbar lo que falta por pedir. */
.fab-num--azul  b { color: var(--info); }
.fab-num--verde b { color: var(--ok); }
.fab-num--ambar b { color: var(--aviso); }

.fab-pedir { padding: var(--e3) 0; }
.fab-pedir > .pista { display: block; margin-bottom: var(--e2); }
.fab-pedir .campo--enlinea { display: flex; align-items: center; gap: var(--e2); }
.fab-pedir .campo--enlinea label { margin: 0; font-size: 13px; }
.fab-pedir .campo--enlinea input { width: 72px; }

.fab-ordenes { margin-top: var(--e3); padding-top: var(--e3); border-top: 1px solid var(--linea-suave); }
.fab-orden {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
    padding: var(--e2) 0;
}
.fab-orden b { margin-right: var(--e2); }
.fab-orden .pista { margin: 2px 0 0; font-size: var(--t-xs); }
/* Una orden cancelada se atenúa: sigue en el historial pero ya no cuenta. */
.fab-orden--cancelada { opacity: 0.55; }

/* ---- Órdenes de impresión: el recorrido de 6 pasos ---- */
.pasos-orden { display: flex; align-items: flex-start; gap: 2px; margin-bottom: var(--e4); }
.paso-orden { flex: 1; min-width: 0; text-align: center; }
.paso-orden b {
    display: grid; place-items: center; width: 24px; height: 24px; margin: 0 auto var(--e1);
    border-radius: 50%; border: 2px solid var(--linea); background: var(--sup);
    font-size: 10px; font-weight: 700; color: var(--fg-3);
}
.paso-orden span { display: block; font-size: 9px; color: var(--fg-3); line-height: 1.2; }
.paso-orden--hecho b { background: var(--marca); border-color: var(--marca); color: #fff; }
.paso-orden--actual b {
    border-color: var(--marca); color: var(--marca);
    box-shadow: 0 0 0 3px var(--marca-suave);
}
.paso-orden--actual span { color: var(--marca-texto); font-weight: 600; }

/* ---- Refinamiento ---- */
/* Agrupado por caso y no como lista plana: lo que hay que ver de un golpe
   es «este paciente va por el tercero», no una fila más. */
.refi-caso { margin-bottom: var(--e4); }
.refi {
    display: flex; align-items: flex-start; gap: var(--e3);
    padding: var(--e3) 0; border-bottom: 1px solid var(--linea-suave);
}
.refi:first-child { padding-top: 0; }
.refi:last-child { border-bottom: 0; padding-bottom: 0; }
.refi__num {
    display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px;
    border-radius: 50%; background: var(--marca-suave); color: var(--marca-texto);
    font-size: var(--t-sm); font-weight: 700;
}
.refi__texto { flex: 1; min-width: 0; }
.refi__texto b { display: block; font-size: 13px; }
.refi__texto .pista { margin: 1px 0 0; font-size: var(--t-xs); }
/* La explicación del doctor es el contenido real de la fila: se lee como
   texto, no como dato secundario. */
.refi__obs {
    margin: var(--e2) 0 0; padding: var(--e2) var(--e3);
    border-left: 2px solid var(--marca); background: var(--sup-2);
    border-radius: 0 var(--radio) var(--radio) 0;
    font-size: 13px; line-height: 1.55; color: var(--fg-2);
}

/* ============================================================
   ASISTENTE DE CASO NUEVO — pasos de archivos
   ============================================================
   Los pasos 3 a 6 eran un `input type=file` suelto con su etiqueta. El
   problema no era estético: en el paso 4 hay NUEVE tomas con nombre
   clínico propio, y nueve inputs idénticos en fila no dicen cuál va en
   cada sitio ni cuáles faltan por subir. */

/* El paso de las fotos necesita ancho para la rejilla de 3×3. Los demás se
   quedan en el panel estrecho, que se lee mejor. */
.panel--ancho .panel__caja { width: min(900px, 100%); }

/* ---- Progreso ------------------------------------------------------- */
/* `aria-hidden` en el marcado: el título del panel ya dice «Paso 3 de 6»,
   así que esto es la versión visual de algo que ya se anuncia. */
.asis-pasos { display: flex; align-items: center; margin-bottom: var(--e5); }
.asis-pasos__punto {
    flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: var(--t-sm); font-weight: 700;
    border: 2px solid var(--linea); background: var(--sup); color: var(--fg-3);
}
.asis-pasos__linea { flex: 1 1 auto; height: 2px; background: var(--linea); }
.asis-pasos__punto--hecho {
    border-color: var(--ok); background: rgba(16, 185, 129, 0.15); color: var(--ok);
}
.asis-pasos__linea--hecho { background: var(--ok); }
.asis-pasos__punto--actual {
    border-color: var(--marca); background: var(--marca); color: #fff;
}

/* ---- Cabecera de cada paso ------------------------------------------ */
.asis-cab { display: flex; align-items: flex-start; gap: var(--e3); margin-bottom: var(--e5); }
.asis-cab__ico {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radio);
    display: grid; place-items: center; font-size: var(--t-lg);
    background: var(--marca-suave); color: var(--marca);
}
.asis-cab h3 { font-size: var(--t-lg); font-weight: 600; margin-bottom: 2px; }
.asis-cab p { margin: 0; font-size: var(--t-sm); color: var(--fg-3); line-height: 1.5; }

/* ---- Zona para soltar ----------------------------------------------- */
/* El input va transparente y cubriendo toda la zona a propósito: así el
   clic y el arrastre funcionan sin JavaScript —un input de archivo acepta
   un `drop` de forma nativa— y no hace falta un manejador por zona. */
.suelta {
    position: relative; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: var(--e2);
    padding: var(--e6) var(--e4); text-align: center; cursor: pointer;
    border: 2px dashed var(--linea); border-radius: var(--radio-g);
    background: var(--sup-2); color: var(--fg-3);
    transition: border-color 0.15s, background 0.15s;
}
.suelta:hover, .suelta:focus-within, .suelta.resaltada {
    border-color: var(--marca); background: var(--marca-suave);
}
.suelta input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.suelta__ico { font-size: 30px; color: var(--marca); }
.suelta b { color: var(--fg); font-weight: 600; font-size: var(--t-md); }
.suelta span { font-size: var(--t-sm); }

/* ---- Pie de formatos ------------------------------------------------ */
.formatos {
    display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap;
    font-size: var(--t-xs); color: var(--fg-3); margin: var(--e2) 0 var(--e5);
}

/* ---- Vista previa de un archivo ------------------------------------- */
.previa { display: flex; align-items: center; gap: var(--e4); }
.previa__marco {
    flex: 0 0 auto; width: 84px; height: 84px; border-radius: var(--radio);
    display: grid; place-items: center; overflow: hidden;
    background: var(--sup-2); border: 1px solid var(--linea);
    color: var(--fg-3); font-size: 26px;
}
.previa__marco img { width: 100%; height: 100%; object-fit: cover; }
.previa b { display: block; font-size: var(--t-md); overflow-wrap: anywhere; }
.previa .pista { margin: 0 0 var(--e2); }

/* ---- Consejo / aviso en línea --------------------------------------- */
.consejo {
    display: flex; gap: var(--e3); margin-bottom: var(--e4);
    padding: var(--e3) var(--e4); border-radius: var(--radio);
    background: var(--sup-2); border: 1px solid var(--linea);
    border-left: 3px solid var(--info);
}
.consejo__ico { flex: 0 0 auto; color: var(--info); margin-top: 2px; }
.consejo b { display: block; font-size: var(--t-sm); margin-bottom: 2px; }
.consejo p { margin: 0; font-size: var(--t-sm); color: var(--fg-3); line-height: 1.55; }

/* ---- Fila del collage ----------------------------------------------- */
.collage-fila {
    display: flex; align-items: center; gap: var(--e4);
    margin-bottom: var(--e4); padding: var(--e3) var(--e4);
    border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--sup-2);
}
.collage-fila .casilla { flex: 1 1 auto; align-items: flex-start; }
.collage-fila .pista { margin: 0; }
/* Esquema de las nueve vistas, no una muestra real: no hay fotografías de
   ejemplo en el proyecto y poner unas inventadas sería peor que un
   esquema honesto. */
.collage-muestra { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 12px); gap: 3px; }
.collage-muestra i {
    width: 12px; height: 12px; border-radius: 2px;
    background: var(--marca-suave); border: 1px solid var(--linea);
}

/* ---- Rejilla de las nueve fotos ------------------------------------- */
.rejilla--fotos { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) { .rejilla--fotos { grid-template-columns: repeat(2, 1fr); } }

.foto {
    position: relative; display: flex; flex-direction: column;
    align-items: center; gap: var(--e2); min-width: 0;
    padding: var(--e3); text-align: center;
    border: 1px dashed var(--linea); border-radius: var(--radio);
    background: var(--sup-2);
    transition: border-color 0.15s, background 0.15s;
}
.foto:hover, .foto:focus-within, .foto.resaltada {
    border-color: var(--marca); background: var(--marca-suave);
}
/* Una toma ya cargada deja de ser un hueco: borde continuo y en verde,
   que es lo que permite ver de un vistazo cuáles faltan. */
.foto--puesta { border-style: solid; border-color: var(--ok); background: var(--sup); }
/* z-index explícito en los dos: sin él el input, que va primero en el
   marcado, quedaría por debajo del texto y el clic no abriría el
   selector; y el botón de quitar quedaría tapado por el input. */
.foto input[type="file"] {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; z-index: 1;
}
.foto__quita { position: relative; z-index: 2; }
.foto__nombre {
    font-size: var(--t-xs); font-weight: 600; color: var(--fg-2);
    line-height: 1.35; overflow-wrap: anywhere;
}
.foto__ico { display: grid; place-items: center; height: 40px; font-size: 26px; color: var(--fg-3); }
.foto--puesta .foto__ico { color: var(--ok); }
.foto__previa { width: 100%; height: 60px; object-fit: cover; border-radius: 6px; }
.foto__pie { font-size: var(--t-xs); color: var(--fg-3); }

/* Las radiografías son dos tarjetas grandes, no nueve pequeñas. */
.foto--grande { padding: var(--e4); gap: var(--e3); }
.foto--grande .foto__nombre { font-size: var(--t-sm); }
.foto--grande .foto__ico { height: 56px; font-size: 34px; }
.foto--grande .foto__previa { height: 120px; object-fit: contain; background: var(--sup-2); }