/* ==========================================================================
   Comillas CRMportal - Design System
   Extraido de getComputedStyle sobre www.comillas.edu (21-abr-2026).
   Tipografia: OpenSans (cuerpo) + PlayfairDisplay (headings).
   Paleta sobria: blanco + crema F6F5EE + texto 181818 + CTA amarillo FFB81C.
   Filosofia: sin esquinas redondeadas, inputs underlined, CTA uppercase tracked.
   ========================================================================== */

/* Webfonts Comillas (hospedados localmente para evitar bloqueo CORS desde intranet) */
@import url("webfonts.css");

:root {
    /* Paleta real (valores hex desde rgb computados) */
    --c-texto: #181818;              /* rgb(24,24,24) principal - 16.3:1 sobre blanco */
    --c-texto-mute: #595959;         /* 7.0:1 sobre blanco, 6.4:1 sobre crema - AA garantizado */
    --c-texto-soft: #3f3f3f;         /* 9.7:1 sobre blanco - para descripciones con mas fuerza */
    --c-texto-xmute: #707070;        /* 4.95:1 sobre blanco — SOLO elementos >=18px bold. NO usar en body normal. */
    --c-blanco: #ffffff;
    --c-crema: #f6f5ee;              /* rgb(246,245,238) fondos de seccion */
    --c-crema-claro: #fcfbf6;        /* rgb(252,251,246) fondos alternos */
    --c-crema-borde: #e7e5d8;        /* borde crema para separadores */
    --c-amarillo: #ffb81c;           /* rgb(255,184,28) CTA y accent */
    --c-amarillo-hover: #e6a518;
    --c-linea: #181818;              /* underline de inputs */
    --c-linea-sutil: #d6d4c8;        /* underline inactivo alternativo */

    /* Submarcas Comillas (rara vez usadas, solo tags/etiquetas) */
    --c-icai: #014593;
    --c-icade: #a4123f;
    --c-cihs: #7ba4db;

    /* Estados */
    --c-exito: #2e7d32;
    --c-error: #b00020;
    --c-aviso: #9a4800;              /* 6.36:1 sobre blanco — AA con margen (antes #b35900 era 4.83:1, justo) */

    /* Spacing scale Comillas (del inspector) */
    --s-4xs: 4px;
    --s-3xs: 8px;
    --s-2xs: 16px;
    --s-xs:  24px;
    --s-s:   32px;
    --s-m:   40px;
    --s-l:   48px;
    --s-xl:  56px;
    --s-2xl: 64px;
    --s-3xl: 80px;
    --s-4xl: 96px;

    /* Tipografia — familias */
    --f-sans: 'OpenSans', 'Open Sans', Arial, Helvetica, sans-serif;
    --f-serif: 'PlayfairDisplay', 'Playfair Display', 'Times New Roman', Georgia, serif;

    /* Tipografia — tamanos (escala Comillas REAL, extraida de computed styles
       de www.comillas.edu: h1 80px, h2/h3 48px, subtitulo 24px, body 16px) */
    --fs-xs:   12px;   /* captions, hints, labels muy pequenos */
    --fs-sm:   14px;   /* body pequeno, labels, inputs, botones default */
    --fs-base: 16px;   /* body principal */
    --fs-md:   18px;   /* subtitulos medios */
    --fs-lg:   20px;   /* form-section-heading, h5-plus */
    --fs-xl:   24px;   /* subtitulo editorial (p.subtitle comillas.edu) */
    --fs-2xl:  32px;   /* h4 UI grande / titulo form header */
    --fs-3xl:  40px;   /* h3 intermedio */
    --fs-4xl:  48px;   /* h2/h3 real comillas.edu */
    --fs-5xl:  64px;   /* h1 intermedio en pantallas medianas */
    --fs-6xl:  80px;   /* h1 editorial real comillas.edu */

    /* Tipografia — pesos */
    --fw-regular:  400;
    --fw-medium:   500;   /* peso "bold" del serif PlayfairDisplay */
    --fw-semibold: 600;   /* botones, labels importantes, sans headings */
    --fw-bold:     700;   /* enfasis fuerte, raro */

    /* Tipografia — line-heights */
    --lh-tight:  1.15;  /* headings grandes serif */
    --lh-snug:   1.3;   /* headings medianos */
    --lh-normal: 1.5;   /* body */

    /* Tipografia — letter-spacing */
    --ls-tight:     -0.01em;  /* headings grandes serif (ajuste visual) */
    --ls-normal:    0;
    --ls-wide:      0.02em;   /* labels, captions */
    --ls-uppercase: 0.08em;   /* cabeceras de seccion UPPERCASE */
    --ls-caps-wide: 0.12em;   /* labels micro en UPPERCASE */
    --ls-button:    0.5px;    /* CTAs uppercase */

    /* Contenedor */
    --max-w: 1200px;
    --max-w-wide: 1440px;
}

/* ==========================================================================
   Base
   ========================================================================== */

