/* ==========================================================================
   IMAR — tokens de diseño, reset y primitivas compartidas
   Cargado por el sitio público y por el panel de administración.

   Los colores estan elegidos para cumplir WCAG 2.2 AA. Los ratios anotados
   son contra --c-surface (#ffffff) salvo que se indique otra cosa.
   ========================================================================== */

:root {
    /* --- Marca -----------------------------------------------------------
       El coral del logotipo (#fc5454) solo alcanza 3.21:1 sobre blanco, asi
       que no sirve para texto ni para fondo de boton. --c-brand es el tono
       mas cercano que llega a 4.57:1; el coral original se conserva como
       --c-brand-light para uso decorativo y sobre fondo oscuro.           */
    --c-brand: #d93a2b;             /* 4.57:1 sobre blanco  */
    --c-brand-strong: #c62a1c;      /* 5.60:1 — hover, enlaces sobre blanco */
    --c-brand-light: #ff6b5e;       /* 5.93:1 sobre --c-ink-deep — decorativo */
    --c-brand-tint: #fdf1ef;        /* fondo suave de marca */

    /* --- Texto y superficies --------------------------------------------- */
    --c-ink: #16202b;               /* 16.46:1 — titulares */
    --c-ink-deep: #0f1b26;          /* fondo del pie y de bloques oscuros */
    --c-text: #374151;              /* 10.31:1 — cuerpo */
    --c-muted: #556072;             /* 6.36:1 — texto secundario, tambien AA sobre --c-surface-2 */
    --c-surface: #ffffff;
    --c-surface-2: #f5f6f8;
    --c-surface-3: #eef1f5;

    /* --- Bordes ----------------------------------------------------------
       --c-field-border cumple el 3:1 que WCAG 1.4.11 exige a los limites de
       un control de formulario; --c-border es decorativo (divisores) y por
       eso puede ser mas claro.                                            */
    --c-field-border: #858d99;      /* 3.35:1 sobre blanco */
    --c-border: #e2e6ec;
    --c-border-dark: rgb(255 255 255 / 0.14);

    /* --- Estados ---------------------------------------------------------- */
    --c-success: #0f7b3f;           /* 5.35:1 */
    --c-success-tint: #eaf6ef;
    --c-danger: #b42318;            /* 6.57:1 */
    --c-danger-tint: #fdf0ee;
    --c-warning: #8a5a00;           /* 5.93:1 */
    --c-warning-tint: #fdf4e5;

    /* --- Tipografia ------------------------------------------------------
       Pila del sistema: cero peticiones de red, cero FOUT, cero salto de
       maquetacion y sin dependencia de terceros.                          */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", "Noto Sans", Arial, sans-serif;

    /* Escala fluida: minimo en movil, maximo en escritorio. */
    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: clamp(1rem, 0.98rem + 0.1vw, 1.0625rem);
    --fs-lg: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
    --fs-xl: clamp(1.375rem, 1.28rem + 0.45vw, 1.625rem);
    --fs-2xl: clamp(1.75rem, 1.55rem + 0.9vw, 2.25rem);
    --fs-3xl: clamp(2.125rem, 1.75rem + 1.7vw, 3rem);
    --fs-4xl: clamp(2.375rem, 1.85rem + 2.6vw, 3.5rem);

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-base: 1.65;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Espaciado (base 4px) --------------------------------------------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 5rem;
    --sp-10: 6rem;

    /* Separacion vertical entre secciones, fluida. */
    --section-y: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);

    /* --- Contenedor ------------------------------------------------------- */
    --container: 72rem;             /* 1152px: 3 columnas de 22rem + huecos */
    --container-narrow: 46rem;      /* medida de lectura comoda (~75 caracteres) */
    --gutter: clamp(1rem, 4vw, 2rem);

    /* --- Radios ----------------------------------------------------------- */
    --radius-sm: 0.375rem;
    --radius: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-pill: 999px;

    /* --- Sombras ---------------------------------------------------------- */
    --shadow-sm: 0 1px 2px rgb(15 27 38 / 0.06), 0 1px 3px rgb(15 27 38 / 0.08);
    --shadow: 0 4px 6px -2px rgb(15 27 38 / 0.05), 0 12px 20px -6px rgb(15 27 38 / 0.12);
    --shadow-lg: 0 8px 12px -4px rgb(15 27 38 / 0.06), 0 24px 40px -12px rgb(15 27 38 / 0.18);

    /* --- Movimiento ------------------------------------------------------- */
    --t-fast: 140ms;
    --t: 240ms;
    --ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* Altura de la barra de navegacion fija, usada tambien por
       scroll-padding-top para que los anclajes no queden ocultos. */
    --header-h: 4.5rem;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    color: var(--c-text);
    background-color: var(--c-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

h1,
h2,
h3,
h4 {
    color: var(--c-ink);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    letter-spacing: -0.02em;
    text-wrap: balance;
}

p,
li {
    text-wrap: pretty;
}

ul[class],
ol[class] {
    list-style: none;
    padding: 0;
}

a {
    color: var(--c-brand-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--c-brand);
}

table {
    border-collapse: collapse;
}

/* Un unico indicador de foco, visible sobre fondo claro y oscuro. */
:focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* El usuario pidio menos movimiento: se respeta en todo el sitio. */
@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* Visible solo para lectores de pantalla. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Enlace de salto: aparece al tabular desde el inicio del documento. */
.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-surface);
    color: var(--c-ink);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    transform: translateY(-150%);
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.section {
    padding-block: var(--section-y);
}

