/* ══════════════════════════════════════════════════════════════════════
   ContigoSenior · Identidad visual
   Colores, tipografias y sistema grafico del Manual de Marca e Identidad Visual.
   Chapaza y Coco Gothic tienen licencia y no se incluyen: las sustituyen Playfair Display,
   Questrial (que el manual ya nombra) y Dancing Script, libres (SIL OFL) e incluidas en /fonts
   sin CDN. No se nombran las oficiales: el equipo que tuviera instalada una version de prueba
   las usaria, y esas versiones no traen los numeros.
   ══════════════════════════════════════════════════════════════════════ */

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/playfair-display-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url("../fonts/playfair-display-italic-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Questrial";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/questrial-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Dancing Script";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../fonts/dancing-script-latin.woff2") format("woff2");
}

:root {
    /* Paleta del manual */
    --cs-verde: #005151;
    --cs-verde-oscuro: #003d3d;
    --cs-verde-profundo: #002e2e;
    --cs-verde-claro: #e3efec;
    --cs-verde-suave: #f0f6f4;
    --cs-dorado: #eac212;
    --cs-dorado-oscuro: #b37d08;
    --cs-dorado-claro: #fbf1cf;
    --cs-dorado-suave: #fdf8e7;
    --cs-hueso: #faf2e5;
    --cs-gris: #505050;
    --cs-negro: #000;

    /* Uso en pantalla */
    --cs-fondo: #fbf7f0;
    --cs-superficie: #fff;
    --cs-superficie-calida: #fffcf7;
    --cs-crema: #f6efe3;
    --cs-borde: #ece3d3;
    --cs-borde-fuerte: #dccfb8;
    /* Bordes de campos y opciones: con los del resto de la interfaz no se distinguian del fondo. */
    --cs-borde-campo: #a3957f;
    --cs-borde-opcion: #cdbfa6;
    --cs-tinta: #0f3b3b;
    --cs-texto: #2c3838;
    --cs-texto-suave: #5f6b6a;
    --cs-exito: #2f7d4f;
    --cs-aviso: #9a6c00;
    --cs-peligro: #b3412c;

    /* Nombres anteriores: los usan estilos en linea de algunas vistas. */
    --cs-primario: var(--cs-verde);
    --cs-primario-oscuro: var(--cs-verde-oscuro);
    --cs-acento: var(--cs-dorado-oscuro);
    --cs-amarillo: var(--cs-dorado-oscuro);
    --cs-rojo: var(--cs-peligro);

    /* Solo las fuentes incluidas en /fonts. Nombrar Chapaza o Coco Gothic hacia que cada equipo
       usara la que tuviera instalada: con una version de prueba, los numeros salian como bloques. */
    --cs-fuente-titulos: "Playfair Display", Georgia, "Times New Roman", serif;
    --cs-fuente-texto: "Questrial", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --cs-fuente-etiquetas: "Questrial", "Segoe UI", system-ui, sans-serif;
    --cs-fuente-manuscrita: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;

    --cs-radio: 1rem;
    --cs-radio-sm: .65rem;
    --cs-sombra: 0 1px 2px rgba(0, 46, 46, .04), 0 10px 28px -18px rgba(0, 46, 46, .22);
    --cs-sombra-alta: 0 2px 6px rgba(0, 46, 46, .06), 0 22px 44px -24px rgba(0, 46, 46, .35);
    --cs-anillo: 0 0 0 .22rem rgba(0, 81, 81, .16);

    --cs-alto-barra: 4.5rem;
    /* Donde empiezan los elementos fijos: debajo de la barra de la aplicacion o de la publica. */
    --cs-tope: var(--cs-alto-barra);
    --cs-ancho-lateral: 16.5rem;

    /* Bootstrap 5.1: lo que se apoya en variables toma la paleta de la marca. */
    --bs-primary: #005151;
    --bs-primary-rgb: 0, 81, 81;
    --bs-secondary: #6c7570;
    --bs-secondary-rgb: 108, 117, 112;
    --bs-success: #2f7d4f;
    --bs-success-rgb: 47, 125, 79;
    --bs-info: #4f8f8a;
    --bs-info-rgb: 79, 143, 138;
    --bs-warning: #eac212;
    --bs-warning-rgb: 234, 194, 18;
    --bs-danger: #b3412c;
    --bs-danger-rgb: 179, 65, 44;
    --bs-light: #f8f3ea;
    --bs-light-rgb: 248, 243, 234;
    --bs-dark: #002e2e;
    --bs-dark-rgb: 0, 46, 46;
    --bs-body-font-family: var(--cs-fuente-texto);
    --bs-body-color: #2c3838;
    --bs-body-bg: #fbf7f0;
    --bs-font-sans-serif: var(--cs-fuente-texto);
}

html { font-size: 15px; }

body {
    background-color: var(--cs-fondo);
    color: var(--cs-texto);
    font-family: var(--cs-fuente-texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--cs-verde); text-underline-offset: .18em; }
a:hover { color: var(--cs-verde-oscuro); }

::selection { background: var(--cs-dorado-claro); color: var(--cs-tinta); }

h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-6 {
    font-family: var(--cs-fuente-titulos);
    color: var(--cs-tinta);
    font-weight: 600;
    letter-spacing: -.005em;
    font-variant-numeric: lining-nums;
}

h5, h6, .h5, .h6 { color: var(--cs-tinta); font-weight: 600; }

strong, b, .fw-semibold, .fw-bold { color: inherit; }

.lead { color: var(--cs-texto-suave); }
.text-muted { color: var(--cs-texto-suave) !important; }
.text-warning { color: var(--cs-aviso) !important; }
.text-mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: .82rem; }
.cs-manuscrita { font-family: var(--cs-fuente-manuscrita); font-weight: 600; }

/* Linea dorada corta: el remate de titulos del sistema grafico. */
.cs-remate {
    display: block;
    width: 2.25rem;
    height: 3px;
    border-radius: 3px;
    background: var(--cs-dorado);
}

/* ══ Barra publica (sin sesion) ═════════════════════════════════════════ */
.cs-cabecera {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(251, 247, 240, .94);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--cs-borde);
}

.cs-cabecera .navbar { padding: .7rem 0; }

.cs-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.cs-logo img { height: 3.1rem; width: auto; display: block; }

.cs-cabecera .nav-link {
    color: var(--cs-tinta);
    font-size: .93rem;
    padding: .45rem .85rem !important;
    border-radius: .6rem;
}

.cs-cabecera .nav-link:hover,
.cs-cabecera .nav-link.activo { color: var(--cs-verde); background: var(--cs-verde-suave); }

.cs-cabecera .navbar-toggler {
    border: 1px solid var(--cs-borde-fuerte);
    border-radius: .65rem;
    padding: .4rem .55rem;
    color: var(--cs-verde);
}

.cs-cabecera .navbar-toggler:focus { box-shadow: var(--cs-anillo); }

/* En la parte publica los elementos fijos empiezan bajo esta barra; site.js ajusta el valor a su
   alto real (cambia al abrir el menu en pantallas angostas). */
.cs-publico { --cs-tope: 4.6rem; }

/* El menu se despliega en linea solo desde 1200 px: entre 992 y 1199 no cabia y la barra se
   partia en dos renglones. */
@media (max-width: 1199.98px) {
    .cs-cabecera .navbar-collapse {
        background: var(--cs-superficie);
        border: 1px solid var(--cs-borde);
        border-radius: var(--cs-radio);
        margin-top: .75rem;
        padding: .75rem;
        box-shadow: var(--cs-sombra);
    }
    .cs-cabecera .cs-cabecera-acciones { padding-top: .75rem; border-top: 1px solid var(--cs-borde); margin-top: .5rem; }
}

/* ══ Pie publico ════════════════════════════════════════════════════════ */
.cs-pie-publico {
    background: var(--cs-superficie-calida);
    border-top: 1px solid var(--cs-borde);
    padding: 2rem 0 1.5rem;
    color: var(--cs-texto-suave);
    font-size: .86rem;
    margin-top: auto;
}

.cs-pie-publico img { height: 2.4rem; width: auto; }
.cs-pie-publico nav a { color: var(--cs-tinta); text-decoration: none; }
.cs-pie-publico nav a:hover { color: var(--cs-verde); text-decoration: underline; }
.cs-pie-publico .cs-puntos { margin-top: .9rem; }

/* Los seis circulos de la paleta, tal como cierran las paginas del manual. */
.cs-puntos { display: inline-flex; gap: .3rem; align-items: center; }
.cs-puntos i { width: .7rem; height: .7rem; border-radius: 50%; display: block; }
.cs-puntos i:nth-child(1) { background: var(--cs-negro); }
.cs-puntos i:nth-child(2) { background: var(--cs-gris); }
.cs-puntos i:nth-child(3) { background: var(--cs-verde); }
.cs-puntos i:nth-child(4) { background: var(--cs-dorado-oscuro); }
.cs-puntos i:nth-child(5) { background: var(--cs-dorado); }
.cs-puntos i:nth-child(6) { background: var(--cs-hueso); border: 1px solid var(--cs-borde-fuerte); }