html, body {
    font-family: var(--f-sans);
    font-size: var(--fs-base);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    color: var(--c-texto);
    background: var(--c-blanco);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Jerarquia tipografica — SISTEMA UNIFICADO
   h1-h3: serif (PlayfairDisplay weight 500) — look editorial Comillas.
   h4-h6: sans (OpenSans weight 600) — UI/sections. h5-h6 UPPERCASE con tracking.
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--c-texto);
    margin-top: 0;
}
h1 {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--s-m);
}
h2 {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    font-size: clamp(var(--fs-2xl), 4vw, var(--fs-4xl));
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--s-xs);
}
h3 {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    font-size: clamp(var(--fs-xl), 3vw, var(--fs-3xl));
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--s-2xs);
}
h4 {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    margin-bottom: var(--s-3xs);
}
h5 {
    font-family: var(--f-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    margin-bottom: var(--s-3xs);
}
h6 {
    font-family: var(--f-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps-wide);
    color: var(--c-texto-mute);
    margin-bottom: var(--s-4xs);
}

/* Parrafos */
p {
    margin: 0 0 var(--s-2xs);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
}
p:last-child { margin-bottom: 0; }

/* Enfasis y tipos inline */
strong, b { font-weight: var(--fw-semibold); }
em, i { font-style: italic; }
small, .small { font-size: var(--fs-sm); line-height: 1.4; }
code, kbd, samp {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.92em;
    background: var(--c-crema);
    padding: 1px 6px;
    border-radius: 0;
}

/* Blockquote editorial con acento amarillo */
blockquote {
    margin: 0 0 var(--s-2xs);
    padding: var(--s-3xs) var(--s-2xs);
    border-left: 3px solid var(--c-amarillo);
    font-family: var(--f-serif);
    font-style: italic;
    font-size: var(--fs-md);
    line-height: 1.5;
    color: var(--c-texto-soft);
}

/* ==========================================================================
   Utilities de texto — override Bootstrap y clases helper Comillas.
   Usar en razor solo cuando el tipo natural (h1..h6, p, small) no sirve.
   ========================================================================== */
.text-xs   { font-size: var(--fs-xs);   line-height: 1.4; }
.text-sm   { font-size: var(--fs-sm);   line-height: 1.4; }
.text-base { font-size: var(--fs-base); line-height: var(--lh-normal); }
.text-md   { font-size: var(--fs-md);   line-height: var(--lh-snug); }
.text-lg   { font-size: var(--fs-lg);   line-height: var(--lh-snug); }
.text-xl   { font-size: var(--fs-xl);   line-height: var(--lh-snug); }

.text-serif { font-family: var(--f-serif); font-weight: var(--fw-medium); }
.text-sans  { font-family: var(--f-sans); }
.text-mute  { color: var(--c-texto-mute); }
.text-soft  { color: var(--c-texto-soft); }
.text-caps  { text-transform: uppercase; letter-spacing: var(--ls-uppercase); font-weight: var(--fw-semibold); }

.fw-regular  { font-weight: var(--fw-regular); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

/* Override Bootstrap .text-muted: usar nuestra variable AA-safe (#595959, no #6c757d) */
.text-muted { color: var(--c-texto-mute) !important; }

/* Links — sin subrayado por defecto, underline ofsetado en hover */
a {
    color: var(--c-texto);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover, a:focus-visible {
    color: var(--c-texto);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* NO sobrescribimos el max-width del .container de Bootstrap:
   queremos que el header (su .container) y el main (su .container) compartan
   el MISMO eje horizontal. Bootstrap 5 xxl = 1320px; el logo y el contenido
   del form quedan alineados en el mismo margen. */
/* Contenedores acotados que se colocan DENTRO de un .container Bootstrap.
   Centrados respecto al viewport. 900px deja un form comodo que no contrasta
   demasiado con el header/banner (1320px del container BS en xxl).
   container-card (560px) sigue siendo pequeño para tarjetas tipo carne alumni. */
.container-form { max-width: 900px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
.container-card { max-width: 560px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }

/* Alias compat para clase heredada */
.comillas-title {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    color: var(--c-texto);
}

/* Spinner corporativo */
.spinner-comillas {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--c-crema-borde);
    border-top-color: var(--c-amarillo);
    border-radius: 50%;
    animation: spinner-comillas-rotate 0.8s linear infinite;
}
.spinner-comillas-sm {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}
@keyframes spinner-comillas-rotate {
    to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .spinner-comillas { animation-duration: 2.5s; }
}

/* Icono de exito */
.comillas-success-icon {
    color: var(--c-exito);
    display: inline-block;
}

/* Alias info semantico Comillas (mismo estilo que alert-info pero acento amarillo) */
.alert-comillas-info {
    background: var(--c-crema);
    border: 0;
    border-left: 3px solid var(--c-amarillo);
    padding: var(--s-2xs) var(--s-xs);
    color: var(--c-texto);
    border-radius: 0;
    margin-bottom: var(--s-2xs);
}

/* Flecha hint que redirige visualmente al boton "Iniciar sesion" del header.
   Solo el glifo (sin bloque), negra, con bounce sutil.
   margin-right alinea el centro de la flecha con el centro del boton del header
   (el boton termina a ~12px del borde del container + ancho ~132px; el centro
   queda a ~66px del borde derecho del container, compensando padding-right). */
.alert-arrow-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--c-texto);
    font-size: 28px;
    flex-shrink: 0;
    line-height: 1;
    margin-right: 70px;
}
.alert-arrow-hint i {
    animation: arrow-up-bounce 1.8s ease-in-out infinite;
    display: inline-block;
}
@keyframes arrow-up-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
    .alert-arrow-hint i { animation: none; }
}

/* ==========================================================================
   Top-bar (banda gris oscuro superior) — imita comillas.edu
   ========================================================================== */

.comillas-topbar {
    background: var(--c-texto);
    color: var(--c-blanco);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    padding: var(--s-3xs) 0;
}
.comillas-topbar a {
    color: var(--c-blanco);
    opacity: 0.85;
    padding: 0 var(--s-3xs);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.06em;
}
.comillas-topbar a:hover {
    opacity: 1;
    color: var(--c-amarillo);
    text-decoration: none;
}
.comillas-topbar .topbar-divider {
    color: rgba(255,255,255,0.25);
}

/* ==========================================================================
   Header principal — fondo blanco, logo izquierda, CTA amarillo derecha
   ========================================================================== */

.comillas-header {
    background: var(--c-blanco);
    border-bottom: 1px solid var(--c-crema-borde);
    height: 128px;
}
.comillas-header > .container {
    height: 100%;
}
.comillas-header .comillas-logo {
    display: flex;
    align-items: center;
    height: 96px;
    flex-shrink: 0;
}
.comillas-header .comillas-logo img {
    height: 100%;
    width: auto;
    display: block;
}
/* Header en grid con 3 zonas nombradas — logo izq / titulo centro / right end.
   Usamos grid-template-areas (no solo columnas) porque el SectionOutlet
   no renderiza DOM cuando no tiene contenido, lo que haría que el "right"
   cayera por error en la columna central. Con areas, cada elemento va a
   su zona explícita aunque la del centro este vacia. Simetria garantizada. */
.comillas-header-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--s-s);
}
.comillas-header .comillas-logo {
    flex: 0 0 auto;
}
.comillas-header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--s-2xs);
    min-width: 0;
}
.comillas-header .comillas-user {
    font-size: var(--fs-sm);
    color: var(--c-texto);
    white-space: nowrap;
}

