/* ==========================================================================
   Cyberagro — Sistema de diseño
   Capa de personalización sobre Bootstrap 5.3
   Paleta derivada del logotipo corporativo:
     azul  #5575B2   naranja #E5A640
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */
:root {
    /* Marca */
    --ca-blue: #5575b2;
    --ca-orange: #e5a640;

    /* Azules corporativos — chrome de la aplicación */
    --ca-navy-900: #0b2338;
    --ca-navy-800: #0e2841;
    --ca-navy-700: #14385a;
    --ca-teal-700: #10516e;
    --ca-teal-600: #156082;
    --ca-teal-500: #1a7ba6;

    /* Naranja: sólo decorativo. Sobre blanco no llega a 4.5:1 */
    --ca-orange-600: #c98a24;
    --ca-orange-700: #9a6410;
    --ca-orange-050: #fdf5e7;

    /* Neutros */
    --ca-gray-050: #f7f8fa;
    --ca-surface: #eef1f4;
    --ca-gray-100: #f1f3f5;
    --ca-gray-200: #e6e9ed;
    --ca-gray-300: #d5dae0;
    --ca-gray-400: #b3bcc6;
    --ca-gray-500: #7d8894;
    --ca-gray-600: #5a6672;
    --ca-gray-700: #3f4a55;
    --ca-gray-900: #1c242c;

    /* Semánticos */
    --ca-success: #1f7a3d;
    --ca-success-bg: #e8f5ec;
    --ca-warning: #9a6410;
    --ca-warning-bg: #fdf3e2;
    --ca-danger: #b02a37;
    --ca-danger-bg: #fbeaec;
    --ca-info: #156082;
    --ca-info-bg: #e8f2f7;

    /* Métrica */
    --ca-radius: 8px;
    --ca-radius-sm: 6px;
    --ca-radius-lg: 14px;
    --ca-shadow-xs: 0 1px 2px rgba(11, 35, 56, .06);
    --ca-shadow-sm: 0 1px 3px rgba(11, 35, 56, .08), 0 1px 2px rgba(11, 35, 56, .04);
    --ca-shadow-md: 0 4px 12px rgba(11, 35, 56, .10);
    --ca-shadow-lg: 0 12px 28px rgba(11, 35, 56, .16);
    --ca-header-h: 60px;
    --ca-context-h: 44px;

    /* Ancho útil: aprovecha FullHD sin que las líneas se hagan ilegibles */
    --ca-max-width: 1680px;
}

/* Bootstrap hereda nuestra paleta para que los componentes nativos armonicen */
:root {
    --bs-primary: #156082;
    --bs-primary-rgb: 21, 96, 130;
    --bs-link-color: #10516e;
    --bs-link-color-rgb: 16, 81, 110;
    --bs-link-hover-color: #0b3d54;
    --bs-body-color: #1c242c;
    --bs-body-bg: #ffffff;
    --bs-border-color: #d5dae0;
    --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --bs-border-radius: 8px;
}

/* ----------------------------------------------------------------- 2. Base */
body {
    background-color: var(--ca-gray-100);
    color: var(--ca-gray-900);
    font-size: .9375rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--ca-navy-800);
    letter-spacing: -.01em;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* Foco visible y consistente: requisito de accesibilidad, no adorno */
:focus-visible,
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
    outline: 3px solid rgba(26, 123, 166, .35);
    outline-offset: 1px;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ca-teal-500);
}

/* --------------------------------------------------- Foco en input-group
   Un input-group es un solo control a ojos del usuario: el icono, el campo y
   el botón. El foco debe rodearlo entero, no sólo la parte editable.        */
.input-group:focus-within {
    outline: 3px solid rgba(26, 123, 166, .35);
    outline-offset: 1px;
    border-radius: var(--ca-radius-sm);
}

/* Se retira el foco individual para que no aparezca un recuadro dentro de otro */
.input-group:focus-within .form-control:focus,
.input-group:focus-within .form-select:focus,
.input-group:focus-within .btn:focus-visible {
    outline: none;
}

/* El borde del conjunto acompaña al foco */
.input-group:focus-within .form-control,
.input-group:focus-within .form-select,
.input-group:focus-within .input-group-text,
.input-group:focus-within .ca-pass-toggle {
    border-color: var(--ca-teal-500);
}

/* Contenedor de página */
.ca-container {
    width: 100%;
    max-width: var(--ca-max-width);
    margin-inline: auto;
    padding-inline: clamp(.75rem, 2vw, 1.75rem);
}

/* ---------------------------------------------------- 3. Estructura de app */
.ca-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.ca-main {
    flex: 1 0 auto;
    padding-block: clamp(1rem, 2vw, 1.5rem) 2.5rem;
}

/* Cabecera */
.ca-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid var(--ca-gray-200);
    box-shadow: var(--ca-shadow-xs);
}

.ca-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--ca-header-h);
}

.ca-logo img {
    height: 34px;
    width: auto;
    display: block;
}

/* Identificación del usuario */
.ca-user {
    display: flex;
    align-items: center;
    gap: .625rem;
    background: none;
    border: 0;
    padding: .25rem .5rem;
    border-radius: var(--ca-radius);
}

.ca-user:hover {
    background: var(--ca-gray-100);
}

.ca-user__text {
    text-align: right;
    line-height: 1.2;
}

.ca-user__name {
    display: block;
    font-weight: 600;
    font-size: .875rem;
    color: var(--ca-navy-800);
}

.ca-user__org {
    display: block;
    font-size: .75rem;
    color: var(--ca-gray-600);
}

.ca-user__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ca-teal-600);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Barra de contexto (migas + volver) */
.ca-context {
    position: sticky;
    top: var(--ca-header-h);
    z-index: 1020;
    background: var(--ca-navy-800);
    color: #cfe0ec;
}

.ca-context__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--ca-context-h);
    padding-block: .375rem;
}

.ca-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    font-size: .875rem;
    min-width: 0;
}

.ca-breadcrumb__label {
    color: #93aec4;
}

.ca-breadcrumb a {
    color: #fff;
    font-weight: 600;
}

/* Aclarado hasta 4.7:1 sobre el azul de la barra: aunque es un separador, es
   texto y tiene que leerse. */
.ca-breadcrumb__sep {
    color: #7595b0;
}

.ca-breadcrumb__current {
    color: #cfe0ec;
}

.ca-btn-back {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .12);
    --bs-btn-border-color: rgba(255, 255, 255, .30);
    --bs-btn-hover-color: var(--ca-navy-900);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 600;
}

/* Pie */
.ca-footer {
    background: var(--ca-navy-800);
    color: #a9c1d3;
    font-size: .8125rem;
    padding-block: 1.125rem;
    margin-top: auto;
}

.ca-footer a {
    color: #cfe0ec;
}

.ca-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1.5rem;
}

/* ------------------------------------------------------- 4. Título de página */
.ca-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.125rem;
}

.ca-page-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    margin: 0;
}

.ca-page-subtitle {
    margin: .25rem 0 0;
    color: var(--ca-gray-600);
    font-size: .875rem;
}

/* Rótulo que encabeza una sección dentro de la pantalla («Configuración de los
   datos económicos», «Resultado de la tarificación»). Sustituye a la
   repetición `.h6 text-uppercase text-secondary` + letter-spacing en línea que
   había en 25 sitios: un rótulo recurrente es un componente, no cuatro
   utilidades sueltas. Los márgenes siguen poniéndose con utilidades, porque sí
   cambian según el sitio. */
.ca-section-title {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ca-gray-600);
}

/* ------------------------------------------------------------ 5. Tarjetas */
.ca-card {
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
}

.ca-card__head {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .75rem 1.125rem;
    border-bottom: 1px solid var(--ca-gray-200);
    background: var(--ca-gray-050);
    border-radius: var(--ca-radius) var(--ca-radius) 0 0;
}

.ca-card__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ca-navy-800);
}

.ca-card__body {
    padding: 1.125rem;
}

/* --------------------------------------------- 6. Accesos principales (menú) */
.ca-hero-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

/* Variante para rejillas cuyo nº de tarjetas depende de los permisos del usuario
   (menú del dashboard 2/3/4): auto-fill mantiene el ancho de columna y alinea a la
   izquierda, evitando que una tarjeta suelta en la última fila se estire a lo ancho. */
.ca-hero-grid--fill {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.ca-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.375rem;
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-sm);
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    height: 100%;
}

.ca-hero:hover,
.ca-hero:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--ca-shadow-md);
    border-color: var(--ca-teal-500);
    text-decoration: none;
}

.ca-hero__icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.65rem;
    background: var(--ca-orange-050);
    color: var(--ca-orange-700);
    border: 1px solid #f0dcb8;
}

/* Ambos son <span> dentro del enlace: sin display:block compartirían línea */
.ca-hero__title {
    display: block;
    margin: 0 0 .25rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ca-navy-800);
    line-height: 1.3;
}

.ca-hero__text {
    display: block;
    margin: 0;
    padding-right: 1.5rem;
    font-size: .8438rem;
    color: var(--ca-gray-600);
    line-height: 1.45;
}

.ca-hero__arrow {
    position: absolute;
    right: 1rem;
    bottom: .875rem;
    color: var(--ca-gray-400);
    transition: transform .16s ease, color .16s ease;
}

.ca-hero:hover .ca-hero__arrow {
    color: var(--ca-teal-600);
    transform: translateX(3px);
}

/* ------------------------------------------- 6b. Bandeja (cuadro de mando) */
/* Filtros de la bandeja: pestañas segmentadas discretas (sin estilos en línea) */
.ca-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin-bottom: .875rem;
}

.ca-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3125rem .75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--ca-gray-600);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease;
}

.ca-tabs__btn:hover {
    background: var(--ca-gray-100);
    color: var(--ca-gray-900);
}

.ca-tabs__btn.is-active {
    background: var(--ca-teal-600);
    border-color: var(--ca-teal-600);
    color: #fff;
    box-shadow: var(--ca-shadow-xs);
}

.ca-tabs__count {
    font-size: .6875rem;
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--ca-gray-200);
    color: var(--ca-gray-700);
}

.ca-tabs__btn.is-active .ca-tabs__count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ---- Portada · Notificaciones (Bandeja embebida): pestañas subrayadas + lista + bolitas de paginación ---- */

/* Estado «todo al día»: sustituye al bloque cuando no hay ninguna notificación */
.ca-nota {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.375rem;
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-sm);
}

.ca-nota__icon {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    background: var(--ca-success-bg);
    color: var(--ca-success);
}

.ca-nota__title {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ca-navy-800);
}

.ca-nota__text {
    margin: .1rem 0 0;
    font-size: .8438rem;
    color: var(--ca-gray-600);
}

/* Contenedor */
.ca-notis {
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius-lg);
    box-shadow: var(--ca-shadow-sm);
    overflow: hidden;
}

/* Pestañas: subrayado minimalista (sin píldoras) */
.ca-notis__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .375rem .5rem 0;
    border-bottom: 1px solid var(--ca-gray-200);
}

.ca-notis__tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .625rem .75rem;
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ca-gray-600);
    font-size: .8438rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: color .14s ease, border-color .14s ease;
}

.ca-notis__tab:hover {
    color: var(--ca-navy-800);
}

.ca-notis__tab.is-active {
    color: var(--ca-teal-600);
    border-bottom-color: var(--ca-teal-600);
    font-weight: 600;
}

.ca-notis__badge {
    min-width: 1.05rem;
    padding: .05rem .35rem;
    border-radius: 999px;
    background: var(--ca-danger);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* Lista */
.ca-notis__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ca-notis__item {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--ca-gray-200);
}

