/* Resonum - Módulo Coros
   Solo clases específicas del módulo. El resto usa Flora base. */

/* Acciones de la tabla de COREUTAS apiladas (una debajo de otra), solo en esa
   tabla (clase rs-coreutas-tabla en el panel). Son varias (Editar/Reenviar/
   Cargar manual/Invitar/eliminar) y en fila no entran cómodas. */
.rs-coreutas-tabla .fl-tabla-acciones-fila {
    flex-direction: column;
    align-items: stretch;
    gap: .35rem;
}
.rs-coreutas-tabla .fl-tabla-acciones-fila > *,
.rs-coreutas-tabla .fl-tabla-acciones-fila form {
    width: 100%;
}
.rs-coreutas-tabla .fl-tabla-acciones-fila .fl-boton {
    width: 100%;
    justify-content: center;
}

/* Logo circular del coro (no existe en Flora) */
.coro-logo {
    width: 56px;
    height: 56px;
    border-radius: var(--r-lg, 14px);
    background: var(--color-primario);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: var(--text-xl, 22px);
    font-weight: var(--fw-bold, 700);
}

.coro-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Chip de rol / estado (Flora no tiene chips genéricos) */
.coro-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--text-xs, 11px);
    font-weight: var(--fw-semibold, 600);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    background: var(--color-borde);
    color: var(--color-texto);
}

.coro-chip-coordinador {
    background: var(--c-info-fondo);
    color: var(--c-info-texto);
}

.coro-chip-miembro {
    background: var(--c-exito-fondo);
    color: var(--c-exito-texto);
}

.coro-chip-warn {
    background: var(--c-advertencia-fondo);
    color: var(--c-advertencia-texto);
}

.coro-chip-propio {
    background: var(--c-p-sutil);
    color: var(--c-p-oscuro);
}

.coro-chip-propietario {
    background: var(--c-p-sutil);
    color: var(--c-p-oscuro);
    border: 1px solid var(--c-p-claro, var(--color-primario));
}

/* Cabecera de tarjeta (logo + info) */
.coro-cabecera {
    display: flex;
    gap: var(--sp-3, 12px);
    align-items: center;
    margin-bottom: var(--sp-2, 10px);
}

.coro-cabecera-info {
    flex: 1;
    min-width: 0;
}

.coro-cabecera-nombre {
    margin: 0 0 4px 0;
    font-size: var(--text-base, 15px);
    font-weight: var(--fw-bold, 700);
}

/* Radio cards para elegir rol en la autoasignación */
.coro-opciones-rol {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-4, 16px);
    margin: var(--sp-4, 16px) 0;
}

.coro-opcion-rol {
    display: block;
    padding: var(--sp-5, 20px);
    border: 2px solid var(--color-borde);
    border-radius: var(--r-lg, 14px);
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.coro-opcion-rol:hover {
    border-color: var(--color-primario);
}

.coro-opcion-rol input[type="radio"] {
    position: absolute;
    top: var(--sp-3, 14px);
    right: var(--sp-3, 14px);
}

.coro-opcion-rol:has(input:checked) {
    border-color: var(--color-primario);
    background: var(--c-p-sutil);
}

.coro-opcion-emoji {
    font-size: var(--text-2xl, 26px);
    display: block;
    margin-bottom: 6px;
}

@media (max-width: 640px) {
    .coro-opciones-rol { grid-template-columns: 1fr; }
}

/* Hero de bienvenida (/coros) */
.coro-hero {
    text-align: center;
    padding: var(--sp-8, 40px) var(--sp-4, 20px) var(--sp-6, 28px);
}

.coro-hero-logo {
    width: 96px;
    height: 96px;
    border-radius: var(--r-2xl, 24px);
    object-fit: cover;
    display: block;
    margin: 0 auto var(--sp-4, 16px) auto;
    box-shadow: var(--s-3);
}

/* Barra título + acción */
.coro-barra-acciones {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3, 12px);
    margin-bottom: var(--sp-4, 16px);
    padding: 0 var(--sp-2, 8px);
}

