/* ============================================================
   Dashboard — Asistente & componentes
   ============================================================ */

/* Barra de búsqueda — degradado color primario en el contenedor */
.creapos-search-bar {
    background:
        linear-gradient(
            145deg,
            rgba(var(--primary-500), .13) 0%,
            rgba(var(--primary-500), .05) 45%,
            #ffffff 80%
        );
    border: 1.5px solid rgba(var(--primary-400), .35);
    box-shadow:
        0 0 0 1px rgba(var(--primary-500), .06),
        0 2px 8px rgba(var(--primary-600), .10);
    transition: border-color .15s, box-shadow .15s;
}
.creapos-search-bar:focus-within {
    border-color: rgba(var(--primary-500), .70) !important;
    box-shadow:
        0 0 0 3px rgba(var(--primary-600), .12),
        0 2px 8px rgba(var(--primary-600), .15) !important;
}
.dark .creapos-search-bar {
    background:
        linear-gradient(
            145deg,
            rgba(var(--primary-600), .20) 0%,
            rgba(var(--primary-600), .07) 45%,
            rgb(31 41 55) 80%
        );
    border-color: rgba(var(--primary-400), .25);
}
.creapos-search-bar .creapos-search-icon {
    color: rgba(var(--primary-500), 1);
}
/* Botón buscar — color primario */
.creapos-buscar-btn {
    background: rgba(var(--primary-600), 1) !important;
    color: #ffffff !important;
    border: none !important;
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .12s;
}
.creapos-buscar-btn:hover {
    opacity: .88 !important;
}
/* Botón limpiar */
.creapos-clear-btn {
    color: rgb(156 163 175);
    flex-shrink: 0;
}
.creapos-clear-btn:hover {
    color: rgb(75 85 99);
}

/* Chips de ejemplo */
.creapos-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    font-size: 11px;
    color: rgb(107 114 128);
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
    white-space: nowrap;
}
.creapos-chip:hover {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}
.dark .creapos-chip {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(156 163 175);
}
.dark .creapos-chip:hover {
    border-color: #3b82f6;
    color: #93c5fd;
    background: rgba(37,99,235,.12);
}

/* Tarjeta de resultado del asistente — degradado color primario
   Filament solo expone --primary-400, --primary-500, --primary-600 */
.creapos-result-card {
    padding: 20px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(var(--primary-400), .30) !important;
    background:
        linear-gradient(
            145deg,
            rgba(var(--primary-500), .13) 0%,
            rgba(var(--primary-500), .05) 40%,
            #ffffff 75%
        ) !important;
    box-shadow:
        0 0 0 1px rgba(var(--primary-500), .06),
        0 3px 10px rgba(var(--primary-600), .10),
        0 1px 2px rgba(0,0,0,.04) !important;
    overflow: visible !important;
}
.dark .creapos-result-card {
    border-color: rgba(var(--primary-400), .20) !important;
    background:
        linear-gradient(
            145deg,
            rgba(var(--primary-600), .18) 0%,
            rgba(var(--primary-600), .06) 40%,
            rgb(31 41 55) 75%
        ) !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.30) !important;
}
/* El separador antes del período */
.creapos-result-card .creapos-period-row {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(var(--primary-500), .15);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-bottom: 2px;
}
.dark .creapos-result-card .creapos-period-row {
    border-top-color: rgba(var(--primary-400), .20);
}