.ca-notis__item:first-child {
    border-top: 0;
}

.ca-notis__link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .875rem;
    width: 100%;
    padding: .8125rem 1rem;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}

.ca-notis__link:hover {
    background: var(--ca-gray-050);
    text-decoration: none;
}

/* Icono redondo tintado por categoría */
.ca-notis__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    background: var(--ca-gray-100);
    color: var(--ca-gray-600);
}

.ca-notis__icon--noticias { background: var(--ca-info-bg);    color: var(--ca-info); }
.ca-notis__icon--avisos   { background: var(--ca-info-bg);    color: var(--ca-teal-600); }
.ca-notis__icon--alertas  { background: var(--ca-warning-bg); color: var(--ca-warning); }
.ca-notis__icon--tareas   { background: var(--ca-gray-100);   color: var(--ca-teal-600); }

.ca-notis__body {
    flex-grow: 1;
    min-width: 0;
}

.ca-notis__top {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.ca-notis__tag {
    flex-shrink: 0;
    padding: .05rem .4rem;
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius-sm);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ca-gray-600);
}

.ca-notis__titulo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9063rem;
    color: var(--ca-gray-700);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ca-notis__prio,
.ca-notis__ok {
    flex-shrink: 0;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
}

.ca-notis__prio { background: var(--ca-danger-bg);  color: var(--ca-danger); }
.ca-notis__ok   { background: var(--ca-success-bg); color: var(--ca-success); }

/* Badge «No leído» (a la izquierda): sustituye a la bolita roja. Tono info, discreto. */
.ca-notis__noleido {
    flex-shrink: 0;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    background: var(--ca-info-bg);
    color: var(--ca-info);
}

.ca-notis__fecha {
    display: block;
    margin-top: .15rem;
    font-size: .75rem;
    color: var(--ca-gray-500);
}

/* Punto de «sin leer» + chevron */
.ca-notis__unread {
    flex-shrink: 0;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--ca-danger);
}

/* Botón «borrar/ocultar» de la fila: SIEMPRE visible, en gris (al pasar el ratón se enfatiza). */
.ca-notis__del {
    flex-shrink: 0;
    align-self: center;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-right: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ca-gray-400);
    font-size: .8rem;
    cursor: pointer;
    opacity: 1;
    transition: background-color .14s ease, color .14s ease;
}

.ca-notis__del:hover,
.ca-notis__del:focus-visible {
    background: var(--ca-gray-100);
    color: var(--ca-gray-700);
}

.ca-notis__del:disabled {
    cursor: default;
    opacity: .4;
}

/* Diferenciación clara leído / no leído */
.ca-notis__item.is-unread .ca-notis__link {
    border-left-color: var(--ca-teal-500);
    background: #fbfdfe;
}

.ca-notis__item.is-unread .ca-notis__titulo {
    color: var(--ca-navy-800);
    font-weight: 600;
}

.ca-notis__item.is-read .ca-notis__icon { opacity: .72; }
.ca-notis__item.is-read .ca-notis__titulo { color: var(--ca-gray-600); }

/* Nota de pestaña vacía */
.ca-notis__vacio {
    margin: 0;
    padding: 1.75rem 1rem;
    text-align: center;
    font-size: .8438rem;
    color: var(--ca-gray-500);
}

/* Bolitas de paginación */
.ca-notis__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    padding: .875rem;
    border-top: 1px solid var(--ca-gray-200);
}

.ca-notis__dots:empty {
    display: none;
}

.ca-notis__dot {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--ca-gray-300);
    cursor: pointer;
    transition: background-color .14s ease, transform .14s ease;
}

.ca-notis__dot:hover { background: var(--ca-gray-500); }

.ca-notis__dot.is-active {
    background: var(--ca-teal-600);
    transform: scale(1.25);
}

/* No leído: bolita roja a la izquierda + título en negrita */
.ca-inbox__item--unread::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ca-danger);
}

.ca-inbox__item--unread .ca-inbox__body > .d-block:first-child {
    font-weight: 600;
    color: var(--ca-navy-800);
}

/* Paginación discreta de la bandeja: sin recuadros, muy sobria */
.ca-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-top: .75rem;
    padding-top: .625rem;
    border-top: 1px solid var(--ca-gray-100);
}

.ca-pager__info {
    color: var(--ca-gray-500);
    font-size: .75rem;
}

.ca-pager__nav {
    display: inline-flex;
    align-items: center;
    gap: .125rem;
}

.ca-pager__link {
    display: inline-grid;
    place-items: center;
    min-width: 1.625rem;
    height: 1.625rem;
    padding: 0 .375rem;
    border-radius: var(--ca-radius-sm);
    color: var(--ca-gray-600);
    font-size: .8125rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.ca-pager__link:hover {
    background: var(--ca-gray-100);
    color: var(--ca-gray-900);
}

.ca-pager__link.is-active {
    color: var(--ca-navy-800);
    font-weight: 700;
}

.ca-pager__link.is-disabled {
    color: var(--ca-gray-300);
    pointer-events: none;
}

/* --------------------------------- 6c. Accesos secundarios (tarjetas compactas) */
/* Segundo nivel de accesos («Gestión de la cuenta»): mismo lenguaje que los
   accesos rápidos pero más ligero (icono + etiqueta, sin descripción). Cada
   tarjeta se muestra u oculta según el permiso de visibilidad del usuario. */
.ca-tiles {
    display: grid;
    /* Mismos parámetros que .ca-hero-grid (accesos rápidos) para que las tarjetas
       coincidan en ancho y separación. Se usa auto-fill (no auto-fit) para que,
       cuando por permisos haya menos tarjetas, no se estiren a lo ancho. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.ca-tile {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem;
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-xs);
    color: var(--ca-gray-700);
    text-decoration: none;
    transition: border-color .14s ease, background-color .14s ease, transform .14s ease;
}

.ca-tile:hover,
.ca-tile:focus-visible {
    border-color: var(--ca-teal-500);
    background: var(--ca-gray-050);
    text-decoration: none;
    transform: translateY(-2px);
}

.ca-tile__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--ca-radius-sm);
    background: var(--ca-gray-100);
    color: var(--ca-teal-600);
    font-size: 1.05rem;
}

.ca-tile__body {
    min-width: 0;
}

.ca-tile__label {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--ca-navy-800);
}

.ca-tile__text {
    display: block;
    margin-top: .1rem;
    font-size: .78rem;
    line-height: 1.35;
    color: var(--ca-gray-600);
}

/* ------------------------------------------- 7. Bloques auxiliares (menú) */
/* 230px es el umbral que permite las 4 columnas en tablet apaisada (1024) */
.ca-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.ca-block {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-xs);
    height: 100%;
}

.ca-block__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--ca-gray-200);
}

.ca-block__icon {
    width: 26px;
    height: 26px;
    border-radius: var(--ca-radius-sm);
    display: grid;
    place-items: center;
    background: var(--ca-info-bg);
    color: var(--ca-teal-600);
    font-size: .875rem;
}

.ca-block__title {
    margin: 0;
    font-size: .875rem;
    font-weight: 700;
    color: var(--ca-navy-800);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.ca-block__list {
    list-style: none;
    margin: 0;
    padding: .375rem 0 .5rem;
}

.ca-block__list a {
    display: flex;
    /* flex-start para que en enlaces de dos líneas el chevron no quede centrado */
    align-items: flex-start;
    gap: .5rem;
    padding: .4375rem 1rem;
    font-size: .875rem;
    color: var(--ca-teal-700);
    line-height: 1.35;
}

.ca-block__list a:hover {
    background: var(--ca-gray-050);
    color: var(--ca-navy-800);
    text-decoration: none;
}

.ca-block__list a::before {
    content: "\f285";
    font-family: "bootstrap-icons";
    font-size: .625rem;
    color: var(--ca-gray-400);
    flex-shrink: 0;
    /* Compensa la diferencia de altura de línea para casar con la primera línea */
    margin-top: .28rem;
}

.ca-block__list a:hover::before {
    color: var(--ca-teal-600);
}

/* ------------------------------------------------------------ 8. Filtros */
.ca-filters {
    background: var(--ca-surface);
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
    padding: 1rem 1.125rem;
    margin-bottom: 1.125rem;
}

.ca-filters__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .875rem;
}

.ca-filters__field {
    flex: 1 1 200px;
    min-width: 0;
}

.ca-filters__field--wide {
    flex: 2 1 280px;
}

.ca-filters__actions {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    gap: .5rem;
}

.ca-filters__advanced {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--ca-gray-300);
}

.ca-filters__toggle {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .875rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-teal-700);
    background: none;
    border: 0;
    padding: 0;
}

.ca-filters__toggle .bi {
    transition: transform .18s ease;
}

.ca-filters__toggle[aria-expanded="true"] .bi {
    transform: rotate(180deg);
}

.form-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    margin-bottom: .125rem;
    margin-left: .5rem;
}

/* ------------------------------------------------------------- 9. Tablas */
/* Sin overflow: recortar aquí convertiría la tarjeta en contenedor de
   desplazamiento y la cabecera «sticky» se posicionaría respecto a ella.
   Las esquinas se redondean en las propias celdas.                        */
.ca-table-card {
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
}

/* Sin scroll: ni horizontal ni vertical. Las columnas se ocultan por prioridad. */
.ca-table-wrap {
    overflow: visible;
}

.ca-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .8438rem;
    table-layout: auto;
}

/* La cabecera se fija bajo el chrome de la aplicación, no dentro de un contenedor */
.ca-table thead th {
    position: sticky;
    top: calc(var(--ca-header-h) + var(--ca-context-h));
    z-index: 2;
    background: var(--ca-navy-800);
    color: #fff;
    font-weight: 600;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 0;
    border-bottom: 0;
    vertical-align: middle;
    text-align: left;
}

/* Cabecera ordenable: el enlace ocupa toda la celda para un objetivo amplio */
.ca-th-sort {
    display: flex;
    align-items: center;
    gap: .375rem;
    width: 100%;
    padding: .625rem .75rem;
    color: #fff;
    white-space: nowrap;
}

.ca-th-sort:hover {
    background: var(--ca-navy-700);
    color: #fff;
    text-decoration: none;
}

.ca-th-sort .bi {
    font-size: .6875rem;
    opacity: .45;
}

.ca-th-sort[aria-sort="ascending"] .bi,
.ca-th-sort[aria-sort="descending"] .bi {
    opacity: 1;
    color: var(--ca-orange);
}

.ca-table th.ca-th-plain {
    padding: .625rem .75rem;
}

/* Las esquinas superiores de la tarjeta las dibuja la propia cabecera */
.ca-table thead tr th:first-child,
.ca-table thead tr th:first-child .ca-th-sort {
    border-top-left-radius: calc(var(--ca-radius) - 1px);
}

.ca-table thead tr th:last-child,
.ca-table thead tr th:last-child .ca-th-sort {
    border-top-right-radius: calc(var(--ca-radius) - 1px);
}

.ca-table td {
    padding: .5625rem .75rem;
    border-bottom: 1px solid var(--ca-gray-200);
    vertical-align: middle;
    /* Se permite el ajuste de línea: sin scroll, el texto largo baja */
    overflow-wrap: anywhere;
}

/* Datos que nunca deben partirse */
.ca-table .ca-nowrap,
.ca-table .ca-num,
.ca-table .ca-fecha {
    white-space: nowrap;
    overflow-wrap: normal;
}