/* Enlace que ocupa toda una card */
.coro-card-enlace {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Achicar solo el padding inferior de las tarjetas de "Mis coros" */
.columnas > div:has(.coro-card-enlace) {
    padding-bottom: var(--sp-4, 16px);
}

/* Formulario en línea */
.coro-forma-inline {
    display: inline;
}

/* ==========================================
   TEMA "ADMINISTRAR RESONUM" (pantalla /coros)
   Aplica la paleta Carmesí de Flora vía overrides de variables CSS.
   Scoped a body.resonum-inicio: otras vistas siguen con su paleta.
   ========================================== */
body.resonum-inicio {
    --color-primario:   #DC2626;
    --color-secundario: #450A0A;
    --color-terciario:  #FCA5A5;
    --color-contraste:  #EF4444;
    --color-extra:      #FEF2F2;
    --color-fondo:      #FAFAFA;
    --color-superficie: #FFFFFF;
    --color-borde:      rgba(220, 38, 38, 0.18);
    --color-texto:      #1C1717;
    /* Forzar fondo y neutralizar el azul de info y de bordes de Flora */
    background-color:   #FAFAFA;
    --fl-fondo:         #FAFAFA;
    --fl-info:          #78716C;
    /* Info → gris cálido (chips "Coordinador", alertas informativas) */
    --c-info-fondo:     rgba(120, 113, 108, 0.12);
    --c-info-texto:     #44403C;
    /* Bordes → cálido neutro (botones boton2, inputs) */
    --fl-borde-fuerte:  #D6CECE;
    --fl-borde:         rgba(220, 38, 38, 0.18);
}

/* Glow rojo sutil en el logo del hero */
body.resonum-inicio .coro-hero-logo {
    box-shadow: 0 0 32px rgba(220, 38, 38, 0.25), 0 0 0 3px rgba(220, 38, 38, 0.15);
}

/* Cabecera de página (volver a la izq + hero centrado).
   Se aplica solo si la cabecera contiene un link .coro-volver,
   para no pisar la .coro-cabecera que usan las tarjetas de "Mis coros". */
.coro-cabecera:has(.coro-volver) {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--sp-3, 12px);
    margin-top: 0;
    margin-bottom: var(--sp-2, 8px);
}
.coro-cabecera:has(.coro-volver) .coro-volver {
    grid-column: 1;
    justify-self: start;
    margin-bottom: 0;
}
.coro-cabecera:has(.coro-volver) .coro-hero {
    grid-column: 2;
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
}
.coro-cabecera:has(.coro-volver) .coro-hero h1 {
    margin: 0;
    font-size: var(--text-xl, 20px);
    line-height: 1.2;
}
.coro-cabecera:has(.coro-volver) .coro-hero p {
    margin: 4px 0 0;
    font-size: var(--text-sm, 14px);
    color: var(--color-texto-2, #6b7280);
}


/* Link "volver" a la selección de coros */
.coro-volver {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2, 8px);
    color: var(--color-texto);
    text-decoration: none;
    font-size: var(--text-sm, 14px);
    font-weight: var(--fw-medium, 500);
    padding: var(--sp-2, 8px) var(--sp-3, 12px);
    margin-bottom: var(--sp-3, 12px);
    background: var(--color-superficie);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-md, 8px);
    box-shadow: var(--s-1);
    transition:
        background-color var(--t-1, 0.15s),
        border-color var(--t-1, 0.15s),
        color var(--t-1, 0.15s),
        box-shadow var(--t-1, 0.15s),
        transform var(--t-1, 0.15s);
}
.coro-volver:hover {
    background: var(--c-p-sutil);
    border-color: color-mix(in srgb, var(--color-primario) 40%, var(--color-borde));
    color: var(--color-primario);
    box-shadow: var(--s-2), var(--s-p-xs);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Título de sección del formulario (card) */
.coro-seccion-titulo {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    margin: 0 0 var(--sp-4, 16px) 0;
    padding-bottom: var(--sp-3, 12px);
    border-bottom: 1px solid var(--color-borde);
}

.coro-seccion-titulo-icono {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md, 10px);
    background: var(--c-p-sutil);
    color: var(--color-primario);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.coro-seccion-titulo-texto h3 {
    margin: 0;
    font-size: var(--text-base, 16px);
    font-weight: var(--fw-bold, 700);
}
.coro-seccion-titulo-texto p {
    margin: 2px 0 0 0;
    font-size: var(--text-sm, 13px);
    color: var(--color-texto-2, #6b7280);
}

/* Bloque de ensayo numerado */
.coro-ensayo {
    position: relative;
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-lg, 12px);
    padding: var(--sp-4, 16px);
    margin-bottom: var(--sp-3, 12px);
}

.coro-ensayo-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs, 11px);
    font-weight: var(--fw-bold, 700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primario);
    margin-bottom: var(--sp-2, 8px);
}

