/* ============================================================
   Pulido visual de los paneles (Universidad Ciencias Líderes)
   Cargado en admin/docente/portal/admision vía render hook.
   Solo cosmético (no rompe layout). Editar/quitar a gusto.
   ============================================================ */
@import url('https://fonts.bunny.net/css?family=poppins:400,500,600,700,800');

:root {
    --ucl-verde: #4aab3f;
    --ucl-verde-d: #2f7d27;
    --ucl-teal: #1d6f86;
    --ucl-bg: #eef3f1;
}

/* ---- Tipografía ---- */
.fi-body, .fi-body .fi-sidebar, .fi-body .fi-topbar, .fi-simple-layout {
    font-family: 'Poppins', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- Fondo del área de contenido ---- */
.fi-main-ctn { background: var(--ucl-bg); }
.dark .fi-main-ctn { background: #0b1220; }

/* ---- Encabezado de página con barra de acento ---- */
.fi-header-heading { font-weight: 800; letter-spacing: -.3px; position: relative; padding-left: 14px; }
.fi-header-heading::before {
    content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 5px;
    border-radius: 6px; background: linear-gradient(180deg, var(--ucl-verde), var(--ucl-teal));
}

/* ---- Secciones / tarjetas ---- */
.fi-section {
    border-radius: 16px;
    box-shadow: 0 8px 26px -16px rgba(20, 42, 63, .25);
    border: 1px solid rgba(20, 42, 63, .06);
    overflow: hidden;
}
.fi-section-header { border-bottom: 1px solid rgba(20, 42, 63, .06); }
.fi-section-header-heading { font-weight: 700; }
.fi-section-header .fi-icon, .fi-section-header svg { color: var(--ucl-teal); }

/* ---- Widgets de estadísticas (tarjetas del escritorio) ---- */
.fi-wi-stats-overview-stat {
    border-radius: 16px;
    border: 1px solid rgba(20, 42, 63, .05);
    transition: transform .18s ease, box-shadow .18s ease;
    position: relative; overflow: hidden;
}
.fi-wi-stats-overview-stat::after {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, var(--ucl-verde), var(--ucl-teal)); opacity: .85;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(20, 42, 63, .38); }
.fi-wi-stats-overview-stat-value { font-weight: 800; letter-spacing: -.5px; }

/* ---- INPUTS / SELECT / TEXTAREA (formularios al crear/editar) ---- */
.fi-input, .fi-select-input, .fi-textarea,
.fi-input-wrp {
    border-radius: 11px !important;
}
.fi-input-wrp { transition: box-shadow .15s ease, border-color .15s ease; }
.fi-input-wrp:focus-within {
    border-color: var(--ucl-verde) !important;
    box-shadow: 0 0 0 3px rgba(74, 171, 63, .18) !important;
}
.fi-fo-field-wrp-label { font-weight: 600; }

/* ---- TABLAS (listas) ---- */
.fi-ta { border-radius: 16px; overflow: hidden; }
.fi-ta-header-cell {
    text-transform: uppercase; font-size: 11px; letter-spacing: .5px;
    background: #f3f7f5; color: #45566a; font-weight: 700;
}
.dark .fi-ta-header-cell { background: #111a2b; }
.fi-ta-row { transition: background .12s ease; }
.fi-ta-row:nth-child(even) { background: rgba(20, 42, 63, .025); }
.fi-ta-row:hover { background: rgba(74, 171, 63, .08); }
.dark .fi-ta-row:nth-child(even) { background: rgba(255,255,255,.02); }

/* ---- BOTONES y BADGES ---- */
.fi-btn { border-radius: 10px; font-weight: 600; }
.fi-badge { border-radius: 9999px; font-weight: 600; }

/* ---- MODALES (acciones / editar rápido) ---- */
.fi-modal-window {
    border-radius: 20px !important;
    box-shadow: 0 30px 80px -24px rgba(20, 42, 63, .5) !important;
    overflow: hidden;
}
.fi-modal-header { padding-bottom: .75rem; border-bottom: 1px solid rgba(20,42,63,.06); }
.fi-modal-heading { font-weight: 800; }

/* ---- SIDEBAR ---- */
.fi-sidebar-item-active > .fi-sidebar-item-button, .fi-sidebar-item-active > a {
    background: linear-gradient(90deg, rgba(74, 171, 63, .16), rgba(74, 171, 63, 0));
    border-radius: 10px;
}
.fi-sidebar-group-label { letter-spacing: .5px; text-transform: uppercase; font-size: 10.5px; opacity: .85; }

/* ---- Topbar y avatar ---- */
.fi-topbar > nav { backdrop-filter: blur(8px); }
.fi-avatar { box-shadow: 0 0 0 2px rgba(74, 171, 63, .35); }

/* ---- Paginación ---- */
.fi-pagination .fi-btn, .fi-pagination button { border-radius: 9px; }

/* ============================================================
   Controles "crudos" de páginas propias (Centro de Reportes,
   estado de cuenta, etc.) que NO usan componentes de Filament.
   Se excluyen los de Filament (clases que contienen "fi-").
   ============================================================ */
.fi-main-ctn select:not([class*="fi-"]),
.fi-main-ctn input[type="text"]:not([class*="fi-"]),
.fi-main-ctn input[type="email"]:not([class*="fi-"]),
.fi-main-ctn input[type="number"]:not([class*="fi-"]),
.fi-main-ctn input[type="date"]:not([class*="fi-"]),
.fi-main-ctn input[type="search"]:not([class*="fi-"]) {
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: .55rem .8rem;
    background: #fff;
    font-size: .875rem;
    color: #1f2937;
    line-height: 1.3;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fi-main-ctn select:not([class*="fi-"]):focus,
.fi-main-ctn input:not([class*="fi-"]):focus {
    outline: 0;
    border-color: var(--ucl-verde);
    box-shadow: 0 0 0 3px rgba(74, 171, 63, .18);
}
.dark .fi-main-ctn select:not([class*="fi-"]),
.dark .fi-main-ctn input:not([class*="fi-"]) {
    background: #0f172a; color: #e5e7eb; border-color: #334155;
}

/* Tablas "crudas" de páginas propias */
.fi-main-ctn table:not([class*="fi-"]) th {
    text-transform: uppercase; font-size: 11px; letter-spacing: .4px;
    color: #45566a; font-weight: 700; padding: 8px 10px;
    border-bottom: 2px solid #e5e7eb; text-align: left;
}
.fi-main-ctn table:not([class*="fi-"]) td { padding: 8px 10px; border-bottom: 1px solid #f1f3f5; }
.fi-main-ctn table:not([class*="fi-"]) tbody tr:hover { background: rgba(74, 171, 63, .06); }

/* ============================================================
   REFINAMIENTO v2 — más ORDEN, aire y limpieza (UCL)
   Solo cosmético, aditivo. Objetivo: simple y ordenado.
   ============================================================ */

/* Base un poco más cómoda de leer */
.fi-body { font-size: 14px; }

/* --- Topbar: separada del contenido, limpia --- */
.fi-topbar {
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid rgba(20,42,63,.08);
}
.dark .fi-topbar { background: rgba(11,18,32,.92) !important; border-bottom-color: rgba(255,255,255,.06); }

/* --- Sidebar: orden y aire entre opciones --- */
.fi-sidebar { border-right: 1px solid rgba(20,42,63,.06); }
.fi-sidebar-nav { padding: .5rem .55rem; }
.fi-sidebar-item > .fi-sidebar-item-button,
.fi-sidebar-item > a {
    border-radius: 10px;
    padding-top: .52rem; padding-bottom: .52rem;
    margin-bottom: 2px;
    transition: background .12s ease;
}
.fi-sidebar-item:not(.fi-sidebar-item-active) > .fi-sidebar-item-button:hover {
    background: rgba(20,42,63,.05);
}
.fi-sidebar-group + .fi-sidebar-group { margin-top: .55rem; }
.fi-sidebar-group-label { margin-top: .4rem; color: #64748b; }

/* --- Contenido: más aire alrededor --- */
.fi-main { padding-top: 1.4rem; padding-bottom: 2.5rem; }
.fi-header { margin-bottom: 1.2rem; }

/* --- Tablas: más aire vertical = más legible y ordenado --- */
.fi-ta-cell { padding-top: .8rem; padding-bottom: .8rem; }
.fi-ta-header-cell { padding-top: .7rem; padding-bottom: .7rem; }
.fi-ta-header-toolbar { padding: .8rem 1rem; }

/* --- Acciones de fila (Editar, etc.): chips claros y parejos --- */
.fi-ta-actions .fi-btn,
.fi-ta-actions .fi-link {
    border-radius: 9px; font-weight: 600; padding: .3rem .65rem;
}

/* --- Suavizar sombras (menos cargado) --- */
.fi-section { box-shadow: 0 6px 22px -18px rgba(20,42,63,.28); }

/* --- Botones: trazo parejo --- */
.fi-btn { letter-spacing: .1px; }

/* ============================================================
   AJUSTE RESPONSIVE DE FORMULARIOS  (22-jul-2026, v4)
   Los formularios de logística ahora van en 1 columna (secciones
   apiladas a todo el ancho, tipo boleta). Aquí solo pulimos:
   1) Selects en una sola línea con "…" (no se parten letra a letra).
   2) Densidad de etiquetas/inputs.
   3) Colapso a 1 columna solo en pantallas angostas (tablet/móvil).
   ============================================================ */

/* --- (1) SELECTS: texto en una sola línea + "…" --- */
.fi-select-input-btn,
.fi-select-input-ctn,
.fi-select-input-value-ctn        { min-width: 0; }
.fi-select-input-value-ctn > span,
.fi-select-input-option > span,
.fi-select-input .fi-select-input-value-ctn > span {
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}
select.fi-input { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- (2) Densidad: etiquetas e inputs un poco más compactos --- */
.fi-fo-field-wrp .fi-fo-field-label,
.fi-fo-field-wrp label            { font-size: .8rem; line-height: 1.25; }
.fi-input, .fi-select-input       { font-size: .875rem; }
.fi-fo-component-ctn              { gap: .75rem; }

/* --- Cada campo puede encogerse dentro de su columna (sin desbordes) --- */
.fi-grid > *,
.fi-fo-component-ctn,
.fi-fo-field-wrp                  { min-width: 0; }

/* --- (3) Solo en pantallas angostas (tablet/móvil): todo a 1 columna --- */
@media (max-width: 1023.98px) {
    .fi-main .fi-grid {
        --cols-sm: repeat(1, minmax(0, 1fr)) !important;
        --cols-md: repeat(1, minmax(0, 1fr)) !important;
        --cols-lg: repeat(1, minmax(0, 1fr)) !important;
    }
    /* los campos de los repeaters se apilan a todo el ancho */
    .fi-main .fi-fo-repeater-item .fi-grid > * {
        grid-column: 1 / -1 !important;
    }
}