/* Elementos internos del resultado */
.creapos-result-headline {
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 1.2;
}
.creapos-result-title {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(31 41 55);
}
.dark .creapos-result-title { color: rgb(243 244 246); }
.creapos-result-subtitle {
    font-size: 0.8125rem;
    color: rgb(107 114 128);
    margin-top: 3px;
}
.creapos-result-line {
    font-size: 0.875rem;
    color: rgb(107 114 128);
    margin-top: 4px;
}
.creapos-result-line-key {
    font-weight: 500;
    color: rgb(55 65 81);
}
.dark .creapos-result-line-key { color: rgb(209 213 219); }
.creapos-result-action {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgb(229 231 235);
    font-size: 11px;
    font-weight: 500;
    color: rgb(75 85 99);
    text-decoration: none;
    transition: border-color .12s, color .12s;
}
.creapos-result-action:hover {
    border-color: rgba(var(--primary-400), 1);
    color: rgba(var(--primary-600), 1);
}
.creapos-result-action-primary {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 8px;
    background: rgba(var(--primary-600), 1);
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: opacity .12s;
}
.creapos-result-action-primary:hover { opacity: .88; }
/* Chips de período */
.creapos-period-chip {
    padding: 2px 11px;
    border-radius: 999px;
    border: 1px solid rgb(229 231 235);
    font-size: 11px;
    font-weight: 500;
    color: rgb(107 114 128);
    background: transparent;
    cursor: pointer;
    transition: border-color .12s, color .12s;
}
.creapos-period-chip:hover {
    border-color: rgba(var(--primary-400), 1);
    color: rgba(var(--primary-600), 1);
}
.creapos-period-chip-active {
    padding: 2px 11px;
    border-radius: 999px;
    border: 1.5px solid rgba(var(--primary-500), 1);
    font-size: 11px;
    font-weight: 600;
    color: rgba(var(--primary-600), 1);
    background: rgba(var(--primary-500), .10);
    cursor: pointer;
}
/* Filas de lista */
.creapos-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 8px;
    background: rgb(249 250 251);
    padding: 7px 12px;
}
.dark .creapos-list-row { background: rgba(255,255,255,.05); }
.creapos-list-row-gap { margin-top: 6px; }
.creapos-list-num {
    width: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: rgb(156 163 175);
    flex-shrink: 0;
}
.creapos-list-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}
.dark .creapos-list-label { color: rgb(229 231 235); }
.creapos-list-value {
    font-size: 11px;
    color: rgb(107 114 128);
    flex-shrink: 0;
}
/* Filas de search_results */
.creapos-search-result-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    text-decoration: none;
    transition: background .1s;
}
.creapos-search-result-row:hover { background: rgb(249 250 251); }
.dark .creapos-search-result-row:hover { background: rgba(255,255,255,.05); }
.creapos-search-result-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(55 65 81);
}
.dark .creapos-search-result-label { color: rgb(229 231 235); }
.creapos-search-result-row:hover .creapos-search-result-label {
    color: rgba(var(--primary-600), 1);
}
.creapos-search-result-sub {
    margin-left: 8px;
    font-size: 11px;
    color: rgb(156 163 175);
}

/* Grid de estadísticas */
.creapos-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 768px) {
    .creapos-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tarjeta de estadísticas */
.creapos-stat-card {
    display: block;
    background: #fff;
    border: 1px solid rgb(243 244 246);
    border-top: 3px solid var(--accent, #e5e7eb);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    text-decoration: none;
    transition: box-shadow .15s, transform .12s;
}
.creapos-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-1px);
}
.dark .creapos-stat-card {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}
.creapos-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.creapos-stat-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgb(156 163 175);
}
.dark .creapos-stat-label { color: rgb(107 114 128); }
.creapos-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.creapos-stat-sub {
    font-size: 11px;
    color: rgb(156 163 175);
    margin-top: 2px;
}
.dark .creapos-stat-sub { color: rgb(107 114 128); }

/* Botones de acciones rápidas */
.creapos-quick-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid rgb(229 231 235);
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    color: rgb(75 85 99);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.creapos-quick-action:hover {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}
.dark .creapos-quick-action {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(209 213 219);
}
.dark .creapos-quick-action:hover {
    border-color: #3b82f6;
    color: #93c5fd;
    background: rgba(37,99,235,.12);
}

/* ============================================================
   Repeater compacto tipo tabla
   Se aplica con: ->extraAttributes(['class' => 'repeater-table'])
   ============================================================ */

/* Quitar gap entre items (el x-filament::grid renderiza con gap-4) */
.repeater-table .fi-fo-repeater > ul > * {
    gap: 0 !important;
}

/* ─── Cada <li>: fila plana sin card ─────────────────────────────────────── */
.repeater-table li.fi-fo-repeater-item {
    /* Flex row: header (delete btn) y content en la misma fila */
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    /* Quitar estilos de card */
    border-radius: 0 !important;
    box-shadow: none !important;
    --tw-ring-shadow: 0 0 #0000 !important;
    --tw-ring-offset-shadow: 0 0 #0000 !important;
    --tw-shadow: 0 0 #0000 !important;
    border: none !important;
    border-bottom: 1px solid rgb(229 231 235) !important;
    background: transparent !important;
    padding: 0 !important;
}

.dark .repeater-table li.fi-fo-repeater-item {
    border-bottom-color: rgb(55 65 81) !important;
}

