/* =====================================================================
   Resonum · CSS Compatibility Bridge
   Maps old Flora variables → new Flora variables.
   Also defines old form-input/form-grupo/form-label classes using
   new Flora tokens so existing form views work without modification.
   ===================================================================== */

/* ── Variable bridge ──────────────────────────────────────────────── */
:root {
    /* Accent / primary color */
    --color-primario:       var(--fl-acento);
    --c-p-sutil:            color-mix(in srgb, var(--fl-acento) 12%, var(--fl-fondo-superficie));
    --c-p-claro:            color-mix(in srgb, var(--fl-acento) 30%, transparent);
    --c-p-oscuro:           var(--fl-acento-700, var(--fl-acento));

    /* Spacing */
    --sp-1: var(--fl-sp-1);
    --sp-2: var(--fl-sp-2);
    --sp-3: var(--fl-sp-3);
    --sp-4: var(--fl-sp-4);
    --sp-5: var(--fl-sp-5);
    --sp-6: var(--fl-sp-6);

    /* Border radii */
    --r-sm: var(--fl-r-sm);
    --r-md: var(--fl-r-md);
    --r-lg: var(--fl-r-lg);
    --r-xl: var(--fl-r-xl);

    /* Typography */
    --text-xs:   var(--fl-texto-xs);
    --text-sm:   var(--fl-texto-sm);
    --text-base: var(--fl-texto-base);
    --text-lg:   var(--fl-texto-lg);
    --text-xl:   var(--fl-texto-xl);
    --fw-regular:  var(--fl-peso-regular);
    --fw-medium:   var(--fl-peso-medio);
    --fw-semibold: var(--fl-peso-semibold);
    --fw-bold:     var(--fl-peso-bold);

    /* Base colors */
    --color-texto:       var(--fl-texto);
    --color-texto-suave: var(--fl-texto-suave);
    --color-borde:       var(--fl-borde);
    --color-fondo:       var(--fl-fondo);
    --color-superficie:  var(--fl-fondo-superficie);

    /* Semantic: info */
    --c-info-fondo: color-mix(in srgb, var(--fl-info, #3b82f6) 12%, var(--fl-fondo-superficie));
    --c-info-texto: var(--fl-info, #3b82f6);

    /* Semantic: success */
    --c-exito-fondo: color-mix(in srgb, var(--fl-exito, #22c55e) 12%, var(--fl-fondo-superficie));
    --c-exito-texto: color-mix(in srgb, var(--fl-exito, #22c55e) 70%, #000);

    /* Semantic: warning */
    --c-advertencia-fondo: color-mix(in srgb, var(--fl-alerta, #f59e0b) 15%, var(--fl-fondo-superficie));
    --c-advertencia-texto: color-mix(in srgb, var(--fl-alerta, #f59e0b) 60%, #000);

    /* Semantic: error */
    --c-error-fondo: color-mix(in srgb, var(--fl-error, #ef4444) 12%, var(--fl-fondo-superficie));
    --c-error-texto: var(--fl-error, #ef4444);

    /* Shadows (old names) */
    --sombra-sm: var(--fl-sombra-sm);
    --sombra-md: var(--fl-sombra-md);
    --s-2:       var(--fl-sombra-sm);
    --s-3:       var(--fl-sombra-md);
    --s-p-xs:    var(--fl-sombra-xs);
    --s-p-md:    var(--fl-sombra-md);

    /* Typography extras */
    --fw-normal:  var(--fl-peso-regular);
    --lh-tight:   var(--fl-lh-compacta);
    --ls-tight:   var(--fl-ls-compacto);
    --ls-wide:    var(--fl-ls-amplio);
    --ls-wider:   var(--fl-ls-amplio);
    --ls-widest:  var(--fl-ls-mayus);
    --text-md:    var(--fl-texto-base);

    /* Border radius extras */
    --r-full: var(--fl-r-full);

    /* Transitions */
    --t-1:       0.1s ease;
    --t-2:       0.2s ease;
    --t-3:       0.3s ease;
    --t-spring:  0.3s cubic-bezier(0.34,1.56,0.64,1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-index */
    --z-sticky:  var(--fl-z-pegajoso);
    --z-spinner: var(--fl-z-maximo);

    /* Secondary palette color (sidebar uses --color-secundario for top bar) */
    --color-secundario: color-mix(in srgb, var(--fl-acento) 55%, #1a0000);
}

/* ── Old layout utilities ─────────────────────────────────────────── */
.centrar-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--fl-sp-3);
}

.centrar-texto { text-align: center; }

.separador { height: 40px; }

/* ── Old form classes ─────────────────────────────────────────────── */
.form-grupo {
    display: flex;
    flex-direction: column;
    gap: var(--fl-sp-2);
    width: 100%;
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-medio);
    color: var(--fl-texto);
    line-height: 1.4;
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    min-height: var(--fl-alto-control-md, 38px);
    padding: 0 var(--fl-sp-3);
    font-family: inherit;
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-regular);
    line-height: 1.5;
    color: var(--fl-texto-fuerte);
    background: var(--fl-fondo-superficie);
    border: 1px solid var(--fl-borde-fuerte);
    border-radius: var(--fl-r-md);
    box-shadow: var(--fl-sombra-xs, 0 1px 2px rgba(0,0,0,.05));
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    box-sizing: border-box;
}

.form-textarea {
    min-height: unset;
    padding: var(--fl-sp-2) var(--fl-sp-3);
    resize: vertical;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--fl-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-acento) 20%, transparent);
}

.form-input:disabled,
.form-select:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.form-error {
    font-size: var(--fl-texto-xs);
    color: var(--fl-error, #ef4444);
    margin-top: var(--fl-sp-1);
}

.form-help, small.coro-form-ayuda {
    font-size: var(--fl-texto-xs);
    color: var(--fl-texto-tenue, var(--fl-texto-suave));
    display: block;
    margin-top: var(--fl-sp-1);
}

/* ── Old form wrapper ─────────────────────────────────────────────── */
.formulario-base {
    display: flex;
    flex-direction: column;
    gap: var(--fl-sp-5);
}

/* ── Old coro form helpers ────────────────────────────────────────── */
.coro-form-acciones {
    display: flex;
    gap: var(--fl-sp-3);
    justify-content: flex-end;
    padding-top: var(--fl-sp-4);
    border-top: 1px solid var(--fl-borde);
    margin-top: var(--fl-sp-2);
    flex-wrap: wrap;
}

.coro-ensayo-fila,
.coro-fila-2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--fl-sp-4);
}

/* ── Old alert classes ────────────────────────────────────────────── */
.alerta {
    padding: var(--fl-sp-3) var(--fl-sp-4);
    border-radius: var(--fl-r-lg);
    border-left: 4px solid transparent;
    font-size: var(--fl-texto-sm);
    margin-bottom: var(--fl-sp-4);
}

.alerta .alerta-texto { display: block; }

.alerta.exito {
    background: color-mix(in srgb, var(--fl-exito, #22c55e) 10%, var(--fl-fondo-superficie));
    border-color: var(--fl-exito, #22c55e);
    color: color-mix(in srgb, var(--fl-exito, #22c55e) 60%, #000);
}

.alerta.error {
    background: color-mix(in srgb, var(--fl-error, #ef4444) 10%, var(--fl-fondo-superficie));
    border-color: var(--fl-error, #ef4444);
    color: color-mix(in srgb, var(--fl-error, #ef4444) 60%, #000);
}

.alerta.advertencia {
    background: color-mix(in srgb, var(--fl-alerta, #f59e0b) 10%, var(--fl-fondo-superficie));
    border-color: var(--fl-alerta, #f59e0b);
    color: color-mix(in srgb, var(--fl-alerta, #f59e0b) 60%, #000);
}

.alerta.informacion {
    background: color-mix(in srgb, var(--fl-info, #3b82f6) 10%, var(--fl-fondo-superficie));
    border-color: var(--fl-info, #3b82f6);
    color: color-mix(in srgb, var(--fl-info, #3b82f6) 60%, #000);
}

/* ── Finanzas section counter cards ──────────────────────────────── */
.contab-cifra { font-size: 1.35rem; font-weight: 700; color: var(--fl-texto-fuerte); margin: .25rem 0; }
.contab-cifra-grande { font-size: 1.75rem; color: var(--fl-acento); }
.contab-cifra-ingreso { color: var(--fl-exito, #16a34a); }
.contab-cifra-egreso  { color: var(--fl-error, #dc2626); }

/* ── Finanzas tabs ────────────────────────────────────────────────── */
.finanzas-tabs {
    display: flex;
    gap: var(--fl-sp-2);
    margin-bottom: var(--fl-sp-5);
    border-bottom: 2px solid var(--fl-borde);
    overflow-x: auto;
}

.finanzas-tab {
    display: flex;
    align-items: center;
    gap: var(--fl-sp-2);
    padding: var(--fl-sp-3) var(--fl-sp-4);
    text-decoration: none;
    color: var(--fl-texto-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--fl-r-sm) var(--fl-r-sm) 0 0;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}

.finanzas-tab:hover { color: var(--fl-acento); }

.finanzas-tab-activo {
    color: var(--fl-acento);
    border-bottom-color: var(--fl-acento);
    font-weight: var(--fl-peso-semibold);
}

.finanzas-tab-icono { font-size: 1.1rem; }
.finanzas-tab-texto strong { display: block; font-size: var(--fl-texto-sm); }
.finanzas-tab-texto small  { display: block; font-size: var(--fl-texto-xs); color: var(--fl-texto-tenue); }

/* ── Asistencia pill estados ──────────────────────────────────────── */
.asistencia-estados {
    display: flex;
    gap: var(--fl-sp-1-5);
    flex-wrap: wrap;
}

.asistencia-estado { cursor: pointer; }
.asistencia-estado input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }

.asistencia-estado-pill {
    display: inline-flex;
    align-items: center;
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: var(--fl-texto-xs);
    font-weight: var(--fl-peso-semibold);
    border: 1.5px solid transparent;
    cursor: pointer;
    transition: background .12s, border-color .12s, opacity .12s;
    opacity: .6;
}

.asistencia-estado input:checked + .asistencia-estado-pill { opacity: 1; }

.pill-presente  { background: color-mix(in srgb, var(--fl-exito, #22c55e) 15%, var(--fl-fondo)); border-color: var(--fl-exito, #22c55e); color: color-mix(in srgb, var(--fl-exito, #22c55e) 70%, #000); }
.pill-ausente   { background: color-mix(in srgb, var(--fl-error, #ef4444) 15%, var(--fl-fondo)); border-color: var(--fl-error, #ef4444); color: color-mix(in srgb, var(--fl-error, #ef4444) 70%, #000); }
.pill-justificado { background: color-mix(in srgb, var(--fl-alerta, #f59e0b) 15%, var(--fl-fondo)); border-color: var(--fl-alerta, #f59e0b); color: color-mix(in srgb, var(--fl-alerta, #f59e0b) 70%, #000); }

.pill-solo { opacity: 1; cursor: default; }

.asistencia-observacion {
    width: 100%;
    max-width: 220px;
    padding: .25rem .5rem;
    font-size: var(--fl-texto-xs);
    border: 1px solid var(--fl-borde);
    border-radius: var(--fl-r-sm);
    background: var(--fl-fondo-superficie);
    color: var(--fl-texto);
}

/* ── Asistencia ver: counter boxes ───────────────────────────────── */
.asistencia-ver-contenedor { }

/* ── Coro conflicto alert ─────────────────────────────────────────── */
.coro-conflicto-alerta {
    background: color-mix(in srgb, var(--fl-alerta, #f59e0b) 10%, var(--fl-fondo-superficie));
    border: 1px solid color-mix(in srgb, var(--fl-alerta, #f59e0b) 40%, transparent);
    border-radius: var(--fl-r-lg);
    padding: var(--fl-sp-4);
    margin-bottom: var(--fl-sp-5);
}

.coro-conflicto-titulo {
    display: flex;
    gap: var(--fl-sp-3);
    align-items: flex-start;
    margin-bottom: var(--fl-sp-3);
}

.coro-conflicto-icono { font-size: 1.5rem; flex-shrink: 0; }
.coro-conflicto-lista { margin: var(--fl-sp-2) 0 var(--fl-sp-2) var(--fl-sp-4); }
.coro-conflicto-lista li { margin-bottom: var(--fl-sp-1); display: flex; align-items: center; gap: var(--fl-sp-2); flex-wrap: wrap; }
.coro-conflicto-nota { font-size: var(--fl-texto-sm); color: var(--fl-texto-suave); margin-top: var(--fl-sp-2); }

/* ── Coro seccion titulo ──────────────────────────────────────────── */
.coro-seccion-titulo {
    display: flex;
    gap: var(--fl-sp-3);
    align-items: flex-start;
    padding: var(--fl-sp-4) 0 var(--fl-sp-3);
    border-bottom: 1px solid var(--fl-borde);
    margin-bottom: var(--fl-sp-4);
}

.coro-seccion-titulo-icono { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; }
.coro-seccion-titulo-texto h3 { margin: 0 0 .2rem; font-size: var(--fl-texto-base); font-weight: var(--fl-peso-bold); color: var(--fl-texto-fuerte); }
.coro-seccion-titulo-texto p { margin: 0; font-size: var(--fl-texto-sm); color: var(--fl-texto-suave); }

/* ── Coro-limite alerta (selección page) ──────────────────────────── */
.coro-limite-alerta { display: flex; flex-direction: column; gap: var(--fl-sp-2); }

/* ── Old global button classes ────────────────────────────────────── */
.boton {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-2);
    padding: 0 var(--fl-sp-4);
    height: var(--fl-alto-control-md, 38px);
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-semibold);
    border-radius: var(--fl-r-md);
    border: none;
    background: var(--fl-acento);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .15s;
    line-height: 1;
}

.boton:hover { filter: brightness(.88); color: #fff; }

.boton2 {
    display: inline-flex;
    align-items: center;
    gap: var(--fl-sp-2);
    padding: 0 var(--fl-sp-4);
    height: var(--fl-alto-control-md, 38px);
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-medium);
    border-radius: var(--fl-r-md);
    border: 1px solid var(--fl-borde-fuerte);
    background: var(--fl-fondo-superficie);
    color: var(--fl-texto);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s;
    line-height: 1;
}

.boton2:hover { background: var(--fl-fondo); }

/* ── Old layout grid (.columnas) ──────────────────────────────────── */
.columnas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--fl-sp-4);
    margin-bottom: var(--fl-sp-4);
}

.columnas .col6,
.columnas .padding { grid-column: 1 / -1; }

/* ── Flora select dentro de form-grupo ──────────────────────────────── */
.form-grupo .fl-campo { width: 100%; margin: 0; }
.form-grupo .fl-select { position: relative; width: 100%; }

.form-grupo .fl-select-trigger {
    display: flex;
    align-items: center;
    gap: var(--fl-sp-2);
    width: 100%;
    min-height: var(--fl-alto-control-md, 38px);
    padding: 0 2.2rem 0 var(--fl-sp-3);
    font-family: inherit;
    font-size: var(--fl-texto-sm);
    font-weight: var(--fl-peso-regular);
    color: var(--fl-texto-fuerte);
    background: var(--fl-fondo-superficie);
    border: 1px solid var(--fl-borde-fuerte);
    border-radius: var(--fl-r-md);
    box-shadow: var(--fl-sombra-xs, 0 1px 2px rgba(0,0,0,.05));
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
}

.form-grupo .fl-select-trigger::after {
    top: 50%;
    margin-top: -8px;
}

.form-grupo .fl-select[data-fl-abierto="true"] .fl-select-trigger,
.form-grupo .fl-select-trigger:focus {
    border-color: var(--fl-acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-acento) 20%, transparent);
}

.form-grupo .fl-select-valor {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.form-grupo .fl-select-trigger[data-fl-sin-valor="true"] .fl-select-valor {
    color: var(--fl-texto-tenue);
    font-weight: var(--fl-peso-regular);
}

.form-grupo .fl-select-limpiar {
    position: absolute;
    right: var(--fl-sp-2);
    top: 50%;
    transform: translateY(-50%);
}