.coro-ensayo-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-primario);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
}

.coro-ensayo-fila {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-3, 12px);
}

/* Grid simétrica de 2 columnas para formularios */
.coro-fila-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3, 12px);
}

/* Labels con logo de red social en el form de editar coro */
.coro-red-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.coro-red-label svg {
    flex-shrink: 0;
}
.coro-red-web       { color: #1c1917; }
.coro-red-facebook  { color: #1877F2; }
.coro-red-instagram { color: #e1306c; }
.coro-red-youtube   { color: #FF0000; }
.coro-red-twitter   { color: #000000; }
.coro-red-tiktok    { color: #000000; }

/* Grid para los selects de voces (voz 1..8) */
.coro-voces-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3, 12px);
}
@media (max-width: 768px) {
    .coro-voces-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Bloque oculto (usado por asistencias.js) */
.coros-bloque-oculto {
    display: none;
}

/* Selector de estado en la planilla de asistencias */
.asistencia-estados {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.asistencia-estado {
    position: relative;
    cursor: pointer;
}

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

.asistencia-estado-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--color-fondo);
    color: var(--color-texto);
    border: 1.5px solid var(--color-borde);
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.asistencia-estado input:checked + .asistencia-estado-pill.pill-presente {
    background: var(--c-exito-fondo);
    color: var(--c-exito-texto);
    border-color: var(--c-exito);
}

.asistencia-estado input:checked + .asistencia-estado-pill.pill-ausente {
    background: var(--c-error-fondo);
    color: var(--c-error-texto);
    border-color: var(--c-error);
}

.asistencia-estado input:checked + .asistencia-estado-pill.pill-justificado {
    background: var(--c-advertencia-fondo);
    color: var(--c-advertencia-texto);
    border-color: var(--c-advertencia);
}

/* Contenedor angosto para vistas de solo lectura */
.asistencia-ver-contenedor {
    max-width: 70%;
    margin: 0 auto;
}
/* Fuerza 3 columnas iguales (contadores) incluso en tablet/mobile */
.asistencia-ver-contadores > div {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
}
/* En mobile, apilar verticalmente con menos separación */
@media (max-width: 768px) {
    .asistencia-ver-contadores {
        gap: var(--sp-2) !important;
    }
    .asistencia-ver-contadores > div {
        flex: 1 1 100% !important;
    }
    .asistencia-ver-contadores .alerta {
        margin-bottom: 0;
    }
}

/* Sombra sutil en la tabla de solo lectura */
.asistencia-ver-contenedor .tabla-responsive {
    box-shadow: var(--s-2);
    border-radius: var(--r-lg);
    overflow: hidden;
    padding-right: 0;
}
@media (max-width: 1600px) {
    .asistencia-ver-contenedor { max-width: 80%; }
}
@media (max-width: 1300px) {
    .asistencia-ver-contenedor { max-width: 90%; }
}
@media (max-width: 1024px) {
    .asistencia-ver-contenedor { max-width: 100%; }
}

/* Pills en modo solo lectura (sin radio al lado) */
.asistencia-estado-pill.pill-solo.pill-presente {
    background: var(--c-exito-fondo);
    color: var(--c-exito-texto);
    border-color: var(--c-exito);
}
.asistencia-estado-pill.pill-solo.pill-ausente {
    background: var(--c-error-fondo);
    color: var(--c-error-texto);
    border-color: var(--c-error);
}
.asistencia-estado-pill.pill-solo.pill-justificado {
    background: var(--c-advertencia-fondo);
    color: var(--c-advertencia-texto);
    border-color: var(--c-advertencia);
}

/* Pago por coreuta dentro de un cobro */
.coro-pago-form { margin: 0; }
.coro-pago-fila {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr auto;
    gap: var(--sp-2, 8px);
    align-items: end;
}
.coro-pago-accion .boton { white-space: nowrap; }

@media (max-width: 900px) {
    .coro-pago-fila { grid-template-columns: 1fr 1fr; }
}

/* Tabs del módulo Finanzas */
.finanzas-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2, 8px);
    margin-bottom: var(--sp-4, 18px);
    overflow: visible;
    border-bottom: none;
}

.finanzas-tab {
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: 14px 16px;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--r-lg, 14px);
    background: var(--color-superficie);
    text-decoration: none;
    color: var(--color-texto);
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.finanzas-tab:hover {
    border-color: var(--color-primario);
    transform: translateY(-1px);
}

.finanzas-tab-activo {
    border-color: var(--color-primario);
    background: var(--c-p-sutil);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.finanzas-tab-icono {
    font-size: 22px;
    flex-shrink: 0;
}

.finanzas-tab-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.finanzas-tab-texto strong {
    font-size: var(--text-sm, 14px);
    font-weight: var(--fw-bold, 700);
    line-height: 1.2;
}

.finanzas-tab-texto small {
    font-size: var(--text-xs, 11px);
    color: var(--color-texto-2);
    margin-top: 2px;
}

@media (max-width: 720px) {
    .finanzas-tabs { grid-template-columns: 1fr; }
}

/* Cifras de contabilidad */
.contab-cifra {
    font-size: 22px;
    font-weight: 700;
    margin: 6px 0;
}
.contab-cifra-grande {
    font-size: 28px;
}
.contab-cifra-ingreso {
    color: var(--c-exito-texto);
}
.contab-cifra-egreso {
    color: var(--c-error-texto);
}

.asistencia-observacion {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--color-borde);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .coro-ensayo-fila,
    .coro-fila-2 { grid-template-columns: 1fr; }
}

/* Barra de acciones del formulario (pegada abajo) */
.coro-form-acciones {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3, 12px);
    margin-top: var(--sp-5, 20px);
}

/* Slug con prefijo de URL */
.coro-slug-fila {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--color-borde);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
    background: var(--color-superficie);
}
.coro-slug-fila:focus-within {
    border-color: var(--color-primario);
}
.coro-slug-prefijo {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: var(--text-xs, 12px);
    color: var(--color-texto-2);
    background: var(--color-fondo);
    border-right: 1px solid var(--color-borde);
    white-space: nowrap;
    font-family: monospace;
}
.coro-slug-fila .form-input {
    border: none;
    border-radius: 0;
    background: transparent;
}
.coro-slug-fila .form-input:focus {
    box-shadow: none;
}

.coro-form-ayuda {
    display: block;
    margin-top: 6px;
    font-size: var(--text-xs, 12px);
    color: var(--color-texto-2, #6b7280);
}

/* Preview del logo existente en el formulario */
.coro-logo-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--sp-3, 12px);
    padding: var(--sp-3, 12px) var(--sp-4, 16px);
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-md, 10px);
    margin-bottom: var(--sp-3, 12px);
}