/* Credito «Powered by Kompass Labs» en el pie publico y en el de la aplicacion. El logo va a
   140 px, el minimo que pide su manual de marca. */
.cs-powered { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; white-space: nowrap; }
.cs-powered:hover { color: inherit; }
.cs-powered img { display: block; width: 140px; height: auto; transition: opacity .15s ease; }
.cs-powered:hover img { opacity: .8; }

/* ══ Marco de la aplicacion (con sesion) ════════════════════════════════ */
.cs-barra {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--cs-alto-barra);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem 0 1.25rem;
    background: rgba(251, 247, 240, .95);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid var(--cs-borde);
}

.cs-barra .cs-logo img { height: 2.6rem; }

.cs-lema {
    font-size: .8rem;
    line-height: 1.3;
    color: var(--cs-texto-suave);
    border-left: 1px solid var(--cs-borde-fuerte);
    padding-left: 1rem;
    margin-left: .25rem;
}

.cs-barra-acciones { margin-left: auto; display: flex; align-items: center; gap: .35rem; }

.cs-boton-icono {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    color: var(--cs-verde);
    background: transparent;
    border: 0;
    text-decoration: none;
    transition: background-color .15s;
}

.cs-boton-icono:hover,
.cs-boton-icono.activo { background: var(--cs-verde-claro); color: var(--cs-verde-oscuro); }

.cs-boton-menu { display: none; }

.cs-badge-contador {
    position: absolute;
    top: .1rem;
    right: .05rem;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--cs-dorado);
    color: var(--cs-tinta);
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--cs-fondo);
}

.cs-usuario {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .3rem .75rem .3rem .3rem;
    margin-left: .35rem;
    border: 1px solid var(--cs-borde);
    border-radius: 999px;
    background: var(--cs-superficie);
    color: var(--cs-tinta);
    text-decoration: none;
    line-height: 1.2;
}

.cs-usuario:hover,
.cs-usuario[aria-expanded="true"] { border-color: var(--cs-borde-fuerte); color: var(--cs-tinta); box-shadow: var(--cs-sombra); }

.cs-usuario .cs-iniciales {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-verde);
    color: var(--cs-dorado);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.cs-usuario-nombre { font-size: .9rem; display: block; }
.cs-usuario-rol { font-size: .74rem; color: var(--cs-texto-suave); display: block; }
.cs-usuario::after { display: none; }

.cs-marco { display: flex; flex: 1 0 auto; min-height: calc(100vh - var(--cs-alto-barra)); }

/* Menu lateral. Operacion y administracion lo ven en verde, como en la maqueta del equipo;
   familias y profesionales, sobre el mismo fondo claro de la pagina. */
.cs-lateral {
    position: sticky;
    top: var(--cs-alto-barra);
    height: calc(100vh - var(--cs-alto-barra));
    width: var(--cs-ancho-lateral);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 1.1rem .85rem 1rem;
}

.cs-lateral-claro { border-right: 1px solid var(--cs-borde); background: var(--cs-fondo); }

.cs-lateral-oscuro {
    background:
        radial-gradient(120% 60% at 0% 100%, rgba(234, 194, 18, .10) 0%, rgba(234, 194, 18, 0) 60%),
        linear-gradient(180deg, var(--cs-verde) 0%, var(--cs-verde-oscuro) 100%);
    color: rgba(255, 255, 255, .88);
    scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

.cs-menu { list-style: none; margin: 0; padding: 0; }

.cs-menu-seccion {
    font-family: var(--cs-fuente-etiquetas);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    margin: 1.1rem .85rem .4rem;
    color: var(--cs-texto-suave);
}

.cs-lateral-oscuro .cs-menu-seccion { color: rgba(255, 255, 255, .5); }

.cs-menu-enlace {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .6rem .85rem;
    margin-bottom: .15rem;
    border-radius: .75rem;
    color: var(--cs-tinta);
    font-size: .93rem;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.cs-menu-enlace svg { flex-shrink: 0; color: var(--cs-verde); }
.cs-menu-enlace:hover { background: var(--cs-verde-suave); color: var(--cs-verde-oscuro); }

.cs-menu-enlace.activo { background: var(--cs-verde-claro); color: var(--cs-verde-oscuro); }

.cs-menu-enlace.activo::before {
    content: "";
    position: absolute;
    left: -.85rem;
    top: .45rem;
    bottom: .45rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--cs-verde);
}

.cs-lateral-oscuro .cs-menu-enlace { color: rgba(255, 255, 255, .88); }
.cs-lateral-oscuro .cs-menu-enlace svg { color: rgba(255, 255, 255, .82); }
.cs-lateral-oscuro .cs-menu-enlace:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cs-lateral-oscuro .cs-menu-enlace.activo { background: var(--cs-hueso); color: var(--cs-verde); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45); }
.cs-lateral-oscuro .cs-menu-enlace.activo svg { color: var(--cs-verde); }
.cs-lateral-oscuro .cs-menu-enlace.activo::before { display: none; }

.cs-menu-contador {
    margin-left: auto;
    min-width: 1.35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--cs-dorado);
    color: var(--cs-tinta);
    font-size: .7rem;
    font-weight: 700;
    text-align: center;
}

.cs-lateral-pie { margin-top: auto; padding-top: 1.25rem; position: relative; }

.cs-ayuda {
    border: 1px solid var(--cs-borde);
    background: var(--cs-superficie);
    border-radius: var(--cs-radio);
    padding: .9rem 1rem;
    font-size: .82rem;
    color: var(--cs-texto-suave);
}

.cs-ayuda strong { display: block; color: var(--cs-tinta); font-size: .9rem; }
.cs-ayuda .btn { margin-top: .6rem; }

.cs-lateral-oscuro .cs-ayuda { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .7); }
.cs-lateral-oscuro .cs-ayuda strong { color: #fff; }
.cs-lateral-oscuro .cs-ayuda .btn { color: #fff; border-color: rgba(255, 255, 255, .35); }
.cs-lateral-oscuro .cs-ayuda .btn:hover { background: var(--cs-hueso); color: var(--cs-verde); }

/* "Siempre contigo": la frase manuscrita con el corazon dorado. */
.cs-firma {
    display: block;
    font-family: var(--cs-fuente-manuscrita);
    font-weight: 600;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--cs-dorado);
    transform: rotate(-8deg);
    margin: 1.4rem 0 .4rem 1rem;
}

.cs-firma small { display: block; font-size: 1em; padding-left: 1.6rem; }
.cs-firma svg { vertical-align: -.1em; margin-left: .25rem; }
.cs-lateral-claro .cs-firma { color: var(--cs-dorado-oscuro); }

/* Hojas del sistema grafico: el remate organico de las esquinas. */
.cs-hojas {
    display: block;
    width: 6.5rem;
    height: 5rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 100'%3E%3Cpath d='M6 96 C 34 78 64 58 124 42' fill='none' stroke='%23B37D08' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M58 67 C 56 43 72 22 102 12 C 104 40 88 60 58 67 Z' fill='%23005151'/%3E%3Cpath d='M34 80 C 22 60 28 38 46 24 C 58 46 54 66 34 80 Z' fill='%23EAC212'/%3E%3Cpath d='M86 52 C 96 36 112 30 126 32 C 120 48 106 56 86 52 Z' fill='%23B37D08' opacity='.85'/%3E%3C/svg%3E") no-repeat left bottom / contain;
}

.cs-contenido { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cs-contenido-interno { width: 100%; max-width: 96rem; margin: 0 auto; padding: 1.75rem 2rem 2.5rem; flex: 1 0 auto; }

.cs-velo { display: none; }

/* Pie de la aplicacion */
footer.cs-pie {
    border-top: 1px solid var(--cs-borde);
    color: var(--cs-texto-suave);
    font-size: .8rem;
    padding: .9rem 2rem;
}

@media (max-width: 991.98px) {
    :root { --cs-alto-barra: 4rem; }

    .cs-barra { padding: 0 .75rem; gap: .5rem; }
    .cs-barra .cs-logo img { height: 2.2rem; }
    .cs-boton-menu { display: inline-flex; }
    .cs-lema, .cs-usuario-texto { display: none; }
    .cs-usuario { padding: .2rem; margin-left: .15rem; }

    .cs-lateral {
        position: fixed;
        z-index: 1045;
        top: 0;
        left: 0;
        height: 100vh;
        width: min(19rem, 86vw);
        transform: translateX(-102%);
        transition: transform .22s ease;
        box-shadow: var(--cs-sombra-alta);
        padding-top: 1.25rem;
    }

    .cs-lateral-claro { background: var(--cs-superficie-calida); }

    body.cs-menu-abierto { overflow: hidden; }
    body.cs-menu-abierto .cs-lateral { transform: none; }

    body.cs-menu-abierto .cs-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: rgba(0, 46, 46, .38);
    }

    .cs-contenido-interno { padding: 1.25rem 1rem 2rem; }
    footer.cs-pie { padding: .9rem 1rem; }
}

.cs-lateral-cerrar { display: none; }
.cs-lateral-cerrar img { height: 2.1rem; width: auto; }
.cs-lateral-oscuro .cs-boton-icono { color: #fff; }
.cs-lateral-oscuro .cs-boton-icono:hover { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 991.98px) {
    .cs-lateral-cerrar { display: flex; justify-content: space-between; align-items: center; margin: 0 .25rem .75rem .6rem; }
}

/* ══ Contenido publico ══════════════════════════════════════════════════ */
.cs-contenido-publico { flex: 1 0 auto; }
.cs-contenido-publico > .container-xl { padding-top: 1.75rem; padding-bottom: 2.5rem; }

/* ══ Encabezados de pagina ══════════════════════════════════════════════ */
.cs-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.5rem;
}

.cs-encabezado h1 {
    font-size: 1.85rem;
    margin: 0;
    line-height: 1.15;
}

.cs-encabezado h1::before {
    content: "";
    display: block;
    width: 2.25rem;
    height: 3px;
    border-radius: 3px;
    background: var(--cs-dorado);
    margin-bottom: .6rem;
}

.cs-encabezado p {
    margin: .35rem 0 0;
    color: var(--cs-texto-suave);
    font-size: .95rem;
}

.cs-panel-titulo {
    font-family: var(--cs-fuente-etiquetas);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cs-dorado-oscuro);
    font-weight: 600;
    margin-bottom: .5rem;
}