.section--tint {
    background-color: var(--c-surface-2);
}

.section--ink {
    background-color: var(--c-ink-deep);
    color: #c3ccd8;
}

.section--ink :is(h1, h2, h3, h4) {
    color: #ffffff;
}

/* ==========================================================================
   Primitivas: encabezado de seccion
   ========================================================================== */

.section-head {
    max-width: var(--container-narrow);
    margin-bottom: var(--sp-7);
}

.section-head--center {
    margin-inline: auto;
    text-align: center;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-brand-strong);
}

.section--ink .eyebrow {
    color: var(--c-brand-light);
}

.eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 2px;
    background-color: currentColor;
}

.section-head--center .eyebrow::before {
    display: none;
}

.section-title {
    font-size: var(--fs-2xl);
}

.section-lead {
    margin-top: var(--sp-4);
    font-size: var(--fs-lg);
    color: var(--c-muted);
}

.section--ink .section-lead {
    color: #c3ccd8;
}

/* ==========================================================================
   Primitivas: botones
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    /* 44px de alto minimo: objetivo tactil WCAG 2.2 (2.5.8). */
    min-height: 2.75rem;
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: background-color var(--t-fast) var(--ease),
        border-color var(--t-fast) var(--ease),
        color var(--t-fast) var(--ease),
        transform var(--t-fast) var(--ease);
}

.btn:active {
    transform: translateY(1px);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.btn--primary {
    background-color: var(--c-brand);
    color: #ffffff;
}

.btn--primary:hover {
    background-color: var(--c-brand-strong);
    color: #ffffff;
}

.btn--secondary {
    background-color: var(--c-ink);
    color: #ffffff;
}

.btn--secondary:hover {
    background-color: var(--c-ink-deep);
    color: #ffffff;
}

.btn--outline {
    background-color: transparent;
    border-color: var(--c-field-border);
    color: var(--c-ink);
}

.btn--outline:hover {
    border-color: var(--c-ink);
    background-color: var(--c-surface-2);
    color: var(--c-ink);
}

.btn--ghost-light {
    background-color: rgb(255 255 255 / 0.1);
    border-color: rgb(255 255 255 / 0.35);
    color: #ffffff;
}

.btn--ghost-light:hover {
    background-color: rgb(255 255 255 / 0.18);
    color: #ffffff;
}

.btn--danger {
    background-color: var(--c-danger);
    color: #ffffff;
}

.btn--danger:hover {
    background-color: #8f1c13;
    color: #ffffff;
}

/* Accion destructiva de segundo plano: en un listado, varios botones rojos
   macizos compiten con la accion principal. El rojo solido se reserva para
   la confirmacion final. */
.btn--danger-soft {
    background-color: transparent;
    border-color: var(--c-field-border);
    color: var(--c-danger);
}

.btn--danger-soft:hover {
    background-color: var(--c-danger-tint);
    border-color: var(--c-danger);
    color: var(--c-danger);
}

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

.btn--sm {
    min-height: 2.25rem;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--fs-sm);
}

