@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@400;700&family=Roboto:wght@400;700&family=Outfit:wght@400;700&family=Poppins:wght@400;700&display=swap');

/* ===== RESET GLOBAL ===== */
body[class*="theme-"] {
    color: var(--sigecop-general-text, #111827);
}

/* ==========================================================
   FONDOS DE LA PÁGINA (DEGRADADOS RESTAURADOS)
========================================================== */

/* TEMA MORADO (suavizado y menos saturado como se acordó) */
body.theme-morado {
    background: linear-gradient(135deg, #491AB1 0%, #7B45F0 50%, #B796FE 100%) !important;
    min-height: 100vh;
}

body.theme-morado .fi-sidebar {
    background: linear-gradient(180deg, #491AB1 0%, #7B45F0 50%, #B796FE 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* TEMA CLARO */
body.theme-claro {
    background: linear-gradient(135deg, #f0f4ff 0%, #dbeafe 50%, #ede9fe 100%) !important;
    min-height: 100vh;
}

body.theme-claro .fi-sidebar {
    background: linear-gradient(180deg, #c7d2fe 0%, #a5b4fc 50%, #ddd6fe 100%) !important;
    border-right: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* TEMA VERDE (Profundo y Corporativo) */
body.theme-verde {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #6ee7b7 100%) !important;
    min-height: 100vh;
}

body.theme-verde .fi-sidebar {
    background: linear-gradient(180deg, #064e3b 0%, #065f46 50%, #10b981 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* TEMA CAFE (Degradado naranja/tierra - El del screenshot) */
body.theme-cafe {
    background: linear-gradient(135deg, #451a03 0%, #92400e 50%, #d97706 100%) !important;
    min-height: 100vh;
}

body.theme-cafe .fi-sidebar {
    background: linear-gradient(180deg, #451a03 0%, #78350f 50%, #b45309 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* TEMA ROSA */
body.theme-rosa {
    background: linear-gradient(135deg, #831843 0%, #db2777 50%, #fbcfe8 100%) !important;
    min-height: 100vh;
}

body.theme-rosa .fi-sidebar {
    background: linear-gradient(180deg, #831843 0%, #be185d 50%, #ec4899 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Transparentar Main Content para que el body luzca su degradado */
body[class*="theme-"] .fi-main,
body[class*="theme-"] .fi-main-ctn,
body[class*="theme-"] .fi-layout {
    background: transparent !important;
}

body[class*="theme-"] .fi-sidebar-nav {
    background: transparent !important;
}

/* ==========================================================
   SIDEBAR HEADER (SIGECOP LOGO/NOMBRE)
========================================================== */
/* Solución para "el degradado donde va sigecop ya no se lee" */

body[class*="theme-"] .fi-brand-name,
body[class*="theme-"] .fi-sidebar-header a,
body[class*="theme-"] .fi-sidebar-header span {
    color: var(--sigecop-sidebar-text, #ffffff) !important;
    text-shadow: none !important;
    -webkit-text-fill-color: var(--sigecop-sidebar-text, #ffffff) !important;
}

/* ==========================================================
   SIDEBAR TEXTOS (Limpieza garantizada)
========================================================== */
body[class*="theme-"] .fi-sidebar-item-label,
body[class*="theme-"] .fi-sidebar-group-label {
    color: var(--sigecop-sidebar-text, #ffffff) !important;
    text-shadow: none !important;
    font-weight: 400 !important;
    -webkit-text-fill-color: var(--sigecop-sidebar-text, #ffffff) !important;
}

/* Iconos y flechas SIEMPRE BLANCOS - Bloqueo TOTAL de negro */
body[class*="theme-"] .fi-sidebar-nav svg,
body[class*="theme-"] .fi-sidebar-nav svg *,
body[class*="theme-"] .fi-sidebar-item-icon,
body[class*="theme-"] .fi-sidebar-item-icon * {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
    stroke-width: 0 !important;
    font-weight: 400 !important;
}

/* Evitar negritas máximo esfuerzo en TODO el sidebar */
body[class*="theme-"] .fi-sidebar-nav,
body[class*="theme-"] .fi-sidebar-nav * {
    font-weight: 400 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* EFECTO VIDRIO (GLASSMORPHISM) EN ITEM ACTIVO */
body[class*="theme-"] .fi-sidebar-item-button[aria-current="page"],
body[class*="theme-"] .fi-sidebar-item-button.fi-active {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 0.75rem !important;
}

/* FORZAR COLOR CLARO EN ITEM ACTIVO (Hijos incluidos) - NADA DE NEGRO */
body[class*="theme-"] .fi-sidebar-item-button[aria-current="page"] *,
body[class*="theme-"] .fi-sidebar-item-button.fi-active * {
    color: var(--sigecop-sidebar-text, #ffffff) !important;
    -webkit-text-fill-color: var(--sigecop-sidebar-text, #ffffff) !important;
    fill: #ffffff !important;
    stroke: none !important;
    font-weight: 400 !important;
}

/* Hover suave para los que NO están seleccionados */
body[class*="theme-"] .fi-sidebar-item-button:hover:not([aria-current="page"]):not(.fi-active) {
    background: rgba(255, 255, 255, 0.1) !important;
}



/* ==========================================================
   TOPBAR GLASSMORPHISM Y TITULOS
========================================================== */
/* Quitar los fondos blancos de Filament y usar vidrio sobre el degradado principal */
body[class*="theme-"] .fi-topbar,
body[class*="theme-"] .fi-topbar>div,
body[class*="theme-"] .fi-topbar nav,
body[class*="theme-"] .fi-layout>div>.fi-topbar {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Iconos del topbar en blanco (Hamburguesa, dark mode, usuario) */
body[class*="theme-"] .fi-topbar button svg,
body[class*="theme-"] .fi-topbar a svg,
body[class*="theme-"] .fi-topbar svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* ==========================================================
   TOPBAR: BUSCADOR JUNTO A NOTIFICACIONES
   (evita que el global search se estire a todo el ancho)
========================================================== */
@media (min-width: 1024px) {
    body[class*="theme-"] .fi-topbar .fi-global-search {
        flex: 0 0 auto;
    }

    body[class*="theme-"] .fi-topbar .fi-global-search-field {
        width: 22rem;
        max-width: 22rem;
    }
}

@media (min-width: 1280px) {
    body[class*="theme-"] .fi-topbar .fi-global-search-field {
        width: 26rem;
        max-width: 26rem;
    }
}

/* ==========================================================
   SUCURSALES: reducir espacio arriba de tarjetas (widgets)
========================================================== */
body.sigecop-page-sucursales .fi-page>section {
    padding-top: 0rem !important;
    padding-bottom: 1rem !important;
    gap: 0.25rem !important;
    row-gap: 0.25rem !important;
}

body.sigecop-page-sucursales .fi-page .fi-header {
    margin-top: -1.25rem !important;
    margin-bottom: 0rem !important;
    gap: 0.25rem !important;
}

body.sigecop-page-sucursales .fi-page .fi-page-header-widgets {
    margin-top: -2.25rem !important;
}

/* ==========================================================
   PLANES: reducir espacio arriba de tarjetas (widgets + listado)
   (igual que Sucursales; evita que “sobre espacio”)
========================================================== */
body.sigecop-page-planes-gestion .fi-page>section {
    padding-top: 0rem !important;
    padding-bottom: 1rem !important;
    gap: 0.25rem !important;
    row-gap: 0.25rem !important;
}

body.sigecop-page-planes-gestion .fi-page .fi-header {
    margin-top: 0.75rem !important;
    margin-bottom: 0.25rem !important;
    gap: 0.25rem !important;
}

body.sigecop-page-planes-gestion .fi-page .fi-page-header-widgets {
    margin-top: 0rem !important;
}

body.sigecop-page-planes-gestion .fi-page .fi-header {
    position: relative;
    z-index: 30;
}

body.sigecop-page-planes-gestion .fi-page .fi-page-header-widgets {
    position: relative;
    z-index: 10;
}

/* ==========================================================
   FICHAS: fondo full-width + quitar contenedores blancos
   (solo aplica al módulo de Fichas)
========================================================== */

/* Fondo hasta las orillas (evita el “borde blanco” del layout) */
body.sigecop-page-fichas-gestion,
body.sigecop-page-fichas-gestion .fi-layout,
body.sigecop-page-fichas-gestion .fi-main-ctn,
body.sigecop-page-planes-gestion,
body.sigecop-page-planes-gestion .fi-layout,
body.sigecop-page-planes-gestion .fi-main-ctn {
    background: #dbeafe !important;
}

/* Evita corte por max-width en pantallas anchas */
body.sigecop-page-fichas-gestion .fi-main,
body.sigecop-page-planes-gestion .fi-main {
    max-width: 100% !important;
    width: 100% !important;
}

/* Quita “tarjeta” blanca de la tabla/listado */
body.sigecop-page-fichas-gestion .fi-ta,
body.sigecop-page-fichas-gestion .fi-ta-ctn,
body.sigecop-page-fichas-gestion .fi-ta-content,
body.sigecop-page-fichas-gestion .fi-ta-record,
body.sigecop-page-fichas-gestion .fi-ta-record>div,
body.sigecop-page-fichas-gestion .fi-ta-header,
body.sigecop-page-fichas-gestion .fi-ta-header-ctn,
body.sigecop-page-fichas-gestion .fi-ta-footer,
body.sigecop-page-fichas-gestion .fi-ta-footer-ctn,
body.sigecop-page-fichas-gestion .fi-ta-pagination,
body.sigecop-page-fichas-gestion .fi-ta-pagination-ctn,
body.sigecop-page-fichas-gestion .fi-pagination {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
}

/* Backup scope (más confiable): clase del recurso en la página */
.fi-resource-fichas .fi-ta,
.fi-resource-fichas .fi-ta-ctn,
.fi-resource-fichas .fi-ta-content,
.fi-resource-fichas .fi-ta-record,
.fi-resource-fichas .fi-ta-record>div,
.fi-resource-fichas .fi-ta-header,
.fi-resource-fichas .fi-ta-header-ctn,
.fi-resource-fichas .fi-ta-footer,
.fi-resource-fichas .fi-ta-footer-ctn,
.fi-resource-fichas .fi-ta-pagination,
.fi-resource-fichas .fi-ta-pagination-ctn,
.fi-resource-fichas .fi-pagination {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
}

/* El “padding blanco” que se ve detrás de las cards viene de aquí (p-4 / sm:px-6) */
body.sigecop-page-fichas-gestion .fi-ta-content-grid,
body.sigecop-page-planes-gestion .fi-ta-content-grid {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.fi-resource-fichas .fi-ta-content-grid {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Quita el hover que vuelve a pintar fondo en el wrapper del record */
body.sigecop-page-fichas-gestion .fi-ta-record:hover,
body.sigecop-page-planes-gestion .fi-ta-record:hover {
    background: transparent !important;
}

.fi-resource-fichas .fi-ta-record:hover {
    background: transparent !important;
}

/* Asegura que el wrapper grande (rounded-xl bg-white ring) no deje “tarjeta detrás” */
body.sigecop-page-fichas-gestion .fi-ta-ctn,
body.sigecop-page-planes-gestion .fi-ta-ctn {
    overflow: visible !important;
    background: transparent !important;
}

.fi-resource-fichas .fi-ta-ctn {
    overflow: visible !important;
    background: transparent !important;
}

/* === ESTA ES LA FRANJA BLANCA ===
   Filament envuelve tu card con un contenedor que trae ps-4/pe-4 + py-4.
   Quitamos ese padding para que la card llegue a las orillas del grid cell. */
body.sigecop-page-fichas-gestion .fi-ta-record>div.flex.w-full,
body.sigecop-page-planes-gestion .fi-ta-record>div.flex.w-full,
.fi-resource-fichas .fi-ta-record>div.flex.w-full,
.fi-resource-planes .fi-ta-record>div.flex.w-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.sigecop-page-fichas-gestion .fi-ta-record .block.w-full,
body.sigecop-page-planes-gestion .fi-ta-record .block.w-full,
.fi-resource-fichas .fi-ta-record .block.w-full,
.fi-resource-planes .fi-ta-record .block.w-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Alineación: evita que el grid de cards quede centrado con pocos registros */
body.sigecop-page-fichas-gestion .fi-ta-content,
body.sigecop-page-fichas-gestion .fi-ta-content>div,
body.sigecop-page-planes-gestion .fi-ta-content,
body.sigecop-page-planes-gestion .fi-ta-content>div {
    width: 100% !important;
    justify-content: center !important;
    justify-items: center !important;
}

body.sigecop-page-fichas-gestion .fi-ta-content .grid,
body.sigecop-page-planes-gestion .fi-ta-content .grid {
    justify-content: center !important;
    justify-items: center !important;
}

/* ==========================================================
   CLIENTES (CREATE): subir secciones y quitar espacio arriba
========================================================== */
body.sigecop-page-clientes-create .fi-page>section {
    padding-top: 0rem !important;
    padding-bottom: 1rem !important;
}

body.sigecop-page-clientes-create .fi-page .fi-header {
    margin-top: -0.75rem !important;
    margin-bottom: 0.25rem !important;
}

/* ==========================================================
   DASHBOARD: quitar espacio entre topbar y tarjetas
========================================================== */
body[class*="theme-"] .fi-page.fi-dashboard-page>section {
    padding-top: 0rem !important;
}

body[class*="theme-"] .fi-page.fi-dashboard-page .fi-page-header-widgets {
    margin-top: 0rem !important;
}

/* ==========================================================
   CLIENTES (CREATE): compactar repeater de Servicios
========================================================== */
body.sigecop-page-clientes-create .sigecop-repeater-compact.fi-fo-repeater {
    gap: 0.75rem !important;
}

body.sigecop-page-clientes-create .sigecop-repeater-compact .fi-fo-repeater-item {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.sigecop-page-clientes-create .sigecop-repeater-compact .fi-fo-repeater-item-content {
    padding: 0 !important;
}

body.sigecop-page-clientes-create .sigecop-repeater-compact .fi-fo-repeater-item-header {
    padding: 0 !important;
    background: transparent !important;
}

body.sigecop-page-clientes-create .sigecop-repeater-compact .fi-fo-repeater-item {
    border-radius: 0 !important;
}

/* ==========================================================
   CLIENTES: Servicio y plan (estado en header)
========================================================== */
body[class*="theme-"] .fi-section.sigecop-service-plan-section {
    position: relative;
}

@media (min-width: 640px) {
    body[class*="theme-"] .fi-section.sigecop-service-plan-section .fi-section-header {
        padding-right: 12.5rem !important;
    }

    body[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-estado-servicio-in-header {
        position: absolute;
        top: 0.85rem;
        right: 1rem;
        width: 11.5rem;
        margin: 0 !important;
        z-index: 40;
    }

    body[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-estado-servicio-in-header .fi-fo-field-wrp-label {
        display: none !important;
    }
}

/* Subir un poco el contenido para alinear con la otra columna */
body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .fi-section-content {
    padding-top: 1rem !important;
}

/* Repeater: que el item no "baje" por labels, y basurero junto al selector */
@media (min-width: 640px) {
    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact.fi-fo-repeater {
        gap: 0.25rem !important;
        margin-top: -0.25rem !important;
    }

    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact .fi-fo-repeater-item {
        position: relative !important;
    }

    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact .fi-fo-repeater-item-content {
        position: relative !important;
    }

    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact .fi-fo-repeater-item-header {
        position: absolute !important;
        top: 0.65rem !important;
        left: 0.05rem !important;
        padding: 0 !important;
        width: auto !important;
        background: transparent !important;
        z-index: 50 !important;
    }

    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact .fi-fo-repeater-item-header h4 {
        display: none !important;
    }

    /* Reservar espacio a la izquierda del selector para el basurero */
    body.sigecop-page-clientes-create[class*="theme-"] .fi-section.sigecop-service-plan-section .sigecop-repeater-compact .fi-fo-repeater-item-content .fi-fo-field-wrp:first-child {
        padding-left: 1.35rem !important;
    }
}

/* ==========================================================
   PLANES: tarjetas superiores con colores (foto #4)
========================================================== */
body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat {
    border: none !important;
    color: #ffffff !important;
}

/* Colores por tipo (coinciden con las tarjetas de abajo) */
body.sigecop-page-planes-gestion .fi-page .fi-wi-stats-overview-stat[data-sigecop-color="green"] {
    background: linear-gradient(135deg, #3f6212 0%, #4d7c0f 100%) !important;
}

body.sigecop-page-planes-gestion .fi-page .fi-wi-stats-overview-stat[data-sigecop-color="blue"] {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

body.sigecop-page-planes-gestion .fi-page .fi-wi-stats-overview-stat[data-sigecop-color="purple"] {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%) !important;
}

body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description * {
    color: #ffffff !important;
}

body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat svg,
body.sigecop-page-planes-gestion .fi-wi-stats-overview-stat svg * {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ==========================================================
   PLANES: estilo de tarjetas (sin depender de clases Tailwind dinámicas)
========================================================== */
body.sigecop-page-planes-gestion .sigecop-plan-card {
    height: 650px !important;
    min-height: 650px !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 2rem;
    border: 1px solid #eef2f6;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__header {
    padding: 1.5rem;
    position: relative;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__header-row {
    padding-left: 3.5rem;
    padding-right: 7rem;
    position: relative;
    z-index: 5;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__corner {
    position: absolute;
    left: 1.25rem;
    top: 1.25rem;
    width: 44px;
    height: 44px;
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__corner-icon {
    width: 22px;
    height: 22px;
    color: #111827;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__pill {
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
    width: 92px;
    height: 18px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.9);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__status {
    font-size: 0.70rem;
    font-weight: 700;
    line-height: 1;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__status.is-active {
    color: #16a34a;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__status.is-inactive {
    color: #6b7280;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="blue"] .sigecop-plan-card__header {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__header {
    background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__header {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__header {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__header {
    background: linear-gradient(135deg, #3f6212 0%, #4d7c0f 100%);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__title {
    color: #ffffff;
    font-weight: 800;
    font-size: 1.25rem;
    line-height: 1.2;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__header-bubbles::before,
body.sigecop-page-planes-gestion .sigecop-plan-card__header-bubbles::after {
    content: "";
    position: absolute;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__header-bubbles::before {
    width: 96px;
    height: 96px;
    top: -24px;
    right: -24px;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__header-bubbles::after {
    width: 48px;
    height: 48px;
    top: 40px;
    right: 40px;
    background: rgba(255, 255, 255, 0.10);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__body {
    padding: 1.5rem;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__price {
    border-radius: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 1rem;
    text-align: center;
    background: #f8fafc;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__speed {
    color: #111827;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="blue"] .sigecop-plan-card__speed {
    color: #2563eb;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__speed {
    color: #9333ea;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__speed {
    color: #4f46e5;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__speed {
    color: #ea580c;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__speed {
    color: #4d7c0f;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="blue"] .sigecop-plan-card__price {
    border-color: rgba(37, 99, 235, 0.25);
    background: rgba(37, 99, 235, 0.06);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__price {
    border-color: rgba(147, 51, 234, 0.25);
    background: rgba(147, 51, 234, 0.06);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__price {
    border-color: rgba(79, 70, 229, 0.25);
    background: rgba(79, 70, 229, 0.06);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__price {
    border-color: rgba(249, 115, 22, 0.25);
    background: rgba(249, 115, 22, 0.08);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__price {
    border-color: rgba(77, 124, 15, 0.25);
    background: rgba(77, 124, 15, 0.07);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__price-main {
    font-size: 2rem;
    font-weight: 900;
    color: #111827;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__benefits {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.75rem;
    color: #374151;
    font-size: 0.875rem;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__check {
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    background: rgba(0, 0, 0, 0.06);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__check-icon {
    color: #111827;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="blue"] .sigecop-plan-card__check-icon {
    color: #2563eb;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__check-icon {
    color: #9333ea;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__check-icon {
    color: #4f46e5;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__check-icon {
    color: #ea580c;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__check-icon {
    color: #4d7c0f;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="blue"] .sigecop-plan-card__check {
    background: rgba(37, 99, 235, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__check {
    background: rgba(147, 51, 234, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__check {
    background: rgba(79, 70, 229, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__check {
    background: rgba(249, 115, 22, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__check {
    background: rgba(34, 197, 94, 0.12);
}

body.sigecop-page-planes-gestion .sigecop-plan-card__actions {
    margin-top: 1.5rem;
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__perf {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    color: #6b7280;
    font-size: 0.75rem;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__perf-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__perf-bar {
    width: 100%;
    height: 6px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

body.sigecop-page-planes-gestion .sigecop-plan-card__perf-fill {
    height: 100%;
    border-radius: 9999px;
    background: #2563eb;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="purple"] .sigecop-plan-card__perf-fill {
    background: #9333ea;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="indigo"] .sigecop-plan-card__perf-fill {
    background: #4f46e5;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="orange"] .sigecop-plan-card__perf-fill {
    background: #ea580c;
}

body.sigecop-page-planes-gestion .sigecop-plan-card[data-color="green"] .sigecop-plan-card__perf-fill {
    background: #4d7c0f;
}

/* Reducir espacio feo entre widgets y tarjetas, y dentro del grid de tarjetas */
body.sigecop-page-planes-gestion .fi-page>section>div.grid {
    row-gap: 1.25rem !important;
}

body.sigecop-page-planes-gestion .fi-ta-content-grid {
    padding-bottom: 0.75rem !important;
}

/* En modo tarjetas usamos una card custom; el wrapper default de Filament queda “atrás” */
body.sigecop-page-planes-gestion .fi-ta-ctn,
body.sigecop-page-planes-gestion .fi-ta-content,
body.sigecop-page-planes-gestion .fi-ta-record,
body.sigecop-page-planes-gestion .fi-ta-record>div,
.fi-resource-planes .fi-ta-ctn,
.fi-resource-planes .fi-ta-content,
.fi-resource-planes .fi-ta-record,
.fi-resource-planes .fi-ta-record>div {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
}

body.sigecop-page-planes .fi-ta-content-grid,
.fi-resource-planes .fi-ta-content-grid {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* === ESTA ES LA FRANJA BLANCA EN PLANES === */
body.sigecop-page-planes .fi-ta-record>div.flex.w-full,
.fi-resource-planes .fi-ta-record>div.flex.w-full {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.sigecop-page-planes .fi-ta-record .block.w-full,
.fi-resource-planes .fi-ta-record .block.w-full {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Forzar altura igual en el grid */
body.sigecop-page-planes .fi-ta-content-grid,
.fi-resource-planes .fi-ta-content-grid {
    display: grid !important;
    align-items: stretch !important;
    grid-auto-rows: 1fr !important;
}

/* SHOTGUN FIX: Forzar que TODAS las capas intermedias sean h-full flex */
body.sigecop-page-planes .fi-ta-content-grid>div,
body.sigecop-page-planes .fi-ta-content-grid>div>div,
body.sigecop-page-planes .fi-ta-content-grid>div>div>div,
body.sigecop-page-planes .fi-ta-content-grid [class*="fi-ta-record"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
}

body.sigecop-page-planes .sigecop-plan-card {
    display: flex !important;
    flex-direction: column !important;
    height: 650px !important;
    /* ALTURA FIJA PARA SIMETRIA ABSOLUTA */
    min-height: 650px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}

body.sigecop-page-planes .sigecop-plan-card__actions .fi-btn {
    width: 100%;
    justify-content: center;
}

/* ==========================================================
   DASHBOARD: ACCIONES RÁPIDAS
   (tarjetas anchas como referencia)
========================================================== */
body[class*="theme-"] .sigecop-quick-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

/* Variante vertical (para panel lateral) */
body[class*="theme-"] .sigecop-quick-actions.sigecop-quick-actions--vertical {
    grid-template-columns: 1fr !important;
}

@media (min-width: 640px) {
    body[class*="theme-"] .sigecop-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    body[class*="theme-"] .sigecop-quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body[class*="theme-"] .sigecop-quick-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    min-height: 5.75rem;
    border-radius: 0.9rem;
    border: 1px solid rgb(var(--gray-200));
    text-decoration: none;
    transition: opacity 150ms ease;
}

body[class*="theme-"] .sigecop-quick-action:hover {
    opacity: 0.95;
}

body[class*="theme-"] .sigecop-quick-action-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

body[class*="theme-"] .sigecop-quick-action-label {
    font-weight: 800;
    font-size: 1rem;
    color: rgb(var(--gray-900));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body[class*="theme-"] .sigecop-quick-action-icon {
    width: 2rem;
    height: 2rem;
}

body[class*="theme-"] .sigecop-quick-action-arrow {
    width: 1.5rem;
    height: 1.5rem;
    color: rgb(var(--gray-400));
}

body[class*="theme-"] .sigecop-quick-action--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

body[class*="theme-"] .sigecop-quick-action[data-color="success"] {
    background: rgb(var(--success-50));
    border-color: rgb(var(--success-200));
}

body[class*="theme-"] .sigecop-quick-action[data-color="success"] .sigecop-quick-action-icon,
body[class*="theme-"] .sigecop-quick-action[data-color="success"] .sigecop-quick-action-arrow {
    color: rgb(var(--success-600));
}

body[class*="theme-"] .sigecop-quick-action[data-color="info"] {
    background: rgb(var(--info-50));
    border-color: rgb(var(--info-200));
}

body[class*="theme-"] .sigecop-quick-action[data-color="info"] .sigecop-quick-action-icon,
body[class*="theme-"] .sigecop-quick-action[data-color="info"] .sigecop-quick-action-arrow {
    color: rgb(var(--info-600));
}

body[class*="theme-"] .sigecop-quick-action[data-color="warning"] {
    background: rgb(var(--warning-50));
    border-color: rgb(var(--warning-200));
}

body[class*="theme-"] .sigecop-quick-action[data-color="warning"] .sigecop-quick-action-icon,
body[class*="theme-"] .sigecop-quick-action[data-color="warning"] .sigecop-quick-action-arrow {
    color: rgb(var(--warning-600));
}

body[class*="theme-"] .sigecop-quick-action[data-color="primary"] {
    background: rgb(var(--primary-50));
    border-color: rgb(var(--primary-200));
}

body[class*="theme-"] .sigecop-quick-action[data-color="primary"] .sigecop-quick-action-icon,
body[class*="theme-"] .sigecop-quick-action[data-color="primary"] .sigecop-quick-action-arrow {
    color: rgb(var(--primary-600));
}

/* ==========================================================
   CLIENTES: panel lateral (análisis morosidad)
========================================================== */
body[class*="theme-"] .sigecop-morosidad-card {
    border-radius: 0.9rem;
    border: 1px solid rgb(var(--gray-200));
    padding: 1rem 1.25rem;
    background: #ffffff;
}

body[class*="theme-"] .sigecop-morosidad-card[data-color="warning"] {
    background: rgb(var(--warning-50));
    border-color: rgb(var(--warning-200));
}

body[class*="theme-"] .sigecop-morosidad-card[data-color="danger"] {
    background: rgb(var(--danger-50));
    border-color: rgb(var(--danger-200));
}

/* ==========================================================
   CLIENTES: listado (scroll horizontal)
   Nota: scoped al contenedor de la página del recurso.
========================================================== */
.fi-resource-clientes .fi-ta-content {
    overflow-x: auto;
}

/* Evita que el contenedor de la tabla se expanda y empuje el panel derecho */
.fi-resource-clientes .fi-ta {
    min-width: 0;
}

.fi-resource-clientes .fi-ta-table {
    width: max-content;
    min-width: 1800px;
}

.fi-resource-clientes .fi-ta-table th,
.fi-resource-clientes .fi-ta-table td {
    white-space: nowrap;
}

/* ==========================================================
   CLIENTES: subir tarjetas (menos espacio arriba)
========================================================== */
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes>section {
    padding-top: 0rem !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-page-header-widgets {
    margin-top: -0.75rem !important;
}

/* ==========================================================
   CLIENTES: colores en tarjetas de stats
   (Usa tokens del tema; no cambia tu paleta global)
========================================================== */
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat] {
    border: 1px solid rgb(var(--gray-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat] .fi-wi-stats-overview-stat-icon {
    opacity: 0.95;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="total"] {
    background: linear-gradient(135deg, rgb(var(--primary-50)), rgb(var(--primary-100))) !important;
    border-color: rgb(var(--primary-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="total"] .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--primary-600)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="activos"],
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="al-dia"] {
    background: linear-gradient(135deg, rgb(var(--success-50)), rgb(var(--success-100))) !important;
    border-color: rgb(var(--success-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="activos"] .fi-wi-stats-overview-stat-icon,
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="al-dia"] .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--success-600)) !important;
}

/* Morosos: rojo/rosado degradado */
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="morosos"] {
    background: linear-gradient(135deg, rgb(var(--danger-50)), rgb(var(--danger-100))) !important;
    border-color: rgb(var(--danger-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="morosos"] .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--danger-600)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="inactivos"] {
    background: linear-gradient(135deg, rgb(var(--gray-50)), rgb(var(--gray-100))) !important;
    border-color: rgb(var(--gray-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="nuevo"] {
    background: linear-gradient(135deg, rgb(var(--primary-50)), rgb(var(--primary-100))) !important;
    border-color: rgb(var(--primary-200)) !important;
}

body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat[data-sigecop-stat="nuevo"] .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--primary-600)) !important;
}

/* ==========================================================
   UI DENSITY (RESPONSIVE) — nítido
   En 1080p se siente "apretado": compactamos padding/tamaños.
========================================================== */
@media (min-width: 1024px) and (max-width: 2199px) {
    body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat {
        padding: 1rem !important;
    }

    body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stat-value {
        font-size: 1.75rem !important;
        line-height: 2rem !important;
    }

    body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-wi-stats-overview-stats-ctn {
        gap: 1rem !important;
    }
}

/* Título Inyectado en Topbar */
body[class*="theme-"] #sigecop-page-title {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-shadow: none !important;
}

body.theme-claro #sigecop-page-title {
    color: #1e293b !important;
}

/* Botón Atrás en Topbar */
body[class*="theme-"] #sigecop-back-btn {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 9999px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    cursor: pointer !important;
}

body[class*="theme-"] #sigecop-back-btn:hover {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* Ocultar el header gigante debajo del topbar y breadcrumbs */
/* Ocultar elementos redundantes pero MANTENER el header para ver los botones de Acciones */
body[class*="theme-"] .fi-breadcrumbs,
body[class*="theme-"] .fi-topbar-breadcrumbs,
body[class*="theme-"] .fi-header h1,
body[class*="theme-"] .fi-page-header h1 {
    display: none !important;
}

/* Ajustar el header para que no ocupe espacio innecesario sin el título */
body[class*="theme-"] .fi-header {
    margin-bottom: 1rem !important;
}

/* En Clientes, lo subimos todavía más */
body[class*="theme-"] .fi-page.fi-resource-list-records-page.fi-resource-clientes .fi-header {
    margin-bottom: 0.25rem !important;
}

/* ==========================================================
   GLASSMORPHISM EN TARJETAS (WIDGETS Y CHARTS)
========================================================== */
body[class*="theme-"] .fi-wi-stats-overview-stat,
body[class*="theme-"] .fi-wi-widget,
body[class*="theme-"] .fi-wi-chart {
    /* MOCKUP STYLE Cards: Clean, White, Professional */
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
    border-radius: 1rem !important;
}

/* Force 6 columns for stats on desktop */
@media (min-width: 1280px) {
    .fi-wi-stats-overview>div {
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    }
}

/* ==========================================================
   CLIENTE PANEL (SLIDE-OVER): tarjeta bonita + resumen
========================================================== */
body[class*="theme-"] .sigecop-cliente-panel-v2 {
    padding: 0;
    border-radius: 1.25rem;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(var(--info-50)), rgb(var(--gray-50)));
    border: 1px solid rgb(var(--gray-200));
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

body[class*="theme-"] .sigecop-cliente-panel-v2 .sigecop-cliente-card {
    border-radius: 0;
    overflow: visible;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

body[class*="theme-"] .sigecop-cliente-panel-v2 .sigecop-cliente-card__profile {
    padding: 1.25rem 1.25rem 1rem;
    text-align: center;
    background: radial-gradient(circle at top, rgb(var(--info-100)) 0%, transparent 60%);
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="success"] .sigecop-cliente-card__profile {
    background: radial-gradient(circle at top, rgb(var(--success-100)) 0%, transparent 60%);
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="warning"] .sigecop-cliente-card__profile {
    background: radial-gradient(circle at top, rgb(var(--warning-100)) 0%, transparent 60%);
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="danger"] .sigecop-cliente-card__profile {
    background: radial-gradient(circle at top, rgb(var(--danger-100)) 0%, transparent 60%);
}

body[class*="theme-"] .sigecop-cliente-avatar-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    margin: 0 auto;
}

body[class*="theme-"] .sigecop-cliente-avatar-v2 {
    width: 76px;
    height: 76px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 1.35rem;
    color: rgb(var(--gray-50));
    background: linear-gradient(135deg, rgb(var(--info-600)), rgb(var(--info-400)));
    border: 3px solid rgb(var(--gray-50) / 0.08);
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="success"] .sigecop-cliente-avatar-v2 {
    background: linear-gradient(135deg, rgb(var(--success-600)), rgb(var(--success-400)));
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="warning"] .sigecop-cliente-avatar-v2 {
    background: linear-gradient(135deg, rgb(var(--warning-600)), rgb(var(--warning-400)));
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="danger"] .sigecop-cliente-avatar-v2 {
    background: linear-gradient(135deg, rgb(var(--danger-600)), rgb(var(--danger-400)));
}

body[class*="theme-"] .sigecop-cliente-status-dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    background: rgb(var(--success-500));
    border: 3px solid rgb(var(--gray-50));
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="warning"] .sigecop-cliente-status-dot {
    background: rgb(var(--warning-500));
}

body[class*="theme-"] .sigecop-cliente-panel-v2[data-tone="danger"] .sigecop-cliente-status-dot {
    background: rgb(var(--danger-500));
}

body[class*="theme-"] .sigecop-cliente-name {
    margin-top: 0.75rem;
    font-weight: 900;
    font-size: 1.1rem;
    color: rgb(var(--gray-950));
}

body[class*="theme-"] .sigecop-cliente-divider {
    height: 1px;
    width: 74%;
    margin: 0.75rem auto 0.85rem;
    background: rgb(var(--gray-200));
}

body[class*="theme-"] .sigecop-cliente-meta {
    display: grid;
    gap: 0.4rem;
    justify-items: center;
    color: rgb(var(--gray-700));
    font-size: 0.82rem;
}

body[class*="theme-"] .sigecop-cliente-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: 100%;
}

body[class*="theme-"] .sigecop-cliente-meta-ico {
    width: 16px;
    height: 16px;
    opacity: 0.9;
}

body[class*="theme-"] .sigecop-cliente-badges {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

body[class*="theme-"] .sigecop-cliente-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
    padding: 0.75rem;
    background: rgb(var(--info-50));
    border-top: 1px solid rgb(var(--gray-200));
    border-bottom: 1px solid rgb(var(--gray-200));
}

body[class*="theme-"] .sigecop-cliente-tab {
    padding: 0.55rem 0.75rem;
    border-radius: 0.9rem;
    font-weight: 800;
    font-size: 0.85rem;
    color: rgb(var(--gray-600));
    background: transparent;
    transition: background 120ms ease, color 120ms ease;
}

body[class*="theme-"] .sigecop-cliente-tab.is-active {
    color: rgb(var(--gray-950));
    background: rgb(var(--info-50));
    border: 1px solid rgb(var(--info-200));
}

body[class*="theme-"] .sigecop-cliente-kv {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0.75rem;
    align-items: start;
}

body[class*="theme-"] .sigecop-cliente-k {
    color: rgb(var(--gray-600));
    font-weight: 800;
    font-size: 0.78rem;
}

body[class*="theme-"] .sigecop-cliente-v {
    color: rgb(var(--gray-950));
    font-weight: 700;
    font-size: 0.9rem;
    word-break: break-word;
}

/* ==========================================================
   FICHAS: SUBIR TARJETAS AL TOPE (ULTRA AGRESIVO)
   ========================================================== */
body.sigecop-page-fichas-gestion .fi-page>section {
    padding-top: 0.5rem !important;
    margin-top: 0 !important;
}

body.sigecop-page-fichas-gestion .fi-header {
    /* Ocultar encabezado sin romper el renderizado de modales (como ocurre con display:none) */
    position: absolute !important;
    width: 0px !important;
    height: 0px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

body.sigecop-page-fichas-gestion .fi-page-header-widgets {
    margin-top: -1.2rem !important;
    /* Ajuste para que quede "a milimetros" */
}

body.sigecop-page-fichas-gestion .fi-page-header-widgets {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.sigecop-page-fichas-gestion .fi-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.sigecop-page-fichas-gestion .fi-main-ctn {
    padding-top: 0 !important;
}

body.sigecop-page-fichas-gestion .fi-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.sigecop-page-fichas-gestion section.fi-page-content {
    padding-top: 0 !important;
    margin-top: 0.2rem !important;
}

body.sigecop-page-fichas-gestion .fi-ta-content-grid {
    padding-top: 0 !important;
    display: grid !important;
    grid-auto-rows: 1fr !important;
    align-items: stretch !important;
}

/* SHOTGUN FIX para FICHAS: Simetría absoluta */
body.sigecop-page-fichas-gestion .fi-ta-content-grid>div,
body.sigecop-page-fichas-gestion .fi-ta-content-grid>div>div,
body.sigecop-page-fichas-gestion .fi-ta-content-grid>div>div>div,
body.sigecop-page-fichas-gestion .fi-ta-content-grid [class*="fi-ta-record"] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 100% !important;
}

body.sigecop-page-fichas-gestion .fi-ficha-card {
    height: 520px !important;
    min-height: 520px !important;
    width: 350px !important;
    /* Ancho fijo absoluto para todas */
    min-width: 350px !important;
    max-width: 350px !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Forzar que el contenedor de la rejilla respete el ancho y centre */
body.sigecop-page-fichas-gestion .fi-ta-content-grid {
    gap: 1.5rem !important;
    justify-items: center !important;
    justify-content: center !important;
}

/* Ocultar acciones redundantes que Filament pone en el grid por debajo de nuestras tarjetas */
body.sigecop-page-fichas-gestion .fi-ta-content-grid>div>div>div:last-child:not(:first-child) {
    display: none !important;
}

body.sigecop-page-fichas-gestion .fi-ta-content-grid .fi-ta-actions {
    display: none !important;
}

/* MODAL PREMIUM STYLING */
.fi-modal .fi-fo-section {
    border-radius: 1rem !important;
    border: 1px solid #f3f4f6 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

.fi-modal .fi-fo-section-header {
    background: #f9fafb !important;
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.fi-modal .fi-fo-section-header-heading {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #1e1b4b !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.fi-modal .fi-fo-section-header-description {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    margin-top: 0.25rem !important;
}

.fi-modal .fi-input-wrp {
    border-radius: 0.75rem !important;
    transition: all 0.2s !important;
}

.fi-modal .fi-input-wrp:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.fi-modal .fi-ac-action[type="submit"] {
    background: #2563eb !important;
    border-radius: 0.75rem !important;
    padding: 0.6rem 2rem !important;
    font-weight: 600 !important;
}

/* ==========================================================
   CLIENTES (GESTION): compacto + sticky Nombre + scroll arriba
========================================================== */
body.sigecop-page-clientes-gestion .fi-ta-filters,
body.sigecop-page-clientes-gestion .fi-ta-filter-form {
    gap: 0.5rem !important;
}

body.sigecop-page-clientes-gestion .fi-ta-filter-form {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

body.sigecop-page-clientes-gestion .sigecop-table-top-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin: 0.5rem 0 0.35rem;
    border-radius: 0.75rem;
    background: rgb(var(--gray-100));
    border: 1px solid rgb(var(--gray-200));
}

body.sigecop-page-historial-pagos .sigecop-table-top-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin: 0.5rem 0 0.35rem;
    border-radius: 0.75rem;
    background: rgb(var(--gray-100));
    border: 1px solid rgb(var(--gray-200));
}

/* ==========================================================
   PAGOS (MODULO): quitar espacio superior de la página
========================================================== */
body.sigecop-page-pagos .fi-page>section {
    padding-top: 0 !important;
    padding-bottom: 1rem !important;
}

body.sigecop-page-pagos .fi-page .fi-header {
    margin-top: -1.5rem !important;
    margin-bottom: 0 !important;
    padding-bottom: 0.25rem !important;
}

body.sigecop-page-pagos .fi-page .fi-page-header-widgets {
    margin-top: 0 !important;
}

body.sigecop-page-pagos .fi-page .fi-widget-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.sigecop-page-pagos .fi-main-ctn {
    padding-top: 0 !important;
}

body.sigecop-page-pagos section.fi-page-content {
    padding-top: 0 !important;
    gap: 0 !important;
}

/* ==========================================================
   PAGOS (MODULO): header cliente + botón registrar
========================================================== */
body.sigecop-page-pagos .sigecop-pagos-header {
    border-radius: 1.25rem;
    padding: 1.25rem 1.25rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10);
}

body.sigecop-page-pagos .sigecop-pagos-header__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

body.sigecop-page-pagos .sigecop-pagos-avatar {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex: 0 0 auto;
}

body.sigecop-page-pagos .sigecop-pagos-header__name {
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.2;
}

body.sigecop-page-pagos .sigecop-pagos-header__meta {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    font-size: 0.80rem;
    opacity: 0.95;
}

body.sigecop-page-pagos .sigecop-pagos-header__right {
    text-align: right;
    flex: 0 0 auto;
}

body.sigecop-page-pagos .sigecop-pagos-header__saldo-label {
    font-size: 0.78rem;
    opacity: 0.92;
}

body.sigecop-page-pagos .sigecop-pagos-header__saldo {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

@media (max-width: 639.98px) {
    body.sigecop-page-pagos .sigecop-pagos-header {
        flex-direction: column;
        align-items: flex-start;
    }

    body.sigecop-page-pagos .sigecop-pagos-header__right {
        width: 100%;
        text-align: left;
    }
}

body.sigecop-page-pagos .sigecop-pagos-submit {
    background: rgb(var(--gray-950)) !important;
    border-color: rgb(var(--gray-950)) !important;
    color: #ffffff !important;
}

body.sigecop-page-pagos .sigecop-pagos-submit:hover {
    background: rgb(var(--gray-900)) !important;
    border-color: rgb(var(--gray-900)) !important;
}

body.sigecop-page-pagos .sigecop-pagos-submit[disabled],
body.sigecop-page-pagos .sigecop-pagos-submit:disabled {
    opacity: 0.6 !important;
}

/* Pagos: servicios adicionales (repeater) en modo compacto */
body.sigecop-page-pagos .sigecop-pagos-services.fi-fo-repeater {
    gap: 0.75rem !important;
}

body.sigecop-page-pagos .sigecop-pagos-services .fi-fo-repeater-item {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.sigecop-page-pagos .sigecop-pagos-services .fi-fo-repeater-item-content {
    padding: 0 !important;
}

body.sigecop-page-pagos .sigecop-pagos-services .fi-fo-repeater-item-header {
    padding: 0 !important;
    background: transparent !important;
}

/* Botón + (agregar) alineado y estilo cuadrado */
body.sigecop-page-pagos .sigecop-pagos-services>div.flex {
    justify-content: flex-end !important;
}

body.sigecop-page-pagos .sigecop-pagos-services>div.flex .fi-btn {
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 0.75rem !important;
    background: rgb(var(--gray-950)) !important;
    border-color: rgb(var(--gray-950)) !important;
    color: #ffffff !important;
}

body.sigecop-page-pagos .sigecop-pagos-services>div.flex .fi-btn:hover {
    background: rgb(var(--gray-900)) !important;
    border-color: rgb(var(--gray-900)) !important;
}

/* ==========================================================
   PAGOS WIDGET: cards, inputs, iconos, prefijo Q
========================================================== */

/* Íconos de cabecera de cards */
body.sigecop-page-pagos .sp-icon-blue {
    color: #3b82f6;
}

body.sigecop-page-pagos .sp-icon-green {
    color: #22c55e;
}

body.sigecop-page-pagos .sp-icon-purple {
    color: #a855f7;
}

body.sigecop-page-pagos .sp-icon-blue svg,
body.sigecop-page-pagos .sp-icon-green svg,
body.sigecop-page-pagos .sp-icon-purple svg {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
}

/* Label de campo */
body.sigecop-page-pagos .sp-label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
}

body.sigecop-page-pagos .sp-label-xs {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}

body.sigecop-page-pagos .sp-required {
    color: #ef4444;
}

/* Input texto / fecha / número */
body.sigecop-page-pagos .sp-input {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    background-color: #f9fafb;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    box-shadow: 0 0 0 1px #d1d5db inset;
    outline: none;
    box-sizing: border-box;
}

body.sigecop-page-pagos .sp-input:focus {
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

body.sigecop-page-pagos .sp-input:disabled,
body.sigecop-page-pagos .sp-input[disabled] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: default;
}

/* Select */
body.sigecop-page-pagos .sp-select {
    display: block;
    width: 100%;
    border-radius: 0.5rem;
    border: none;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    background-size: 1.25rem 1.25rem;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    box-shadow: 0 0 0 1px #d1d5db inset;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

body.sigecop-page-pagos .sp-select:focus {
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

body.sigecop-page-pagos .sp-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
}

/* Prefijo de moneda (div wrapper + Q span + input) */
body.sigecop-page-pagos .sp-currency-wrap {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    box-shadow: 0 0 0 1px #d1d5db inset;
    overflow: hidden;
}

body.sigecop-page-pagos .sp-currency-wrap:focus-within {
    background-color: #ffffff;
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

body.sigecop-page-pagos .sp-currency-prefix {
    padding: 0 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    color: #6b7280;
    flex-shrink: 0;
    line-height: 1;
    user-select: none;
}

body.sigecop-page-pagos .sp-currency-input {
    flex: 1 1 0%;
    min-width: 0;
    border: none;
    background: transparent;
    padding: 0.5rem 0.5rem 0.5rem 0;
    font-size: 0.875rem;
    color: #111827;
    outline: none;
}

/* Resumen desglose box */
body.sigecop-page-pagos .sp-resumen-box,
.sigecop-pago-modal-wrap .sp-resumen-box {
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    background-color: #f9fafb;
    padding: 1.25rem;
}

/* ==========================================================
   PAGOS MODAL: re-apply all .sp-* styles inside the modal wrap
   (since body class is not sigecop-page-pagos in Create Cliente)
========================================================== */
.sigecop-pago-modal-wrap .sigecop-pagos-header {
    border-radius: 1.25rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.sigecop-pago-modal-wrap .sigecop-pagos-avatar {
    width: 56px;
    height: 56px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .25);
    flex: 0 0 auto;
    font-size: 1rem;
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__name {
    font-weight: 900;
    font-size: 1.1rem;
    line-height: 1.2;
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__meta {
    margin-top: .25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    font-size: .80rem;
    opacity: .95;
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__right {
    text-align: right;
    flex: 0 0 auto;
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__saldo-label {
    font-size: .78rem;
    opacity: .92;
}

.sigecop-pago-modal-wrap .sigecop-pagos-header__saldo {
    font-size: 1.85rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.sigecop-pago-modal-wrap .sp-icon-blue {
    color: #3b82f6;
}

.sigecop-pago-modal-wrap .sp-icon-green {
    color: #22c55e;
}

.sigecop-pago-modal-wrap .sp-icon-purple {
    color: #a855f7;
}

.sigecop-pago-modal-wrap .sp-icon-blue svg,
.sigecop-pago-modal-wrap .sp-icon-green svg,
.sigecop-pago-modal-wrap .sp-icon-purple svg {
    color: inherit !important;
    fill: none !important;
    stroke: currentColor !important;
}

.sigecop-pago-modal-wrap .sp-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .875rem;
    font-weight: 500;
    color: #374151;
}

.sigecop-pago-modal-wrap .sp-label-xs {
    display: block;
    margin-bottom: .25rem;
    font-size: .75rem;
    color: #6b7280;
}

.sigecop-pago-modal-wrap .sp-required {
    color: #ef4444;
}

.sigecop-pago-modal-wrap .sp-input {
    display: block;
    width: 100%;
    border-radius: .5rem;
    border: none;
    background-color: #f9fafb;
    padding: .5rem .75rem;
    font-size: .875rem;
    color: #111827;
    box-shadow: 0 0 0 1px #d1d5db inset;
    outline: none;
    box-sizing: border-box;
}

.sigecop-pago-modal-wrap .sp-input:focus {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

.sigecop-pago-modal-wrap .sp-input:disabled,
.sigecop-pago-modal-wrap .sp-input[disabled] {
    background-color: #f3f4f6;
    color: #9ca3af;
    cursor: default;
}

.sigecop-pago-modal-wrap .sp-select {
    display: block;
    width: 100%;
    border-radius: .5rem;
    border: none;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M7 7l3 3 3-3' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2FSvg%3E");
    background-repeat: no-repeat;
    background-position: right .6rem center;
    background-size: 1.25rem;
    padding: .5rem 2rem .5rem .75rem;
    font-size: .875rem;
    color: #111827;
    box-shadow: 0 0 0 1px #d1d5db inset;
    outline: none;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.sigecop-pago-modal-wrap .sp-select:focus {
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

.sigecop-pago-modal-wrap .sp-select:disabled {
    background-color: #f3f4f6;
    color: #9ca3af;
}

.sigecop-pago-modal-wrap .sp-currency-wrap {
    display: flex;
    align-items: center;
    border-radius: .5rem;
    background-color: #f9fafb;
    box-shadow: 0 0 0 1px #d1d5db inset;
    overflow: hidden;
}

.sigecop-pago-modal-wrap .sp-currency-wrap:focus-within {
    background-color: #fff;
    box-shadow: 0 0 0 2px rgb(var(--primary-500)) inset;
}

.sigecop-pago-modal-wrap .sp-currency-prefix {
    padding: 0 .5rem 0 .75rem;
    font-size: .875rem;
    color: #6b7280;
    flex-shrink: 0;
    user-select: none;
}

.sigecop-pago-modal-wrap .sp-currency-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    padding: .5rem .5rem .5rem 0;
    font-size: .875rem;
    color: #111827;
    outline: none;
}

body.sigecop-page-historial-pagos .sigecop-table-top-scroll__inner {
    height: 1px;
}

/* Historial pagos: permitir overflow horizontal sin romper el panel derecho */
body.sigecop-page-historial-pagos .fi-ta {
    min-width: 0;
}

body.sigecop-page-historial-pagos .fi-ta-table {
    width: max-content;
}

body.sigecop-page-historial-pagos .fi-ta-table th,
body.sigecop-page-historial-pagos .fi-ta-table td {
    white-space: nowrap;
}

body.sigecop-page-pagos .sigecop-table-top-scroll {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin: 0.5rem 0 0.35rem;
    border-radius: 0.75rem;
    background: rgb(var(--gray-100));
    border: 1px solid rgb(var(--gray-200));
}

body.sigecop-page-pagos .sigecop-table-top-scroll__inner {
    height: 1px;
}

body.sigecop-page-pagos .fi-ta {
    min-width: 0;
}

body.sigecop-page-pagos .fi-ta-table {
    width: 100%;
}

body.sigecop-page-pagos .fi-ta-table th,
body.sigecop-page-pagos .fi-ta-table td {
    white-space: normal;
}

/* Pagos: layout modulo (tabla + formulario a la par) */
body.sigecop-page-pagos .sigecop-pagos-sidebar {
    flex: 0 0 420px;
    width: 420px;
}

@media (max-width: 767.98px) {
    body.sigecop-page-pagos .sigecop-pagos-sidebar {
        flex: 1 1 auto;
        width: 100%;
    }
}

body.sigecop-page-clientes-gestion .sigecop-table-top-scroll__inner {
    height: 1px;
}

body.sigecop-page-clientes-gestion .fi-ta-table th[data-column="nombre_completo"],
body.sigecop-page-clientes-gestion .fi-ta-table td[data-column="nombre_completo"] {
    position: sticky;
    left: 0;
    z-index: 5;
    background: rgb(var(--gray-50));
}

body.sigecop-page-clientes-gestion .fi-ta-table th[data-column="nombre_completo"] {
    z-index: 6;
}

body.sigecop-page-clientes-gestion .fi-ta-table th.sigecop-sticky-nombre,
body.sigecop-page-clientes-gestion .fi-ta-table td.sigecop-sticky-nombre {
    position: sticky;
    left: 0;
    z-index: 5;
    background: rgb(var(--gray-50));
}

body.sigecop-page-clientes-gestion .fi-ta-table th.sigecop-sticky-nombre {
    z-index: 6;
}

body[class*="theme-"] .sigecop-cliente-body {
    padding: 1rem;
    background: transparent;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body[class*="theme-"] .sigecop-cliente-tab-pane {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

body[class*="theme-"] .sigecop-cliente-section--push-bottom {
    margin-top: auto;
}

/* Filament slide-over content is flex-1; ensure our panel can grow and remove the "retracted" look */
body[class*="theme-"] .fi-modal-slide-over-window .fi-modal-content>.sigecop-cliente-panel-v2 {
    align-self: stretch;
}

body[class*="theme-"] .sigecop-cliente-section {
    border-radius: 1.1rem;
    border: 1px solid rgb(var(--gray-200));
    background: rgb(var(--gray-50));
    padding: 0.95rem;
}

body[class*="theme-"] .sigecop-cliente-section__title {
    font-weight: 900;
    font-size: 0.9rem;
    color: rgb(var(--gray-950));
}

body[class*="theme-"] .sigecop-cliente-pay-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.9rem;
    background: rgb(var(--gray-100));
    border: 1px solid rgb(var(--gray-200));
}

body[class*="theme-"] .sigecop-cliente-pay-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: rgb(var(--gray-700));
    font-size: 0.85rem;
}

body[class*="theme-"] .sigecop-cliente-pay-ico {
    width: 16px;
    height: 16px;
    opacity: 0.85;
}

body[class*="theme-"] .sigecop-cliente-pay-amount {
    font-weight: 900;
    color: rgb(var(--gray-950));
    font-size: 0.9rem;
}

body[class*="theme-"] .sigecop-cliente-history-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.9rem;
    background: rgb(var(--gray-100));
    border: 1px solid rgb(var(--gray-200));
}

body[class*="theme-"] .sigecop-cliente-text {
    color: rgb(var(--gray-950));
}

body[class*="theme-"] .sigecop-cliente-muted {
    color: rgb(var(--gray-600));
}

@media (min-width: 1280px) {
    body.sigecop-page-planes .fi-wi-stats-overview>div {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* Refine Stat Card internal layout to match mockup */
.fi-wi-stats-overview-stat {
    padding: 1.5rem !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: none !important;
}

.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    margin-top: 0.25rem !important;
}

/* OVERRIDES ESPECIFICOS PARA EL TEMA CLARO (GRADIENTES VIVOS) */
body.theme-claro .fi-wi-stats-overview-stat {
    border: none !important;
    backdrop-filter: none !important;
}

body.theme-claro .fi-wi-stats-overview-stat:nth-child(1) {
    background: linear-gradient(135deg, #ff9d6c 0%, #ff6f61 100%) !important;
}

body.theme-claro .fi-wi-stats-overview-stat:nth-child(2) {
    background: linear-gradient(135deg, #9d7cff 0%, #7b45f0 100%) !important;
}

body.theme-claro .fi-wi-stats-overview-stat:nth-child(3) {
    background: linear-gradient(135deg, #4dd4ff 0%, #00a3ff 100%) !important;
}

body.theme-claro .fi-wi-stats-overview-stat:nth-child(4) {
    background: linear-gradient(135deg, #374151 0%, #111827 100%) !important;
}

/* Texto blanco sobre los gradientes del tema claro */
body.theme-claro .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-label,
body.theme-claro .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value,
body.theme-claro .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description,
body.theme-claro .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description * {
    color: #ffffff !important;
}

/* Estilo para los widgets de graficos en Claro (Limpios y Blancos) */
body.theme-claro .fi-wi-widget,
body.theme-claro .fi-wi-chart {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

/* Limpieza de fondos para evitar cajas oscuras o dobles bordes */
body[class*="theme-"] .fi-wi-stats-overview {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

body[class*="theme-"] .fi-wi-widget>*,
body[class*="theme-"] .fi-wi-chart>* {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body[class*="theme-"] .fi-section-header,
body[class*="theme-"] .fi-section-content,
body[class*="theme-"] .fi-wi-widget .fi-section,
body[class*="theme-"] .fi-wi-stats-overview-stat .fi-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   CHARTS: LLENAR ALTURA DE LA TARJETA
   (evita que el gráfico quede pequeño con mucho espacio abajo)
========================================================== */
body[class*="theme-"] .fi-wi-chart {
    display: flex;
    flex-direction: column;
    height: 100%;
}

body[class*="theme-"] .fi-wi-chart .fi-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

body[class*="theme-"] .fi-wi-chart .fi-section-content-ctn {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

body[class*="theme-"] .fi-wi-chart .fi-section-content {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

/* Wrapper del chart (el que tiene wire:poll si aplica) */
body[class*="theme-"] .fi-wi-chart .fi-section-content>div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Root del componente Alpine del chart (tiene wire:ignore) */
body[class*="theme-"] .fi-wi-chart .fi-section-content>div>div[wire\:ignore] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

body[class*="theme-"] .fi-wi-chart canvas {
    height: 100% !important;
    max-height: none !important;
}

/* TEXTOS DENTRO DE LAS TARJETAS (VERSION LIGHT MODE PARA CONTRASTE MAXIMO) */
body[class*="theme-"] .fi-wi-stats-overview-stat-label,
body[class*="theme-"] .fi-section-header-heading {
    color: #4b5563 !important;
    /* Gray 600 */
    font-weight: 600 !important;
    text-shadow: none !important;
}

/* Valores grandes (ej: "Q0.00", "14", "9") */
body[class*="theme-"] .fi-wi-stats-overview-stat-value {
    font-size: 2.25rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    /* Dark Gray 900 */
    text-shadow: none !important;
}

/* Descripción y subtextos */
body[class*="theme-"] .fi-wi-stats-overview-stat-description,
body[class*="theme-"] .fi-wi-stats-overview-stat-description * {
    color: #6b7280 !important;
    /* Gray 500 */
}

/* ==========================================================
   FORMULARIOS: SECCIONES COLOREADAS (Clientes)
   Nota: existe un override global que deja .fi-section* transparente.
   Estas reglas lo sobre-escriben SOLO cuando usamos .sigecop-form-section.
========================================================== */
body[class*="theme-"] .fi-section.sigecop-form-section {
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    border-radius: 0.9rem !important;
    overflow: visible !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section .fi-section-content {
    border: none !important;
    box-shadow: none !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section .fi-section-header {
    border-top-left-radius: 0.9rem !important;
    border-top-right-radius: 0.9rem !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section .fi-section-content-ctn {
    border-bottom-left-radius: 0.9rem !important;
    border-bottom-right-radius: 0.9rem !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="primary"] {
    border-left: 4px solid rgb(var(--primary-600)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="primary"] .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="primary"] .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="primary"] .fi-section-content {
    background: rgb(var(--primary-50)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="success"] {
    border-left: 4px solid rgb(var(--success-600)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="success"] .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="success"] .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="success"] .fi-section-content {
    background: rgb(var(--success-50)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="warning"] {
    border-left: 4px solid rgb(var(--warning-600)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="warning"] .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="warning"] .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="warning"] .fi-section-content {
    background: rgb(var(--warning-50)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="info"] {
    border-left: 4px solid rgb(var(--info-600)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="info"] .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="info"] .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="info"] .fi-section-content {
    background: rgb(var(--info-50)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="gray"] {
    border-left: 4px solid rgb(var(--gray-500)) !important;
}

body[class*="theme-"] .fi-section.sigecop-form-section[data-color="gray"] .fi-section-header,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="gray"] .fi-section-content-ctn,
body[class*="theme-"] .fi-section.sigecop-form-section[data-color="gray"] .fi-section-content {
    background: rgb(var(--gray-50)) !important;
    background: color-mix(in srgb, rgb(var(--gray-50)) 82%, rgb(var(--warning-50)) 18%) !important;
}

body[class*="theme-"] .fi-section.sigecop-top-row-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

body[class*="theme-"] .fi-section.sigecop-top-row-section .fi-section-content-ctn {
    flex: 1 1 auto !important;
}

/* Activo: pegado al título de Información personal (lg+) */
body[class*="theme-"] .fi-section.sigecop-personal-section {
    position: relative !important;
}

@media (min-width: 1024px) {
    body[class*="theme-"] .fi-section.sigecop-personal-section .sigecop-activo-float {
        position: absolute !important;
        top: 0.95rem !important;
        right: 1.25rem !important;
        z-index: 10 !important;
        margin: 0 !important;
    }

    /* Evitar que el toggle quede muy grande */
    body[class*="theme-"] .fi-section.sigecop-personal-section .sigecop-activo-float .fi-fo-field-wrp {
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================
   SIDEBAR EXACT DESIGN RESTORATION (As per photo 3)
========================================================== */

/* CAFE THEME SIDEBAR REBUILD */
body.theme-cafe {
    background: #FFF2DF !important;
    /* Lighter background for main area */
}

body.theme-cafe .fi-sidebar {
    /* Gradient from dark brown to lighter brown/beige to match the screenshot */
    background: linear-gradient(180deg, #3E2522 0%, #8C6E63 50%, #D3A376 100%) !important;
    border-right: none !important;
}

body.theme-cafe .fi-main,
body.theme-cafe .fi-main-ctn {
    background: #FFF2DF !important;
    /* match the main background color */
}

/* Ensure the topbar matches the main background rather than the sidebar */
body.theme-cafe .fi-topbar,
body.theme-cafe .fi-topbar>div,
body.theme-cafe .fi-topbar nav {
    background: rgba(140, 110, 99, 0.85) !important;
    /* P2 */
}

/* MORADO THEME SIDEBAR REBUILD (Softened as requested) */
body.theme-morado {
    background: #F3EDFF !important;
    /* Lighter background for main area */
}

body.theme-morado .fi-sidebar {
    background: linear-gradient(180deg, #491AB1 0%, #7B45F0 50%, #B796FE 100%) !important;
    border-right: none !important;
}

body.theme-morado .fi-main,
body.theme-morado .fi-main-ctn {
    background: #F3EDFF !important;
}

body.theme-morado .fi-topbar,
body.theme-morado .fi-topbar>div,
body.theme-morado .fi-topbar nav {
    background: rgba(102, 49, 219, 0.85) !important;
}

/* VERDE THEME SIDEBAR REBUILD */
body.theme-verde {
    background: #FAFCF6 !important;
}

body.theme-verde .fi-sidebar {
    /* Deep Emerald Silk Gradient - Much more professional */
    background: linear-gradient(180deg, #022c22 0%, #064e3b 60%, #065f46 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-verde .fi-main,
body.theme-verde .fi-main-ctn {
    background: #FAFCF6 !important;
}

body.theme-verde .fi-topbar,
body.theme-verde .fi-topbar>div,
body.theme-verde .fi-topbar nav {
    background: rgba(55, 85, 52, 0.85) !important;
}

/* CLARO AMIGABLE (SM INFO STYLE) */
body.theme-claro {
    background: #F0F2F5 !important;
}

body.theme-claro .fi-sidebar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 4px 0 10px rgba(0, 0, 0, 0.02) !important;
}

body.theme-claro .fi-main,
body.theme-claro .fi-main-ctn {
    background: #F0F2F5 !important;
}

body.theme-claro .fi-topbar,
body.theme-claro .fi-topbar>div,
body.theme-claro .fi-topbar nav {
    background: #ffffff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Sidebar text/icons for Claro - FORCING DARK COLORS */
body.theme-claro .fi-sidebar-item-label,
body.theme-claro .fi-sidebar-group-label,
body.theme-claro .fi-sidebar-header,
body.theme-claro .fi-sidebar-header a,
body.theme-claro .fi-brand-name,
body.theme-claro .fi-sidebar-header span,
body.theme-claro .fi-sidebar-item-icon,
body.theme-claro .fi-sidebar-item-icon svg,
body.theme-claro .fi-sidebar-group-header span,
body.theme-claro .fi-sidebar-nav svg,
body.theme-claro .fi-sidebar-nav svg * {
    color: #1e293b !important;
    /* Slate 800 for max legibility */
    fill: #1e293b !important;
    -webkit-text-fill-color: #1e293b !important;
}

/* Fix topbar icons in Claro to be dark since topbar is white */
body.theme-claro .fi-topbar button svg,
body.theme-claro .fi-topbar a svg,
body.theme-claro .fi-topbar svg {
    color: #1e293b !important;
    fill: #1e293b !important;
    stroke: #1e293b !important;
}

/* Active item in Claro (Orange) */
body.theme-claro .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button {
    background: #fff7ed !important;
    border: 1px solid #ffedd5 !important;
    border-right: 4px solid #f97316 !important;
    border-radius: 0.5rem 0 0 0.5rem !important;
}

body.theme-claro .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-label,
body.theme-claro .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-icon,
body.theme-claro .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-icon svg {
    color: #f97316 !important;
    fill: #f97316 !important;
    -webkit-text-fill-color: #f97316 !important;
    font-weight: 700 !important;
    filter: none !important;
}

/* ROSA THEME SIDEBAR REBUILD */
body.theme-rosa {
    background: #FFFDFB !important;
}

body.theme-rosa .fi-sidebar {
    background: linear-gradient(180deg, #FEA38E 0%, #FBA2AB 50%, #FFDFC3 100%) !important;
    border-right: none !important;
}

body.theme-rosa .fi-main,
body.theme-rosa .fi-main-ctn {
    background: #FFFDFB !important;
}

body.theme-rosa .fi-topbar,
body.theme-rosa .fi-topbar>div,
body.theme-rosa .fi-topbar nav {
    background: rgba(251, 162, 171, 0.85) !important;
}

/* AZUL THEME SIDEBAR REBUILD - Professional Sky/Deep Blue */
body.theme-azul {
    background: #E0F2FE !important;
    /* Sky Blue Light bg */
}

body.theme-azul .fi-sidebar {
    background: linear-gradient(180deg, #0C4A6E 0%, #0369A1 60%, #0EA5E9 100%) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.theme-azul .fi-main,
body.theme-azul .fi-main-ctn {
    background: #E0F2FE !important;
}

body.theme-azul .fi-topbar,
body.theme-azul .fi-topbar>div,
body.theme-azul .fi-topbar nav {
    background: rgba(3, 105, 161, 0.85) !important;
}

/* TEMA CRISTAL (FULL GLASSMORPHISM) */
body.theme-cristal {
    background-image: url('../../images/fondo.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

body.theme-cristal .fi-sidebar {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.theme-cristal .fi-main,
body.theme-cristal .fi-main-ctn {
    background: transparent !important;
}

body.theme-cristal .fi-topbar,
body.theme-cristal .fi-topbar>div,
body.theme-cristal .fi-topbar nav {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Sidebar text/icons for Cristal */
body.theme-cristal .fi-sidebar-item-label,
body.theme-cristal .fi-sidebar-group-label,
body.theme-cristal .fi-sidebar-header,
body.theme-cristal .fi-sidebar-header a,
body.theme-cristal .fi-brand-name,
body.theme-cristal .fi-sidebar-header span,
body.theme-cristal .fi-sidebar-item-icon,
body.theme-cristal .fi-sidebar-item-icon svg,
body.theme-cristal .fi-sidebar-group-header span,
body.theme-cristal .fi-sidebar-nav svg,
body.theme-cristal .fi-sidebar-nav svg * {
    color: #020617 !important;
    /* Slate 950 - Absolute contrast */
    fill: #020617 !important;
    -webkit-text-fill-color: #020617 !important;
    font-weight: 800 !important;
    /* Maximum thickness */
}

/* Topbar icons in Cristal */
body.theme-cristal .fi-topbar button svg,
body.theme-cristal .fi-topbar a svg,
body.theme-cristal .fi-topbar svg {
    color: #0f172a !important;
    fill: #0f172a !important;
    stroke: #0f172a !important;
}

/* Active item in Cristal (Vibrant Blue Glass) */
body.theme-cristal .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button {
    background: rgba(37, 99, 235, 0.15) !important;
    border: 1px solid rgba(37, 99, 235, 0.3) !important;
    border-radius: 0.75rem !important;
}

body.theme-cristal .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-label,
body.theme-cristal .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #1e3a8a !important;
    /* Deep Navy Blue */
    font-weight: 800 !important;
}

/* ==========================================================
   SIDEBAR STYLING - ACTIVE ITEMS EXACLY LIKE SCREENSHOT
========================================================== */
body[class*="theme-"] .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button {
    /* Premium Pearl Glass - Thinner border, more refined blur */
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 0.5px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

/* Text colors in sidebar */
body[class*="theme-"] .fi-sidebar-item-label,
body[class*="theme-"] .fi-sidebar-group-label,
body[class*="theme-"] .fi-sidebar-header a,
body[class*="theme-"] .fi-brand-name,
body[class*="theme-"] .fi-sidebar-item-icon {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Active item text - White with subtle glow instead of jarring black */
body[class*="theme-"] .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-label,
body[class*="theme-"] .fi-sidebar .fi-sidebar-item-active>.fi-sidebar-item-button .fi-sidebar-item-icon {
    color: #ffffff !important;
    font-weight: 600 !important;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

/* Subtle hover for inactive items */
body[class*="theme-"] .fi-sidebar .fi-sidebar-item-button:hover:not(.fi-sidebar-item-active) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 0.75rem !important;
}

/* Fix SIGECOP header background */
body[class*="theme-"] .fi-sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* ==========================================================
   LOGIN PAGE EXACT DESIGN RESTORATION (Custom Classes)
========================================================== */
/* Fondo abstracto */
.fi-simple-layout {
    background-image: url('../../images/fondo.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-color: #1a202c !important;
}

/* Ocultar el título feo que trae Filament por defecto (el negro gigante afuera) */
.fi-simple-header {
    display: none !important;
}

/* Hacer TOTALMENTE TRANSPARENTE y sin bordes la caja original de Filament */
.fi-simple-layout .fi-simple-main,
.fi-simple-layout main {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    --tw-ring-color: transparent !important;
    /* quita el borde blanco/gris */
}

/* LA TARJETA DE CRISTAL (El diseño de la foto 2) */
.sigecop-glass-card {
    background: rgba(17, 24, 39, 0.45) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 1.5rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
    padding: 2.5rem 2rem !important;
    width: 100% !important;
    max-width: 28rem !important;
    /* ajusta el ancho del panel */
    margin: 0 auto !important;
}

/* Top: Textos CABLEVISIÓN y SIGECOP */
.brand-wrapper {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.brand-company {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    text-transform: uppercase;
}

.brand-system {
    font-size: 1rem;
    font-weight: 800;
    margin-top: 0.25rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.brand-subtitle {
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
}

/* Botón Google Nativo (del HTML personalizado) */
.sigecop-google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: #ffffff !important;
    color: #111827 !important;
    font-weight: 700 !important;
    padding: 0.65rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.sigecop-google:hover {
    background: #f8fafc !important;
}

/* Línea divisoria "o continúa..." */
.sigecop-divider {
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    margin: 1.25rem 0;
    font-weight: 600;
    position: relative;
    text-transform: lowercase;
}

.sigecop-divider::before,
.sigecop-divider::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 25%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.sigecop-divider::before {
    left: 0;
}

.sigecop-divider::after {
    right: 0;
}

/* Textos blancos en los labels ("Email", "Password") */
.fi-simple-layout .fi-fo-field-wrp-label span,
.fi-simple-layout label span {
    color: #ffffff !important;
    text-shadow: none !important;
    font-weight: 600 !important;
}

/* El enlace "Forgot password" debe mantener su color azul original (no forzarlo a blanco) */
.fi-simple-layout .fi-link span {
    font-weight: 700 !important;
}

/* Inputs blancos como en la foto 2 y texto obligatoriamente NEGRO */
.fi-simple-layout input {
    background: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Botón INGRESAR azul cobalto de foto 2 */
.sigecop-submit {
    display: block;
    width: 100%;
    background: #2563eb !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.75rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);
    border: none;
    transition: all 0.2s;
    cursor: pointer;
}

.sigecop-submit:hover {
    background: #1d4ed8 !important;
}

/* Footer "Sistemas Cablevisión G.C. · Cable · Audio" */
.sigecop-footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================
   PREMIUM DASHBOARD REFINEMENTS
   ========================================================== */

/* Stats Cards Hover Effect */
.fi-wi-stats-overview-stat {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.fi-wi-stats-overview-stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
}

/* Icon Animation */
.fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-icon {
    transition: all 0.5s ease;
}

.fi-wi-stats-overview-stat:hover .fi-wi-stats-overview-stat-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Map Widget Split View Transitions */
.sucursal-list-item {
    transition: all 0.2s ease;
}

.sucursal-list-item:hover {
    background: rgba(59, 130, 246, 0.05);
}

/* Chart Animations (Ensure visibility) */
canvas {
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Scrollbar styling for Branch List */
.overflow-y-auto::-webkit-scrollbar {
    width: 4px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.2);
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* ==========================================================
   FICHAS Y PLANES: Reglas Compartidas
   ========================================================== */
body.sigecop-page-fichas-gestion,
body.sigecop-page-fichas-gestion .fi-layout,
body.sigecop-page-fichas-gestion .fi-main-ctn,
body.sigecop-page-planes-gestion,
body.sigecop-page-planes-gestion .fi-layout,
body.sigecop-page-planes-gestion .fi-main-ctn {
    background: #dbeafe !important;
}

body.sigecop-page-fichas-gestion .fi-main,
body.sigecop-page-planes-gestion .fi-main {
    max-width: 100% !important;
    width: 100% !important;
}


/* Otros Servicios - Related Service Card */
.sigecop-related-service-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

.dark .sigecop-related-service-card {
    background: #1f2937;
    border-color: #374151;
}

.sigecop-related-service-card:hover {
    border-color: var(--primary-600);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.sigecop-tab-count {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    border-radius: 9999px;
    margin-left: 0.25rem;
    font-weight: 700;
}


/* === CLIENTES DASHBOARD ULTRA-COLOR V2 (3x3 Slim 46px) === */
body[class*="theme-"] .sigecop-ultra-color-v2 {
    margin-bottom: 1.25rem !important;
}

body[class*="theme-"] .sigecop-ultra-color-v2 > div {
    display: grid !important;
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}

@media (min-width: 1024px) {
    body[class*="theme-"] .sigecop-ultra-color-v2 > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat {
    padding: 0.35rem 0.8rem !important;
    min-height: 48px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    border-radius: 0.6rem !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    border-left-width: 12px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Colores Vibrantes con Máxima Prioridad */
body[class*="theme-"] .sigecop-ultra-color-v2 .stat-card-blue { background: #eff6ff !important; border-left-color: #3b82f6 !important; }
body[class*="theme-"] .sigecop-ultra-color-v2 .stat-card-green { background: #f0fdf4 !important; border-left-color: #22c55e !important; }
body[class*="theme-"] .sigecop-ultra-color-v2 .stat-card-orange { background: #fff7ed !important; border-left-color: #f97316 !important; }
body[class*="theme-"] .sigecop-ultra-color-v2 .stat-card-red { background: #fef2f2 !important; border-left-color: #ef4444 !important; }
body[class*="theme-"] .sigecop-ultra-color-v2 .stat-card-cyan { background: #ecfeff !important; border-left-color: #06b6d4 !important; }

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.1) !important;
    z-index: 10;
}

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat > div:first-child {
    background: #ffffff !important;
    border-radius: 0.5rem !important;
    padding: 0.4rem !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat-label {
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    color: #475569 !important;
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat-value {
    font-size: 0.65rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    color: #0f172a !important;
    margin-top: 1px !important;
}

body[class*="theme-"] .sigecop-ultra-color-v2 .fi-wi-stats-overview-stat-description {
    display: none !important;
}