/* =============================================================================
   Depuración Corporal · Tema nuevo (v1)
   -----------------------------------------------------------------------------
   Punto de partida del rediseño de la aplicación. Este fichero NO es una hoja de
   pantalla: es la capa base del sistema visual, y tiene dos partes.

     1. Tokens. Toda decisión de color, radio, sombra, espaciado y tipografía vive
        aquí como custom property. Ninguna pantalla debería escribir un color a mano.
     2. Primitivas. Los componentes mínimos que se repiten en cualquier pantalla:
        .dc-btn, .dc-input, .dc-field, .dc-check, .dc-card, .dc-alert...

   Convenios
   ---------
   · Prefijo dc- en todo, para poder convivir con el tema Angle mientras dure la
     migración pantalla a pantalla. Ninguna regla de aquí toca clases de Bootstrap
     ni de Angle, así que cargar este fichero junto a los antiguos no rompe nada.
   · Las escalas de color (--dc-brand-*, --dc-deep-*, --dc-slate-*) son fijas.
     Los tokens semánticos (--dc-bg, --dc-surface, --dc-text...) son los que se
     usan en las reglas y los únicos que cambian según el modo.
   · Modo claro por defecto en :root; el oscuro se activa con la clase
     .dc-theme-dark en un contenedor. Así conviven el acceso (oscuro) y el interior
     de la aplicación (claro) sin duplicar hojas.

   El verde 400 es el histórico del producto, rgb(92,188,102): el que el Legacy
   escribía en línea en la cabecera del login y el que usa .btn-app.
   ============================================================================= */