.ca-table tbody tr:nth-child(even) {
    background: var(--ca-gray-050);
}

.ca-table tbody tr:hover {
    background: var(--ca-info-bg);
}

.ca-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ==========================================================================
   Columnas adaptables por prioridad
   --------------------------------------------------------------------------
   data-prio="N"  → la columna DESAPARECE por debajo de su umbral:
       1 = imprescindible (nunca se oculta)
       2 = < 768      3 = < 992      4 = < 1200      5 = < 1600

   data-grupo="N" → columna agrupada: sólo APARECE por debajo de N, y reúne
       varios datos en una celda. Sustituye a las columnas que se ocultan.
       Puede llevar además data-prio para desaparecer a su vez.

   Nada se pierde: lo oculto se consulta desplegando la fila (botón +).
   ========================================================================== */

/* Las agrupadas están ocultas mientras haya sitio para las individuales */
.ca-table [data-grupo] {
    display: none;
}

@media (max-width: 1599.98px) {
    .ca-table [data-grupo="1600"] { display: table-cell; }
}

@media (max-width: 1199.98px) {
    .ca-table [data-grupo="1200"] { display: table-cell; }
}

@media (max-width: 991.98px) {
    .ca-table [data-grupo="992"] { display: table-cell; }
}

@media (max-width: 767.98px) {
    .ca-table [data-grupo="768"] { display: table-cell; }
}

/* Las reglas de prioridad van después para poder ocultar también a las agrupadas */
@media (max-width: 1599.98px) {
    .ca-table [data-prio="5"] { display: none; }
}

@media (max-width: 1199.98px) {
    .ca-table [data-prio="4"] { display: none; }
}

@media (max-width: 991.98px) {
    .ca-table [data-prio="3"] { display: none; }
}

@media (max-width: 767.98px) {
    .ca-table [data-prio="2"] { display: none; }
}

/* Contenido de una celda agrupada: dato principal + secundarios */
.ca-celda-grupo {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    line-height: 1.3;
}

.ca-celda-grupo__dato {
    display: flex;
    align-items: baseline;
    gap: .375rem;
    font-size: .8125rem;
}

/* gray-600 y no gray-500: a 11px, el gris claro se quedaba en 3.4:1 */
.ca-celda-grupo__et {
    flex-shrink: 0;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--ca-gray-600);
}

/* ------------------------------------------- Fila de detalle desplegable */
.ca-col-detalle {
    width: 40px;
}

.ca-btn-detalle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--ca-gray-300);
    border-radius: 50%;
    background: #fff;
    color: var(--ca-teal-700);
    font-size: .75rem;
    line-height: 1;
}

.ca-btn-detalle:hover {
    background: var(--ca-teal-600);
    border-color: var(--ca-teal-600);
    color: #fff;
}

.ca-btn-detalle .bi {
    transition: transform .18s ease;
}

.ca-btn-detalle[aria-expanded="true"] {
    background: var(--ca-teal-600);
    border-color: var(--ca-teal-600);
    color: #fff;
}

.ca-btn-detalle[aria-expanded="true"] .bi {
    transform: rotate(45deg);
}

.ca-fila-detalle > td {
    padding: 0;
    background: var(--ca-info-bg);
    border-bottom: 2px solid #bcd9e8;
}

.ca-detalle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .625rem 1.5rem;
    padding: .875rem 1.125rem;
}

.ca-detalle-item {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    min-width: 0;
}

.ca-detalle-item__et {
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--ca-teal-700);
}

.ca-detalle-item__valor {
    font-size: .8438rem;
    color: var(--ca-navy-800);
    overflow-wrap: anywhere;
}

.ca-table .ca-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ca-table .ca-center {
    text-align: center;
}

.ca-link-id {
    font-weight: 600;
    color: var(--ca-teal-700);
}

.ca-cell-note {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    font-size: .8125rem;
    color: var(--ca-warning);
}

/* Pie de tabla: recuento + paginación */
.ca-table-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1.125rem;
    border-top: 1px solid var(--ca-gray-200);
    background: var(--ca-gray-050);
    font-size: .8438rem;
    color: var(--ca-gray-600);
    /* Cierra las esquinas inferiores de la tarjeta */
    border-radius: 0 0 calc(var(--ca-radius) - 1px) calc(var(--ca-radius) - 1px);
}

/* Aviso de columnas ocultas, en el pie de la tabla */
.ca-cols-ocultas {
    display: none;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    color: var(--ca-gray-600);
}

.ca-cols-ocultas.is-visible {
    display: inline-flex;
}

/* --------------------------------------------------------- 10. Distintivos */
.ca-badge {
    display: inline-block;
    padding: .1875rem .5rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.ca-badge--propuesta {
    background: var(--ca-info-bg);
    color: var(--ca-teal-700);
    border-color: #bcd9e8;
}

.ca-badge--poliza {
    background: var(--ca-success-bg);
    color: var(--ca-success);
    border-color: #b9dfc5;
}

.ca-badge--anulada {
    background: var(--ca-danger-bg);
    color: var(--ca-danger);
    border-color: #f0c4c9;
}

.ca-badge--pendiente {
    background: var(--ca-warning-bg);
    color: var(--ca-warning);
    border-color: #f0dcb8;
}

.ca-badge--neutro {
    background: var(--ca-gray-100);
    color: var(--ca-gray-700);
    border-color: var(--ca-gray-300);
}

.ca-count {
    font-weight: 600;
    color: var(--ca-navy-800);
}

/* --------------------------------------------------------- 11. Formularios */
.ca-fieldset {
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius);
    padding: 1.125rem 1.125rem .875rem;
    margin: 0 0 1.25rem;
    background: var(--ca-surface);
}

.ca-fieldset__legend {
    float: none;
    width: auto;
    padding: 0 .5rem;
    margin-left: .25rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ca-teal-700);
    background: transparent;
}

/* Valor no editable. Toma la misma altura y forma que un .form-control para
   alinearse con los campos de al lado, pero con fondo tramado y sin borde de
   foco, de modo que se lea claramente como un dato de sólo lectura. */
.ca-form-static {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    background-color: var(--ca-gray-200);
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La etiqueta se alinea con las del resto de campos (.form-label).
   inline-block, no block: es como Bootstrap deja los <label>, y así el control
   de debajo arranca a la misma altura que el de las columnas vecinas. */
.ca-form-static__label {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    margin-bottom: .125rem;
    margin-left: .5rem;
    text-transform: none;
}

.ca-hint {
    font-size: .75rem;
    color: var(--ca-gray-600);
    margin-top: .2rem;
    margin-left: .5rem;
    line-height: 1.3;
}

/* Superficie de formulario tintada (var --ca-surface): los campos editables,
   que son blancos, resaltan sobre ella; los de sólo lectura (.ca-form-static,
   gris) se hunden. Se aplica de serie a los modales y a .ca-fieldset. Para
   tintar cualquier otro contenedor de formulario suelto (sin fieldset), añádele
   la clase .ca-form-surface en el HTML. No tiñas .ca-card en bloque: esa clase
   también envuelve tablas y accesos del menú, que deben seguir en blanco. */
.modal-content,
.ca-form-surface {
    background-color: var(--ca-surface);
}

/* Barra de acciones fija al pie del formulario */
.ca-form-actions {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .875rem 1.125rem;
    background: #fff;
    border-top: 1px solid var(--ca-gray-200);
    box-shadow: 0 -4px 12px rgba(11, 35, 56, .06);
    border-radius: 0 0 var(--ca-radius) var(--ca-radius);
}

/* ---------------------------------------------------------- 12. Botones */
.btn {
    font-weight: 600;
    border-radius: var(--ca-radius-sm);
}

/* Los botones se pintan con los tokens de la paleta, no con literales: si se
   retoca un tono de marca, los botones lo siguen sin tocar esta sección. Sólo
   quedan sueltos los tonos que no existen como token (el pulsado y el texto
   oscuro del acento). */
.btn-primary {
    --bs-btn-bg: var(--ca-teal-600);
    --bs-btn-border-color: var(--ca-teal-600);
    --bs-btn-hover-bg: var(--ca-teal-700);
    --bs-btn-hover-border-color: var(--ca-teal-700);
    --bs-btn-active-bg: #0b3d54;
    --bs-btn-active-border-color: #0b3d54;
}

.btn-outline-primary {
    --bs-btn-color: var(--ca-teal-700);
    --bs-btn-border-color: #9dc0d2;
    --bs-btn-hover-bg: var(--ca-teal-600);
    --bs-btn-hover-border-color: var(--ca-teal-600);
}

.btn-success {
    --bs-btn-bg: var(--ca-success);
    --bs-btn-border-color: var(--ca-success);
    --bs-btn-hover-bg: #196331;
    --bs-btn-hover-border-color: #196331;
}

/* Único botón en naranja de marca. Lleva texto marrón muy oscuro (#3a2703,
   9.1:1 sobre el naranja) porque sobre ese fondo el blanco no llega al mínimo. */
.btn-accent {
    --bs-btn-color: #3a2703;
    --bs-btn-bg: var(--ca-orange);
    --bs-btn-border-color: #d9962c;
    --bs-btn-hover-color: #3a2703;
    --bs-btn-hover-bg: #d9962c;
    --bs-btn-hover-border-color: var(--ca-orange-600);
}

/* El secundario de Bootstrap es un botón muy usado («Volver», «Cancelar») y
   venía con el gris de fábrica (#6c757d), que sobre nuestros fondos tintados se
   queda en 4.2:1. Con gray-700 sube a 8:1 y además entra en la paleta. */
.btn-outline-secondary {
    --bs-btn-color: var(--ca-gray-700);
    --bs-btn-border-color: var(--ca-gray-300);
    --bs-btn-hover-bg: var(--ca-gray-700);
    --bs-btn-hover-border-color: var(--ca-gray-700);
    --bs-btn-active-bg: var(--ca-gray-900);
    --bs-btn-active-border-color: var(--ca-gray-900);
}

/* ------------------------------------- 12 bis. Utilidades de color de texto
   Bootstrap trae su propio gris (#6c757d) y su propio rojo (#dc3545) en estas
   dos utilidades, muy usadas en las pantallas. Ninguno pertenece a la paleta y
   ambos se quedaban por debajo de 4.5:1 sobre los fondos tintados: el gris en
   4.2–4.4:1 y el asterisco de campo obligatorio en 3.99:1. Se reasignan a los
   tokens propios, que además cumplen. Llevan !important porque las utilidades
   de Bootstrap también lo llevan. */
.text-secondary {
    color: var(--ca-gray-600) !important;
}

.text-danger {
    color: var(--ca-danger) !important;
}

/* Los botones de peligro de Bootstrap (`.btn-danger`, `.btn-outline-danger`)
   traen el rojo por defecto #dc3545, que sobre las superficies tintadas de las
   tablas (gris 050) cae a 4.26:1 en el texto del contorno. Se reasignan al token
   propio `--ca-danger` (#b02a37), más oscuro, que cumple 4.5:1 sobre esos fondos
   y deja el contorno homogéneo con `.text-danger`. Solo se retinta el color; el
   comportamiento y el resto de estados de Bootstrap se mantienen. */
.btn-outline-danger {
    --bs-btn-color: var(--ca-danger);
    --bs-btn-border-color: var(--ca-danger);
    --bs-btn-hover-bg: var(--ca-danger);
    --bs-btn-hover-border-color: var(--ca-danger);
    --bs-btn-active-bg: var(--ca-danger);
    --bs-btn-active-border-color: var(--ca-danger);
}

.btn-danger {
    --bs-btn-bg: var(--ca-danger);
    --bs-btn-border-color: var(--ca-danger);
    --bs-btn-hover-bg: var(--ca-danger);
    --bs-btn-hover-border-color: var(--ca-danger);
    --bs-btn-active-bg: var(--ca-danger);
    --bs-btn-active-border-color: var(--ca-danger);
}

/* ------------------------------------------------------ 13. Estados vacíos */
.ca-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
}