/* Badge "Acceso público" en formularios FormAccessMode.Publico.
   Sustituye al bloque de auth para reforzar "este form es anónimo".
   Estilo: tag sutil con icono globo + label UPPERCASE + tracking,
   coherente con h5/h6 del sistema tipografico Comillas. */
.comillas-access-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3xs);
    padding: var(--s-4xs) var(--s-2xs);
    border: 1px solid var(--c-texto-mute);
    color: var(--c-texto-soft);
    font-family: var(--f-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-uppercase);
    line-height: 1;
    white-space: nowrap;
}
.comillas-access-badge i {
    font-size: var(--fs-base);
    color: var(--c-texto-mute);
}

/* Titulo del formulario inline (sustituye al titulo que vivia en el header).
   Mismo patron visual que .page-header-title del hub: serif grande con barra
   amarilla institucional. Permite multilinea y no se trunca. */
.form-title {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    color: var(--c-texto);
    margin: 0 0 var(--s-xs) 0;
    line-height: 1.15;
    font-size: clamp(28px, 4vw, 44px);
    padding-left: var(--s-2xs);
    border-left: 3px solid var(--c-amarillo);
    /* Respeta los saltos de línea (\n) del título definido en CRM. */
    white-space: pre-line;
}
/* Alinea la descripcion + hint con el texto del titulo cuando van detras de el. */
.form-title ~ .form-desc,
.form-title ~ .form-hint {
    padding-left: calc(var(--s-2xs) + 3px);
}

/* Descripcion + hint compactos cuando el titulo sube al header */
.form-desc {
    color: var(--c-texto-soft);
    font-size: var(--fs-base);
    line-height: 1.55;
    margin: 0 0 var(--s-3xs) 0;
    max-width: 680px;
}
.form-hint {
    color: var(--c-texto-mute);
    font-size: var(--fs-xs);
    margin: 0 0 var(--s-xs) 0;
}

/* ==========================================================================
   Botones Comillas — rectangulares, UPPERCASE, tracking 0.5px
   ========================================================================== */

.btn-comillas,
.btn-comillas-amarillo,
.btn-comillas-outline,
.btn-comillas-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 0;          /* Comillas = sin radius */
    padding: 0 24px;
    height: 48px;
    border: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Amarillo = accion principal (SIEMPRE texto oscuro) */
.btn-comillas-amarillo {
    background: var(--c-amarillo);
    color: var(--c-texto);
}
.btn-comillas-amarillo:hover,
.btn-comillas-amarillo:focus-visible {
    background: var(--c-amarillo-hover);
    color: var(--c-texto);
    text-decoration: none;
}

/* Oscuro = accion secundaria */
.btn-comillas {
    background: var(--c-texto);
    color: var(--c-blanco);
}
.btn-comillas:hover,
.btn-comillas:focus-visible {
    background: #000;
    color: var(--c-blanco);
    text-decoration: none;
}

/* Outline — usable sobre fondo oscuro (topbar/header) o sobre claro */
.btn-comillas-outline {
    background: transparent;
    color: var(--c-texto);
    border: 1px solid var(--c-texto);
}
.btn-comillas-outline:hover,
.btn-comillas-outline:focus-visible {
    background: var(--c-texto);
    color: var(--c-blanco);
    text-decoration: none;
}
/* En la topbar oscura el outline es claro */
.comillas-topbar .btn-comillas-outline {
    color: var(--c-blanco);
    border-color: var(--c-blanco);
}
.comillas-topbar .btn-comillas-outline:hover {
    background: var(--c-blanco);
    color: var(--c-texto);
}
/* En el header blanco el outline se mantiene oscuro (contraste sobre blanco) */

/* Ghost — sin fondo ni borde, solo texto */
.btn-comillas-ghost {
    background: transparent;
    color: var(--c-texto);
    padding: 0 var(--s-2xs);
}
.btn-comillas-ghost:hover {
    background: var(--c-crema);
}

/* Tamanos */
.btn-sm { height: 36px; padding: 0 var(--s-2xs); font-size: var(--fs-xs); }
.btn-lg { height: 56px; padding: 0 var(--s-s); font-size: var(--fs-base); }

/* Bootstrap override — que los btn-primary / btn-secondary tambien sigan Comillas */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--c-amarillo);
    border-color: var(--c-amarillo);
    color: var(--c-texto);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 0;
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--c-amarillo-hover);
    border-color: var(--c-amarillo-hover);
    color: var(--c-texto);
}
.btn-secondary {
    background: var(--c-texto);
    border-color: var(--c-texto);
    color: var(--c-blanco);
    border-radius: 0;
}
.btn-outline-primary, .btn-outline-secondary {
    border-radius: 0;
    border-color: var(--c-texto);
    color: var(--c-texto);
}
.btn-outline-primary:hover, .btn-outline-secondary:hover {
    background: var(--c-texto);
    color: var(--c-blanco);
}

/* ==========================================================================
   Formularios Comillas — inputs UNDERLINED (estilo editorial)
   border-bottom 1px #181818, resto transparente, sin radius
   ========================================================================== */

/* ==========================================================================
   FORMULARIOS COMILLAS — sistema unificado.
   TODOS los controles (text, email, tel, number, date, password, search,
   url, textarea, select) comparten EXACTAMENTE las mismas reglas base:
   - OpenSans 14px / line-height 18px / color #181818
   - border-bottom 1px #181818, resto sin borde, transparent
   - border-radius 0 (filosofia Comillas: zero radius)
   - padding 10px 0 8px, min-height 40px, width 100%
   - focus: border-bottom AMARILLO + box-shadow amarillo 1px
   - disabled: texto mute, border gris, cursor not-allowed
   - placeholder: texto mute opacidad 0.7
   Luego cada tipo anade SOLO lo que es unico suyo (ej. chevron en select).
   ========================================================================== */

