/* ═══════════════════════════════════════════════════════════
   TAILWIND CUSTOM — Entropía Socialnetwork · Red Académica Entropía Educativa
   ═══════════════════════════════════════════════════════════ */

/* ── Header: topbar + navbar pegados sin separación ─────── */
/* Envolvemos ambos en un bloque sticky unificado            */
.ee-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: #12163b;    /* mismo color que --brand */
}

.ee-topbar {
    background: transparent;  /* hereda del wrapper */
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 5px 0;
    font-size: 11px;
}

/* Navbar dentro del wrapper: sin sticky propio, hereda el color */
#main-navbar {
    position: relative !important;
    top: auto !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Sombra suave al fondo del header unificado */
.ee-site-header {
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}

@media (max-width: 640px) {
    .ee-topbar { padding: 4px 0; }
}

/* ── Animaciones ─────────────────────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

.animate-fade-in  { animation: fadeUp .3s ease-out forwards; }
.animate-fade-in2 { animation: fadeUp .45s ease-out forwards; }

/* ── Dropdown / panel transitions ────────────────────────── */
#notif-panel,
#avatar-panel,
#search-results {
    animation: fadeUp .18s ease-out;
}

/* ── Navbar search — dropdown debajo del header ──────────── */

/* El panel ocupa todo el ancho del header, aparece debajo */
.search-expand-panel {
    display: none;              /* JS controla con style.display */
    flex-direction: column;
    background: #0f1530;
    border-top: 1px solid rgba(255,255,255,.08);
    animation: searchDrop .18s ease-out;
    overflow: visible;
}

@keyframes searchDrop {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Fila del input */
.search-expand-inner {
    display: flex;
    align-items: center;
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    padding: 10px 16px;
    gap: 0;
}

.search-expand-icon {
    color: rgba(255,255,255,.35);
    font-size: .75rem;
    padding: 0 10px 0 4px;
    flex-shrink: 0;
    pointer-events: none;
}

#global-search {
    flex: 1;
    min-width: 0;
    height: 36px;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: .9rem;
    font-family: 'Inter', sans-serif;
    padding: 0;
    caret-color: rgba(255,255,255,.8);
}
#global-search::placeholder { color: rgba(255,255,255,.3); }

#search-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.3);
    font-size: .75rem;
    cursor: pointer;
    padding: 6px 8px;
    flex-shrink: 0;
    transition: color .15s;
    border-radius: 6px;
}
#search-close:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.08); }

/* Resultados — bloque debajo del input, dentro del mismo panel */
#search-results {
    display: none;
    max-width: 680px;
    margin: 0 auto 12px;
    width: calc(100% - 32px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    max-height: 340px;
    overflow-y: auto;
}

/* Items de resultado */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .12s;
    text-decoration: none;
    border-bottom: 1px solid #f1f5f9;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f8fafc; }
.search-result-item img {
    width: 34px; height: 34px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 1px solid #e2e8f0;
}
.sr-icon {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(228,60,37,.08);
    display: flex; align-items: center; justify-content: center;
    color: var(--accent); font-size: .75rem; flex-shrink: 0;
}
.sr-name  { font-size: .82rem; font-weight: 700; color: #1e293b; }
.sr-sub   { font-size: .72rem; color: #94a3b8; margin-top: 1px; }
.sr-all   {
    display: block; text-align: center;
    padding: 10px; font-size: .75rem; font-weight: 700;
    color: var(--accent); border-top: 1px solid #f1f5f9;
    text-decoration: none; transition: background .12s;
}
.sr-all:hover { background: #fef2f0; }

/* ── Navbar active highlight ─────────────────────────────── */
/* ── Navbar active page ──────────────────────────────────── */
nav a.nav-icon.active-page {
    background: rgba(255,255,255,.14);
    color: #fff;
}

/* ── Avatar chevron animado ──────────────────────────────── */
#avatar-btn .fa-chevron-down {
    transition: transform .2s ease;
}
#avatar-btn .fa-chevron-down.rotate-180 {
    transform: rotate(180deg);
}

/* ── Notificaciones item ─────────────────────────────────── */
.notif-item { list-style: none; }
.notif-item.no-leida > div { background: #fff8f8; }
.notif-item:hover > div    { background: #f9fafb; }

/* ── Card hover lift ─────────────────────────────────────── */
.card-lift {
    transition: transform .18s ease, box-shadow .18s ease;
}
.card-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.09);
}

/* ── Skeleton loader ─────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 600px 100%;
    animation: shimmer 1.4s infinite linear;
    border-radius: 6px;
}

/* ── Scroll bar minimalista ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ── Quill.js override ───────────────────────────────────── */
.ql-toolbar.ql-snow {
    border-color: var(--border) !important;
    border-radius: 8px 8px 0 0 !important;
    background: var(--surface);
    padding: 6px 10px !important;
}
.ql-container.ql-snow {
    border-color: var(--border) !important;
    border-radius: 0 0 8px 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: .9rem !important;
    min-height: 100px;
}
.ql-editor { min-height: 90px; line-height: 1.65; }
.ql-editor.ql-blank::before { color: var(--text-3) !important; font-style: normal !important; }

/* ── SweetAlert2 override ────────────────────────────────── */
.swal2-popup { border-radius: 18px !important; font-family: 'Inter', sans-serif !important; }
.swal2-confirm { border-radius: 999px !important; background: var(--accent) !important; }
.swal2-cancel  { border-radius: 999px !important; }

/* ── Notif item ──────────────────────────────────────────── */
#notificaciones-dropdown-list li {
    list-style: none;
    padding: 10px 16px;
    transition: background .15s;
    cursor: pointer;
}
#notificaciones-dropdown-list li:hover { background: #F9FAFB; }
#notificaciones-dropdown-list li.no-leida { background: #FFF5F5; }

/* ── Search result item ──────────────────────────────────── */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background .15s;
}
.search-result-item:hover { background: #F9FAFB; }
.search-result-item img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* ── Footer site ─────────────────────────────────────────── */
.site-footer a { transition: color .15s ease; }

/* ── Responsive sidebar hide ─────────────────────────────── */
@media (max-width: 992px) {
    .right-sidebar { display: none; }
}
@media (max-width: 720px) {
    .left-sidebar  { display: none; }
    .main-content  { min-width: 0; }
}

/* ── Pill tag shared ─────────────────────────────────────── */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 600;
    gap: 4px;
}
.pill-accent  { background: rgba(228,60,37,.08);  color: var(--accent);  border: 1px solid rgba(228,60,37,.15); }
.pill-brand   { background: rgba(29,36,61,.07);   color: var(--brand);   border: 1px solid rgba(29,36,61,.12); }
.pill-success { background: #ECFDF5; color: #059669; border: 1px solid #A7F3D0; }
.pill-warn    { background: #FFFBEB; color: #B45309; border: 1px solid #FDE68A; }

/* ── Input focus ring custom ─────────────────────────────── */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(228,60,37,.1);
}

/* ── Table minimal ───────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
     color: var(--text-2); padding: 8px 12px; border-bottom: 2px solid var(--border); text-align: left; }
td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #FAFAFA; }