.coro-logo-preview img {
    width: 72px;
    height: 72px;
    border-radius: var(--r-md, 10px);
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--color-borde);
    background: #fff;
}

.coro-logo-preview-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-sm, 14px);
    flex: 1;
    min-width: 0;
}
.coro-logo-preview-info-titulo {
    font-weight: var(--fw-semibold, 600);
    color: var(--color-texto);
}
.coro-logo-preview-info-ayuda {
    font-size: var(--text-xs, 12px);
    color: var(--color-texto-2, #6b7280);
}

/* Botón pequeño y discreto (ej: quitar logo, quitar ensayo) */
.coro-boton-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: var(--text-xs, 12px);
    line-height: 1;
    color: var(--color-texto-2, #6b7280);
    background: transparent;
    border: 1px solid var(--color-borde);
    border-radius: var(--r-sm, 6px);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.coro-boton-mini:hover {
    color: #b91c1c;
    border-color: #fca5a5;
    background: #fef2f2;
}

/* "Quitar" posicionado arriba a la derecha de un contenedor relativo */
.coro-quitar-esquina {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* ==========================================
   HEADER ROJO CUSTOM DE RESONUM (sin flora)
   ========================================== */
.coros-header {
    background: linear-gradient(135deg, #7F1D1D 0%, #DC2626 55%, #991B1B 100%);
    color: #fff;
    padding: 20px 0;
    margin-bottom: 14px;
    box-shadow: 0 8px 30px rgba(127, 29, 29, 0.35);
    border-bottom: 3px solid #450A0A;
}

.coros-header .coros-header-interno {
    width: 64% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 32px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 32px;
    align-items: center;
}


.coros-header-marca {
    display: flex;
    align-items: center;
    gap: 48px;
}

.coros-header-marca img {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

.coros-header-marca h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
}

.coros-header-marca p {
    margin: 2px 0 0 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.75);
}

.coros-header-stats {
    display: flex;
    gap: 28px;
    justify-content: center;
}

.coros-header-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 0 12px;
    position: relative;
}

.coros-header-stat + .coros-header-stat::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
}

.coros-header-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
}