:root {
    /* --- Escala de marca (verde) ------------------------------------------ */
    --dc-brand-50:  #eef8f0;
    --dc-brand-100: #d3eeda;
    --dc-brand-200: #abdfb8;
    --dc-brand-300: #82cf93;
    --dc-brand-400: #5cbc66;
    --dc-brand-500: #45a656;
    --dc-brand-600: #348b47;
    --dc-brand-700: #266d39;
    --dc-brand-800: #1a4f2b;
    --dc-brand-900: #12381f;

    /* --- Escala profunda: el teal de la fotografía del acceso -------------- */
    --dc-deep-500: #17443f;
    --dc-deep-600: #123430;
    --dc-deep-700: #0e2624;
    --dc-deep-800: #0a1b19;
    --dc-deep-900: #061110;

    /* --- Neutros ---------------------------------------------------------- */
    --dc-slate-0:   #ffffff;
    --dc-slate-25:  #fafbfa;
    --dc-slate-50:  #f4f6f5;
    --dc-slate-100: #e9edeb;
    --dc-slate-200: #d8dedb;
    --dc-slate-300: #b9c3bf;
    --dc-slate-400: #8d9a95;
    --dc-slate-500: #6b7a75;
    --dc-slate-600: #4e5b57;
    --dc-slate-700: #38423f;
    --dc-slate-800: #242c2a;
    --dc-slate-900: #151b1a;

    /* --- Estados ---------------------------------------------------------- */
    --dc-red-400:   #e07a72;
    --dc-red-500:   #d05a51;
    --dc-amber-400: #e0b45f;
    --dc-amber-500: #cc9a3c;
    --dc-blue-400:  #5fa8d0;
    --dc-blue-500:  #3d8cb8;

    /* --- Semántica: modo claro (interior de la aplicación) ----------------- */
    --dc-bg:             var(--dc-slate-50);
    --dc-surface:        var(--dc-slate-0);
    --dc-surface-2:      var(--dc-slate-25);
    --dc-surface-sunken: var(--dc-slate-100);
    --dc-border:         var(--dc-slate-200);
    --dc-border-strong:  var(--dc-slate-300);
    --dc-text:           var(--dc-slate-900);
    --dc-text-muted:     var(--dc-slate-500);
    --dc-text-subtle:    var(--dc-slate-400);
    --dc-text-invert:    var(--dc-slate-0);

    /* --dc-accent-rgb son los canales del acento, sin envolver en rgb(). Existe para
       que los tonos translúcidos y el botón primario se deriven del acento y no del
       verde escrito a mano: quien redefina el acento —Holística lo pasa a violeta—
       arrastra con él el halo de foco, los fondos suaves y el botón. */
    --dc-accent-rgb:      69, 166, 86; /* = --dc-brand-500 */
    --dc-accent:          var(--dc-brand-500);
    --dc-accent-hover:    var(--dc-brand-600);
    --dc-accent-contrast: #ffffff;
    --dc-accent-soft:     rgba(var(--dc-accent-rgb), .12);
    --dc-accent-ring:     rgba(var(--dc-accent-rgb), .28);

    /* Relleno y borde del botón primario. Separados del acento porque el botón no usa
       el mismo tono que un texto o un icono acentuado. */
    --dc-accent-fill:          var(--dc-brand-600);
    --dc-accent-fill-hover:    var(--dc-brand-500);
    --dc-accent-fill-active:   var(--dc-brand-700);
    --dc-accent-border:        var(--dc-brand-500);
    --dc-accent-border-hover:  var(--dc-brand-400);
    --dc-accent-on-fill:       #ffffff;

    --dc-danger:  var(--dc-red-500);
    --dc-warning: var(--dc-amber-500);
    --dc-info:    var(--dc-blue-500);
    --dc-success: var(--dc-brand-500);

    /* --- Tipografía ------------------------------------------------------- */
    --dc-font-sans: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui,
                    -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Toda la escala subió un punto el 02/09/2026. La anterior —11px para los
       antetítulos y 13px para las etiquetas— se leía apretada en pantallas
       grandes, y los datos de la cabecera del paciente (sexo, edad, regla, tipo
       de consulta) eran los que peor quedaban. Se sube el escalón entero y no un
       tamaño suelto: la escala es una relación, y tocar un peldaño la descuadra. */
    --dc-text-2xs:  0.75rem;   /* 12px · antetítulos */
    --dc-text-xs:   0.8125rem; /* 13px · pies y ayudas */
    --dc-text-sm:   0.875rem;  /* 14px · etiquetas */
    --dc-text-md:   0.9375rem; /* 15px · formularios */
    --dc-text-base: 1rem;      /* 16px · cuerpo */
    --dc-text-lg:   1.125rem;  /* 18px */
    --dc-text-xl:   1.4375rem; /* 23px */
    --dc-text-2xl:  1.6875rem; /* 27px · título de tarjeta */
    --dc-text-3xl:  2.5rem;    /* 40px · reclamo, se queda */

    --dc-weight-normal:   400;
    --dc-weight-medium:   500;
    --dc-weight-semibold: 600;

    --dc-tracking-wide:  .16em;
    --dc-tracking-tight: -.015em;

    /* --- Espaciado, base 4 ------------------------------------------------- */
    --dc-space-1:  0.25rem;
    --dc-space-2:  0.5rem;
    --dc-space-3:  0.75rem;
    --dc-space-4:  1rem;
    --dc-space-5:  1.25rem;
    --dc-space-6:  1.5rem;
    --dc-space-8:  2rem;
    --dc-space-10: 2.5rem;
    --dc-space-12: 3rem;

    /* --- Radios ------------------------------------------------------------ */
    --dc-radius-xs:   4px;
    --dc-radius-sm:   6px;
    --dc-radius-md:   8px;
    --dc-radius-lg:   12px;
    --dc-radius-xl:   16px;
    --dc-radius-pill: 999px;

    /* --- Sombras ----------------------------------------------------------- */
    --dc-shadow-1: 0 1px 2px rgba(6, 17, 16, .08);
    --dc-shadow-2: 0 4px 12px rgba(6, 17, 16, .10);
    --dc-shadow-3: 0 12px 32px rgba(6, 17, 16, .14);
    --dc-shadow-4: 0 24px 64px rgba(3, 10, 9, .45);

    /* --- Altura de los controles -------------------------------------------- */
    --dc-control-h:    2.875rem; /* 46px */
    --dc-control-h-sm: 2.25rem;  /* 36px */

    /* --- Movimiento ---------------------------------------------------------- */
    --dc-ease: cubic-bezier(.4, 0, .2, 1);
    --dc-duration: 160ms;
}