/* ══ Tarjetas y paneles ═════════════════════════════════════════════════ */
.card {
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio);
    box-shadow: var(--cs-sombra);
}

.card > .card-header:first-child { border-radius: calc(var(--cs-radio) - 1px) calc(var(--cs-radio) - 1px) 0 0; }
.card > .card-footer:last-child { border-radius: 0 0 calc(var(--cs-radio) - 1px) calc(var(--cs-radio) - 1px); }
.card > .list-group:last-child { border-bottom-left-radius: calc(var(--cs-radio) - 1px); border-bottom-right-radius: calc(var(--cs-radio) - 1px); }

.card-header {
    background-color: var(--cs-superficie-calida);
    border-bottom: 1px solid var(--cs-borde);
    color: var(--cs-tinta);
    font-weight: 600;
    font-size: .95rem;
    padding: .85rem 1.15rem;
}

.card-body { padding: 1.15rem; }
.card-footer { background: var(--cs-superficie-calida); border-top: 1px solid var(--cs-borde); padding: .8rem 1.15rem; }
.card.border-primary { border-color: rgba(0, 81, 81, .45) !important; }
.card.border-danger { border-color: rgba(179, 65, 44, .45) !important; }

/* ══ Indicadores ════════════════════════════════════════════════════════ */
.cs-kpi {
    position: relative;
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio);
    padding: 1rem 1.1rem 1rem 1.3rem;
    height: 100%;
    box-shadow: var(--cs-sombra);
    overflow: hidden;
}

.cs-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--cs-borde-fuerte);
}

.cs-kpi .valor {
    font-family: var(--cs-fuente-titulos);
    font-variant-numeric: lining-nums;
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--cs-tinta);
}

.cs-kpi .etiqueta { font-size: .82rem; color: var(--cs-texto-suave); margin-top: .2rem; }

.cs-kpi.alerta::before { background: var(--cs-peligro); }
.cs-kpi.aviso::before { background: var(--cs-dorado); }
.cs-kpi.ok::before { background: var(--cs-exito); }
.cs-kpi.info::before { background: var(--cs-verde); }

/* ══ Semaforo de complejidad ════════════════════════════════════════════ */
.cs-semaforo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .06em;
}

.cs-semaforo::before {
    content: "";
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
}

.cs-semaforo.verde { background: #e0f0e6; color: #23704a; }
.cs-semaforo.amarillo { background: var(--cs-dorado-claro); color: #7d5a00; }
.cs-semaforo.rojo { background: #f8e1db; color: #a13a26; }

/* ══ Compatibilidad del matching ════════════════════════════════════════ */
.cs-compatibilidad {
    font-family: var(--cs-fuente-titulos);
    font-variant-numeric: lining-nums;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--cs-verde);
    line-height: 1;
}

.cs-razon {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .86rem;
    color: var(--cs-texto);
    margin-bottom: .2rem;
}

.cs-razon svg { color: var(--cs-exito); flex-shrink: 0; margin-top: .15rem; }

.cs-exclusion {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    font-size: .84rem;
    color: #7a2e22;
    margin-bottom: .25rem;
}

.cs-exclusion svg { color: var(--cs-peligro); flex-shrink: 0; margin-top: .15rem; }

/* ══ Formularios por bloques ════════════════════════════════════════════ */
.cs-bloque {
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio);
    background: var(--cs-superficie);
    margin-bottom: 1rem;
    box-shadow: var(--cs-sombra);
}

.cs-bloque > header {
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--cs-borde);
    background: var(--cs-superficie-calida);
    border-radius: calc(var(--cs-radio) - 1px) calc(var(--cs-radio) - 1px) 0 0;
}

.cs-bloque > header .titulo {
    font-family: var(--cs-fuente-titulos);
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--cs-tinta);
    margin: 0;
}

.cs-bloque > header .ayuda {
    font-size: .82rem;
    color: var(--cs-texto-suave);
    margin: .15rem 0 0;
}

.cs-bloque > .cuerpo { padding: 1.15rem; }

/* ══ Controles de formulario ════════════════════════════════════════════ */
.form-label { font-size: .88rem; color: var(--cs-tinta); margin-bottom: .3rem; }
.form-text { font-size: .8rem; color: var(--cs-texto-suave); }
.cs-opcional { color: var(--cs-texto-suave); font-size: .85em; }

.form-control,
.form-select {
    border: 1px solid var(--cs-borde-campo);
    border-radius: var(--cs-radio-sm);
    background-color: var(--cs-superficie);
    color: var(--cs-texto);
    padding: .55rem .85rem;
    transition: border-color .15s, box-shadow .15s;
}

.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { border-radius: .5rem; padding-top: .3rem; padding-bottom: .3rem; }
.form-control::placeholder { color: #9aa3a1; }

.form-control:focus,
.form-select:focus {
    border-color: rgba(0, 81, 81, .6);
    box-shadow: var(--cs-anillo);
}

.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--cs-crema); }

.input-validation-error,
.form-control.input-validation-error,
.form-select.input-validation-error { border-color: rgba(179, 65, 44, .7); }

.form-check-input { border-color: var(--cs-borde-campo); }
.form-check-input:focus { border-color: rgba(0, 81, 81, .6); box-shadow: var(--cs-anillo); }
.form-check-input:checked { background-color: var(--cs-verde); border-color: var(--cs-verde); }
.form-check-input[type=checkbox] { border-radius: .3em; }
.form-check-input:checked[type=radio] { background-color: var(--cs-verde); }

.form-range::-webkit-slider-thumb { background-color: var(--cs-verde); }
.form-range::-moz-range-thumb { background-color: var(--cs-verde); }
.form-range::-webkit-slider-thumb:active { background-color: #7fb0ac; }
.form-range::-moz-range-thumb:active { background-color: #7fb0ac; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, var(--cs-anillo); }
.form-range::-webkit-slider-runnable-track { background-color: var(--cs-crema); }
.form-range::-moz-range-track { background-color: var(--cs-crema); }

/* Campo con icono al inicio (maqueta de solicitud). */
.cs-campo { position: relative; }

.cs-campo > svg {
    position: absolute;
    left: .85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cs-verde);
    pointer-events: none;
}

.cs-campo > .form-control,
.cs-campo > .form-select { padding-left: 2.6rem; }

/* Contrasena con boton para verla. */
.cs-campo-clave { position: relative; }
.cs-campo-clave > .form-control { padding-right: 2.9rem; }

.cs-ver-clave {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--cs-verde);
}

.cs-ver-clave:hover { background: var(--cs-verde-suave); }
.cs-ver-clave:focus-visible { outline: none; box-shadow: var(--cs-anillo); }
.cs-campo > .cs-ver-clave svg { position: static; transform: none; }