.ca-empty__icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.85rem;
    margin-bottom: 1rem;
    background: var(--ca-info-bg);
    color: var(--ca-teal-600);
}

.ca-empty--sin-resultados .ca-empty__icon {
    background: var(--ca-warning-bg);
    color: var(--ca-warning);
}

.ca-empty__title {
    margin: 0 0 .375rem;
    font-size: 1.125rem;
}

.ca-empty__text {
    margin: 0 auto;
    max-width: 52ch;
    color: var(--ca-gray-600);
    font-size: .9375rem;
}

.ca-empty__actions {
    margin-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
    justify-content: center;
}

/* ---------------------------------------------------------- 14. Avisos */
.ca-notice {
    display: flex;
    gap: .875rem;
    padding: .875rem 1.125rem;
    border-radius: var(--ca-radius);
    background: var(--ca-info-bg);
    border: 1px solid #bcd9e8;
    color: var(--ca-navy-800);
    font-size: .875rem;
    margin-bottom: 1.25rem;
}

.ca-notice__icon {
    flex-shrink: 0;
    font-size: 1.125rem;
    color: var(--ca-teal-600);
    line-height: 1.35;
}

.ca-notice p {
    margin: 0;
}

.ca-notice a {
    font-weight: 600;
    color: var(--ca-teal-700);
    text-decoration: underline;
}

/* ------------------------------------------------------------ 15. Acceso */
.ca-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: #fff;
}

.ca-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(2rem, 4vw, 3.5rem);
    background:
        radial-gradient(1200px 600px at 15% 10%, rgba(26, 123, 166, .35), transparent 60%),
        linear-gradient(150deg, var(--ca-navy-900) 0%, var(--ca-navy-800) 45%, var(--ca-teal-700) 100%);
    color: #dbe8f1;
    overflow: hidden;
}

/* Trama sutil: evoca parcelas de cultivo sin recurrir a una imagen */
.ca-auth__brand::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 70% 80%, #000, transparent 72%);
    pointer-events: none;
}

.ca-auth__brand > * {
    position: relative;
    z-index: 1;
}

.ca-auth__claim {
    font-size: clamp(1.5rem, 2.4vw, 2.125rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.25;
    max-width: 18ch;
    margin: 0 0 1rem;
}

.ca-auth__lead {
    max-width: 46ch;
    font-size: 1rem;
    color: #b9cede;
    margin: 0;
}

.ca-auth__features {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: .75rem;
}

.ca-auth__features li {
    display: flex;
    align-items: center;
    gap: .625rem;
    font-size: .9375rem;
    color: #cfe0ec;
}

.ca-auth__features .bi {
    color: var(--ca-orange);
    font-size: 1.05rem;
}

.ca-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: var(--ca-gray-050);
}

.ca-auth__box {
    width: 100%;
    max-width: 400px;
    padding: clamp(1.75rem, 3vw, 2.25rem);
    background: var(--ca-surface);
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
}

.ca-auth__logo {
    height: 42px;
    margin-bottom: 1.75rem;
}

.ca-auth__title {
    font-size: 1.375rem;
    margin: 0 0 .375rem;
}

.ca-auth__subtitle {
    color: var(--ca-gray-600);
    font-size: .875rem;
    margin: 0 0 1.5rem;
}

.ca-auth__footer {
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ca-gray-200);
    font-size: .8125rem;
    color: var(--ca-gray-600);
    text-align: center;
}

/* Va al pie del panel de marca, donde el degradado ya ha llegado al teal más
   claro. Con el gris azulado anterior se quedaba en 3.5:1 a 12px; este llega a
   4.6:1 contra ese extremo sin dejar de ser más apagado que el texto de apoyo. */
.ca-auth__legal {
    font-size: .75rem;
    color: #a9c2d6;
}

/* Campo de contraseña con botón mostrar/ocultar */
.ca-pass-toggle {
    border-left: 0;
    background: #fff;
    border-color: var(--ca-gray-300);
    color: var(--ca-gray-600);
}

.ca-pass-toggle:hover {
    color: var(--ca-navy-800);
    background: var(--ca-gray-050);
}

/* Medidor de robustez de contraseña */
.ca-strength {
    display: flex;
    gap: .25rem;
    margin-top: .5rem;
}

.ca-strength__bar {
    height: 4px;
    flex: 1;
    border-radius: 2px;
    background: var(--ca-gray-300);
    transition: background-color .2s ease;
}

.ca-strength__bar.is-on-weak { background: var(--ca-danger); }
.ca-strength__bar.is-on-medium { background: var(--ca-orange-600); }
.ca-strength__bar.is-on-strong { background: var(--ca-success); }

/* -------------------------------------------------------- 16. Responsive */

/* Tablet apaisada y por debajo */
@media (max-width: 1199.98px) {
    .ca-filters__actions {
        margin-left: 0;
        width: 100%;
    }

    .ca-filters__actions .btn {
        flex: 1 1 auto;
    }

    /* El botón de limpiar es sólo un icono: no debe estirarse como el principal */
    .ca-filters__actions .btn-outline-secondary {
        flex: 0 0 auto;
        min-width: 48px;
    }
}

/* Tablet vertical */
@media (max-width: 991.98px) {
    :root {
        --ca-header-h: 56px;
    }

    .ca-auth {
        grid-template-columns: 1fr;
    }

    .ca-auth__brand {
        display: none;
    }

    .ca-scroll-hint {
        display: flex;
    }

    .ca-hero {
        padding: 1.125rem;
    }

    .ca-hero__icon {
        width: 46px;
        height: 46px;
        font-size: 1.4rem;
    }
}

@media (max-width: 767.98px) {
    .ca-context__inner {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .ca-user__text {
        display: none;
    }

    .ca-page-head {
        flex-direction: column;
        align-items: stretch;
    }

    .ca-page-actions .btn {
        width: 100%;
    }

    .ca-filters__row {
        gap: .625rem;
    }

    .ca-filters__field,
    .ca-filters__field--wide {
        flex: 1 1 100%;
    }

    .ca-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ca-form-actions .btn {
        width: 100%;
    }

    .ca-table-foot {
        justify-content: center;
    }
}

/* La cabecera fija estorba en pantallas muy bajas (tablet apaisada pequeña) */
@media (max-height: 600px) {
    .ca-header,
    .ca-context {
        position: static;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------ 17. Impresión */
@media print {
    .ca-context,
    .ca-footer,
    .ca-filters,
    .ca-form-actions,
    .ca-page-actions {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .ca-table-card,
    .ca-card {
        box-shadow: none;
        border-color: #999;
    }

    .ca-table thead th {
        background: #ddd !important;
        color: #000 !important;
    }
}

/* ==========================================================================
   18. AMPLIACIÓN — Flujo de tarificación y emisión (bloque 2)
   --------------------------------------------------------------------------
   Todo lo que sigue son componentes NUEVOS. No se modifica ninguna regla
   anterior, de modo que las pantallas del bloque 1 quedan intactas.
   ========================================================================== */

/* --------------------------------------------- 18.1 Plugin multiselect
   El plugin trae su propia paleta; aquí se reviste con la de Cyberagro
   redefiniendo sus variables, sin tocar multiselect.css.                  */
.ms-select {
    --ms-bg: #ffffff;
    --ms-border: var(--ca-gray-300);
    --ms-border-focus: var(--ca-teal-500);
    --ms-field-bg: #ffffff;
    --ms-text: var(--ca-gray-900);
    --ms-muted: var(--ca-gray-600);
    --ms-chip-bg: var(--ca-teal-600);
    --ms-chip-text: #ffffff;
    --ms-hover: var(--ca-gray-050);
    --ms-radius: var(--ca-radius-sm);

    padding: 0;
    border: 0;
    background: transparent;
}

.ms-select:focus-within {
    box-shadow: none;
}

/* La etiqueta del plugin se alinea con las del resto de formularios */
.ms-select__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    margin-bottom: .125rem;
    margin-left: .5rem;
}

.ms-select__field {
    min-height: 42px;
    padding: 4px 30px 4px 10px;
    border-radius: var(--ca-radius-sm);
    border-color: var(--ca-gray-300);
}

.ms-select:focus-within .ms-select__field {
    border-color: var(--ca-teal-500);
    outline: 3px solid rgba(26, 123, 166, .35);
    outline-offset: 1px;
}

/* El campo exterior (.ms-select__field) ya dibuja el anillo de foco; se retira
   el del input de búsqueda interior para que no salga un recuadro dentro de
   otro (mismo criterio que en los input-group). Sin esto, la regla global
   :focus-visible pinta un segundo anillo sobre el propio <input> al escribir. */
.ms-select__search:focus,
.ms-select__search:focus-visible {
    outline: none;
}

.ms-select__caret {
    border-top-color: var(--ca-gray-600);
}

.ms-select__menu {
    left: 0;
    right: 0;
    margin-top: 2px;
    border-radius: var(--ca-radius-sm);
    border-top: 1px solid var(--ca-gray-300);
    border-color: var(--ca-gray-300);
    box-shadow: var(--ca-shadow-md);
}

.ms-select__option-title {
    font-size: .875rem;
}

.ms-select__chip {
    font-size: .8125rem;
    padding: 3px 10px;
}

/* Mensaje de "sin resultados" que ofrece una acción */
.ms-select__message--accion {
    padding: 1rem 1.125rem;
    color: var(--ca-gray-900);
    font-size: .875rem;
    line-height: 1.5;
    background: var(--ca-warning-bg);
    border-top: 2px solid var(--ca-orange-600);
}

.ms-select__message--accion strong {
    display: block;
    margin-bottom: .25rem;
    color: var(--ca-warning);
}

/* ------------------------------------------------ 18.2 Asistente por pasos */
/* Va bajo la cabecera, en el mismo sitio que la barra de contexto del resto
   de la aplicación: el usuario no pierde el logo ni su identificación. */
.ca-wizard {
    position: sticky;
    top: var(--ca-header-h);
    z-index: 1020;
    background: var(--ca-navy-800);
    color: #cfe0ec;
}

.ca-wizard__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 52px;
    padding-block: .5rem;
}

.ca-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    min-width: 0;
}

.ca-steps__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #7f9cb5;
    white-space: nowrap;
}

.ca-steps__item::after {
    content: "\f285";
    font-family: "bootstrap-icons";
    font-size: .625rem;
    color: #4d6d8a;
    margin-left: .25rem;
}

.ca-steps__item:last-child::after {
    content: none;
}

.ca-steps__num {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #cfe0ec;
    font-size: .6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ca-steps__item.is-hecho {
    color: #cfe0ec;
}

.ca-steps__item.is-hecho .ca-steps__num {
    background: var(--ca-success);
    color: #fff;
}

.ca-steps__item.is-actual {
    color: #fff;
    font-weight: 700;
}

.ca-steps__item.is-actual .ca-steps__num {
    background: var(--ca-orange);
    color: #3a2703;
}

/* -------------------------------------- 18.3 Resumen de lo ya seleccionado */
.ca-seleccion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .75rem 1rem;
    background: var(--ca-info-bg);
    border: 1px solid #bcd9e8;
    border-radius: var(--ca-radius);
    margin-bottom: 1.25rem;
}