.coros-header-stat-valor {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.coros-header-usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.coros-header-usuario-nombre {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.coros-header-logout {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, border-color 0.15s ease;
    font-family: inherit;
}
.coros-header-logout:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Ancho completo a partir de donde el layout de 3 columnas empieza a apretarse */
@media (max-width: 1400px) {
    .coros-header .coros-header-interno {
        width: auto !important;
        padding: 0 24px;
    }
}

/* Stack vertical cuando ya no caben las 3 columnas */
@media (max-width: 1100px) {
    .coros-header .coros-header-interno {
        grid-template-columns: 1fr;
        gap: 20px;
        justify-items: center;
        text-align: center;
    }
    .coros-header-marca { gap: 22px; }
    .coros-header-usuario { align-items: center; }
    .coros-header-stats { flex-wrap: wrap; justify-content: center; gap: 16px; }
    .coros-header-stat + .coros-header-stat::before { display: none; }
}

/* Logo más chico en mobile */
@media (max-width: 640px) {
    .coros-header-marca { flex-direction: column; gap: 14px; text-align: center; }
    .coros-header-marca img { width: 88px; height: 88px; }
    .coros-header-marca h1 { font-size: 20px; }
    .coros-header-stats { gap: 12px; }
    .coros-header-stat { padding: 0 6px; }
}

@media (max-width: 1024px) {
    /* Sobrescribe el position:fixed de Flora base para que la coros-header no
       tape el contenido en mobile. */
    .coros-header {
        position: static;
    }
}

/* ==========================================
   SECCIONES DEL HOME DE CORO
   ========================================== */
.coros-seccion {
    max-width: 1200px;
    margin: 0 auto 72px auto;
    padding: 0 24px;
}

.coros-seccion-titulo {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-borde);
}

.coros-seccion-titulo h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-texto);
}

.coros-seccion-titulo p {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--color-texto-2, #6b7280);
}

/* Bloque de admin con fondo sutil para diferenciarlo */
.coros-admin {
    background: linear-gradient(180deg, rgba(220, 38, 38, 0.04), transparent 80%);
    border: 1px solid rgba(220, 38, 38, 0.15);
    border-radius: 16px;
    padding: 24px;
    width: calc(100% - 48px);
    max-width: 1152px; /* igual al ancho interno de .coros-seccion (1200 - 24·2 padding) */
    margin: 0 auto;
    box-sizing: border-box;
}