.repeater-table li.fi-fo-repeater-item:last-child {
    border-bottom: none !important;
}

.repeater-table li.fi-fo-repeater-item:hover {
    background: rgb(249 250 251) !important;
}
.dark .repeater-table li.fi-fo-repeater-item:hover {
    background: rgb(31 41 55) !important;
}

/* ─── Content (fields): primero visualmente, toma todo el espacio ─────────── */
.repeater-table .fi-fo-repeater-item-content {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0.25rem 0.5rem !important;
    /* Quitar el border-top que genera divide-y del padre */
    border-top: none !important;
}

/* ─── Header (botón delete): al final, compacto ───────────────────────────── */
.repeater-table .fi-fo-repeater-item-header {
    order: 2 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    /* Alinear el botón con el centro de la primera fila de campos */
    padding: 0.375rem 0.375rem 0 0.375rem !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    /* Quitar el overflow:hidden que tiene la clase original */
    max-width: none !important;
}

/* Ocultar h4 (etiqueta del item) — solo aplica cuando hay itemLabel */
.repeater-table .fi-fo-repeater-item-header > h4 {
    display: none !important;
}

/* Quitar ms-auto de la ul de acciones (ya no necesita empujar al borde) */
.repeater-table .fi-fo-repeater-item-header > ul.ms-auto {
    margin-left: 0 !important;
}

/* ─── Inputs compactos ────────────────────────────────────────────────────── */
.repeater-table .fi-input-wrp {
    min-height: 2rem !important;
}
.repeater-table .fi-input {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}
.repeater-table .fi-select-trigger {
    min-height: 2rem !important;
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 0.875rem !important;
}

/* Reducir gap entre label y campo */
.repeater-table .fi-fo-field-wrp {
    gap: 0.125rem !important;
}

/* ─── Labels: solo visibles en el primer item ─────────────────────────────── */

/*
 * Estructura de field-wrapper:
 * .fi-fo-field-wrp > div.grid > div.flex > label.fi-fo-field-wrp-label
 *
 * Ocultar el div.flex que envuelve el label en todas las filas excepto la primera.
 * Esto colapsa el espacio verticalmente también.
 */
.repeater-table li.fi-fo-repeater-item:not(:first-child) label.fi-fo-field-wrp-label {
    display: none !important;
}

/* Colapsar el div contenedor del label (flex items-center gap-x-3) para no dejar espacio vacío */
.repeater-table li.fi-fo-repeater-item:not(:first-child) .fi-fo-field-wrp > div.grid > div.flex {
    display: none !important;
}

/* Primer item: labels como encabezado de columna */
.repeater-table li.fi-fo-repeater-item:first-child label.fi-fo-field-wrp-label span {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: rgb(107 114 128) !important;
}

/* Quitar el colapso/expansión del repeater si está habilitado */
.repeater-table .fi-fo-repeater > div:first-child:has(button) {
    display: none !important;
}

/* ============================================================
   Nav Search — Filtro de menú lateral
   ============================================================ */