.ca-seleccion__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1.25rem;
    font-size: .8438rem;
    color: var(--ca-navy-800);
    min-width: 0;
}

.ca-seleccion__dato {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
}

.ca-seleccion__et {
    color: var(--ca-gray-600);
}

.ca-seleccion__valor {
    font-weight: 700;
}

/* ------------------------------------------------ 18.4 Panel del asistente */
.ca-paso {
    background: #fff;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    box-shadow: var(--ca-shadow-sm);
    padding: 1.5rem;
}

.ca-paso__titulo {
    font-size: 1.0625rem;
    margin: 0 0 .25rem;
}

.ca-paso__texto {
    color: var(--ca-gray-600);
    font-size: .875rem;
    margin: 0 0 1.25rem;
}

.ca-paso__acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .625rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ca-gray-200);
}

/* Aviso del periodo de contratación */
.ca-periodo {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin-top: .5rem;
    font-size: .8125rem;
    font-weight: 600;
}

.ca-periodo--abierto { color: var(--ca-success); }
.ca-periodo--cerrado { color: var(--ca-danger); }

/* ------------------------------------------- 18.5 Lista de opciones (radio) */
.ca-opciones {
    display: grid;
    gap: .625rem;
}

.ca-opcion {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius);
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.ca-opcion:hover {
    border-color: var(--ca-teal-500);
    background: var(--ca-gray-050);
}

.ca-opcion__control {
    flex-shrink: 0;
    margin-top: .125rem;
}

.ca-opcion__texto {
    min-width: 0;
}

.ca-opcion__titulo {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    color: var(--ca-navy-800);
}

.ca-opcion__desc {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    color: var(--ca-gray-600);
    line-height: 1.45;
}

.ca-opcion:has(input:checked) {
    border-color: var(--ca-teal-600);
    background: var(--ca-info-bg);
    box-shadow: 0 0 0 1px var(--ca-teal-600) inset;
}

/* ---------------------------------------------------- 18.6 Subvenciones */
.ca-subvenciones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: .5rem .875rem;
}

.ca-subvencion {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: .5rem .75rem;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius-sm);
    background: #fff;
}

.ca-subvencion:hover {
    border-color: var(--ca-teal-500);
}

.ca-subvencion__texto {
    min-width: 0;
}

.ca-subvencion__nombre {
    display: block;
    font-size: .875rem;
    color: var(--ca-navy-800);
}

.ca-subvencion__nota {
    display: block;
    margin-top: .0625rem;
    font-size: .75rem;
    font-style: italic;
    color: var(--ca-teal-700);
}

.ca-subvencion--lectura {
    background: var(--ca-gray-050);
}

.ca-subvencion__marca {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    color: var(--ca-success);
}

.ca-subvencion__marca.is-vacia {
    color: var(--ca-gray-400);
}

/* Subvención efectivamente DECLARADA por el usuario: un toque crema apenas perceptible + texto en semibold, para que
   resalte de forma SUTIL frente a las no seleccionadas (aparte del check verde). Va después de --lectura para ganar. */
.ca-subvencion--declarada {
    background: #fffdf4;
    border-color: #ece4cf;
}
.ca-subvencion--declarada:hover {
    border-color: #e2d7b8;
}
.ca-subvencion--declarada .ca-subvencion__nombre {
    font-weight: 600;
}

/* --------------------------------------- 18.7 Aviso destacado de revisión */
.ca-revisar {
    display: flex;
    gap: 1rem;
    padding: 1.125rem;
    border: 1px solid #f0dcb8;
    border-left: 4px solid var(--ca-orange-600);
    border-radius: var(--ca-radius);
    background: var(--ca-warning-bg);
    margin-bottom: 1.5rem;
}

.ca-revisar__icono {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--ca-warning);
    line-height: 1.3;
}

.ca-revisar__titulo {
    margin: 0 0 .5rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ca-warning);
}

/* Ficha de datos en modo lectura */
.ca-datos {
    display: grid;
    gap: .25rem;
    font-size: .8438rem;
    color: var(--ca-navy-800);
    line-height: 1.5;
}

.ca-datos__nombre {
    font-size: .9375rem;
    font-weight: 700;
}

.ca-datos__et {
    color: var(--ca-gray-600);
}

/* ==========================================================================
   19. AMPLIACIÓN — Detalle del proyecto
   Componentes nuevos. No se modifica ninguna regla anterior.
   ========================================================================== */

/* ------------------------------------------ 19.1 Barra de datos del proyecto */
.ca-proyecto {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--ca-navy-800);
    color: #cfe0ec;
}

.ca-proyecto__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-block: .625rem;
}

.ca-proyecto__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2rem;
    min-width: 0;
}

.ca-proyecto__dato {
    display: flex;
    flex-direction: column;
    gap: .0625rem;
    min-width: 0;
}

.ca-proyecto__et {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8faabf;
}

.ca-proyecto__valor {
    font-size: .875rem;
    font-weight: 700;
    color: #fff;
}

/* Estado del proyecto: siempre visible en la cabecera, resaltado con un
   distintivo de color según el momento del ciclo (pendiente / tarificado / emitida). */
.ca-proyecto__estado {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    align-self: flex-start;
    margin-top: .0625rem;
    padding: .125rem .5625rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}
.ca-proyecto__estado::before {
    content: "";
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.ca-proyecto__estado--pendiente { background: rgba(229, 166, 64, .18);  color: #f0c079; }
.ca-proyecto__estado--tarificado { background: rgba(56, 152, 182, .22); color: #7ec7dd; }
.ca-proyecto__estado--emitida   { background: rgba(45, 158, 90, .24);   color: #7fd39a; }

/* Nota de andamiaje de maqueta: enlace discreto entre estados de la demo.
   No forma parte de la aplicación; se elimina al integrar. */
.ca-demo-nota {
    margin-top: 1.5rem;
    padding-top: .75rem;
    border-top: 1px dashed var(--ca-gray-300);
    font-size: .8125rem;
    color: var(--ca-gray-600);
}
.ca-demo-nota i { color: var(--ca-gray-500); }

/* ------------------------------------------------------- 19.2 Pestañas */
.ca-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid var(--ca-gray-300);
    background: var(--ca-gray-100);
}

.ca-tab {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem 1rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--ca-radius) var(--ca-radius) 0 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    background: transparent;
    position: relative;
    bottom: -2px;
    white-space: nowrap;
}

.ca-tab:hover {
    background: #fff;
    color: var(--ca-navy-800);
    text-decoration: none;
}

.ca-tab.is-activa {
    background: #fff;
    color: var(--ca-navy-800);
    border-color: var(--ca-gray-300);
    border-bottom: 2px solid #fff;
}

/* Indicador de estado de cada pestaña */
.ca-tab__estado {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 .3125rem;
    border-radius: 999px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
}

.ca-tab__estado--ok {
    background: transparent;
    color: var(--ca-success);
    font-size: 1rem;
}

.ca-tab__estado--avisos {
    background: var(--ca-orange);
    color: #3a2703;
}

.ca-tab__estado--neutro {
    background: transparent;
    color: var(--ca-gray-500);
    font-size: .95rem;
}

/* Panel bajo las pestañas */
.ca-tab-panel {
    background: #fff;
    border: 1px solid var(--ca-gray-300);
    border-top: 0;
    border-radius: 0 0 var(--ca-radius) var(--ca-radius);
    padding: 1.5rem;
}

/* ------------------------------- 19.3 Ítems seleccionables (capital/cobertura)
   Patrón tomado de la pantalla de referencia detalle_modulo.html, adaptado a la
   paleta y a las reglas de esta maquetación.                                  */
.ca-items {
    display: grid;
    gap: .75rem;
}

.ca-item {
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius);
    background: #fff;
    padding: .875rem 1rem;
    transition: border-color .15s ease, background-color .15s ease;
}

.ca-item:hover {
    border-color: var(--ca-teal-500);
}

/* Seleccionado: se tiñe para que se distinga de un vistazo */
.ca-item.is-activo {
    border-color: var(--ca-success);
    background: var(--ca-success-bg);
}

.ca-item__cab {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.ca-item__check {
    flex-shrink: 0;
    margin-top: .1875rem;
    width: 20px;
    height: 20px;
}

.ca-item__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.ca-item__titulo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ca-navy-800);
    margin: 0;
}

.ca-item__et {
    font-weight: 400;
    color: var(--ca-gray-600);
}

.ca-item__desc {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--ca-gray-600);
    line-height: 1.45;
}

.ca-item__acciones {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Las píldoras sólo se muestran cuando el ítem está seleccionado */
.ca-item__datos {
    display: none;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
    padding-left: 2.1875rem;
}

.ca-item.is-activo .ca-item__datos {
    display: flex;
}

/* --------------------------------------------------- 19.4 Píldoras de dato */
.ca-pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    border: 0;
    background: var(--ca-teal-600);
    color: #fff;
    font-size: .75rem;
    line-height: 1.3;
    cursor: pointer;
    position: relative;
    text-align: left;
}

.ca-pill:hover {
    background: var(--ca-teal-700);
}

/* Dato obligatorio sin rellenar */
.ca-pill--falta {
    background: var(--ca-danger);
}

.ca-pill--falta:hover {
    background: #8f2029;
}

/* Dato OPCIONAL sin valor (p. ej. selección múltiple sin marcar): informativo, no pendiente ⇒ gris, no rojo */
.ca-pill--opcional {
    background: var(--ca-gray-500);
}

.ca-pill--opcional:hover {
    background: var(--ca-gray-600);
}

.ca-pill__et {
    opacity: .85;
}

.ca-pill__valor {
    font-weight: 700;
}

/* Explicación del dato: se despliega al pulsar la píldora */
.ca-pill__ayuda {
    display: none;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    z-index: 20;
    width: 280px;
    max-width: 80vw;
    padding: .625rem .75rem;
    border-radius: var(--ca-radius-sm);
    background: var(--ca-navy-900);
    color: #fff;
    font-size: .75rem;
    font-weight: 400;
    line-height: 1.45;
    box-shadow: var(--ca-shadow-md);
    cursor: auto;
}

.ca-pill.is-abierta .ca-pill__ayuda {
    display: block;
}

.ca-pill__ayuda::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 1rem;
    border: 6px solid transparent;
    border-bottom-color: var(--ca-navy-900);
}

/* ----------------------------------------------- 19.5 Liquidación económica
   Desglose detallado del cálculo (columna ancha, izquierda) + panel de
   resumen con el coste al tomador destacado (columna estrecha, derecha).
   Patrón de "resumen de compra": el dato que importa —lo que paga el
   tomador— manda visualmente; el detalle queda ordenado y a mano. */
.ca-econ {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 992px) {
    .ca-econ {
        grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr);
    }
}

/* --- Columna de detalle: grupos en dos subcolumnas en pantallas anchas --- */
.ca-econ__detalle {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    align-content: start;
}

@media (min-width: 576px) {
    .ca-econ__detalle {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.ca-econ__grupo {
    min-width: 0;
}

.ca-econ__titulo {
    margin: 0 0 .25rem;
    padding-bottom: .375rem;
    border-bottom: 2px solid var(--ca-gray-200);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ca-teal-700);
}

.ca-econ__linea {
    display: grid;
    grid-template-columns: 1fr auto minmax(2.75rem, auto);
    gap: 0 .75rem;
    align-items: baseline;
    padding: .4375rem 0;
    border-bottom: 1px solid var(--ca-gray-100);
    font-size: .875rem;
}

.ca-econ__linea:last-child {
    border-bottom: 0;
}

.ca-econ__concepto {
    color: var(--ca-gray-700);
    min-width: 0;
}

.ca-econ__importe {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ca-navy-800);
    text-align: right;
    white-space: nowrap;
}