/* --- Label base --- */
.form-label, label {
    display: block;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 18px;
    color: var(--c-texto-mute);
    margin-bottom: var(--s-3xs);
    letter-spacing: 0.01em;
}

/* --- Base unificada para TODOS los inputs, textarea y select --- */
.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 18px;
    color: var(--c-texto);
    background-color: transparent;
    background-image: none;
    border: 0;
    border-bottom: 1px solid var(--c-texto);
    border-radius: 0;
    padding: 10px 0 8px;
    height: auto;
    min-height: 40px;
    width: 100%;
    box-shadow: none;
    transition: border-color 0.15s ease;
    /* Override Bootstrap variables */
    --bs-form-select-bg-img: none;
}

/* --- Focus unificado (todos) --- */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-bottom-color: var(--c-amarillo);
    box-shadow: 0 1px 0 0 var(--c-amarillo);
    outline: none;
    background-color: transparent;
    /* NO usar `background:` shorthand: reseteria background-image/repeat/size del select */
}

/* --- Placeholder unificado --- */
.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--c-texto-mute);
    opacity: 0.7;
}

/* --- Readonly: mantiene underlined pero texto mute + cursor bloqueado --- */
.form-control[readonly],
.form-control[readonly]:focus,
input[readonly],
input[readonly]:focus,
textarea[readonly],
textarea[readonly]:focus {
    color: var(--c-texto-mute);
    border-bottom-color: var(--c-crema-borde);
    box-shadow: none;
    cursor: not-allowed;
}

/* --- Disabled unificado --- */
.form-control:disabled,
.form-select:disabled,
input:disabled,
textarea:disabled,
select:disabled {
    color: var(--c-texto-mute);
    border-bottom-color: var(--c-crema-borde);
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.7;
    background-color: transparent;
}

/* --- Textarea: unica diferencia con el base es la altura y el resize --- */
textarea,
textarea.form-control {
    min-height: 96px;
    resize: vertical;
}

/* --- Select: underlined + chevron prominente --- */
.form-select,
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M1 1.5L8 8.5L15 1.5' stroke='%23181818' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px 10px;
    padding-right: 32px !important;
    transition: border-color 0.15s ease, background-image 0.15s ease;
}

/* Hover: chevron y underline mas gruesos, feedback visual claro */
.form-select:hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled) {
    border-bottom-width: 2px;
    padding-bottom: 7px;
}

/* Focus: chevron amarillo + linea amarilla + chevron rotado para indicar "abierto" */
.form-select:focus,
select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M1 1.5L8 8.5L15 1.5' stroke='%23FFB81C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px 10px;
}

/* Cuando el select tiene un valor real seleccionado (no el placeholder vacio),
   el texto aparece con peso semibold para dar feedback de "esto esta rellenado". */
.form-select:valid:not([data-empty="true"]):not(:focus),
select:valid:not([data-empty="true"]):not(:focus) {
    /* opcional: lo controlamos mejor desde Blazor poniendo una clase */
}

/* --- Select disabled: chevron gris --- */
.form-select:disabled,
select:disabled {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'><path d='M1 1.5L8 8.5L15 1.5' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 16px 10px;
}

/* --- Options del desplegable: solo color de texto (el OS pinta hover/checked) --- */
.form-select option,
select option {
    background: var(--c-blanco);
    color: var(--c-texto);
}

/* ==========================================================================
   ComillasSelect — combobox custom con dropdown totalmente estilado.
   Reemplaza al <select> nativo en DynamicField para tener control del panel
   abierto. Accesible (role combobox/listbox, teclado completo, aria).
   ========================================================================== */

.comillas-select {
    position: relative;
    width: 100%;
}

/* Trigger = parece un input underlined como el resto de controles */
.comillas-select-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3xs);
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
    line-height: 18px;
    color: var(--c-texto);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--c-texto);
    border-radius: 0;
    padding: 10px 0 8px;
    min-height: 40px;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, border-bottom-width 0.15s ease;
}

.comillas-select-trigger:hover:not(:disabled) {
    border-bottom-width: 2px;
    padding-bottom: 7px;
}

.comillas-select-trigger:focus-visible {
    outline: none;
    border-bottom-color: var(--c-amarillo);
    border-bottom-width: 2px;
    padding-bottom: 7px;
    box-shadow: none;
}

.comillas-select.is-open .comillas-select-trigger {
    border-bottom-color: var(--c-amarillo);
    border-bottom-width: 2px;
    padding-bottom: 7px;
}

.comillas-select.is-disabled .comillas-select-trigger,
.comillas-select-trigger:disabled {
    color: var(--c-texto-mute);
    border-bottom-color: var(--c-crema-borde);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Placeholder (cuando no hay valor seleccionado) */
.comillas-select:not(.has-value) .comillas-select-value {
    color: var(--c-texto-mute);
}

/* Valor seleccionado en normal weight — no cambiamos peso, solo color */
.comillas-select-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Chevron: rota 180 cuando está abierto */
.comillas-select-chevron {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 10px;
    color: var(--c-texto);
    transition: transform 0.2s ease, color 0.15s ease;
}
.comillas-select.is-open .comillas-select-chevron,
.comillas-select-trigger:focus-visible .comillas-select-chevron {
    color: var(--c-amarillo);
}
.comillas-select.is-open .comillas-select-chevron {
    transform: rotate(180deg);
}

/* Backdrop invisible para capturar clicks fuera del panel */
.comillas-select-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

/* Panel de listbox */
.comillas-select-listbox {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: var(--s-4xs) 0;
    list-style: none;
    background: var(--c-blanco);
    border: 1px solid var(--c-texto);
    border-top: 2px solid var(--c-amarillo);
    border-radius: 0;
    box-shadow: 0 4px 16px rgba(24, 24, 24, 0.08);
    z-index: 51;
    animation: comillas-select-open 0.14s ease-out;
}

@keyframes comillas-select-open {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .comillas-select-listbox { animation: none; }
    .comillas-select-chevron { transition: none; }
}

/* Opciones individuales */
.comillas-select-option {
    display: block;
    padding: var(--s-3xs) var(--s-2xs);
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    line-height: 1.4;
    color: var(--c-texto);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.1s ease;
    position: relative;
}

/* Hover / focused (keyboard) — fondo crema */
.comillas-select-option:hover,
.comillas-select-option.is-focused {
    background: var(--c-crema);
}

/* Seleccionada — fondo amarillo suave + check implícito con borde izquierdo */
.comillas-select-option.is-selected {
    font-weight: var(--fw-semibold);
    background: var(--c-crema-claro);
    position: relative;
    padding-left: calc(var(--s-2xs) + 3px);
}
.comillas-select-option.is-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--c-amarillo);
}

