/*
    Must use --> docker-compose exec app php artisan filament:assets
*/
.custom-bg-green {
    background-color: rgba(0, 128, 0, 0.205);
}
.custom-bg-yellow {
    background-color: rgba(255, 255, 0, 0.205);
}
.custom-bg-red {
    background-color: rgba(255, 0, 0, 0.253);
}
.custom-bg-blue {
    background-color: rgba(0, 81, 255, 0.185);
}
.custom-bg-purple {
    background-color: rgba(218, 0, 218, 0.171);
}


.note-card {
    position: relative;
    background-color: #fef08a;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
    width: 100%;
    max-width: 320px;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100%;
    overflow: visible;
    z-index: 1;
}

.note-card:hover {
    z-index: 10;
}

.image-container {
    position: relative;
    width: 100%;
    height: 200px; /* Ajusta la altura de la imagen */
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    z-index: 2;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.post-it-corner {
    background-color: #facc15;
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-top-right-radius: 6px;
}

.post-it-shadow {
    background-color: #facc15;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    transform: translate(5px, 5px);
    border-radius: 6px;
    opacity: 0.2;
}
[x-cloak] { display: none !important; }

/* ─── FullCalendar moderno ────────────────────────────────────────── */

/* Variables de color */
.filament-fullcalendar {
    --fc-border-color: rgba(255,255,255,0.07) !important;
    --fc-today-bg-color: rgba(245,158,11,0.08) !important;
    --fc-highlight-color: rgba(245,158,11,0.06) !important;
    --fc-button-bg-color: rgba(245,158,11,0.15) !important;
    --fc-button-border-color: rgba(245,158,11,0.3) !important;
    --fc-button-text-color: #fbbf24 !important;
    --fc-button-hover-bg-color: rgba(245,158,11,0.28) !important;
    --fc-button-active-bg-color: rgba(245,158,11,0.35) !important;
}

/* Fondo del calendario */
.filament-fullcalendar .fc-view-harness {
    border-radius: 12px;
    overflow: hidden;
}

/* Headers de días (lun, mar, ...) */
.filament-fullcalendar .fc-col-header-cell {
    background: rgba(245,158,11,0.06) !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(245,158,11,0.2) !important;
}
.filament-fullcalendar .fc-col-header-cell-cushion {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #f59e0b !important;
    text-decoration: none !important;
}

/* Celdas de días */
.filament-fullcalendar .fc-daygrid-day {
    transition: background 0.15s ease;
}
.filament-fullcalendar .fc-daygrid-day:hover {
    background: rgba(255,255,255,0.025) !important;
}
.filament-fullcalendar .fc-daygrid-day-number {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,0.5) !important;
    text-decoration: none !important;
    padding: 6px 8px !important;
}

/* Día de hoy */
.filament-fullcalendar .fc-day-today .fc-daygrid-day-number {
    background: #f59e0b !important;
    color: #000 !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 4px !important;
    font-weight: 800 !important;
}

/* Eventos */
.filament-fullcalendar .fc-event {
    border-radius: 5px !important;
    border: none !important;
    padding: 2px 6px !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
    transition: filter 0.15s ease, transform 0.15s ease !important;
}
.filament-fullcalendar .fc-event:hover {
    filter: brightness(1.15) !important;
    transform: translateY(-1px) !important;
}
.filament-fullcalendar .fc-event-main {
    padding: 1px 2px !important;
}

/* Botones toolbar */
.filament-fullcalendar .fc-button {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em !important;
    transition: background 0.18s ease, transform 0.15s ease !important;
}
.filament-fullcalendar .fc-button:hover {
    transform: translateY(-1px) !important;
}

/* Título del toolbar (abril de 2026) */
.filament-fullcalendar .fc-toolbar-title {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Bordes de la grilla */
.filament-fullcalendar .fc-theme-standard td,
.filament-fullcalendar .fc-theme-standard th {
    border-color: rgba(255,255,255,0.07) !important;
}

/* ─── Keyframes ───────────────────────────────────────────────────── */
@keyframes mad-glow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(245,158,11,0.2)); }
    50%       { filter: drop-shadow(0 0 8px rgba(245,158,11,0.55)); }
}
@keyframes gear-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes hex-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes topbar-scan {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 0.9; }
}
@keyframes amber-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(245,158,11,.15), inset 0 0 6px rgba(245,158,11,.04); }
    50%       { box-shadow: 0 0 18px rgba(245,158,11,.28), inset 0 0 10px rgba(245,158,11,.07); }
}