/* --- Semántica: modo oscuro -------------------------------------------------
   Se activa poniendo .dc-theme-dark en el contenedor; el acceso lo pone en su
   raíz. Solo se redefine la capa semántica: las escalas no cambian. */
.dc-theme-dark {
    color-scheme: dark;

    --dc-bg:             var(--dc-deep-900);
    --dc-surface:        rgba(10, 27, 25, .74);
    --dc-surface-2:      rgba(255, 255, 255, .05);
    --dc-surface-sunken: rgba(0, 0, 0, .28);
    --dc-border:         rgba(255, 255, 255, .10);
    --dc-border-strong:  rgba(255, 255, 255, .20);
    --dc-text:           #eaf3ed;
    --dc-text-muted:     #9fb3aa;
    --dc-text-subtle:    #7a8e86;
    --dc-text-invert:    var(--dc-deep-900);

    --dc-accent-rgb:      92, 188, 102; /* = --dc-brand-400 */
    --dc-accent:          var(--dc-brand-400);
    --dc-accent-hover:    var(--dc-brand-300);
    --dc-accent-contrast: var(--dc-deep-900);
    --dc-accent-soft:     rgba(var(--dc-accent-rgb), .16);
    --dc-accent-ring:     rgba(var(--dc-accent-rgb), .26);

    /* En oscuro el botón primario es más profundo y quien lo dibuja es el borde
       claro. Es el aspecto del acceso. */
    --dc-accent-fill:         var(--dc-brand-800);
    --dc-accent-fill-hover:   var(--dc-brand-700);
    --dc-accent-fill-active:  var(--dc-brand-900);
    --dc-accent-border:       rgba(var(--dc-accent-rgb), .45);
    --dc-accent-border-hover: rgba(var(--dc-accent-rgb), .75);

    --dc-danger:  var(--dc-red-400);
    --dc-warning: var(--dc-amber-400);
    --dc-info:    var(--dc-blue-400);
    --dc-success: var(--dc-brand-400);

    color: var(--dc-text);
}

/* =============================================================================
   PRIMITIVAS
   ============================================================================= */

/* Las medidas de las primitivas son de caja exterior: un .dc-input con width:100%
   ocupa 100%, no 100% más su relleno y sus bordes. No se declara con el selector
   universal a propósito, para no cambiarle la caja a las pantallas que todavía
   están sobre Angle cuando esta hoja se cargue también dentro de la aplicación. */
.dc-input,
.dc-btn,
.dc-card,
.dc-note,
.dc-alert,
.dc-field,
.dc-check,
.dc-check__box,
.dc-input-group,
.dc-input-action {
    box-sizing: border-box;
}

/* --- Texto ----------------------------------------------------------------- */

.dc-eyebrow {
    margin: 0 0 var(--dc-space-2);
    font-size: var(--dc-text-2xs);
    font-weight: var(--dc-weight-semibold);
    letter-spacing: var(--dc-tracking-wide);
    text-transform: uppercase;
    color: var(--dc-accent);
}

.dc-title {
    margin: 0;
    font-size: var(--dc-text-2xl);
    font-weight: var(--dc-weight-semibold);
    letter-spacing: var(--dc-tracking-tight);
    line-height: 1.2;
    color: var(--dc-text);
}

.dc-muted { color: var(--dc-text-muted); }

.dc-link {
    color: var(--dc-accent);
    text-decoration: none;
    transition: color var(--dc-duration) var(--dc-ease);
}

.dc-link:hover,
.dc-link:focus-visible {
    color: var(--dc-accent-hover);
    text-decoration: underline;
}

/* --- Campos de formulario ---------------------------------------------------
   .dc-field        bloque etiqueta + control
   .dc-field__head  fila de la etiqueta, con hueco para una acción a la derecha
   .dc-input-group  contenedor relativo que aloja los iconos dentro del control */