/* Seleccionada Y enfocada por teclado → combinación: fondo amarillo directo */
.comillas-select-option.is-selected.is-focused {
    background: var(--c-amarillo);
}

.comillas-select-option.is-empty {
    color: var(--c-texto-mute);
    cursor: default;
    font-style: italic;
}

/* Scrollbar custom del listbox (WebKit) */
.comillas-select-listbox::-webkit-scrollbar {
    width: 8px;
}
.comillas-select-listbox::-webkit-scrollbar-track {
    background: var(--c-crema);
}
.comillas-select-listbox::-webkit-scrollbar-thumb {
    background: var(--c-texto-mute);
}
.comillas-select-listbox::-webkit-scrollbar-thumb:hover {
    background: var(--c-texto);
}

/* --- Select multiple / size: se convierte en caja, sin chevron --- */
.form-select[size]:not([size="1"]),
.form-select[multiple],
select[multiple] {
    background-image: none;
    padding-right: 8px !important;
    min-height: 120px;
    border: 1px solid var(--c-texto);
}
select[multiple] option {
    padding: 6px 10px;
}

/* Checkboxes y radios */
.form-check {
    padding-left: 1.75rem;
}
.form-check-input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    margin-left: -1.75rem;
    border: 1px solid var(--c-texto);
    border-radius: 0;
    background-color: var(--c-blanco);
    cursor: pointer;
}
.form-check-input:focus {
    border-color: var(--c-amarillo);
    box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.55);
}
/* Focus visible generico (no para inputs ya que tienen su propio tratamiento) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--c-amarillo);
    outline-offset: 3px;
}
/* Los form-control ya tienen border-bottom + box-shadow amarillos; sin outline extra */
.form-control:focus-visible,
.form-select:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}
.form-check-input:checked {
    background-color: var(--c-texto);
    border-color: var(--c-texto);
}
.form-check-input[type="radio"] {
    border-radius: 50%;
}
.form-check-label {
    color: var(--c-texto);
    font-size: var(--fs-sm);
    cursor: pointer;
    padding-top: 1px;
}

.form-text { color: var(--c-texto-mute); font-size: var(--fs-xs); }

.invalid-feedback, .validation-message {
    color: var(--c-error);
    font-size: var(--fs-xs);
    margin-top: 4px;
}
.form-control.invalid, .invalid {
    border-bottom-color: var(--c-error);
    outline: none;
}
.form-control.valid.modified, .valid.modified:not([type=checkbox]) {
    outline: none;
}

/* ==========================================================================
   Contenedores / Cards / Secciones
   ========================================================================== */

.section-crema {
    background: var(--c-crema);
    padding: var(--s-2xl) 0;
}

.card-comillas,
.card {
    background: var(--c-blanco);
    border: 1px solid var(--c-crema-borde);
    border-radius: 0 !important;
    box-shadow: none;
    transition: border-color 0.15s ease;
}
.card-comillas:hover {
    border-color: var(--c-texto);
    box-shadow: none;
}
.card-comillas .card-title,
.card .card-title {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    color: var(--c-texto);
}
.card-header {
    background: var(--c-crema);
    border-bottom: 1px solid var(--c-crema-borde);
    border-radius: 0 !important;
    font-family: var(--f-sans);
    font-weight: var(--fw-semibold);
    color: var(--c-texto);
    padding: var(--s-2xs) var(--s-xs);
    letter-spacing: 0.02em;
}
.card-body {
    padding: var(--s-xs);
}
.card-footer {
    background: var(--c-crema-claro);
    border-top: 1px solid var(--c-crema-borde);
    border-radius: 0 !important;
    padding: var(--s-2xs) var(--s-xs);
}

/* Barra de progreso Comillas */
.progress {
    background: var(--c-crema-borde);
    border-radius: 0;
    height: 24px;
    overflow: hidden;
}
.progress-bar {
    background: var(--c-amarillo);
    color: var(--c-texto);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    letter-spacing: 0.05em;
    transition: width 0.3s ease;
}

/* Bootstrap input-group: mantener los inputs underlined */
.input-group {
    border-bottom: 1px solid var(--c-texto);
    align-items: stretch;
    gap: var(--s-3xs);
}
.input-group .form-control,
.input-group input {
    border-bottom: 0 !important;
}
.input-group .btn,
.input-group button,
.input-group .btn-comillas,
.input-group .btn-comillas-amarillo,
.input-group .btn-comillas-outline {
    align-self: center;
}

/* Badge rectangular sin radius */
.badge {
    border-radius: 0 !important;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    padding: 4px 8px;
}
.bg-primary { background-color: var(--c-amarillo) !important; color: var(--c-texto) !important; }
.bg-secondary { background-color: var(--c-texto) !important; color: var(--c-blanco) !important; }

/* Titulo con barra lateral amarilla (estilo Comillas para seccion accent) */
.comillas-title-accent {
    position: relative;
    padding-left: var(--s-2xs);
    border-left: 3px solid var(--c-amarillo);
    color: var(--c-texto);
    margin-bottom: var(--s-s);
}