.creapos-nav-search-input {
    width: 100%;
    padding: 0.375rem 0.625rem 0.375rem 2.25rem;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(229 231 235);
    background: rgb(249 250 251);
    color: rgb(55 65 81);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.creapos-nav-search-input::placeholder {
    color: rgb(156 163 175);
}
.creapos-nav-search-input:focus {
    border-color: rgb(99 102 241);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}
.dark .creapos-nav-search-input {
    border-color: rgb(55 65 81);
    background: rgb(31 41 55);
    color: rgb(229 231 235);
}
.dark .creapos-nav-search-input::placeholder {
    color: rgb(107 114 128);
}
.dark .creapos-nav-search-input:focus {
    border-color: rgb(99 102 241);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

/* Al buscar: forzar expansión de grupos colapsados */
.fi-nav-searching .fi-sidebar-group > ul {
    display: block !important;
}

/* ============================================================
   Sidebar compacto — items más pequeños con íconos visibles
   ============================================================ */

/* Ítems alineados a la izquierda — Filament usa justify-center que centra
   el contenido y produce una sangría visual en ítems sin grupo-border */
.fi-sidebar-item-button {
    justify-content: flex-start !important;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    gap: 0.625rem !important;
}

/* Íconos de ítem */
.fi-sidebar-item-icon {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0 !important;
}

/* Texto del ítem */
.fi-sidebar-item-label {
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
}

/* Botón de grupo */
.fi-sidebar-group-button {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}

/* Íconos de grupo */
.fi-sidebar-group-icon {
    width: 1.125rem !important;
    height: 1.125rem !important;
    flex-shrink: 0 !important;
}

/* Texto del grupo */
.fi-sidebar-group-label {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
}

/* ── Subitems: indentación leve + ícono siempre visible ── */
.fi-sidebar-group-items .fi-sidebar-item-button {
    padding-left: 0.875rem !important;
}
/* Asegurar que el ícono del subitem sea siempre visible (no depende de Alpine) */
.fi-sidebar-group-items .fi-sidebar-item-icon {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Reducir espacio entre nombre empresa y campo de filtro ── */
.fi-sidebar-nav {
    padding-top: 0.625rem !important;
    padding-bottom: 0.75rem !important;
}

/* ── Colapso del sidebar en desktop (icon-only) ── */
@media (min-width: 1024px) {
    /* Ancho fijo icon-only */
    .fi-sidebar:not(.fi-sidebar-open) {
        width: 4.5rem !important;
        min-width: 0 !important;
    }
    /* Ajustar margen del contenido principal */
    .fi-layout:has(.fi-sidebar:not(.fi-sidebar-open)) .fi-main {
        margin-inline-start: 4.5rem !important;
    }
    /* Ocultar campo de filtro cuando está colapsado */
    .fi-sidebar:not(.fi-sidebar-open) #creapos-nav-search-container {
        display: none !important;
    }
    /* Centrar íconos en modo colapsado */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
        justify-content: center !important;
        padding-inline: 0.25rem !important;
    }
    /* Íconos de ítem al mismo tamaño que los íconos de grupo (1.5rem) */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-icon {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    /* Reducir separación entre grupos/íconos en colapsado */
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        gap: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        gap: 0.25rem !important;
    }
    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-group {
        gap: 0 !important;
    }
}

/* ============================================================
   Perfil de usuario — EditProfile page
   ============================================================ */

/* Aumentar tamaño del campo de texto en el perfil */
.fi-page-edit-profile .fi-input,
.fi-page-edit-profile input[type="text"],
.fi-page-edit-profile input[type="email"],
.fi-page-edit-profile input[type="password"] {
    font-size: 0.9375rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    height: auto !important;
    min-height: 2.75rem !important;
}

/* Labels más legibles */
.fi-page-edit-profile .fi-fo-field-wrp > label,
.fi-page-edit-profile .fi-fo-field-wrp label.fi-fo-field-wrp-label {
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.375rem !important;
}

/* Secciones con más respiración */
.fi-page-edit-profile .fi-section {
    border-radius: 14px !important;
}

.fi-page-edit-profile .fi-section-header {
    padding: 1.25rem 1.5rem !important;
}

.fi-page-edit-profile .fi-section-content {
    padding: 1.25rem 1.5rem 1.5rem !important;
}

/* Icono de sección visible */
.fi-page-edit-profile .fi-section-header-icon {
    color: rgb(var(--primary-500)) !important;
}

/* Botón guardar más prominente */
.fi-page-edit-profile [type="submit"] {
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    font-size: 0.9375rem !important;
}

/* ============================================================
   Dashboard v2 — Rediseño moderno impactante
   ============================================================ */

/* ── HERO ─────────────────────────────────────────────────────── */
.cp-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--primary-700)) 0%, rgb(var(--primary-900)) 100%);
    border-radius: 20px;
    padding: 28px 32px 24px;
    margin-bottom: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.cp-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    pointer-events: none;
}
.cp-hero::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: 12%;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    pointer-events: none;
}
.cp-hero-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.cp-hero-eyebrow {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
    margin-bottom: 6px;
    line-height: 1;
}
.cp-hero-title {
    font-size: 1.625rem;
    font-weight: 600;
    color: rgba(255,255,255,.88);
    line-height: 1.25;
    margin: 0;
}
.cp-hero-name {
    color: #ffffff;
    font-weight: 800;
}
.cp-hero-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.cp-hero-status {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,.90);
    backdrop-filter: blur(8px);
}
.cp-hero-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 2px rgba(74,222,128,.30);
    animation: cp-pulse 2.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes cp-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .6; transform: scale(.85); }
}
.cp-hero-clock {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(255,255,255,.90);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* ── KPI GRID ─────────────────────────────────────────────────── */
.cp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}
@media (min-width: 768px) {
    .cp-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}