.dc-field { margin-bottom: var(--dc-space-4); }

.dc-field__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--dc-space-3);
    margin-bottom: var(--dc-space-2);
}

.dc-label {
    display: block;
    font-size: var(--dc-text-sm);
    font-weight: var(--dc-weight-medium);
    color: var(--dc-text-muted);
}

.dc-input-group { position: relative; display: block; }

.dc-input {
    width: 100%;
    height: var(--dc-control-h);
    padding: 0 var(--dc-space-3);
    font-family: inherit;
    font-size: var(--dc-text-md);
    color: var(--dc-text);
    background-color: var(--dc-surface-sunken);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-md);
    outline: none;
    transition: border-color var(--dc-duration) var(--dc-ease),
                box-shadow var(--dc-duration) var(--dc-ease),
                background-color var(--dc-duration) var(--dc-ease);
}

.dc-input::placeholder { color: var(--dc-text-subtle); }

.dc-input:hover { border-color: var(--dc-border-strong); }

.dc-input:focus {
    border-color: var(--dc-accent);
    box-shadow: 0 0 0 3px var(--dc-accent-ring);
}

/* El autorrelleno de Chrome pinta un fondo blanco que rompe el modo oscuro. No hay
   propiedad para quitarlo: se tapa con una sombra interior. */
.dc-theme-dark .dc-input:-webkit-autofill,
.dc-theme-dark .dc-input:-webkit-autofill:hover,
.dc-theme-dark .dc-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dc-text);
    -webkit-box-shadow: 0 0 0 1000px var(--dc-deep-800) inset;
    caret-color: var(--dc-text);
}

/* Hueco para los iconos que van dentro del control. */
.dc-input--with-prefix { padding-left: 2.625rem; }
.dc-input--with-suffix { padding-right: 2.625rem; }

.dc-input-icon {
    position: absolute;
    top: 50%;
    left: var(--dc-space-3);
    transform: translateY(-50%);
    display: flex;
    color: var(--dc-text-subtle);
    pointer-events: none;
}

.dc-input-icon svg { width: 1.125rem; height: 1.125rem; }

.dc-input-action {
    position: absolute;
    top: 50%;
    right: var(--dc-space-2);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--dc-text-subtle);
    background: none;
    border: 0;
    border-radius: var(--dc-radius-sm);
    cursor: pointer;
    transition: color var(--dc-duration) var(--dc-ease),
                background-color var(--dc-duration) var(--dc-ease);
}

.dc-input-action:hover {
    color: var(--dc-text);
    background-color: var(--dc-surface-2);
}

.dc-input-action:focus-visible {
    outline: none;
    color: var(--dc-text);
    box-shadow: 0 0 0 3px var(--dc-accent-ring);
}

.dc-input-action svg { width: 1.125rem; height: 1.125rem; }

/* Alterna ojo / ojo tachado. La clase is-visible la pone js/auth.js. */
.dc-input-action .dc-icon-off,
.dc-input-action.is-visible .dc-icon-on { display: none; }
.dc-input-action.is-visible .dc-icon-off { display: block; }

/* --- Casilla ----------------------------------------------------------------- */

.dc-check {
    display: flex;
    align-items: center;
    gap: var(--dc-space-2);
    font-size: var(--dc-text-sm);
    color: var(--dc-text-muted);
    cursor: pointer;
    user-select: none;
}

.dc-check__box {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--dc-surface-sunken);
    border: 1px solid var(--dc-border-strong);
    border-radius: var(--dc-radius-xs);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: pointer;
    transition: background-color var(--dc-duration) var(--dc-ease),
                border-color var(--dc-duration) var(--dc-ease);
}

.dc-check__box:checked {
    background-color: var(--dc-accent);
    border-color: var(--dc-accent);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23061110' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-6'/%3E%3C/svg%3E");
}

.dc-check__box:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dc-accent-ring);
}

/* --- Botones ------------------------------------------------------------------ */