/* Alerts minimalistas */
.alert {
    border-radius: 0;
    border-width: 0 0 0 3px;
    padding: var(--s-2xs) var(--s-xs);
}
.alert-info { background: #eef5fb; border-left-color: var(--c-icai); color: var(--c-texto); }
.alert-success { background: #eef7ef; border-left-color: var(--c-exito); color: var(--c-texto); }
.alert-warning { background: #fef7e0; border-left-color: var(--c-amarillo); color: var(--c-texto); }
.alert-danger { background: #fbecec; border-left-color: var(--c-error); color: var(--c-texto); }

/* Tablas */
.table {
    border-collapse: collapse;
    width: 100%;
}
.table th {
    background: var(--c-crema);
    color: var(--c-texto);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 16px;
    border-bottom: 2px solid var(--c-texto);
}
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-crema-borde);
    font-size: var(--fs-sm);
}
.table tbody tr:hover {
    background: var(--c-crema-claro);
}

/* ==========================================================================
   Footer Comillas — crema con amarillo accent en top
   ========================================================================== */

.comillas-footer {
    background: var(--c-crema);
    border-top: 4px solid var(--c-amarillo);
    color: var(--c-texto);
    padding: var(--s-2xl) 0 0;
    margin-top: var(--s-3xl);
}
.comillas-footer h5 {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: var(--fw-bold);
    color: var(--c-texto);
    margin-bottom: var(--s-2xs);
    font-family: var(--f-sans);
}
.comillas-footer a {
    color: var(--c-texto);
    font-size: var(--fs-sm);
}
.comillas-footer a:hover {
    color: var(--c-texto);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.comillas-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.comillas-footer ul li {
    margin-bottom: 8px;
}
.comillas-footer-bottom {
    background: var(--c-texto);
    color: rgba(255,255,255,0.75);
    font-size: var(--fs-xs);
    padding: var(--s-2xs) 0;
    margin-top: var(--s-m);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.comillas-footer-bottom a { color: rgba(255,255,255,0.75); }
.comillas-footer-bottom a:hover { color: var(--c-amarillo); }

/* ==========================================================================
   Hub — tiles de apps (reescrito al estilo Comillas)
   ========================================================================== */

.hub-category {
    margin-top: var(--s-xl);
    margin-bottom: var(--s-2xs);
}
.hub-category-title {
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--c-texto-mute);
    border-bottom: 1px solid var(--c-crema-borde);
    padding-bottom: var(--s-3xs);
    margin-bottom: var(--s-xs);
}

.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--s-2xs);
}

.app-tile {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2xs);
    padding: var(--s-xs);
    background: var(--c-blanco);
    border: 1px solid var(--c-crema-borde);
    border-radius: 0;
    text-decoration: none;
    color: var(--c-texto);
    transition: border-color 0.15s ease, transform 0.15s ease;
    position: relative;
    min-height: 128px;
}
.app-tile::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--c-amarillo);
    transition: width 0.2s ease;
}
.app-tile:hover {
    border-color: var(--c-texto);
    color: var(--c-texto);
    text-decoration: none;
}
.app-tile:hover::before { width: 100%; }

.app-tile-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-crema);
    border-radius: 0;
    flex-shrink: 0;
}
.app-tile-icon i {
    font-size: var(--fs-xl);
    color: var(--c-texto);
}
.app-tile-body { flex: 1; min-width: 0; }
.app-tile-title {
    font-family: var(--f-sans);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    margin-bottom: 4px;
    line-height: 1.3;
    color: var(--c-texto);
}
.app-tile-desc {
    font-size: var(--fs-sm);
    color: var(--c-texto-mute);
    line-height: 1.5;
}
.app-tile-external {
    position: absolute;
    top: 12px; right: 12px;
    font-size: var(--fs-xs);
    color: var(--c-texto-mute);
}

/* ==========================================================================
   Carne Alumni — tarjeta institucional
   ========================================================================== */

.alumni-card {
    background: var(--c-blanco);
    border: 1px solid var(--c-crema-borde);
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04);
}
.alumni-card-top {
    background: var(--c-texto);
    color: var(--c-blanco);
    padding: var(--s-xs) var(--s-s);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.alumni-card-top::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    background: var(--c-amarillo);
    opacity: 0.1;
}
.alumni-card-brand-sub {
    font-size: var(--fs-xs);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.75;
}
.alumni-card-brand-main {
    font-family: var(--f-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
}
.alumni-card-badge {
    background: var(--c-amarillo);
    color: var(--c-texto);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 6px 12px;
    z-index: 1;
}
.alumni-card-body {
    padding: var(--s-s);
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: var(--s-2xs) var(--s-xs);
    align-items: start;
}
.alumni-card-avatar {
    width: 90px;
    height: 90px;
    border-radius: 0;
    background: var(--c-amarillo);
    color: var(--c-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--f-serif);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-medium);
    letter-spacing: 0.05em;
}
.alumni-card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}
.alumni-card-name {
    font-family: var(--f-serif);
    font-size: var(--fs-xl);
    font-weight: var(--fw-medium);
    color: var(--c-texto);
    line-height: 1.2;
}
.alumni-card-titulacion {
    font-size: var(--fs-sm);
    color: var(--c-texto-soft);
}
.alumni-card-promo {
    font-size: var(--fs-xs);
    color: var(--c-texto-mute);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.alumni-card-data {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    margin: 0;
    padding-top: var(--s-2xs);
    border-top: 1px solid var(--c-crema-borde);
    font-size: var(--fs-sm);
}
.alumni-card-data dt {
    color: var(--c-texto-mute);
    font-weight: var(--fw-regular);
    text-transform: uppercase;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 6px;
}
.alumni-card-data dd {
    color: var(--c-texto);
    margin: 0;
    word-break: break-word;
}
.alumni-card-footer {
    background: var(--c-crema);
    padding: 10px var(--s-s);
    display: flex;
    justify-content: space-between;
    color: var(--c-texto-mute);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-top: 1px solid var(--c-crema-borde);
}

/* ==========================================================================
   Page header — banda crema full-width con titulo + descripcion de la pagina.
   Se coloca justo bajo el header corporativo. El contenido empieza DESPUES.
   ========================================================================== */

.page-header {
    background: var(--c-crema);
    border-bottom: 1px solid var(--c-crema-borde);
    padding: var(--s-m) 0 var(--s-s);
    margin-bottom: var(--s-s);
}
.page-header-title {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    color: var(--c-texto);
    margin: 0 0 var(--s-3xs) 0;
    line-height: 1.15;
    font-size: clamp(28px, 4vw, 44px);
    padding-left: var(--s-2xs);
    border-left: 3px solid var(--c-amarillo);
}
.page-header-desc {
    margin: 0;
    color: var(--c-texto-soft);
    font-size: var(--fs-base);
    max-width: 720px;
    padding-left: calc(var(--s-2xs) + 3px);
}
.page-header-hint {
    margin-top: var(--s-3xs);
    padding-left: calc(var(--s-2xs) + 3px);
    font-size: var(--fs-xs);
    color: var(--c-texto-mute);
    letter-spacing: 0.02em;
}

/* ==========================================================================
   Business Process Flow (BPF) — chevrons horizontales para formularios multi-step
   Inspirado en el BPF de Dynamics 365, adaptado al lenguaje Comillas:
   rectangular, sin sombras, amarillo para etapa actual, oscuro para completadas.
   ========================================================================== */

.form-bpf {
    margin: 0 0 var(--s-m) 0;
}

.form-bpf-stages {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
    gap: 0;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--c-crema-borde);
}