.ca-econ__pct {
    font-size: .75rem;
    color: var(--ca-gray-600);
    text-align: right;
    white-space: nowrap;
}

/* --- Columna de resumen: el coste al tomador, destacado --- */
.ca-econ__resumen {
    align-self: start;
    background: var(--ca-surface);
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    padding: 1.25rem 1.375rem 1.375rem;
}

.ca-econ__resumen-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ca-gray-600);
}

.ca-econ__resumen-total {
    display: block;
    margin-top: .1875rem;
    font-size: 2.125rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--ca-teal-700);
    font-variant-numeric: tabular-nums;
}

.ca-econ__resumen-nota {
    display: block;
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--ca-gray-600);
}

.ca-econ__resumen-lineas {
    margin-top: 1.125rem;
    padding-top: .875rem;
    border-top: 1px solid var(--ca-gray-200);
}

.ca-econ__resumen .ca-econ__linea {
    grid-template-columns: 1fr auto;
}

/* Línea destacada dentro del resumen (p. ej. importe a transferir) */
.ca-econ__linea--fuerte .ca-econ__concepto,
.ca-econ__linea--fuerte .ca-econ__importe {
    font-weight: 700;
    color: var(--ca-navy-800);
}

/* Aviso de que aún no hay tarifa */
.ca-sin-tarifa {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem;
    border: 1px dashed var(--ca-gray-400);
    border-radius: var(--ca-radius);
    background: var(--ca-gray-050);
    color: var(--ca-gray-600);
    font-size: .875rem;
}

/* --------------------------------------------- 19.6 Avisos del proyecto */
.ca-avisos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .375rem;
}

.ca-avisos li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem .75rem;
    border-radius: var(--ca-radius-sm);
    background: var(--ca-warning-bg);
    border: 1px solid #f0dcb8;
    font-size: .8438rem;
    color: var(--ca-navy-800);
}

.ca-avisos li .bi {
    flex-shrink: 0;
    color: var(--ca-warning);
    margin-top: .125rem;
}

.ca-avisos__que {
    font-weight: 700;
}

/* Aviso propio dentro de «Avisos»: MISMO fondo amarillo que las validaciones del
   sistema; se distingue por el ICONO (calendario, no triángulo). La fila completa
   es clicable (stretched-link) y abre el aviso en un popup (ver/editar/eliminar). */
.ca-avisos li.ca-avisos__item--propio {
    position: relative;
    align-items: center;
    cursor: pointer;
    transition: filter .14s ease;
}

.ca-avisos li.ca-avisos__item--propio:hover {
    filter: brightness(.97);
}

.ca-avisos li.ca-avisos__item--propio > .bi {
    margin-top: 0;
}

/* --------------------------------------- 19.7 Estado de validación SIGPAC */
.ca-sigpac {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: .25rem;
    font-size: .75rem;
    font-weight: 600;
}

.ca-sigpac--ok { color: var(--ca-success); }
.ca-sigpac--error { color: var(--ca-danger); }
.ca-sigpac--cargando { color: var(--ca-gray-600); }

/* Cabecera de navegación entre parcelas */
.ca-parcela-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem 1rem;
    background: var(--ca-teal-700);
    color: #fff;
    border-radius: var(--ca-radius) var(--ca-radius) 0 0;
}

.ca-parcela-nav__titulo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: #fff;
}

/* Pie de acciones de la ficha en edición. Cierra la tarjeta a ancho completo,
   como contrapunto suave a la cabecera de navegación (teal oscuro): mismo ancho
   de borde a borde, pero en gris claro. Reutiliza .ca-form-actions para el
   layout, el apilado responsive y el ocultar-en-impresión; aquí sólo se anula
   el comportamiento sticky y se le da aspecto de barra que remata la tarjeta. */
.ca-edicion-footer {
    position: static;
    background: #dfe1e2;
    border-top: 1px solid #cdd0d2;
    border-radius: 0 0 var(--ca-radius) var(--ca-radius);
    box-shadow: none;
}

/* Sobre el pie gris, el botón «Cancelar y salir» (outline por defecto,
   transparente) se fundiría; se le da un relleno un punto más oscuro que el pie
   para que resalte como control. El hover oscuro de Bootstrap se conserva. */
.ca-edicion-footer .btn-outline-secondary {
    --bs-btn-bg: #cdcfd1;
    --bs-btn-border-color: #b7babd;
    --bs-btn-color: var(--ca-gray-700);
}

.ca-parcela-nav .btn {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, .15);
    --bs-btn-border-color: rgba(255, 255, 255, .35);
    --bs-btn-hover-color: var(--ca-teal-700);
    --bs-btn-hover-bg: #fff;
}

/* --------------------------------------------------- 19.8 Póliza emitida */
.ca-emitida {
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: 1rem 1.25rem;
    border: 1px solid #b9dfc5;
    border-left: 4px solid var(--ca-success);
    border-radius: var(--ca-radius);
    background: var(--ca-success-bg);
    margin-bottom: 1.5rem;
}

.ca-emitida__icono {
    font-size: 1.5rem;
    color: var(--ca-success);
    flex-shrink: 0;
}

.ca-emitida__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ca-success);
}

.ca-emitida__texto {
    margin: 0;
    font-size: .8438rem;
    color: var(--ca-gray-700);
}

/* Campos en modo lectura tras la emisión */
.ca-lectura {
    background: var(--ca-gray-050);
    border-color: var(--ca-gray-200);
    color: var(--ca-gray-700);
}

@media (max-width: 767.98px) {
    .ca-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .ca-item__datos {
        padding-left: 0;
    }
}

/* ==========================================================================
   20. Multiselect en modo simple — ajuste de tema
   La estructura vive en multiselect.css; aquí sólo el color de la marca de
   la opción ya elegida.
   ========================================================================== */
.ms-select--simple .ms-select__option.is-selected {
    background: var(--ca-info-bg);
}

.ms-select--simple .ms-select__option.is-selected::after {
    content: "26e";
    font-family: "bootstrap-icons";
    float: right;
    color: var(--ca-teal-600);
    font-size: .875rem;
    margin-left: .5rem;
}

/* ==========================================================================
   21. Vista de edición de una ficha (parcela / explotación)
   --------------------------------------------------------------------------
   Al editar una parcela o una explotación NO se muestran las pestañas del
   expediente: hay que guardar o salir antes de moverse a otra sección. La
   barra de navegación entre fichas pasa a ser el elemento principal.
   ========================================================================== */

/* Panel sin pestañas encima: se cierra por arriba y se redondea entero */
.ca-tab-panel--edicion {
    border-top: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius);
}

/* ------------------------------------------- Barra de navegación de ficha */
.ca-parcela-nav {
    flex-wrap: wrap;
    gap: .5rem .75rem;
    padding: .75rem 1rem;
}

/* Anterior / etiqueta / siguiente, agrupados a la izquierda. El botón de
   duplicar queda a la derecha (lo separa el justify-content del contenedor). */
.ca-parcela-nav__grupo {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Cuando las flechas flanquean la etiqueta van sin rótulo: sólo el icono, con
   objetivo de pulsación holgado. */
.ca-parcela-nav__btn--flecha {
    padding: .375rem .5625rem;
    font-size: 1rem;
}

/* Duplicar: presente pero discreto. Hereda el translúcido de .ca-parcela-nav .btn. */
.ca-parcela-nav__duplicar {
    flex-shrink: 0;
}

.ca-parcela-nav__centro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .125rem;
    min-width: 0;
    text-align: center;
}

.ca-parcela-nav__titulo {
    font-size: 1.0625rem;
}

.ca-parcela-nav__sub {
    font-size: .75rem;
    color: #a9c9d8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Cabecera con flechas anterior/siguiente flanqueando la etiqueta, alineada a la izquierda de la barra. */
.ca-parcela-nav__grupo--nav {
    flex: 1;
}

/* Flecha de navegación entre parcelas/explotaciones: solo icono (flecha doble), SIN fondo. */
.ca-nav-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    color: #fff;
    background: none;
    border: 0;
    border-radius: var(--ca-radius-sm);
    font-size: 1.25rem;
    line-height: 1;
    text-decoration: none;
    opacity: .85;
    transition: opacity .15s ease, background-color .15s ease;
}

.ca-nav-flecha:hover,
.ca-nav-flecha:focus-visible {
    opacity: 1;
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

/* Extremo (primera/última, o parcela única): atenuada y sin interacción. */
.ca-nav-flecha--off {
    opacity: .3;
    pointer-events: none;
    cursor: default;
}

/* Botones de anterior/siguiente: destacados, con rótulo y objetivo amplio */
.ca-parcela-nav__btn {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
    padding: .5rem 1rem;
    border-radius: var(--ca-radius-sm);
    font-size: .875rem;
    font-weight: 600;
    background: #fff;
    color: var(--ca-teal-700);
    border: 1px solid #fff;
    white-space: nowrap;
}

.ca-parcela-nav__btn:hover {
    background: var(--ca-info-bg);
    color: var(--ca-navy-800);
    border-color: var(--ca-info-bg);
    text-decoration: none;
}

.ca-parcela-nav__btn:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

.ca-parcela-nav__btn .bi {
    font-size: 1rem;
}

/* Sin ficha anterior o siguiente */
.ca-parcela-nav__btn.is-inerte {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .25);
    color: #a9c9d8;
    pointer-events: none;
}

/* En pantallas estrechas el rótulo estorba: quedan sólo las flechas */
@media (max-width: 575.98px) {
    .ca-parcela-nav__btn span {
        display: none;
    }

    .ca-parcela-nav__btn {
        padding: .5rem .625rem;
    }
}

/* ============================================================================
   22. COLECTIVOS
   ========================================================================= */

/* ------------------------------------------- 22.1 Distintivos de actividad
   Alias semánticos sobre la escala de .ca-badge ya existente: un colectivo
   está activo o inactivo, no es una «póliza» ni está «anulada». Mismos
   colores, nombre acorde al dato. */
.ca-badge--activo {
    background: var(--ca-success-bg);
    color: var(--ca-success);
    border-color: #b9dfc5;
}

.ca-badge--inactivo {
    background: var(--ca-danger-bg);
    color: var(--ca-danger);
    border-color: #f0c4c9;
}

/* ------------------------------------------------- 22.2 Banner de estado
   Bloque de situación de un registro dentro de su propia ficha: icono a la
   izquierda, titular y una línea de detalle. Es la versión genérica de
   .ca-emitida (que queda para la póliza ya emitida), con modificador de color
   según el estado. Úsalo para cualquier ficha que deba declarar en qué
   situación está el registro que se está editando. */
.ca-estado {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border: 1px solid var(--ca-gray-300);
    border-left: 4px solid var(--ca-gray-500);
    border-radius: var(--ca-radius);
    background: var(--ca-gray-050);
}

.ca-estado__icono {
    font-size: 1.375rem;
    line-height: 1;
    color: var(--ca-gray-600);
    flex-shrink: 0;
}

.ca-estado__titulo {
    margin: 0;
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ca-gray-700);
}

.ca-estado__texto {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.35;
    color: var(--ca-gray-600);
}