.dc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--dc-space-2);
    height: var(--dc-control-h);
    padding: 0 var(--dc-space-5);
    font-family: inherit;
    font-size: var(--dc-text-md);
    font-weight: var(--dc-weight-semibold);
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-md);
    cursor: pointer;
    transition: background-color var(--dc-duration) var(--dc-ease),
                border-color var(--dc-duration) var(--dc-ease),
                color var(--dc-duration) var(--dc-ease),
                box-shadow var(--dc-duration) var(--dc-ease);
}

.dc-btn:disabled { opacity: .55; cursor: not-allowed; }

.dc-btn--block { width: 100%; }

.dc-btn svg { width: 1.0625rem; height: 1.0625rem; }

.dc-btn__arrow { transition: transform var(--dc-duration) var(--dc-ease); }

.dc-btn:hover .dc-btn__arrow { transform: translateX(3px); }

/* Ni un color literal: el botón se dibuja con los tokens de acento, así que un área
   que redefina --dc-accent-fill / --dc-accent-border lo tiñe entero sin tocar esta
   regla. La diferencia entre claro y oscuro está en los tokens, no aquí. */
.dc-btn--primary {
    color: var(--dc-accent-on-fill);
    background-color: var(--dc-accent-fill);
    border-color: var(--dc-accent-border);
}

.dc-btn--primary:hover {
    background-color: var(--dc-accent-fill-hover);
    border-color: var(--dc-accent-border-hover);
}

.dc-btn--primary:active { background-color: var(--dc-accent-fill-active); }

.dc-btn--primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--dc-accent-ring);
}

.dc-btn--ghost {
    color: var(--dc-text-muted);
    background-color: transparent;
    border-color: transparent;
}

.dc-btn--ghost:hover {
    color: var(--dc-text);
    background-color: var(--dc-surface-2);
}

/* --- Tarjeta ------------------------------------------------------------------- */

.dc-card {
    background-color: var(--dc-surface);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-lg);
    box-shadow: var(--dc-shadow-2);
}

.dc-card__body { padding: var(--dc-space-6); }

/* --- Superficie informativa -----------------------------------------------------
   Bloque a ancho completo que envuelve un dato secundario y que puede quedarse sin
   contenido: bonos pendientes, avisos sin gravedad, estados vacíos.

   No es una .dc-card: la tarjeta es una superficie principal, con sombra y radio
   grande, y anida a esta dentro. Tampoco es un .dc-alert: el aviso tiene color de
   estado e icono, y este bloque es neutro.

   Radio md, no sm, porque casi siempre va dentro de una .dc-card —radio lg— y un
   radio demasiado pequeño anidado se ve como una esquina rota. */
.dc-note {
    padding: var(--dc-space-4);
    font-size: var(--dc-text-sm);
    line-height: 1.5;
    color: var(--dc-text-muted);
    background-color: var(--dc-surface-2);
    border: 1px solid var(--dc-border);
    border-radius: var(--dc-radius-md);
}

/* Sin contenido que mostrar. Solo aquí baja el texto a --dc-text-subtle: ese tono
   es para lo que no se lee, no para lo que se lee poco. */
.dc-note--empty {
    color: var(--dc-text-subtle);
    text-align: center;
}

/* --- Avisos -------------------------------------------------------------------- */

.dc-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--dc-space-2);
    padding: var(--dc-space-3);
    margin-bottom: var(--dc-space-4);
    font-size: var(--dc-text-sm);
    line-height: 1.45;
    border: 1px solid transparent;
    border-radius: var(--dc-radius-md);
}

.dc-alert svg {
    flex: 0 0 auto;
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: .05rem;
}

.dc-alert--danger {
    color: var(--dc-danger);
    background-color: rgba(208, 90, 81, .10);
    border-color: rgba(208, 90, 81, .32);
}

/* --- Accesibilidad --------------------------------------------------------------- */

.dc-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .dc-btn,
    .dc-btn__arrow,
    .dc-input,
    .dc-input-action,
    .dc-link,
    .dc-check__box {
        transition: none;
    }
}