.form-bpf-stage {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: stretch;
    /* Chevron shape: flecha que entra por la izquierda y apunta a la derecha.
       Primera etapa no tiene muesca izquierda; ultima no tiene punta derecha. */
    clip-path: polygon(
        0 0,
        calc(100% - 14px) 0,
        100% 50%,
        calc(100% - 14px) 100%,
        0 100%,
        14px 50%
    );
    margin-left: -14px;
    transition: background-color 0.15s ease;
}
.form-bpf-stage:first-child {
    clip-path: polygon(
        0 0,
        calc(100% - 14px) 0,
        100% 50%,
        calc(100% - 14px) 100%,
        0 100%
    );
    margin-left: 0;
}
.form-bpf-stage:last-child {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        0 100%,
        14px 50%
    );
}
.form-bpf-stage:only-child {
    clip-path: none;
    margin-left: 0;
}

.form-bpf-stage-inner {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--s-3xs);
    min-height: 48px;
    padding: var(--s-3xs) var(--s-2xs) var(--s-3xs) calc(var(--s-2xs) + 14px);
    border: 0;
    background: transparent;
    color: inherit;
    font-family: var(--f-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-align: left;
    cursor: default;
    width: 100%;
    overflow: hidden;
}
.form-bpf-stage:first-child .form-bpf-stage-inner {
    padding-left: var(--s-2xs);
}

.form-bpf-stage-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.25);
    color: inherit;
}
.form-bpf-stage-label {
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Estado: completado — fondo oscuro, texto blanco, hover visible si es clicable */
.form-bpf-stage.is-done {
    background: var(--c-texto);
    color: var(--c-blanco);
}
.form-bpf-stage.is-done.is-clickable .form-bpf-stage-inner {
    cursor: pointer;
}
.form-bpf-stage.is-done.is-clickable:hover {
    background: #000;
}
.form-bpf-stage.is-done .form-bpf-stage-num {
    background: var(--c-amarillo);
    color: var(--c-texto);
}

/* Estado: actual — fondo amarillo, texto oscuro. Es el acento Comillas. */
.form-bpf-stage.is-current {
    background: var(--c-amarillo);
    color: var(--c-texto);
    font-weight: var(--fw-semibold);
}
.form-bpf-stage.is-current .form-bpf-stage-num {
    background: var(--c-texto);
    color: var(--c-amarillo);
}
.form-bpf-stage.is-current .form-bpf-stage-label {
    font-weight: var(--fw-semibold);
}

/* Estado: pendiente — fondo crema, texto mute */
.form-bpf-stage.is-pending {
    background: var(--c-crema);
    color: var(--c-texto-mute);
}
.form-bpf-stage.is-pending .form-bpf-stage-num {
    background: var(--c-crema-borde);
    color: var(--c-texto-mute);
}

/* Focus-visible en etapas clicables */
.form-bpf-stage.is-clickable .form-bpf-stage-inner:focus-visible {
    outline: 2px solid var(--c-amarillo);
    outline-offset: -4px;
}

/* Mobile: ocultamos los chevrons y mostramos un resumen legible */
.form-bpf-mobile { display: none; }

@media (max-width: 640px) {
    .form-bpf-stages { display: none; }
    .form-bpf-mobile {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: var(--s-3xs) 0;
        border-bottom: 1px solid var(--c-crema-borde);
    }
    .form-bpf-mobile-counter {
        font-size: var(--fs-sm);
        font-weight: var(--fw-semibold);
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--c-texto);
    }
    .form-bpf-mobile-counter .text-muted { color: var(--c-texto-mute); font-weight: var(--fw-regular); }
    .form-bpf-mobile-title {
        font-family: var(--f-serif);
        font-size: 18px;
        font-weight: var(--fw-medium);
        color: var(--c-texto);
    }
}

/* Reduced motion: sin transiciones */
@media (prefers-reduced-motion: reduce) {
    .form-bpf-stage { transition: none; }
}

/* ==========================================================================
   Controles custom de DynamicField (multiselect, scale, legal, heading)
   ========================================================================== */

/* Multiselect tipo checklist */
.form-multiselect-box {
    border: 1px solid var(--c-texto);
    background: var(--c-blanco);
    padding: var(--s-2xs);
    max-height: 300px;
    overflow-y: auto;
}
.form-multiselect-box .form-check {
    padding-top: 4px;
    padding-bottom: 4px;
    min-height: 28px;
}

/* Separador de seccion dentro del form: titulo con barra lateral amarilla */
.form-section-heading {
    font-family: var(--f-serif);
    font-weight: var(--fw-medium);
    font-size: var(--fs-xl);
    line-height: var(--lh-snug);
    color: var(--c-texto);
    padding-left: var(--s-2xs);
    border-left: 3px solid var(--c-amarillo);
    margin-top: var(--s-m);
    margin-bottom: var(--s-3xs);
}

/* Descripcion (helpText) bajo el titulo de seccion: un poco mas separada del titulo. */
main form .form-section-heading + p {
    padding-left: var(--s-2xs);
    margin-top: var(--s-4xs);
}