/* Activo: el colectivo ya opera */
.ca-estado--activo {
    background: var(--ca-success-bg);
    border-color: #b9dfc5;
    border-left-color: var(--ca-success);
}

.ca-estado--activo .ca-estado__icono,
.ca-estado--activo .ca-estado__titulo {
    color: var(--ca-success);
}

/* Pendiente: falta que Agroseguro lo valide */
.ca-estado--pendiente {
    background: var(--ca-warning-bg);
    border-color: #f0dcb8;
    border-left-color: var(--ca-orange-600);
}

.ca-estado--pendiente .ca-estado__icono,
.ca-estado--pendiente .ca-estado__titulo {
    color: var(--ca-warning);
}

/* Inactivo: existe pero no admite emisión */
.ca-estado--inactivo {
    background: var(--ca-danger-bg);
    border-color: #f0c4c9;
    border-left-color: var(--ca-danger);
}

.ca-estado--inactivo .ca-estado__icono,
.ca-estado--inactivo .ca-estado__titulo {
    color: var(--ca-danger);
}

/* --------------------------------------- 22.3 Documentos descargables (PDF)
   Los documentos de un registro no son campos que rellenar, así que van sobre
   un fondo propio (tintado en azul de información) que los separa del resto
   del formulario. Dentro, cada documento es una tarjeta blanca: se lee como
   un elemento pulsable y no como un bloque de texto. */
.ca-docs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .625rem;
    margin: 0;
    padding: .75rem;
    list-style: none;
    background: var(--ca-info-bg);
    border: 1px solid #bcd9e8;
    border-radius: var(--ca-radius);
}

.ca-doc {
    display: flex;
    align-items: center;
    gap: .625rem;
    height: 100%;
    padding: .625rem .75rem;
    background: #fff;
    border: 1px solid #bcd9e8;
    border-radius: var(--ca-radius-sm);
    color: var(--ca-gray-700);
    text-decoration: none;
}

.ca-doc:hover,
.ca-doc:focus-visible {
    border-color: var(--ca-teal-500);
    background: #fff;
    color: var(--ca-navy-800);
    text-decoration: none;
}

/* El glifo ya dibuja las siglas «PDF»; el rojo es la convención universal de
   tipo de archivo y no un estado de error. */
.ca-doc__icono {
    flex-shrink: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ca-danger);
}

.ca-doc__texto {
    min-width: 0;
}

.ca-doc__nombre {
    display: block;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.3;
}

.ca-doc__meta {
    display: block;
    margin-top: .125rem;
    font-size: .75rem;
    color: var(--ca-gray-600);
}

.ca-doc__accion {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 1rem;
    color: var(--ca-teal-600);
}

/* ============================================================================
   23. Datos económicos y emisión: cascada de coste, incidencias y demostrador
   ========================================================================= */

/* --- 23.1 Cuadro de avisos: variante informativa (proceso en curso) -------
   El banner .ca-estado ya cubre activo/pendiente/inactivo; falta el tono
   informativo para "tarificando…" o "no disponible todavía". */
.ca-estado--info {
    background: var(--ca-info-bg);
    border-color: #bcd9e8;
    border-left-color: var(--ca-teal-600);
}
.ca-estado--info .ca-estado__icono,
.ca-estado--info .ca-estado__titulo {
    color: var(--ca-teal-700);
}

/* Enlace "ver detalle" dentro del cuadro de avisos */
.ca-estado__accion {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    font-size: .8125rem;
    font-weight: 600;
}

/* --- 23.2 Cascada de coste -------------------------------------------------
   El desglose reutiliza el contenedor .ca-econ (grid detalle | resumen), pero
   el detalle es aquí una CASCADA de una sola columna: el flujo del dinero, de
   la prima bruta a lo que paga el tomador, con niveles que se despliegan. */
.ca-econ--cascada .ca-econ__detalle {
    display: block;              /* anula las dos subcolumnas de la liquidación */
}

/* Capital asegurado total: encabeza el desglose */
.ca-cap-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .625rem .875rem;
    margin-bottom: .875rem;
    background: var(--ca-surface);
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius-sm);
}
.ca-cap-total__label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-gray-700);
}
.ca-cap-total__valor {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ca-navy-800);
    font-variant-numeric: tabular-nums;
}

/* Cada nivel de la cascada. Deja hueco a la izquierda para el botón. */
.ca-cascada__nivel {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto minmax(3.25rem, auto);
    gap: 0 .625rem;
    align-items: baseline;
    padding: .5rem .25rem;
    border-bottom: 1px solid var(--ca-gray-100);
    font-size: .875rem;
}

.ca-cascada__toggle {
    grid-column: 1;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ca-teal-600);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.ca-cascada__toggle .bi {
    transition: transform .15s ease;
}
.ca-cascada__toggle[aria-expanded="true"] .bi {
    transform: rotate(90deg);
}

.ca-cascada__concepto {
    grid-column: 2;
    color: var(--ca-gray-700);
    min-width: 0;
}
.ca-cascada__importe {
    grid-column: 3;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--ca-navy-800);
}
.ca-cascada__pct {
    grid-column: 4;
    text-align: right;
    white-space: nowrap;
    font-size: .75rem;
    color: var(--ca-gray-600);
}

/* Importe que resta (subvenciones): signo y color de descuento */
.ca-cascada__importe--resta {
    color: var(--ca-success);
}

/* Hitos de la cascada (prima neta bonificada, recibo de prima, cargo al
   tomador): lo que el usuario busca de un vistazo */
.ca-cascada__nivel--hito {
    background: var(--ca-gray-050);
    border-radius: var(--ca-radius-sm);
}
.ca-cascada__nivel--hito .ca-cascada__concepto,
.ca-cascada__nivel--hito .ca-cascada__importe {
    color: var(--ca-navy-800);
    font-weight: 700;
}

/* Bloque que se despliega bajo un nivel: las líneas de su detalle, indentadas
   bajo el concepto (no bajo el botón). */
.ca-cascada__sub {
    padding: .125rem 0 .5rem 1.875rem;
    border-bottom: 1px solid var(--ca-gray-100);
}
.ca-cascada__sub .ca-cascada__linea {
    display: grid;
    grid-template-columns: 1fr auto minmax(3.25rem, auto);
    gap: 0 .625rem;
    align-items: baseline;
    padding: .3125rem 0;
    font-size: .8125rem;
}
.ca-cascada__sub .ca-cascada__importe {
    grid-column: auto;
}
.ca-cascada__nota {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    font-style: italic;
    color: var(--ca-gray-600);
}

/* --- 23.3 Panel de incidencias (errores bloqueantes y avisos) -------------- */
.ca-incidencias {
    display: grid;
    gap: .625rem;
}
.ca-incidencia {
    padding: .75rem .875rem;
    border: 1px solid var(--ca-gray-200);
    border-left: 4px solid var(--ca-gray-400);
    border-radius: var(--ca-radius-sm);
    background: #fff;
}
.ca-incidencia--bloqueante {
    border-color: #f0c4c9;
    border-left-color: var(--ca-danger);
    background: var(--ca-danger-bg);
}
.ca-incidencia--aviso {
    border-color: #f0dcb8;
    border-left-color: var(--ca-orange-600);
    background: var(--ca-warning-bg);
}
.ca-incidencia__cab {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.ca-incidencia__codigo {
    font-family: monospace;
    font-size: .75rem;
    color: var(--ca-gray-600);
}
.ca-incidencia__loc {
    margin-left: auto;
    font-size: .75rem;
    color: var(--ca-gray-600);
}
.ca-incidencia__desc {
    margin: 0;
    font-size: .875rem;
    color: var(--ca-gray-900);
}
.ca-incidencia__mas {
    margin-top: .375rem;
    font-size: .8125rem;
    color: var(--ca-gray-700);
}

/* --- 23.4 Fieldset sin caja -------------------------------------------------
   Agrupa con su leyenda pero sin fondo ni borde: para subdividir en columnas
   temáticas un formulario que ya va sobre superficie tintada (.ca-filters). */
.ca-fieldset--plano {
    background: transparent;
    border: 0;
    padding: 0;
}
.ca-fieldset--plano .ca-fieldset__legend {
    margin-left: 0;
    padding-left: 0;
}

/* ============================================================================
   24. Menú de tarificación: versión discreta y ajustes
   ========================================================================= */

/* Nota "Def. 7,00 %" bajo los campos de comisión: tono cálido, como en la guía
   original. Usa el naranja oscuro, que sí cumple contraste sobre claro. */
.ca-hint--def {
    color: var(--ca-orange-700);
    font-weight: 600;
}

/* --- 24.1 Resumen discreto del menú ya tarificado -------------------------
   Tras tarificar, los parámetros no se editan a diario: se muestran como una
   tira de etiquetas de sólo lectura, con un botón que reabre el menú completo
   en una ventana. Ocupa una línea en vez de un formulario entero. */
.ca-tarif-resumen {
    display: flex;
    align-items: center;
    gap: .625rem 1.75rem;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--ca-info-bg);
    border: 1px solid #bcd9e8;
    border-radius: var(--ca-radius);
}
.ca-tarif-resumen__icono {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--ca-teal-600);
    flex-shrink: 0;
}
.ca-tarif-resumen__dato {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.ca-tarif-resumen__et {
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ca-gray-600);
    white-space: nowrap;
}
.ca-tarif-resumen__valor {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ca-navy-800);
}
.ca-tarif-resumen__accion {
    margin-left: auto;
    flex-shrink: 0;
}

/* Cambios masivos · bloque de filtros en modo lectura: los chips en fila (una sola en pantallas grandes). */
.ca-tarif-resumen__datos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    flex: 1 1 auto;
    min-width: 0;
}
@media (min-width: 992px) {
    .ca-tarif-resumen__datos {
        flex-wrap: nowrap;
        overflow-x: auto;   /* si hubiera muchos (pecuario), desliza en vez de partir la fila */
    }
}

/* Botón de acción solo-icono, discreto (p. ej. engranaje «editar filtros»): pequeño, sin relleno de botón. */
.ca-icono-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    padding: 0;
    color: var(--ca-gray-600);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ca-radius-sm);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.ca-icono-btn:hover,
.ca-icono-btn:focus-visible {
    color: var(--ca-teal-700);
    background: #fff;
    border-color: #bcd9e8;
}

/* --- 24.2 Menú de tarificación: campos en una línea, agrupados por afinidad
   Los campos van a la misma altura (rótulo de una línea + control, sin notas
   colgando que descuadren la base). Los relacionados —aval SAECA, y gastos y
   comisiones— se mantienen juntos y no se parten al reflujar. Las aclaraciones
   pasan a un icono de información en la propia etiqueta. */
.ca-tarif {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem 1.25rem;
}

.ca-tarif__campo {
    display: flex;
    flex-direction: column;
    flex: 0 1 8rem;
    min-width: 6rem;
}
.ca-tarif__campo .form-label,
.ca-tarif__campo .ca-form-static__label {
    white-space: nowrap;
}
.ca-tarif__campo--forma { flex-basis: 16rem; }
.ca-tarif__campo--sm    { flex-basis: 7.5rem; }
.ca-tarif__campo--md    { flex-basis: 10rem; }

/* Grupo de campos afines: quedan pegados y saltan juntos de línea */
.ca-tarif__grupo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    flex: 0 1 auto;
    padding-left: .875rem;
    border-left: 2px solid var(--ca-gray-200);
}

.ca-tarif__accion {
    margin-left: auto;
    align-self: flex-end;
}

/* Icono de información junto a una etiqueta */
.ca-info-icono {
    color: var(--ca-teal-600);
    cursor: help;
    font-size: .8125rem;
}