/* ─── Logo MAD (topbar) ──────────────────────────────────────────── */
.fi-logo {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    background: linear-gradient(160deg,
        #92400e 0%, #d97706 20%, #fbbf24 45%,
        #fde68a 55%, #fbbf24 65%, #f59e0b 80%, #92400e 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: mad-glow 3s ease-in-out infinite !important;
    transition: letter-spacing .4s cubic-bezier(.34,1.56,.64,1), filter .3s ease !important;
    cursor: default !important;
    user-select: none !important;
    display: inline-flex !important;
    align-items: center !important;
}
.fi-logo:hover {
    letter-spacing: 0.26em !important;
    animation: none !important;
    filter: drop-shadow(0 0 10px rgba(245,158,11,.6)) !important;
}
.fi-logo::after {
    content: '\2B21' !important;
    -webkit-text-fill-color: rgba(245,158,11,.75) !important;
    font-size: .9rem !important;
    line-height: 1 !important;
    margin-left: 4px !important;
    animation: hex-spin 10s linear infinite !important;
    display: inline-block !important;
    transform-origin: center !important;
}
.fi-logo:hover::after {
    animation: hex-spin 3s linear infinite !important;
    -webkit-text-fill-color: #fde68a !important;
    filter: drop-shadow(0 0 5px rgba(253,230,138,.9)) !important;
}

/* ─── Logo MAD (sidebar — estilos adicionales específicos) ───────── */
.fi-sidebar-header-logo-ctn .fi-logo {
    font-size: 1.85rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    line-height: 1 !important;
    background: linear-gradient(160deg,
        #92400e 0%, #d97706 20%, #fbbf24 45%,
        #fde68a 55%, #fbbf24 65%, #f59e0b 80%, #92400e 100%
    ) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: mad-glow 3s ease-in-out infinite !important;
    transition: letter-spacing 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease !important;
    cursor: default !important;
    user-select: none !important;
    position: relative !important;
    display: inline-block !important;
}

.fi-sidebar-header-logo-ctn .fi-logo::after {
    content: '\2B21' !important;
    position: absolute !important;
    bottom: -4px !important;
    right: -10px !important;
    -webkit-text-fill-color: rgba(245,158,11,0.7) !important;
    font-size: 0.82rem !important;
    animation: gear-spin 12s linear infinite !important;
    line-height: 1 !important;
}

.fi-sidebar-header-logo-ctn .fi-logo:hover {
    letter-spacing: 0.28em !important;
    animation: none !important;
    filter: drop-shadow(0 0 5px rgba(245,158,11,0.4)) !important;
}

.fi-sidebar-header-logo-ctn .fi-logo:hover::after {
    animation: gear-spin 8s linear infinite !important;
    -webkit-text-fill-color: #f59e0b !important;
}


/* ─── Refinamiento visual v2 ──────────────────────────────────────── */

/* ─── Topbar futurista ─── */
.fi-topbar-ctn {
    background:
        repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(245,158,11,.016) 3px, rgba(245,158,11,.016) 4px),
        linear-gradient(90deg, rgba(12,7,0,.97) 0%, rgba(18,10,0,.99) 50%, rgba(12,7,0,.97) 100%) !important;
    border-bottom: 1px solid rgba(245,158,11,.3) !important;
    box-shadow: 0 2px 18px rgba(245,158,11,.12), 0 1px 0 rgba(251,191,36,.18) !important;
    animation: amber-pulse 4s ease-in-out infinite !important;
    /* z-index 40: queda sobre el contenido (note-cards z-index:1~10) pero bajo los modales (z-index:50) */
    z-index: 40 !important;
}

/* backdrop-filter va en ::before para no crear un containing block para position:fixed,
   lo cual rompía el posicionamiento del dropdown del usuario (FloatingUI + strategy:fixed) */