.cp-kpi-card {
    display: block;
    text-decoration: none;
    background: var(--kb, #fff);
    border: 1.5px solid var(--kbr, #e5e7eb);
    border-radius: 16px;
    padding: 18px 20px 16px;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s, transform .14s;
}
.cp-kpi-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--kc, #e5e7eb);
    border-radius: 16px 16px 0 0;
}
.cp-kpi-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.11);
    transform: translateY(-3px);
}
.dark .cp-kpi-card {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}
.dark .cp-kpi-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.40);
}
.cp-kpi-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.cp-kpi-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-kpi-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b7280;
    line-height: 1.3;
}
.dark .cp-kpi-label { color: #9ca3af; }
.cp-kpi-num {
    font-size: 1.625rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.025em;
    margin-bottom: 5px;
    font-variant-numeric: tabular-nums;
}
.cp-kpi-meta {
    font-size: 12px;
    color: #9ca3af;
}
.dark .cp-kpi-meta { color: #6b7280; }

/* ── SEARCH v2 ────────────────────────────────────────────────── */
.cp-search-wrap {
    margin-bottom: 20px;
}
.cp-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #ffffff;
    border: 1.5px solid rgba(var(--primary-400), .30);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(var(--primary-600), .07), 0 0 0 1px rgba(var(--primary-500), .05);
    cursor: text;
    transition: border-color .15s, box-shadow .15s;
}
.cp-search-bar:focus-within {
    border-color: rgba(var(--primary-500), .65);
    box-shadow: 0 0 0 3px rgba(var(--primary-600), .11), 0 2px 12px rgba(var(--primary-600), .10);
}
.dark .cp-search-bar {
    background: rgb(31 41 55);
    border-color: rgba(var(--primary-400), .22);
}
.cp-search-spark {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(var(--primary-500), 1);
}
.cp-search-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    outline: none;
    border: none;
    font-size: 0.875rem;
    color: inherit;
    padding: 2px 4px;
}
.cp-search-loading {
    flex-shrink: 0;
    color: rgba(var(--primary-500), .80);
    display: flex;
    align-items: center;
}
.cp-search-clear {
    padding: 4px;
    border-radius: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    line-height: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.cp-search-clear:hover { color: #4b5563; }
.cp-search-btn {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 9px;
    background: rgb(var(--primary-600));
    color: #fff;
    border: none;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .12s;
}
.cp-search-btn:hover { opacity: .88; }
.cp-search-chips {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.cp-chips-label {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
}

/* ── QUICK ACTIONS GRID ──────────────────────────────────────── */
.cp-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
@media (min-width: 768px) {
    .cp-actions-grid { grid-template-columns: repeat(8, 1fr); }
}
@media (max-width: 480px) {
    .cp-actions-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
.cp-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 14px;
    background: #ffffff;
    border: 1.5px solid #f1f5f9;
    border-radius: 14px;
    text-decoration: none;
    transition: box-shadow .16s, transform .13s, border-color .13s;
    cursor: pointer;
}
.cp-action-card:hover {
    box-shadow: 0 6px 22px rgba(0,0,0,.09);
    transform: translateY(-2px);
    border-color: rgba(var(--primary-300), 1);
}
.dark .cp-action-card {
    background: rgb(31 41 55);
    border-color: rgb(55 65 81);
}
.dark .cp-action-card:hover {
    border-color: rgba(var(--primary-400), 1);
    box-shadow: 0 6px 22px rgba(0,0,0,.35);
}
.cp-action-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cp-action-name {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    text-align: center;
    line-height: 1.3;
}
.dark .cp-action-name { color: #e5e7eb; }


/* ── Help Page — spacing garantizado ───────────────────────── */
/* Estos estilos usan CSS directo porque Filament no compila
   todas las clases Tailwind usadas en páginas custom. */

/* Nav items: padding generoso + gap entre ícono y texto */
.fi-page .help-nav-btn {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 1rem;
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.15s, color 0.15s;
    text-align: left;
    cursor: pointer;
    border: none;
    background: transparent;
}
.fi-page .help-nav-btn:hover {
    background-color: rgb(249 250 251);
}
.dark .fi-page .help-nav-btn:hover {
    background-color: rgb(31 41 55);
}
.fi-page .help-nav-btn.active {
    background-color: rgb(var(--primary-50, 238 242 255));
    color: rgb(var(--primary-700, 67 56 202));
}