/* --- 24.3 Cabecera de bloque plegable --------------------------------------
   Barra estrecha y tintada que resume un bloque y lo despliega al pulsar. Se
   usa para el pago/emisión: se muestra cerrado por defecto (puede que el
   cliente aún no vaya a contratar) y se abre bajo demanda. */
.ca-desplegable__cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.25rem;
    flex-wrap: wrap;
    padding: .75rem 1.125rem;
    background: var(--ca-surface);
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
}
.ca-desplegable__chevron {
    transition: transform .15s ease;
}
[aria-expanded="true"] .ca-desplegable__chevron {
    transform: rotate(180deg);
}

/* ============================================================================
   25. Incidencias que escalan (muchos errores del mismo tipo)
   La clave no es paginar 150 filas, sino AGRUPAR por tipo de error: cada
   tarjeta es un tipo, con el número de elementos afectados, y el detalle
   (la lista de parcelas) se consulta en un modal paginado. El panel queda
   compacto aunque haya miles de errores.
   ========================================================================= */
.ca-incidencias__resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem 1.25rem;
    margin-bottom: .875rem;
    font-size: .875rem;
    color: var(--ca-gray-700);
}
.ca-incidencias__resumen strong {
    color: var(--ca-navy-800);
}

/* Contador de afectados en la cabecera de una incidencia */
.ca-incidencia__afecta {
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ca-gray-700);
    white-space: nowrap;
}

/* Chips de los elementos afectados (dentro del modal) */
.ca-afectados {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}
.ca-afectado {
    display: inline-block;
    min-width: 2.5rem;
    text-align: center;
    padding: .1875rem .5rem;
    font-size: .8125rem;
    font-variant-numeric: tabular-nums;
    background: #fff;
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius-sm);
    color: var(--ca-teal-700);
    text-decoration: none;
    white-space: nowrap;
}
.ca-afectado:hover,
.ca-afectado:focus-visible {
    border-color: var(--ca-teal-500);
    background: var(--ca-info-bg);
    color: var(--ca-navy-800);
    text-decoration: none;
}

/* ==========================================================================
   26. Proyecto con póliza emitida (estado post-emisión, sólo lectura)
   Componentes nuevos. No modifican ninguna regla anterior.
   ========================================================================== */

/* --- 26.1 Estado de la póliza + acción de actualizar --------------------- */
.ca-estado-poliza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .875rem;
    margin-bottom: .375rem;
}
.ca-estado-poliza__sync {
    margin: 0 0 .875rem;
    font-size: .8125rem;
    font-style: italic;
    color: var(--ca-gray-600);
}
.ca-estado-poliza__grupo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.ca-estado-poliza__icono {
    color: var(--ca-success);
    font-size: 1.125rem;
    line-height: 1;
}
.ca-estado-poliza__et {
    color: var(--ca-gray-700);
    font-size: .9375rem;
}

/* --- 26.2 Línea de tiempo del historial de la póliza -------------------- */
.ca-timeline {
    list-style: none;
    margin: 0;
    padding: .5rem .75rem;
    border: 1px solid var(--ca-gray-200);
    border-radius: var(--ca-radius);
    background: #fff;
}
.ca-timeline__item {
    position: relative;
    padding: .3125rem 0 .875rem 1.375rem;
    margin-left: .3125rem;
    border-left: 2px solid var(--ca-gray-200);
}
.ca-timeline__item:last-child {
    padding-bottom: .1875rem;
    border-left-color: transparent;
}
.ca-timeline__item::before {
    content: "";
    position: absolute;
    left: -.4375rem;
    top: .5rem;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background: var(--ca-teal-500);
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--ca-teal-500);
}
.ca-timeline__item--hoy::before {
    background: var(--ca-success);
    box-shadow: 0 0 0 1px var(--ca-success);
}
.ca-timeline__titulo {
    margin: 0;
    font-size: .875rem;
    font-weight: 600;
    color: var(--ca-navy-800);
}
.ca-timeline__item--hoy .ca-timeline__titulo { color: var(--ca-success); }
.ca-timeline__doc { margin-left: .25rem; font-size: .8125rem; white-space: nowrap; }
.ca-timeline__fecha {
    display: block;
    margin-top: .0625rem;
    font-size: .75rem;
    font-style: italic;
    color: var(--ca-gray-600);
}

/* --- 26.3 Caja de modificación de la póliza emitida --------------------- */
.ca-modif {
    margin-top: 1.25rem;
    padding: .875rem 1rem;
    background: var(--ca-success-bg);
    border: 1px solid #bcdfc7;
    border-radius: var(--ca-radius);
}
.ca-modif__texto {
    margin: 0 0 .625rem;
    font-size: .8125rem;
    color: var(--ca-gray-700);
}

/* --- 26.3b Banner «modificación en curso» (operación sobre póliza emitida) ---
   Franja naranja de aviso que encabeza las pantallas del cupón de modificación
   (modificacion-proyecto-*). Diferencia el modo edición del modo lectura. */
.ca-modif-curso {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border: 2px solid var(--ca-orange);
    background: var(--ca-warning-bg);
    border-radius: var(--ca-radius);
}
.ca-modif-curso .bi {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--ca-orange-700);
}

/* Delta con signo de la regularización (CALCMOD): cargo en rojo, extorno en verde. */
.ca-reg .cargo { color: var(--ca-danger); font-weight: 600; }
.ca-reg .extorno { color: var(--ca-success); font-weight: 600; }

/* --- 26.4 Ítem en modo lectura (capital / garantía de póliza emitida) ---
   Reaprovecha .ca-item / .ca-pill. El marcador sustituye al checkbox y los
   ítems no seleccionados se atenúan sin mostrar sus píldoras. */
.ca-item__marca {
    flex-shrink: 0;
    width: 22px;
    margin-top: .0625rem;
    font-size: 1.125rem;
    line-height: 1;
    text-align: center;
    color: var(--ca-success);
}
.ca-item__marca.is-vacia { color: var(--ca-gray-400); }
.ca-item--inactiva {
    background: var(--ca-gray-050);
    border-style: dashed;
}
.ca-item--inactiva:hover { border-color: var(--ca-gray-300); }
.ca-item--inactiva .ca-item__titulo { color: var(--ca-gray-700); }

/* Bloque de datos identificativos dentro del popup de detalle */
.ca-detalle-id {
    margin: 0 0 1rem;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ca-gray-900);
}
.ca-detalle-id .ca-datos__et { color: var(--ca-gray-600); }

/* ============================================================================
   27. Operaciones post-emisión: reducción de rendimiento y complementaria
   (maquetas emitida-proyecto-reduccion / -complementaria + sus resumen/lectura).
   Portado de los estilos page-local de esas maquetas a variables --ca-*.
   - Reducción usa la escala «danger» (roja): baja producción → extorno.
   - Complementaria usa la escala «success» (verde): sube producción → recibo.
   ========================================================================== */

/* Pestaña de la operación en curso, destacada en la tira de pestañas. */
.ca-tab--op,
.ca-tab--op.is-activa {
    background: var(--ca-danger);
    color: #fff;
    border-color: var(--ca-danger);
    font-weight: 700;
}
.ca-tab--op:hover { background: var(--ca-danger); color: #fff; }
.ca-tab--op .bi,
.ca-tab--op .ca-tab__estado { color: #fff; }
.ca-tab--op-add,
.ca-tab--op-add.is-activa {
    background: var(--ca-success);
    color: #fff;
    border-color: var(--ca-success);
    font-weight: 700;
}
.ca-tab--op-add:hover { background: var(--ca-success); color: #fff; }
.ca-tab--op-add .bi,
.ca-tab--op-add .ca-tab__estado { color: #fff; }

/* Banda de aviso de la operación (encabeza el panel). */
.ca-op-aviso {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border: 2px solid var(--ca-danger);
    background: var(--ca-danger-bg);
    border-radius: var(--ca-radius);
}
.ca-op-aviso .bi {
    flex-shrink: 0;
    font-size: 1.35rem;
    line-height: 1.4;
    color: var(--ca-danger);
}
.ca-op-aviso--add { border-color: var(--ca-success); background: var(--ca-success-bg); }
.ca-op-aviso--add .bi { color: var(--ca-success); }

/* Barra de herramientas de edición masiva (selección + % + restablecer). */
.ca-red-toolbar {
    background: var(--ca-gray-050);
    border: 1px solid var(--ca-gray-300);
    border-radius: var(--ca-radius);
    padding: .75rem;
    margin-bottom: 1rem;
}

/* Tabla de producciones: sin salto de línea, alineada verticalmente. */
table.ca-red td,
table.ca-red th { white-space: nowrap; vertical-align: middle; }

/* Campo de nueva producción (kg) y sus estados de edición. */
.np { width: 8rem; text-align: right; }
.np.invalid { border-color: var(--ca-danger); background: var(--ca-danger-bg); }
tr.is-mod { background: var(--ca-warning-bg); }
tr.is-mod .np { border-color: var(--ca-orange); background: #fffbeb; }

/* Deltas con signo. */
.ca-red .baja,
.baja { color: var(--ca-danger); font-weight: 600; }
.ca-red .sube,
.sube { color: var(--ca-success); font-weight: 600; }

/* Lista de resumen de cambios (modificación aplicada, lectura). */
.ca-cambios { margin: 0; padding-left: 1.1rem; }
.ca-cambios li { margin-bottom: .25rem; }

/* Desglose de coste de la complementaria (dl en rejilla). */
.ca-coste { margin: 0; }
.ca-coste dt { font-weight: 400; color: var(--ca-gray-600); margin: 0; }
.ca-coste dd { font-weight: 600; text-align: right; margin: 0; }
.ca-coste .total dt,
.ca-coste .total dd { font-weight: 700; }
.ca-coste .total dd { font-size: 1.15rem; color: var(--ca-success); }

/* FASE 4 (§4.1) · Dato variable INFORMATIVO (sin elección posible): literal F/C/N u opción única auto-fijada.
   Preserva la maqueta del campo editable (mismo alto/padding/borde/radio/tipografía que .form-control): solo cambia
   el control del valor por una etiqueta read-only. Gris azulado, distinto del blanco editable, del amarillo
   .ca-pendiente y del borde azul .ca-colectivo. */
.ca-informativo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: calc(1.5em + .75rem + 2px);   /* alto de .form-control (bootstrap) */
  padding: .375rem .75rem;                   /* padding de .form-control */
  font-size: 1rem;
  line-height: 1.5;
  background: #eef1f6;                        /* gris azulado suave */
  color: #475569;                            /* slate-600 atenuado */
  border: 1px solid #cbd5e1;                 /* mismo grosor que el input editable */
  border-left: 3px solid #94a3b8;            /* acento izquierdo = solo lectura / informativo */
  border-radius: var(--bs-border-radius, .375rem);
  cursor: default;
}
.ca-informativo__valor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-informativo__icono { flex-shrink: 0; opacity: .55; font-size: .85em; }

/* §2 flecos · Observaciones de un dato variable (info de contratación, sobre todo en tipoValor C). Informativo, resaltado
   suave bajo la descripción; no confundir con el hint neutro (.ca-hint). */
.ca-observaciones {
  font-size: .8125rem;
  color: #7c5e10;                /* ámbar oscuro legible */
  background: #fdf6e3;           /* ámbar muy suave */
  border-left: 3px solid #d9a441;
  border-radius: .25rem;
  padding: .35rem .5rem;
}
.ca-observaciones .bi { opacity: .8; }