/* El wrapper de un heading NO lleva mb-3, y su <p> usa mb-0: sin esto la intro de
   seccion queda pegada a la primera pregunta. Le damos aire por debajo. */
main form > div:has(> .form-section-heading) {
    margin-bottom: var(--s-s);
}

/* Indentacion editorial: los campos del form estan "dentro" de la seccion,
   visualmente desplazados 24px a la derecha del titulo de seccion (con su
   barra amarilla a la izquierda). Crea jerarquia: titulo manda, campos
   pertenecen a el.
   SELECTOR: div.mb-3 directo dentro de form → matches cada campo wrapped
   por DynamicField (heading wrapper NO tiene mb-3, queda fuera).
   Disclaimer, botones y BPF tampoco tienen mb-3, ocupan ancho completo. */
main form > div.mb-3 {
    padding-left: var(--s-xs);
    margin-bottom: var(--s-m) !important;
}

/* Excepcion: los campos de tipo "legal" son bloques de consentimiento
   equivalentes al disclaimer del formulario — mismo nivel visual.
   `:has()` cae gracefully en navegadores sin soporte (mantiene el indent). */
main form > div.mb-3:has(> .form-legal) {
    padding-left: 0;
}

/* Campos condicionales (sub-preguntas con VisibleIf): mismo nivel horizontal
   que los regulares, mismo margen vertical, solo se distinguen con un chevron
   amarillo Comillas (`›`) al inicio del label. */

/* Chevron amarillo antes del label: marca de "esta pregunta cuelga de la de
   arriba" sin desplazar el contenido ni añadir elementos visuales pesados.
   Aplica a text/number/select (label) y a radio (legend). */
.form-field-conditional > .form-label::before,
.form-field-conditional > fieldset > .form-label::before {
    content: "› ";
    color: var(--c-amarillo);
    font-weight: var(--fw-bold);
    margin-right: 2px;
}

/* ─── Numeracion de preguntas (estilo MS Form) ─── */
/* Numero antepuesto al enunciado, en acento Comillas (como la barra de seccion). */
main form .q-num {
    font-weight: var(--fw-bold);
    color: var(--c-texto);
    margin-right: var(--s-4xs);
}

/* Enunciado mas destacado dentro del formulario (mas peso/tamano/contraste que el
   .form-label global; gana por especificidad). */
main form .form-label,
main form legend.form-label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-base);
    color: var(--c-texto);
    line-height: var(--lh-snug);
    margin-bottom: var(--s-2xs);
}

/* Si la pregunta va numerada, el numero ya marca la secuencia: quitamos el chevron
   de sub-pregunta condicional para no duplicar marcas (evita "› 11."). */
main form .form-field-conditional > .form-label:has(.q-num)::before,
main form .form-field-conditional > fieldset > .form-label:has(.q-num)::before {
    content: none;
}

/* Opcion de radio deshabilitada por condicion (p. ej. Residente reservado a alumni):
   se muestra pero apagada y no seleccionable. */
main form .form-check-label-disabled {
    color: var(--c-texto-mute);
    opacity: 0.6;
    cursor: not-allowed;
}

/* Scale (range + badge con valor) */
.scale-container {
    display: flex;
    align-items: center;
    gap: var(--s-xs);
}
.scale-label {
    color: var(--c-texto-mute);
    font-size: var(--fs-sm);
    min-width: 80px;
}
.scale-label-end { text-align: end; }
.scale-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-amarillo);
    color: var(--c-texto);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    min-width: 56px;
    height: 36px;
    padding: 0 var(--s-3xs);
    letter-spacing: 0.02em;
}
/* Range slider estilo Comillas */
.form-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 36px;
    cursor: pointer;
}
.form-range::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--c-texto);
    border: 0;
}
.form-range::-moz-range-track {
    height: 2px;
    background: var(--c-texto);
    border: 0;
}
.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--c-amarillo);
    border: 2px solid var(--c-texto);
    border-radius: 0;
    margin-top: -8px;
    cursor: grab;
}
.form-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--c-amarillo);
    border: 2px solid var(--c-texto);
    border-radius: 0;
    cursor: grab;
}
.form-range:focus { outline: none; }
.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(255, 184, 28, 0.55);
}

/* Bloque legal con checkbox de aceptacion */
.form-legal {
    background: var(--c-crema);
    border: 0;
    border-left: 3px solid var(--c-amarillo);
    padding: var(--s-xs);
    margin-bottom: var(--s-2xs);
}
.form-legal-text {
    font-size: var(--fs-sm);
    line-height: 1.6;
    color: var(--c-texto);
    white-space: pre-line;
    margin-bottom: var(--s-2xs);
}
.form-legal .form-check-label {
    font-weight: var(--fw-semibold);
}

/* Nota: readonly + disabled ya estan unificados arriba en la seccion
   "FORMULARIOS COMILLAS — sistema unificado". No duplicar reglas aqui. */

/* ==========================================================================
   Formularios del Portal — disclaimer + footer de contacto
   ========================================================================== */

.form-disclaimer {
    background: var(--c-crema);
    border-left: 3px solid var(--c-amarillo);
    padding: var(--s-2xs) var(--s-xs);
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--c-texto);
}
.form-disclaimer a {
    color: var(--c-texto);
    text-decoration: underline;
}

.form-footer {
    font-size: var(--fs-sm);
    color: var(--c-texto-mute);
    border-top: 1px solid var(--c-crema-borde);
    padding-top: var(--s-2xs);
    margin-top: var(--s-m);
}
.form-footer a { color: var(--c-texto); text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Blazor error UI
   ========================================================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--c-amarillo);
    color: var(--c-texto);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.15);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 12px 20px 14px 20px;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.3px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 10px;
}
.blazor-error-boundary {
    background: var(--c-error);
    color: var(--c-blanco);
    padding: 1rem 1rem 1rem 3.7rem;
}
.blazor-error-boundary::after {
    content: "Se ha producido un error."
}

/* ==========================================================================
   Content padding helper
   ========================================================================== */

.content { padding-top: var(--s-xs); }
h1:focus { outline: none; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--c-texto-mute);
    text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}