.fi-topbar {
    position: relative !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(245,158,11,0.2) !important;
    box-shadow: 0 2px 20px rgba(245,158,11,0.08) !important;
}
.fi-topbar::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    background: rgba(0,0,0,0.45) !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

/* ── Search ── */
.fi-global-search-field .fi-input {
    background: transparent !important;
    border-color: rgba(245,158,11,.35) !important;
    color: rgba(255,255,255,.85) !important;
    transition: border-color .25s, box-shadow .25s !important;
}
.fi-global-search-field .fi-input:focus {
    border-color: rgba(245,158,11,.7) !important;
    box-shadow: 0 0 0 2px rgba(245,158,11,.12), 0 0 14px rgba(245,158,11,.1) !important;
}
.fi-global-search-field .fi-input::placeholder { color: rgba(255,255,255,.35) !important; }

/* ── Icon buttons (hamburger, bell, etc.) ── */
.fi-topbar .fi-icon-btn {
    color: rgba(245,158,11,.55) !important;
    transition: color .2s, filter .2s !important;
}
.fi-topbar .fi-icon-btn:hover {
    color: rgba(251,191,36,.9) !important;
    filter: drop-shadow(0 0 5px rgba(245,158,11,.5)) !important;
}

/* ── User avatar / menu trigger ── */
.fi-user-menu-trigger {
    border: 1px solid rgba(245,158,11,.25) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    transition: border-color .25s, box-shadow .25s !important;
}
.fi-user-menu-trigger:hover {
    border-color: rgba(245,158,11,.6) !important;
    box-shadow: 0 0 10px rgba(245,158,11,.2) !important;
}

/* Sidebar: fondo diferenciado + borde ámbar sutil */
.fi-sidebar-nav {
    border-right: 1px solid rgba(245,158,11,0.15) !important;
}

/* Sidebar: ítem activo con fondo ámbar y barra izquierda */
.fi-sidebar-item.fi-active .fi-sidebar-item-btn {
    position: relative;
    background: rgba(245,158,11,0.1) !important;
    border-radius: 8px !important;
}
.fi-sidebar-item.fi-active .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    height: 76%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245,158,11,0.6);
}

/* Sidebar: hover suave + bordes redondeados */
.fi-sidebar-item-btn {
    transition: background-color 0.18s ease !important;
    border-radius: 8px !important;
}

/* Grupos de nav: etiquetas ámbar uppercase */
.fi-sidebar-group-label {
    color: #f59e0b !important;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
}

/* Secciones: bordes redondeados, sombra más profunda, borde fino */
.fi-section {
    border-radius: 14px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,0.2),
        0 8px 32px rgba(0,0,0,0.25) !important;
}

/* Header de sección: línea inferior ámbar muy sutil */
.fi-section-header {
    border-bottom: 1px solid rgba(245,158,11,0.12) !important;
}

/* Widgets stats: borde superior ámbar */
.fi-wi-stats-overview-stat {
    border-top: 3px solid #f59e0b !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
}

/* Header de página */
.fi-header-heading {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}
.fi-header {
    padding-bottom: 0.3rem !important;
    margin-bottom: 0.375rem !important;
}

/* Tablas */
.fi-ta-row {
    transition: background-color 0.15s ease !important;
}

/* Botones: elevación en hover */
.fi-btn {
    transition: box-shadow 0.18s ease, transform 0.15s ease !important;
    border-radius: 8px !important;
}
.fi-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3) !important;
}
.fi-btn:active {
    transform: translateY(0) !important;
}

/* Badges de conteo en nav: ámbar */
.fi-sidebar-item-badge {
    background: rgba(245,158,11,0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245,158,11,0.3) !important;
}

/* ─── Sidebar: fondo ligeramente más oscuro que el contenido ─── */
.fi-sidebar {
    background: rgba(0,0,0,0.15) !important;
    backdrop-filter: blur(8px) !important;
}

/* ─── Tipografía global más refinada ─── */
.fi-main, .fi-sidebar {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11" !important;
}
.fi-ta-header-cell-label {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
}

/* ─── Contenedor del widget: más separación ─── */
.fi-wi {
    gap: 1.5rem !important;
}

/* ─── Stats: número grande más bold ─── */
.fi-wi-stats-overview-stat-value {
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}