/* ══ Botones ════════════════════════════════════════════════════════════ */
.btn {
    font-family: var(--cs-fuente-texto);
    border-radius: .7rem;
    padding: .5rem 1.05rem;
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.btn svg { vertical-align: -.15em; }
.btn-sm { border-radius: .55rem; padding: .28rem .7rem; font-size: .83rem; }
.btn-lg { border-radius: .85rem; padding: .75rem 1.5rem; font-size: 1.02rem; }
.btn-pildora { border-radius: 999px; }
.btn:focus { box-shadow: var(--cs-anillo); }

.btn-primary { background-color: var(--cs-verde); border-color: var(--cs-verde); color: #fff; }
.btn-primary:hover,
.btn-primary:focus { background-color: var(--cs-verde-oscuro); border-color: var(--cs-verde-oscuro); color: #fff; }
.btn-primary:active,
.btn-primary.active { background-color: var(--cs-verde-profundo) !important; border-color: var(--cs-verde-profundo) !important; }
.btn-primary:disabled,
.btn-primary.disabled { background-color: #4d8585; border-color: #4d8585; color: #fff; }

/* Dorado: la llamada a la accion principal de la marca. */
.btn-dorado,
.btn-warning { background-color: var(--cs-dorado); border-color: var(--cs-dorado); color: var(--cs-tinta); }
.btn-dorado:hover,
.btn-dorado:focus,
.btn-warning:hover,
.btn-warning:focus { background-color: #d9b10a; border-color: #d9b10a; color: var(--cs-tinta); box-shadow: 0 8px 20px -12px rgba(179, 125, 8, .9); }
.btn-dorado:active,
.btn-warning:active { background-color: #c79f05 !important; border-color: #c79f05 !important; color: var(--cs-tinta) !important; }

.btn-outline-primary { color: var(--cs-verde); border-color: rgba(0, 81, 81, .55); background: transparent; }
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active { background-color: var(--cs-verde); border-color: var(--cs-verde); color: #fff; }
.btn-outline-primary:disabled { color: var(--cs-verde); border-color: rgba(0, 81, 81, .35); }

.btn-outline-secondary { color: var(--cs-tinta); border-color: var(--cs-borde-fuerte); background-color: var(--cs-superficie); }
.btn-outline-secondary:hover,
.btn-outline-secondary:active,
.btn-outline-secondary.active { background-color: var(--cs-crema); border-color: #cbbb9f; color: var(--cs-tinta); }
.btn-outline-secondary:disabled { color: #8b9492; border-color: var(--cs-borde); background: transparent; }

.btn-outline-danger { color: var(--cs-peligro); border-color: rgba(179, 65, 44, .45); }
.btn-outline-danger:hover,
.btn-outline-danger:active { background-color: var(--cs-peligro); border-color: var(--cs-peligro); color: #fff; }

.btn-outline-warning { color: #7d5a00; border-color: rgba(179, 125, 8, .55); }
.btn-outline-warning:hover,
.btn-outline-warning:active { background-color: var(--cs-dorado); border-color: var(--cs-dorado); color: var(--cs-tinta); }

.btn-outline-success { color: var(--cs-exito); border-color: rgba(47, 125, 79, .5); }
.btn-outline-success:hover,
.btn-outline-success:active { background-color: var(--cs-exito); border-color: var(--cs-exito); color: #fff; }

.btn-danger { background-color: var(--cs-peligro); border-color: var(--cs-peligro); }
.btn-danger:hover,
.btn-danger:focus { background-color: #963421; border-color: #963421; }

.btn-success { background-color: var(--cs-exito); border-color: var(--cs-exito); }
.btn-success:hover,
.btn-success:focus { background-color: #25653f; border-color: #25653f; }

.btn-link { color: var(--cs-verde); font-weight: 600; }
.btn-link:hover { color: var(--cs-verde-oscuro); }

/* ══ Alertas ════════════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--cs-radio-sm);
    border: 1px solid transparent;
    padding: .85rem 1.1rem;
}

.alert-info { background: var(--cs-verde-suave); border-color: #cfe3de; color: #0b4545; }
.alert-warning { background: var(--cs-dorado-suave); border-color: #f1e0a0; color: #5f4600; }
.alert-danger { background: #fbece8; border-color: #f0cdc4; color: #8d2f1f; }
.alert-success { background: #e9f4ed; border-color: #c8e3d2; color: #1d5e38; }
.alert-secondary { background: var(--cs-crema); border-color: var(--cs-borde); color: #464646; }
.alert-light { background: var(--cs-superficie-calida); border-color: var(--cs-borde); color: var(--cs-texto); }
.alert-primary { background: var(--cs-verde-claro); border-color: #c3dcd6; color: var(--cs-verde-oscuro); }
.alert .alert-link { color: inherit; }
.alert.border { border-color: var(--cs-borde) !important; }

/* ══ Distintivos ════════════════════════════════════════════════════════ */
.badge { font-family: var(--cs-fuente-texto); font-weight: 700; letter-spacing: .02em; border-radius: 999px; padding: .38em .75em; }

/* Presentacion.Badge y las vistas usan las clases text-bg-*, que Bootstrap trajo en la 5.2.
   La aplicacion carga la 5.1, donde no existen: se definen aqui, en tonos suaves de la marca. */
.text-bg-primary   { color: #fff !important; background-color: var(--cs-verde) !important; }
.text-bg-secondary { color: #4a4f4d !important; background-color: #ebe8e1 !important; }
.text-bg-success   { color: #1d6a3e !important; background-color: #dcefe3 !important; }
.text-bg-info      { color: var(--cs-verde-oscuro) !important; background-color: #d9ebe7 !important; }
.text-bg-warning   { color: #6f5000 !important; background-color: #f9eab0 !important; }
.text-bg-danger    { color: #9a3322 !important; background-color: #f7ded8 !important; }
.text-bg-light     { color: var(--cs-gris) !important; background-color: var(--cs-hueso) !important; }
.text-bg-dark      { color: #fff !important; background-color: var(--cs-verde-oscuro) !important; }

.border-primary { border-color: var(--cs-verde) !important; }
.border-danger { border-color: var(--cs-peligro) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--cs-borde) !important; }
.bg-light { background-color: var(--cs-superficie-calida) !important; }

/* ══ Tablas ═════════════════════════════════════════════════════════════ */
.table {
    font-size: .88rem;
    color: var(--cs-texto);
    border-color: #efe7da;
    --bs-table-hover-bg: rgba(0, 81, 81, .035);
    --bs-table-striped-bg: rgba(246, 239, 227, .5);
}

.table > thead { background: var(--cs-crema); }

.table > thead th {
    font-family: var(--cs-fuente-etiquetas);
    font-weight: 600;
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cs-texto-suave);
    border-bottom-color: var(--cs-borde-fuerte);
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.table > :not(:first-child) { border-top: 1px solid var(--cs-borde); }
.table-light { --bs-table-bg: var(--cs-crema); --bs-table-striped-bg: var(--cs-crema); border-color: var(--cs-borde); color: var(--cs-texto); }
.card > .table-responsive > .table,
.card > .table { margin-bottom: 0; }

/* Tablas pegadas al borde de la tarjeta: el primer y el ultimo dato respetan su margen interior. */
.card > .table tr > :first-child,
.card > .table-responsive > .table tr > :first-child,
.card-body.p-0 > .table tr > :first-child,
.card-body.p-0 > .table-responsive > .table tr > :first-child { padding-left: 1.15rem; }
.card > .table tr > :last-child,
.card > .table-responsive > .table tr > :last-child,
.card-body.p-0 > .table tr > :last-child,
.card-body.p-0 > .table-responsive > .table tr > :last-child { padding-right: 1.15rem; }

.cs-tabla-vacia {
    text-align: center;
    color: var(--cs-texto-suave);
    padding: 2.25rem 1rem;
    font-size: .92rem;
}

/* ══ Listas, menus y pestanas ═══════════════════════════════════════════ */
.list-group-item { border-color: var(--cs-borde); color: var(--cs-texto); background-color: transparent; }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--cs-verde-suave); color: var(--cs-tinta); }
.list-group-item.active { background-color: var(--cs-verde); border-color: var(--cs-verde); color: #fff; }

.dropdown-menu {
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio-sm);
    box-shadow: var(--cs-sombra-alta);
    padding: .4rem;
    font-size: .92rem;
}

.dropdown-item { border-radius: .5rem; padding: .45rem .75rem; color: var(--cs-texto); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--cs-verde-suave); color: var(--cs-verde-oscuro); }
.dropdown-item.active, .dropdown-item:active { background: var(--cs-verde); color: #fff; }
.dropdown-header { color: var(--cs-tinta); font-weight: 600; font-size: .9rem; }
.dropdown-divider { border-top-color: var(--cs-borde); }

.nav-tabs { border-bottom-color: var(--cs-borde); }
.nav-tabs .nav-link { color: var(--cs-texto-suave); border-radius: .6rem .6rem 0 0; }
.nav-tabs .nav-link:hover { border-color: var(--cs-borde) var(--cs-borde) transparent; color: var(--cs-verde); }
.nav-tabs .nav-link.active { color: var(--cs-verde); background-color: var(--cs-superficie); border-color: var(--cs-borde) var(--cs-borde) var(--cs-superficie); font-weight: 600; }
.nav-pills .nav-link.active { background-color: var(--cs-verde); }
.nav-link { color: var(--cs-verde); }

.progress { background-color: #efe6d6; border-radius: 999px; }
.progress-bar { background-color: var(--cs-verde); }

/* ══ Datos sensibles ════════════════════════════════════════════════════ */
.cs-sensible {
    border: 1px solid #d7e7e3;
    background: var(--cs-verde-suave);
    padding: .9rem 1.1rem;
    border-radius: var(--cs-radio-sm);
}

.cs-sensible-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--cs-fuente-etiquetas);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    color: var(--cs-verde);
    margin-bottom: .2rem;
}

.cs-restringido {
    background: var(--cs-crema);
    border: 1px dashed var(--cs-borde-fuerte);
    border-radius: var(--cs-radio-sm);
    padding: 1rem;
    color: var(--cs-texto-suave);
    font-size: .88rem;
}

/* ══ Linea de tiempo / estados ══════════════════════════════════════════ */
.cs-flujo {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    font-size: .78rem;
}

.cs-flujo .paso {
    padding: .22rem .65rem;
    border-radius: 999px;
    background: #f1ebe0;
    color: var(--cs-texto-suave);
    white-space: nowrap;
}

.cs-flujo .paso.hecho { background: var(--cs-verde-claro); color: var(--cs-verde); }
.cs-flujo .paso.actual { background: var(--cs-verde); color: #fff; font-weight: 600; }

.cs-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--cs-borde); }

.cs-timeline li { position: relative; padding: 0 0 1rem 1rem; }

.cs-timeline li::before {
    content: "";
    position: absolute;
    left: -1.47rem;
    top: .3rem;
    width: .72rem;
    height: .72rem;
    border-radius: 50%;
    background: var(--cs-dorado);
    border: 2px solid var(--cs-superficie);
    box-shadow: 0 0 0 1px var(--cs-dorado-oscuro);
}

/* ══ Notificaciones ═════════════════════════════════════════════════════ */
.cs-notificacion { border-bottom: 1px solid var(--cs-borde); padding: .75rem 1rem; }
.cs-notificacion:last-child { border-bottom: none; }
.cs-notificacion.no-leida { background: var(--cs-dorado-suave); box-shadow: inset 3px 0 0 var(--cs-dorado); }

/* ══ Mensajeria ═════════════════════════════════════════════════════════ */
.cs-chat { max-height: 55vh; overflow-y: auto; padding: 1rem; background: var(--cs-superficie-calida); }
.cs-mensaje { max-width: 78%; margin-bottom: .75rem; }
.cs-mensaje .burbuja { padding: .6rem .9rem; border-radius: .9rem .9rem .9rem .25rem; background: var(--cs-superficie); border: 1px solid var(--cs-borde); font-size: .9rem; }
.cs-mensaje .meta { font-size: .72rem; color: var(--cs-texto-suave); margin-top: .2rem; }
.cs-mensaje.propio { margin-left: auto; }
.cs-mensaje.propio .burbuja { background: var(--cs-verde-claro); border-color: #cfe3de; border-radius: .9rem .9rem .25rem .9rem; }
.cs-mensaje.propio .meta { text-align: right; }

/* ══ Asistente de perfilamiento ═════════════════════════════════════════ */
/* Una pregunta por pantalla: el formulario completo abrumaba a las familias,
   que es exactamente lo que la operacion pidio corregir. */
.cs-asistente {
    max-width: 50rem;
    margin: 0 auto;
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: 1.25rem;
    padding: 1.75rem 2rem;
    box-shadow: var(--cs-sombra);
}

/* Pagina del asistente: tarjeta principal y, al lado, la foto y el mensaje de la marca. */
/* minmax(0, 1fr): sin esto la columna crece con su contenido y la fila deslizable de los
   pasos 5 y 6 ensanchaba toda la pagina en pantallas angostas. */
.cs-asistente-marco { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.cs-asistente-marco .cs-asistente { max-width: none; margin: 0; }
.cs-asistente-lado { display: none; }

@media (min-width: 1200px) {
    .cs-asistente-marco { grid-template-columns: minmax(0, 1fr) 19.5rem; }
    .cs-asistente-lado { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: calc(var(--cs-tope) + 1.25rem); }
    /* Cuidados y competencias necesitan el ancho: ahi el lateral solo aparece en pantallas grandes. */
    .cs-asistente-marco.ancho { grid-template-columns: minmax(0, 1fr); }
    .cs-asistente-marco.ancho .cs-asistente-lado { display: none; }
}

@media (min-width: 1680px) {
    .cs-asistente-marco.ancho { grid-template-columns: minmax(0, 1fr) 19.5rem; }
    .cs-asistente-marco.ancho .cs-asistente-lado { display: flex; }
}

/* El encabezado con los pasos queda fijo al bajar: se ve en que paso va y se puede volver a
   uno anterior sin subir. Ocupa el ancho de la tarjeta, por eso los margenes negativos. */
.cs-asistente-cabecera {
    position: sticky;
    top: var(--cs-tope);
    z-index: 20;
    margin: -1.75rem -2rem 0;
    padding: 1.25rem 2rem .9rem;
    background: var(--cs-superficie);
    border-bottom: 1px solid var(--cs-borde);
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow: 0 12px 14px -16px rgba(0, 46, 46, .45);
}
.cs-asistente-barra { height: .35rem; background: var(--cs-borde); }
.cs-asistente-barra .progress-bar { background-color: var(--cs-verde); }

.cs-asistente-titulo { font-size: 2.1rem; margin: 1.1rem 0 .3rem; line-height: 1.15; }
.cs-asistente-intro { color: var(--cs-texto-suave); font-size: 1rem; margin-bottom: .75rem; }

/* Pasos 5 y 6: lo que propone ContigoSenior se destaca para que la familia lo revise. */
.cs-aviso-deduccion {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .35rem 0 1rem;
    padding: .8rem 1rem;
    background: var(--cs-dorado-suave);
    border: 1px solid var(--cs-dorado-claro);
    border-left: 4px solid var(--cs-dorado);
    border-radius: var(--cs-radio-sm);
    color: var(--cs-tinta);
    font-size: 1.05rem;
}
.cs-aviso-deduccion p { margin: 0; }
.cs-aviso-deduccion strong { color: var(--cs-verde); }
.cs-aviso-deduccion-icono {
    flex-shrink: 0;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-dorado);
    color: var(--cs-tinta);
}

/* Un dato que hay que ver antes de decidir (forma de pago al aprobar, datos para pagar). */
.cs-dato-destacado {
    padding: .7rem .9rem;
    background: var(--cs-verde-suave);
    border: 1px solid var(--cs-verde-claro);
    border-radius: var(--cs-radio-sm);
}
.cs-dato-destacado .etiqueta {
    display: block;
    font-family: var(--cs-fuente-etiquetas);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cs-texto-suave);
}
.cs-dato-destacado strong { color: var(--cs-tinta); font-size: 1.05rem; }

/* Paso 3: las situaciones adicionales quedan separadas de la pregunta de memoria. */
.cs-grupo-aparte {
    margin-top: 1.6rem;
    padding-top: .35rem;
    border-top: 1px dashed var(--cs-borde-fuerte);
}
.cs-grupo-aparte .cs-pregunta { margin-top: .9rem; margin-bottom: .2rem; }

.cs-asistente-pie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cs-borde);
}

.cs-asistente-pie .btn { min-width: 8.5rem; padding-top: .65rem; padding-bottom: .65rem; }
.cs-asistente-pie .btn-primary { border-radius: 999px; }

/* Indicador de pasos numerados con su nombre. */
.cs-pasos {
    list-style: none;
    display: flex;
    margin: .75rem 0 0;
    padding: 0;
    counter-reset: paso;
}

.cs-pasos li {
    flex: 1 1 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

/* Linea que une cada paso con el anterior. */
.cs-pasos li + li::before {
    content: "";
    position: absolute;
    top: .9rem;
    right: calc(50% + 1.15rem);
    left: calc(-50% + 1.15rem);
    height: 2px;
    border-radius: 2px;
    background: var(--cs-borde-fuerte);
}

.cs-pasos li.hecho + li::before { background: var(--cs-verde); }

.cs-pasos .numero {
    position: relative;
    z-index: 1;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    border: 1.5px solid var(--cs-borde-fuerte);
    background: var(--cs-superficie);
    color: var(--cs-texto-suave);
    text-decoration: none;
}

.cs-pasos .nombre {
    margin-top: .4rem;
    font-size: .76rem;
    line-height: 1.2;
    color: var(--cs-texto-suave);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding: 0 .15rem;
}

.cs-pasos li.hecho .numero { background: var(--cs-verde); border-color: var(--cs-verde); color: #fff; }
.cs-paso-enlace { display: flex; flex-direction: column; align-items: center; max-width: 100%; min-width: 0; color: inherit; text-decoration: none; }
button.cs-paso-enlace { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.cs-paso-enlace:hover .numero { background: var(--cs-verde-oscuro); box-shadow: var(--cs-anillo); }
.cs-paso-enlace:hover .nombre { color: var(--cs-verde); text-decoration: underline; }
.cs-pasos li.hecho .nombre { color: var(--cs-tinta); }
.cs-pasos li.actual .numero { background: var(--cs-dorado); border-color: var(--cs-dorado); color: var(--cs-tinta); box-shadow: 0 0 0 4px var(--cs-dorado-claro); }
.cs-pasos li.actual .nombre { color: var(--cs-tinta); font-weight: 700; }

@media (max-width: 767.98px) {
    .cs-pasos .nombre { display: none; }
    .cs-pasos .numero { width: 1.55rem; height: 1.55rem; font-size: .72rem; }
    .cs-pasos li + li::before { top: .77rem; right: calc(50% + 1rem); left: calc(-50% + 1rem); }
    .cs-asistente { padding: 1.25rem 1.1rem; border-radius: 1rem; }
    .cs-asistente-cabecera { margin: -1.25rem -1.1rem 0; padding: .85rem 1.1rem .7rem; border-radius: 1rem 1rem 0 0; }
    .cs-asistente-titulo { font-size: 1.6rem; }
}

.cs-pregunta { font-weight: 600; color: var(--cs-tinta); font-size: 1.15rem; margin: 1.15rem 0 .5rem; }

/* Titulo de bloque dentro de una misma pregunta: agrupa sin partir el paso en pantallas. */
.cs-subgrupo {
    font-family: var(--cs-fuente-titulos);
    font-weight: 600;
    font-size: 1.3rem;
    color: var(--cs-tinta);
    border-top: 1px solid var(--cs-borde);
    padding-top: .75rem;
}

.cs-subgrupo:first-of-type { border-top: 0; }

/* Circulo con icono, delante del titulo de un grupo. */
.cs-icono-circulo {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cs-verde);
    color: var(--cs-dorado);
}

.cs-icono-circulo.claro { background: var(--cs-verde-claro); color: var(--cs-verde); }
.cs-icono-circulo.dorado { background: var(--cs-dorado-claro); color: var(--cs-dorado-oscuro); }

.cs-opciones { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.cs-opciones-fila { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }

/* Opcion unica: tarjeta con el circulo del radio, el icono y el texto. */
.cs-opcion {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: 3.2rem;
    border: 1.5px solid var(--cs-borde-opcion);
    border-radius: .9rem;
    background: var(--cs-superficie);
    padding: .6rem 1rem .6rem 2.85rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s, box-shadow .15s;
}

.cs-opcion::before {
    content: "";
    position: absolute;
    left: 1rem;
    top: 50%;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -.575rem;
    border-radius: 50%;
    border: 1.5px solid var(--cs-borde-campo);
    background: var(--cs-superficie);
    transition: border-color .15s, box-shadow .15s;
}

.cs-opcion:hover { border-color: rgba(0, 81, 81, .45); box-shadow: var(--cs-sombra); }

/* El resaltado sale unicamente del radio marcado. Pintarlo tambien desde el servidor
   dejaba dos opciones resaltadas: la clase del servidor no se quita al hacer clic. */
.cs-opcion:has(input:checked) { border-color: var(--cs-verde); background: var(--cs-verde-suave); }
.cs-opcion:has(input:checked)::before { border-color: var(--cs-verde); background: var(--cs-verde); box-shadow: inset 0 0 0 3px var(--cs-superficie); }
.cs-opcion:has(input:focus-visible) { box-shadow: var(--cs-anillo); }

.cs-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.cs-opcion-icono { display: inline-flex; color: var(--cs-verde); flex-shrink: 0; }
.cs-opcion-texto { display: block; min-width: 0; }
.cs-opcion-titulo { display: block; font-weight: 600; font-size: 1.05rem; color: var(--cs-tinta); }
.cs-opcion-detalle { display: block; font-size: .86rem; color: var(--cs-texto-suave); margin-top: .05rem; }

/* Opcion con foto (paso 1): foto a la izquierda, icono, titulo y detalle; la marca va arriba
   a la derecha y al elegirla se llena con un chulo, como en la maqueta. */
.cs-opcion-foto { align-items: stretch; gap: 1rem; padding: .6rem 2.6rem .6rem .6rem; }

.cs-opcion-foto::before {
    left: auto;
    right: .85rem;
    top: .85rem;
    margin-top: 0;
    width: 1.35rem;
    height: 1.35rem;
}

.cs-opcion-foto:has(input:checked)::before {
    background: var(--cs-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / .95rem no-repeat;
    box-shadow: none;
}

.cs-opcion-imagen {
    width: 8.5rem;
    min-height: 6.6rem;
    flex-shrink: 0;
    border-radius: .7rem;
    overflow: hidden;
    background: var(--cs-crema);
}

.cs-opcion-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.cs-opcion-foto .cs-opcion-texto { padding: .25rem 0; }
.cs-opcion-foto .cs-icono-circulo { width: 2.3rem; height: 2.3rem; margin-bottom: .45rem; }
.cs-opcion-foto .cs-opcion-titulo { font-family: var(--cs-fuente-titulos); font-size: 1.2rem; }

@media (max-width: 575.98px) {
    .cs-opcion-imagen { width: 6.2rem; min-height: 5.6rem; }
}

.cs-casillas { display: grid; gap: .4rem; }
.cs-casillas-doble { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.cs-casillas-dias { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

/* Casilla de seleccion multiple con su texto. */
.cs-casilla {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    border: 1px solid var(--cs-borde-opcion);
    border-radius: .8rem;
    background: var(--cs-superficie);
    padding: .5rem .8rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.cs-casilla:hover { border-color: rgba(0, 81, 81, .45); }
.cs-casilla:has(input:checked) { border-color: var(--cs-verde); background: var(--cs-verde-suave); }
.cs-casilla .form-check-input { margin-top: .15rem; flex-shrink: 0; }
.cs-casilla strong { font-weight: 600; font-size: 1rem; color: var(--cs-tinta); }
.cs-casilla-icono { display: inline-flex; color: var(--cs-verde); flex-shrink: 0; margin-top: -.05rem; }

/* Un resumen de validacion sin errores no se muestra: sin esto quedaria una caja roja vacia. */
.validation-summary-valid { display: none; }

.cs-detalle-opcional > summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--cs-verde);
    padding: .35rem 0;
    font-weight: 600;
}

/* Pasos con muchas opciones (cuidados y competencias): el asistente se ensancha y las
   opciones van en columnas, para no tener que bajar tanto. */
.cs-asistente-ancho { max-width: 80rem; }

.cs-categorias {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    align-items: start;
}

.cs-categorias .cs-bloque { margin-bottom: 0; box-shadow: none; }

/* Categoria del paso 5 con foto. Se resalta si tiene algun cuidado marcado. */
.cs-categoria { overflow: hidden; border-color: var(--cs-borde-opcion); transition: border-color .15s, box-shadow .15s; }
.cs-categoria:has(input:checked) { border-color: var(--cs-verde); box-shadow: 0 0 0 1px var(--cs-verde); }
.cs-categoria-foto { position: relative; height: 6.5rem; background: var(--cs-crema); }
.cs-categoria-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }

.cs-categoria-foto .cs-icono-circulo {
    position: absolute;
    left: 1rem;
    bottom: -1.2rem;
    width: 2.4rem;
    height: 2.4rem;
    background: var(--cs-superficie);
    color: var(--cs-verde);
    box-shadow: 0 4px 14px -6px rgba(0, 46, 46, .45);
}

.cs-categoria-marca {
    position: absolute;
    top: .7rem;
    right: .7rem;
    width: 1.45rem;
    height: 1.45rem;
    border-radius: .4rem;
    background: var(--cs-superficie);
    border: 1.5px solid var(--cs-borde-campo);
}

.cs-categoria:has(input:checked) .cs-categoria-marca {
    border-color: var(--cs-verde);
    background: var(--cs-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.6' d='m5.5 10.5 3 3 6-6.5'/%3E%3C/svg%3E") center / .95rem no-repeat;
}

.cs-categorias .cs-categoria > header {
    padding: 1.45rem 1rem .55rem;
    background: transparent;
    border-radius: 0;
    border-bottom: 1px dashed var(--cs-borde);
}
.cs-categorias .cs-categoria > header .titulo { font-size: 1.3rem; line-height: 1.2; }
.cs-categorias .cs-categoria > header .ayuda { font-size: .85rem; }
.cs-categorias .cs-categoria > .cuerpo { padding: .3rem 1rem .45rem; }
.cs-categorias .cs-cuidado { padding: .05rem 0; }
.cs-categorias .cs-cuidado .cs-casilla { padding-top: .4rem; padding-bottom: .4rem; }
.cs-casillas-triple { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); }

/* En pantallas angostas las columnas no caben y todo volvia a quedar hacia abajo: ahi las
   categorias pasan a una fila que se desliza de lado, y cada grupo de competencias a dos
   filas que se deslizan juntas. Las flechas (site.js) son para quien usa mouse. */
.cs-desplazador { display: none; }

@media (max-width: 991.98px) {
    .cs-desplazador {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
        margin-bottom: .5rem;
    }
    .cs-desplazador-compacto { margin-bottom: 0; }
    .cs-desplazador .btn { line-height: 1; padding: .15rem .6rem; font-size: 1.1rem; border-radius: 999px; }

    .cs-categorias,
    .cs-casillas-triple {
        grid-template-columns: none;
        grid-auto-flow: column;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        padding-bottom: .5rem;
    }

    /* Cada categoria ocupa casi todo el ancho y deja asomar la siguiente. */
    .cs-categorias { grid-auto-columns: minmax(15rem, 82%); scroll-snap-type: x mandatory; }
    .cs-categorias > .cs-bloque { scroll-snap-align: start; }

    .cs-casillas-triple {
        grid-template-rows: repeat(2, auto);
        grid-auto-columns: minmax(12rem, 72%);
        scroll-snap-type: x proximity;
    }
    .cs-casillas-triple > .cs-casilla { scroll-snap-align: start; }
}

/* Lateral del asistente: foto con la frase manuscrita y el mensaje de la marca. */
.cs-foto-marca {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: var(--cs-sombra);
    background: var(--cs-crema);
}

.cs-foto-marca img { display: block; width: 100%; height: 17rem; object-fit: cover; }

.cs-foto-marca::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(0, 46, 46, .55) 0%, rgba(0, 46, 46, 0) 42%);
    pointer-events: none;
}

.cs-foto-marca .cs-firma {
    position: absolute;
    z-index: 1;
    top: .9rem;
    right: 1.1rem;
    margin: 0;
    color: #fff;
    font-size: 1.7rem;
    text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.cs-foto-marca .cs-firma svg { color: var(--cs-dorado); }

.cs-promesa {
    position: relative;
    background: var(--cs-superficie-calida);
    border: 1px solid var(--cs-borde);
    border-radius: 1.25rem;
    padding: 1.35rem 1.35rem 3.4rem;
    box-shadow: var(--cs-sombra);
    overflow: hidden;
}

.cs-promesa h2 { font-size: 1.45rem; line-height: 1.2; margin: .6rem 0 .5rem; }
.cs-promesa > p { font-size: .9rem; color: var(--cs-texto-suave); }
.cs-promesa .cs-hojas { position: absolute; right: -.4rem; bottom: -.2rem; width: 5.5rem; height: 4.2rem; transform: scaleX(-1); opacity: .9; }
.cs-promesa .cs-firma { color: var(--cs-dorado-oscuro); font-size: 1.55rem; margin-left: .25rem; }

.cs-beneficios { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .85rem; }
.cs-beneficios li { display: flex; gap: .8rem; align-items: center; }
.cs-beneficios .cs-icono-circulo { width: 2.7rem; height: 2.7rem; background: var(--cs-dorado); color: var(--cs-tinta); }
.cs-beneficios strong { display: block; font-size: .9rem; color: var(--cs-tinta); }
.cs-beneficios span { font-size: .8rem; color: var(--cs-texto-suave); }

/* ══ Mini cotizacion del embudo publico ═════════════════════════════════ */
.cs-estimado {
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio-sm);
    padding: .7rem .9rem;
    background: var(--cs-superficie-calida);
}

.cs-estimado-valor { font-family: var(--cs-fuente-titulos); font-variant-numeric: lining-nums; font-size: 1.3rem; font-weight: 700; color: var(--cs-verde); }
.cs-estimado table td { padding: .2rem .4rem; }

/* ══ Foto de la profesional (_FotoProfesional) ══════════════════════════ */
.cs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--cs-superficie);
    box-shadow: 0 0 0 1px var(--cs-borde);
    object-fit: cover;
    background: var(--cs-verde-claro);
    color: var(--cs-verde);
    font-weight: 700;
    line-height: 1;
    user-select: none;
}

.cs-avatar-sm { width: 40px; height: 40px; font-size: .85rem; }
.cs-avatar-md { width: 56px; height: 56px; font-size: 1.1rem; }
.cs-avatar-lg { width: 96px; height: 96px; font-size: 1.9rem; }

/* ══ Ficha inteligente ══════════════════════════════════════════════════ */
.cs-matriz { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }

.cs-matriz-celda {
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio-sm);
    padding: .7rem .9rem;
    background: var(--cs-superficie-calida);
}

.cs-matriz-celda dt {
    font-family: var(--cs-fuente-etiquetas);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cs-texto-suave);
    font-weight: 600;
}

.cs-matriz-celda dd { margin: .2rem 0 0; font-weight: 600; font-size: .95rem; color: var(--cs-tinta); }
.cs-matriz-celda dd.texto { font-weight: 400; white-space: pre-line; }

/* ══ Desglose del porcentaje de compatibilidad ══════════════════════════ */
.cs-desglose { font-size: .82rem; }
.cs-desglose td { padding: .2rem .4rem; }
.cs-desglose .cs-barra { background: var(--cs-crema); border-radius: .25rem; height: .45rem; min-width: 4rem; }
.cs-desglose .cs-barra span { display: block; height: 100%; border-radius: .25rem; background: linear-gradient(90deg, var(--cs-verde) 0%, #2d7a70 100%); }

/* ══ Puertas de entrada ═════════════════════════════════════════════════ */
.cs-puertas { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }

.cs-puerta {
    display: block;
    border: 1px solid var(--cs-borde);
    border-radius: var(--cs-radio);
    background: var(--cs-superficie);
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--cs-sombra);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}

.cs-puerta:hover { border-color: rgba(0, 81, 81, .45); transform: translateY(-2px); color: inherit; box-shadow: var(--cs-sombra-alta); }
.cs-puerta-icono { color: var(--cs-verde); margin-bottom: .5rem; }
.cs-puerta h2 { font-size: 1.1rem; margin-bottom: .25rem; }
.cs-puerta p { font-size: .86rem; color: var(--cs-texto-suave); margin: 0; }

.cs-puerta-principal {
    border-color: var(--cs-verde);
    background: linear-gradient(135deg, var(--cs-verde) 0%, var(--cs-verde-oscuro) 100%);
    color: #fff;
}

.cs-puerta-principal h2 { color: #fff; }
.cs-puerta-principal:hover { color: #fff; border-color: var(--cs-verde-oscuro); }
.cs-puerta-principal .cs-puerta-icono { color: var(--cs-dorado); }
.cs-puerta-principal p { color: rgba(255, 255, 255, .85); }

/* ══ Etiquetas menores ══════════════════════════════════════════════════ */
/* Etiqueta propia para lo clinico: usa el color de dato sensible, que es justo lo
   que distingue a una competencia clinica de las demas. */
.cs-etiqueta {
    display: inline-block;
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .14rem .45rem;
    border-radius: 999px;
    vertical-align: middle;
    background: var(--cs-dorado-claro);
    color: #7a5600;
    border: 1px solid #f0dc9c;
}

.cs-etiqueta.neutra {
    background: var(--cs-crema);
    color: var(--cs-texto-suave);
    border-color: var(--cs-borde);
}

/* ══ Matriz de cuidados del turno ═══════════════════════════════════════ */
.cs-cuidado {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-bottom: 1px dashed var(--cs-borde);
}

.cs-cuidado:last-child { border-bottom: none; }
.cs-cuidado .cs-casilla { border: none; padding-left: 0; background: none; }
.cs-cuidado .cs-casilla:has(input:checked) { background: none; border: none; }

/* ══ Portada ════════════════════════════════════════════════════════════ */
.cs-seccion { padding: 4rem 0; }
.cs-seccion-titulo { font-size: 2.2rem; margin: .7rem 0 .35rem; }
.cs-seccion-intro { color: var(--cs-texto-suave); font-size: 1.02rem; max-width: 40rem; }

.cs-antetitulo {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    font-family: var(--cs-fuente-etiquetas);
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-dorado-oscuro);
}

.cs-antetitulo::before { content: ""; width: 2.25rem; height: 2px; background: var(--cs-dorado); border-radius: 2px; }

.cs-hero { position: relative; isolation: isolate; padding: 3rem 0 3.5rem; overflow: hidden; }

.cs-hero h1 {
    font-size: clamp(2.3rem, 4.6vw, 3.7rem);
    line-height: 1.05;
    margin: 1rem 0 1.1rem;
    font-weight: 500;
}

.cs-hero h1 em { display: block; font-style: normal; color: var(--cs-dorado-oscuro); }
.cs-hero .lead { font-size: 1.12rem; max-width: 34rem; color: var(--cs-texto); }

.cs-hero-foto {
    position: relative;
    border-radius: 2rem 2rem 2rem 7rem;
    overflow: hidden;
    box-shadow: var(--cs-sombra-alta);
    aspect-ratio: 760 / 520;
    background: var(--cs-crema);
}

.cs-hero-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sombra suave en la esquina de la frase manuscrita: sobre la pared clara no se leia. */
.cs-hero-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(60% 55% at 100% 0%, rgba(0, 46, 46, .5) 0%, rgba(0, 46, 46, 0) 70%);
    pointer-events: none;
}

.cs-hero-foto .cs-firma {
    position: absolute;
    z-index: 1;
    top: 1.1rem;
    right: 1.4rem;
    margin: 0;
    color: #fff;
    font-size: 2.3rem;
    text-align: right;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .3);
}

.cs-hero-foto .cs-firma svg { color: var(--cs-dorado); }

/* Onda organica verde y dorada del sistema grafico, detras de la foto. */
.cs-hero-onda {
    position: absolute;
    right: -6rem;
    bottom: -7rem;
    width: 30rem;
    height: 22rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--cs-dorado) 0%, var(--cs-dorado-oscuro) 38%, var(--cs-verde) 72%);
    opacity: .9;
    filter: blur(.5px);
    z-index: -1;
}

.cs-sellos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .25rem;
    margin-top: 2rem;
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: 1.1rem;
    padding: .85rem .6rem;
    box-shadow: var(--cs-sombra);
}

.cs-sello {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .15rem .6rem;
    font-size: .82rem;
    line-height: 1.25;
    color: var(--cs-tinta);
}

.cs-sello + .cs-sello { border-left: 1px solid var(--cs-borde); }
.cs-sello .cs-icono-circulo { width: 2.3rem; height: 2.3rem; background: var(--cs-verde-claro); color: var(--cs-verde); }

@media (max-width: 767.98px) {
    .cs-sellos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .75rem; }
    .cs-sello:nth-child(3) { border-left: 0; }
}

.cs-servicios { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.cs-servicio {
    display: flex;
    flex-direction: column;
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: 1.1rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: var(--cs-sombra);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}

.cs-servicio:hover { transform: translateY(-3px); box-shadow: var(--cs-sombra-alta); border-color: rgba(0, 81, 81, .35); color: inherit; }
.cs-servicio-foto { position: relative; height: 11rem; background: var(--cs-crema); }
.cs-servicio-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }

.cs-servicio-foto .cs-icono-circulo {
    position: absolute;
    left: 1.1rem;
    bottom: -1.4rem;
    width: 2.9rem;
    height: 2.9rem;
    background: var(--cs-superficie);
    color: var(--cs-verde);
    box-shadow: 0 4px 14px -6px rgba(0, 46, 46, .45);
}

.cs-servicio-cuerpo { padding: 2rem 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.cs-servicio h3 { font-size: 1.2rem; margin-bottom: .35rem; }
.cs-servicio p { font-size: .88rem; color: var(--cs-texto-suave); flex: 1; }
.cs-servicio .cs-mas { font-size: .88rem; font-weight: 600; color: var(--cs-verde); display: inline-flex; align-items: center; gap: .35rem; }

.cs-como { background: var(--cs-verde-suave); border-top: 1px solid #deebe7; border-bottom: 1px solid #deebe7; }

.cs-como-pasos {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
    display: grid;
    gap: 1.5rem 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
}

.cs-como-pasos li { position: relative; }
.cs-como-pasos .cabeza { display: flex; align-items: center; gap: .65rem; margin-bottom: .7rem; }
.cs-como-pasos .cs-icono-circulo { width: 2.9rem; height: 2.9rem; background: var(--cs-superficie); color: var(--cs-verde); box-shadow: 0 4px 14px -8px rgba(0, 46, 46, .4); }
.cs-como-pasos .numero { font-family: var(--cs-fuente-titulos); font-variant-numeric: lining-nums; font-size: 1.15rem; color: var(--cs-dorado-oscuro); font-weight: 600; }
.cs-como-pasos h3 { font-size: 1.1rem; margin-bottom: .3rem; }
.cs-como-pasos p { font-size: .86rem; color: var(--cs-texto-suave); margin: 0; }

.cs-valores { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }

.cs-valor {
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: 1.1rem;
    padding: 1.4rem 1.4rem 1.2rem;
    box-shadow: var(--cs-sombra);
}

.cs-valor .numero { font-family: var(--cs-fuente-titulos); font-style: italic; color: var(--cs-dorado-oscuro); font-size: 1.1rem; }

.cs-valor h3 {
    font-family: var(--cs-fuente-etiquetas);
    font-size: .95rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--cs-verde);
    margin: .3rem 0 .6rem;
    font-weight: 700;
}

.cs-valor p { font-size: .9rem; color: var(--cs-texto-suave); margin: 0; }

.cs-nosotros-foto { border-radius: 1.5rem 1.5rem 6rem 1.5rem; overflow: hidden; box-shadow: var(--cs-sombra-alta); aspect-ratio: 740 / 494; }
.cs-nosotros-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cs-llamado {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 140% at 100% 100%, rgba(234, 194, 18, .22) 0%, rgba(234, 194, 18, 0) 55%),
        linear-gradient(120deg, var(--cs-verde) 0%, var(--cs-verde-oscuro) 100%);
    color: rgba(255, 255, 255, .88);
    padding: 2.6rem 0;
}

.cs-llamado h2 { color: #fff; font-size: 1.9rem; margin-bottom: .35rem; }
.cs-llamado .cs-icono-circulo { width: 3.6rem; height: 3.6rem; background: rgba(255, 255, 255, .08); color: var(--cs-dorado); border: 1px solid rgba(234, 194, 18, .45); }

.cs-llamado .cs-firma {
    position: absolute;
    right: 3%;
    bottom: .6rem;
    margin: 0;
    font-size: 2.1rem;
    color: rgba(234, 194, 18, .9);
}

@media (max-width: 1199.98px) {
    .cs-llamado .cs-firma { display: none; }
}

/* Resultado de la solicitud publica: titulos mas grandes, es la pagina donde la familia decide. */
.cs-resultado .cs-encabezado h1 { font-size: 2.4rem; }
.cs-resultado .card-header { font-family: var(--cs-fuente-titulos); font-size: 1.3rem; padding-top: 1rem; padding-bottom: 1rem; }
.cs-resultado .card-header .small { font-family: var(--cs-fuente-texto); }
.cs-resultado .cs-panel-titulo { font-size: .85rem; }
.cs-resultado .cs-matriz-celda dt { font-size: .76rem; }
.cs-resultado .cs-matriz-celda dd { font-size: 1.05rem; }
.cs-resultado h2.h5 { font-size: 1.75rem; }
.cs-resultado h3.h6 { font-family: var(--cs-fuente-titulos); font-size: 1.3rem; }

/* ══ Solicitud y cuenta ═════════════════════════════════════════════════ */
.cs-portada-solicitud {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
    .cs-portada-solicitud { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.cs-portada-solicitud h1 { font-size: 2.4rem; margin: .6rem 0 .5rem; }

.cs-banda-foto {
    position: relative;
    height: 11.5rem;
    border-radius: 1.4rem;
    overflow: hidden;
    background: var(--cs-verde);
    box-shadow: var(--cs-sombra);
}

.cs-banda-foto img { position: absolute; left: 0; top: 0; width: 72%; height: 100%; object-fit: cover; object-position: center 30%; }

.cs-banda-foto::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48%;
    right: 0;
    background: linear-gradient(90deg, rgba(0, 81, 81, 0) 0%, var(--cs-verde) 38%, var(--cs-verde-oscuro) 100%);
}

.cs-banda-foto .cs-firma {
    position: absolute;
    z-index: 1;
    right: 1.6rem;
    top: 50%;
    margin: 0;
    transform: translateY(-50%) rotate(-8deg);
    color: var(--cs-dorado);
    font-size: 2rem;
    text-align: right;
}

.cs-banda-foto .cs-firma small { color: #fff; }

.cs-lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cs-lista-check li { display: flex; gap: .6rem; font-size: .88rem; color: var(--cs-texto-suave); }
.cs-lista-check svg { color: var(--cs-verde); flex-shrink: 0; margin-top: .1rem; }

.cs-acceso {
    display: grid;
    background: var(--cs-superficie);
    border: 1px solid var(--cs-borde);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: var(--cs-sombra-alta);
    max-width: 62rem;
    margin: 1rem auto 0;
}

@media (min-width: 992px) {
    .cs-acceso { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.cs-acceso-foto { position: relative; min-height: 30rem; background: var(--cs-verde); }
.cs-acceso-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cs-acceso-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 61, 61, .1) 0%, rgba(0, 61, 61, .15) 45%, rgba(0, 46, 46, .92) 100%);
}

.cs-acceso-foto .texto { position: absolute; z-index: 1; left: 2rem; right: 2rem; bottom: 1.8rem; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.cs-acceso-foto .texto img { position: static; width: auto; height: 2.5rem; margin-bottom: 1rem; }
.cs-acceso-foto .cs-firma { color: var(--cs-dorado); font-size: 2rem; margin: 0 0 1.1rem; transform: rotate(-4deg); transform-origin: left center; }
.cs-acceso-formulario { padding: 2.5rem 2.5rem 2rem; }

@media (max-width: 991.98px) {
    .cs-acceso-foto { display: none; }
    .cs-acceso-formulario { padding: 1.75rem 1.4rem; }
}

/* ══ Impresion ══════════════════════════════════════════════════════════ */
@media print {
    .cs-barra, .cs-lateral, .cs-velo, .cs-cabecera, footer.cs-pie, .cs-pie-publico, .cs-no-imprimir { display: none !important; }
    body { background: #fff; }
    .cs-marco { display: block; min-height: 0; }
    .cs-contenido-interno { padding: 0; max-width: none; }
    .card, .cs-kpi, .cs-bloque { box-shadow: none; }
}