.coros-admin .coros-seccion-titulo {
    border-bottom-color: rgba(220, 38, 38, 0.2);
}

.coros-admin-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primario);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}

/* Tabla de admin de coros */
.coros-admin-tabla {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.coros-admin-tabla th,
.coros-admin-tabla td {
    padding: 12px 14px;
    text-align: center;
    border-bottom: 1px solid var(--color-borde);
    font-size: 13.5px;
    vertical-align: middle;
}

.coros-admin-tabla th {
    background: #fff5f5;
    color: #7f1d1d;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.coros-admin-tabla td.coros-admin-nombre {
    text-align: left;
}

.coros-admin-tabla tbody tr:last-child td {
    border-bottom: none;
}

.coros-admin-tabla tbody tr:hover {
    background: #fff9f9;
}

.coros-admin-tabla .coro-logo {
    width: 38px;
    height: 38px;
    font-size: 16px;
    border-radius: 10px;
}

.coros-admin-acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    justify-content: center;
}

.coros-admin-acciones .boton,
.coros-admin-acciones .boton2 {
    padding: 5px 10px;
    font-size: 11.5px;
}

.coros-admin-nombre-celda {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Cabecera de sección con botón a la derecha (reemplaza el uso de .columnas para títulos) */
.coros-cabecera-seccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3, 12px);
    padding: var(--sp-4, 16px) 0;
    margin-bottom: var(--sp-3, 14px);
    border-bottom: 1px solid var(--color-borde);
}

.coros-cabecera-seccion h1 {
    margin: 0 0 4px 0;
    font-size: var(--text-2xl, 22px);
    font-weight: var(--fw-bold, 700);
}

.coros-cabecera-seccion p {
    margin: 0;
    color: var(--color-texto-2, #6b7280);
    font-size: var(--text-sm, 13px);
}

/* Avatar con inicial para coreutas */
.coreuta-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primario), var(--c-p-oscuro, #991B1B));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: var(--fw-bold, 700);
    flex-shrink: 0;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.coreuta-celda {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* nombre/mail siempre pegados al avatar, a la izq */
    gap: 12px;
    text-align: left;
}

.coreuta-celda-texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* columna nombre+mail alineada a la izquierda */
    min-width: 0;
}

.coreuta-celda-nombre {
    font-weight: var(--fw-semibold, 600);
    color: var(--color-texto);
    line-height: 1.2;
    text-align: left;
}