/* Variante para filas de tabla con muchas columnas, donde tres botones de
   tamano normal se comen el ancho que necesitan los datos. Sigue por encima
   del objetivo tactil minimo de 24x24 que pide WCAG 2.5.8. */
.btn--xs {
    min-height: 1.9rem;
    padding: 0.3rem 0.55rem;
    font-size: var(--fs-xs);
}

.btn--lg {
    min-height: 3.25rem;
    padding: var(--sp-4) var(--sp-6);
    font-size: var(--fs-lg);
}

/* ==========================================================================
   Primitivas: formularios
   ========================================================================== */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.field + .field {
    margin-top: var(--sp-4);
}

.field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.field__hint {
    font-size: var(--fs-xs);
    color: var(--c-muted);
}

/* Estados de la pista del telefono. Ademas del color llevan un simbolo
   delante: el color por si solo no puede ser el unico portador del mensaje. */
.field__hint--ok {
    color: var(--c-success);
    font-weight: var(--fw-semibold);
}

.field__hint--ok::before {
    content: "✓ ";
}

.field__hint--warn {
    color: var(--c-warning);
}

.field__hint--warn::before {
    content: "! ";
    font-weight: var(--fw-bold);
}

.field__error {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-danger);
}

.input {
    width: 100%;
    min-height: 2.75rem;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--c-surface);
    color: var(--c-ink);
    border: 1px solid var(--c-field-border);
    border-radius: var(--radius);
    transition: border-color var(--t-fast) var(--ease),
        box-shadow var(--t-fast) var(--ease);
}

.input::placeholder {
    color: var(--c-muted);
    opacity: 1;
}

.input:hover {
    border-color: var(--c-ink);
}

.input:focus {
    outline: none;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px rgb(217 58 43 / 0.18);
}

/* El navegador marca el campo invalido solo despues de intentar enviar:
   .was-validated lo activa para no gritarle al usuario mientras escribe. */
.was-validated .input:invalid,
.input[aria-invalid="true"] {
    border-color: var(--c-danger);
}

textarea.input {
    min-height: 8rem;
    resize: vertical;
}

/* Los <select> comparten el aspecto de los campos de texto. Se sustituye la
   flecha nativa (que cada sistema dibuja a su manera) por una propia, en SVG
   incrustado para no añadir una peticion. */
select.input {
    appearance: none;
    padding-right: var(--sp-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556072' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 1.15rem;
    cursor: pointer;
}

/* ==========================================================================
   Primitivas: avisos
   ========================================================================== */

.alert {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-sm);
    text-align: left;
}

.alert__icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15em;
}

.alert__title {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
}

.alert__body {
    margin-top: var(--sp-1);
}

.alert--error {
    background-color: var(--c-danger-tint);
    border-color: #f3c8c2;
    color: #7c1810;
}

.alert--success {
    background-color: var(--c-success-tint);
    border-color: #bfe3cd;
    color: #0b5a2e;
}

.alert--warning {
    background-color: var(--c-warning-tint);
    border-color: #f0dcb4;
    color: #6b4600;
}

/* Pila de mensajes flash. Compartida por el sitio y por el panel. */
.flash-stack {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.flash-stack--page {
    margin-top: var(--sp-6);
}

/* ==========================================================================
   Primitivas: tarjetas
   ========================================================================== */

.card {
    padding: var(--sp-5);
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
}

.card--raised {
    border-color: transparent;
    box-shadow: var(--shadow);
}