.coreuta-celda-email {
    color: var(--color-texto-2, #6b7280);
    font-size: var(--text-xs, 12px);
    margin-top: 2px;
    text-align: left;
}

/* Variante de tabla admin para uso dentro del panel coordinador (colores theme) */
.coros-admin-tabla.tema-panel th {
    background: var(--c-p-sutil, #faf5ff);
    color: var(--c-p-oscuro, var(--color-primario));
}

.coros-admin-tabla.tema-panel tbody tr:hover {
    background: var(--color-fondo);
}

/* Acceso global desde la selección (ej: Mi agenda) */
.seleccion-acceso-global {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 32px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(251, 146, 60, 0.08));
    border: 1.5px solid rgba(220, 38, 38, 0.2);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.15s ease;
}
.seleccion-acceso-global:hover {
    transform: translateY(-2px);
    border-color: rgba(220, 38, 38, 0.5);
    box-shadow: 0 8px 22px rgba(220, 38, 38, 0.12);
}
.seleccion-acceso-emoji {
    font-size: 32px;
    flex-shrink: 0;
}
.seleccion-acceso-texto {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.seleccion-acceso-texto strong {
    font-size: 16px;
    font-weight: 700;
}
.seleccion-acceso-sub {
    font-size: 13px;
    opacity: 0.75;
}
.seleccion-acceso-flecha {
    font-size: 24px;
    font-weight: 700;
    opacity: 0.6;
}

/* Alerta de conciertos en conflicto */
.coro-conflicto-alerta {
    background: var(--c-advertencia-fondo, #fef3c7);
    border: 2px solid var(--c-advertencia, #f59e0b);
    border-left: 6px solid var(--c-advertencia, #f59e0b);
    border-radius: var(--r-lg, 14px);
    padding: 18px 20px;
    margin-bottom: var(--sp-4, 18px);
    color: var(--c-advertencia-texto, #78350f);
}
.coro-conflicto-titulo {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.coro-conflicto-icono {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
}
.coro-conflicto-titulo strong {
    display: block;
    font-size: var(--text-base, 15px);
    margin-bottom: 2px;
}
.coro-conflicto-titulo p {
    margin: 0;
    font-size: var(--text-sm, 13px);
    opacity: 0.85;
}
.coro-conflicto-lista {
    list-style: none;
    padding: 0;
    margin: 10px 0;
    background: rgba(255, 255, 255, 0.55);
    border-radius: var(--r-md, 10px);
    overflow: hidden;
}
.coro-conflicto-lista li {
    padding: 10px 14px;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    font-size: var(--text-sm, 13px);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.coro-conflicto-lista li:last-child { border-bottom: none; }
.coro-conflicto-nota {
    margin: 8px 0 0 0;
    font-size: var(--text-xs, 12px);
    font-style: italic;
    opacity: 0.85;
}

/* Alerta de límite de plan + botón mejorar */
.coro-limite-alerta {
    display: flex;
    align-items: center;
    gap: var(--sp-8, 56px);
    flex-wrap: wrap;
}
.coro-limite-alerta .alerta {
    margin: 0;
    flex: 1;
    min-width: 0;
    padding-block: var(--sp-3, 12px);
}

/* Badge "Propietario" en cards de participación */
.coro-badge-propietario {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(220, 38, 38, 0.1);
    color: var(--color-primario);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

/* =============================================================================
   TABLA RESPONSIVE · scroll horizontal en pantallas chicas
   -----------------------------------------------------------------------------
   La regla base de .tabla-responsive vivía en public/flora/css/responsive.css,
   que NO se carga (la app usa flora.min.css). Sin ella, las tablas anchas
   (p. ej. la de pagos de cobros) se cortaban en mobile sin poder scrollear.
   La definimos acá, que sí se carga en todas las páginas del panel.
   ========================================================================== */
.tabla-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
/* Que la tabla no se comprima: mantiene su ancho natural y aparece el scroll. */
.tabla-responsive > table {
    min-width: max-content;
}

/* =============================================================================
   "Mis coros" (coros/seleccion) · ajustes mobile
   ========================================================================== */

/* Nombre del coro en las tarjetas: hasta 2 líneas y parte palabras largas, en
   vez de truncar en una sola línea. */
.rs-coro-nombre {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* El panel de la tabla (.fl-tabla-datos-panel) traía un fondo de superficie
   propio que en esta tarjeta se veía como una franja celeste detrás del buscador.
   Lo hacemos transparente para que tome el fondo de la tarjeta (limpio). Con
   !important porque Flora lo setea por capas. Scopeado a esta tarjeta. */
.rs-zona-propietario .fl-tabla-datos-panel {
    background: transparent !important;
}

/* Zona de propietario: en mobile el header (título + botones de acción) se
   encimaba. Apilamos: el texto arriba y los botones abajo, y los botones entre
   sí también se apilan (no entran los tres en una fila). Scopeado a esta tarjeta. */
@media (max-width: 768px) {
    .rs-zona-propietario .fl-tarjeta-cabecera {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }
    .rs-zona-propietario .fl-tarjeta-cabecera-acciones {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
        width: 100%;
    }
    .rs-zona-propietario .fl-tarjeta-cabecera-acciones .fl-boton {
        width: 100%;
        justify-content: center;
    }
}

/* Nube · miga "Home" del explorador: en la miga activa (fondo petrol) el ícono
   y el texto quedaban con poco contraste. El texto se arregla con color; el ícono
   de Lucide se pinta con `stroke`, así que lo seteamos directo en el <svg>. */
.fl-explorador-migas .fl-breadcrumb--pasos .fl-breadcrumb-actual {
    color: var(--rs-marfil-50);
}
.fl-explorador-migas .fl-breadcrumb--pasos .fl-breadcrumb-actual svg {
    stroke: var(--rs-marfil-50) !important;
}

/* Cuota de la nube: barra más alta/legible (Flora la deja en 5px). En mobile,
   que ocupe el ancho completo y respire, sin overflow ni texto cortado. */
#fl-nube-cuota { padding: 14px 20px; }
#fl-nube-cuota .fl-explorador-cuota-barra { height: 12px; }
#fl-nube-cuota .fl-explorador-cuota-pct { font-size: 1.6rem; }
@media (max-width: 640px) {
    #fl-nube-cuota {
        min-width: 0 !important;
        width: 100% !important;
        padding: 16px;
        gap: 14px;
    }
    #fl-nube-cuota .fl-explorador-cuota-barra { height: 18px; }
    #fl-nube-cuota .fl-explorador-cuota-texto { white-space: normal; }
}

/* Nube · sección "Espacio": dos columnas del mismo alto — cuota (~35%) y el
   cartelito de capacidad compartida (el resto). En mobile se apilan a lo ancho. */
.rs-nube-espacio {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}
.rs-nube-espacio-cuota { flex: 0 0 35%; min-width: 280px; display: flex; }
.rs-nube-espacio-info  { flex: 1 1 0;   min-width: 280px; display: flex; }
.rs-nube-espacio-cuota > #fl-nube-cuota { flex: 1; min-width: 0; }
.rs-nube-espacio-info  > .fl-callout    { flex: 1; }
@media (max-width: 760px) {
    .rs-nube-espacio-cuota,
    .rs-nube-espacio-info { flex-basis: 100%; }
}

/* Cartelito de capacidad: todo en UN renglón (texto + botón lado a lado), más
   compacto. El callout por defecto apila el botón debajo del texto; acá ponemos
   el contenido en fila. Si en una pantalla angosta no entra, el botón baja
   (flex-wrap) en vez de cortarse. */
.rs-nube-espacio-info .fl-callout { align-items: center; }
/* Sin ícono: gana espacio para que entre todo en un renglón. */
.rs-nube-espacio-info .fl-callout-icono { display: none; }
.rs-nube-espacio-info .fl-callout-contenido {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;          /* texto y botón SIEMPRE en la misma fila */
    gap: .85rem;
}
.rs-nube-espacio-info .fl-callout-mensaje { flex: 1 1 auto; min-width: 0; }
.rs-nube-espacio-info .fl-callout-acciones {
    margin: 0;
    flex: 0 0 auto;
    white-space: nowrap;        /* el botón no se parte */
}

/* Nube: anulamos el scroll interno del explorador para que crezca con su
   contenido y scrollee la PÁGINA (igual que en mobile). El cuerpo es flex:1
   dentro de .fl-explorador-principal, por eso quedaba constreñido y scrolleaba
   adentro: lo pasamos a flex:none (toma la altura de su contenido) y liberamos
   también el contenedor. !important para ganarle al CSS y a Flora. */
.fl-nube-full .fl-explorador,
.fl-nube-full .fl-explorador-principal,
.fl-nube-full .fl-explorador-cuerpo {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.fl-nube-full .fl-explorador-cuerpo { flex: none !important; }
.fl-nube-full .fl-explorador { min-height: 65vh; }

/* Nube: sacar "Destacar" de la barra de selección de abajo (no se quiere ahí). */
.fl-explorador-seleccion [data-fl-exp-accion="destacar"] { display: none !important; }

/* En mobile NO mostramos la barra de selección flotante (las acciones van en el
   ⋮ de cada archivo). Por ancho, además del @media (hover:none) de nube.css,
   por si el equipo no se detecta como touch. */
@media (max-width: 768px) {
    .fl-explorador-seleccion { display: none !important; }
}