/* ================================================================
   PANEL DE ADMINISTRACIÓN — Proyectos SENA
   Tema editorial (negro cálido + lima + coral)
   Bricolage Grotesque + Instrument Serif + Inter
================================================================ */
:root {
    --bg:        #0a0a0b;
    --bg2:       #0f0f11;
    --surface:   #141417;
    --surface-2: #1a1a1e;
    --line:      rgba(255, 255, 255, 0.09);
    --line-soft: rgba(255, 255, 255, 0.05);

    --ink:    #f5f5ef;
    --text2:  #b7b7ae;
    --muted:  #77776e;

    --lime:   #c6ff3a;
    --lime-d: #9fdb1e;
    --coral:  #ff6a3d;
    --lime-glow:  rgba(198, 255, 58, 0.18);
    --coral-glow: rgba(255, 106, 61, 0.18);
    --ok:     #c6ff3a;
    --err:    #ff6a3d;

    --display: 'Bricolage Grotesque', sans-serif;
    --serif:   'Instrument Serif', Georgia, serif;
    --font:    'Inter', system-ui, sans-serif;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 0.2s var(--ease);
    --t: 0.4s var(--ease);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text2);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
svg { display: block; }
::selection { background: var(--lime); color: #0a0a0b; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2e; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--lime-d); }

/* ================================================================
   LOGIN
================================================================ */
.login-body {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; position: relative;
    background: var(--bg);
}
.login-body::before {
    content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(55vw 55vw at 10% -5%, rgba(198,255,58,0.10), transparent 55%),
        radial-gradient(55vw 55vw at 100% 10%, rgba(255,106,61,0.08), transparent 55%);
}
#login-particles { position: fixed; inset: 0; z-index: 0; opacity: 0.7; }

.orb { position: fixed; border-radius: 50%; filter: blur(80px); opacity: .4; z-index: 0; animation: float-orb 16s var(--ease) infinite; }
.orb-1 { width: 360px; height: 360px; background: var(--lime); top: -90px; left: -80px; }
.orb-2 { width: 420px; height: 420px; background: var(--coral); bottom: -130px; right: -110px; animation-delay: -6s; }
.orb-3 { width: 240px; height: 240px; background: var(--lime-d); top: 42%; left: 56%; animation-delay: -10s; }
@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -30px) scale(1.12); }
}

.login-wrap { position: relative; z-index: 2; width: 100%; max-width: 430px; padding: 1.5rem; }
.login-card {
    position: relative;
    background: rgba(15, 15, 17, 0.78);
    border: 1px solid var(--line);
    border-radius: 26px;
    padding: 2.6rem 2.2rem;
    backdrop-filter: blur(22px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
    overflow: hidden;
    animation: card-in .7s var(--ease);
}
@keyframes card-in { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.login-glow {
    position: absolute; inset: -1px; border-radius: 26px; padding: 1px; pointer-events: none;
    background: linear-gradient(130deg, var(--lime), transparent 40%, transparent 60%, var(--coral));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5;
}
.login-card.shake { animation: shake .5s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-9px)} 40%,80%{transform:translateX(9px)} }
.login-card.success { animation: success-pop .5s forwards; }
@keyframes success-pop { to { transform: scale(1.03); box-shadow: 0 0 60px var(--lime-glow); border-color: var(--lime); } }

.login-brand { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; }
.login-shield {
    width: 62px; height: 62px; border-radius: 50%; padding: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
}
.login-shield img { width: 100%; height: 100%; object-fit: contain; }

.login-title { font-family: var(--display); font-size: 1.55rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-align: center; }
.login-sub { text-align: center; color: var(--muted); font-size: .88rem; margin-bottom: 1.8rem; }

.field { position: relative; margin-bottom: 1.1rem; }
.field-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--muted); pointer-events: none; }
.field input {
    width: 100%; padding: 1rem 2.8rem 1rem 2.9rem;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; color: var(--ink); font-size: 1rem; font-family: var(--font);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.field input:focus { outline: none; border-color: var(--lime); background: var(--surface-2); box-shadow: 0 0 0 4px var(--lime-glow); }
.field label {
    position: absolute; left: 2.9rem; top: 50%; transform: translateY(-50%);
    color: var(--muted); pointer-events: none; transition: .2s var(--ease); font-size: 1rem;
}
.field input:focus + label, .field input:not(:placeholder-shown) + label {
    top: 0; left: 2.4rem; transform: none; font-size: .68rem; padding: 0 .4rem;
    background: var(--bg2); color: var(--lime); border-radius: 4px; letter-spacing: 0.04em;
}
.toggle-pass { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: none; border: none; color: var(--muted); cursor: pointer; }
.toggle-pass.active { color: var(--lime); }

.login-error { color: var(--err); font-size: .88rem; max-height: 0; overflow: hidden; opacity: 0; transition: .3s var(--ease); text-align: center; }
.login-error.show { max-height: 60px; min-height: 1.4rem; opacity: 1; margin-bottom: .6rem; }

.login-btn {
    width: 100%; padding: 1rem; margin-top: .4rem;
    background: var(--lime);
    border: none; border-radius: 14px; color: #0a0a0b; font-size: 1.02rem; font-weight: 700;
    font-family: var(--display); cursor: pointer; position: relative; overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t);
}
.login-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px var(--lime-glow); }
.login-btn .btn-spinner { display: none; width: 20px; height: 20px; border: 2.5px solid rgba(10,10,11,.35); border-top-color: #0a0a0b; border-radius: 50%; margin: 0 auto; animation: spin .7s linear infinite; }
.login-btn.loading .btn-text { display: none; }
.login-btn.loading .btn-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-back { display: block; text-align: center; margin-top: 1.4rem; color: var(--muted); text-decoration: none; font-size: .9rem; transition: color var(--t-fast); }
.login-back:hover { color: var(--lime); }

/* ================================================================
   DASHBOARD
================================================================ */
.admin-body { background: var(--bg); min-height: 100vh; position: relative; }
.admin-body::before {
    content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(50vw 50vw at 100% -5%, rgba(198,255,58,0.06), transparent 55%),
        radial-gradient(45vw 45vw at 0% 100%, rgba(255,106,61,0.05), transparent 55%);
}
.admin-topbar, .admin-nav, .admin-main { position: relative; z-index: 1; }

.admin-topbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 1.6rem; background: rgba(10,10,11,.8); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: .9rem; }
.topbar-shield { width: 44px; height: 44px; border-radius: 50%; padding: 7px; background: var(--surface); border: 1px solid var(--line); }
.topbar-shield img { width: 100%; height: 100%; object-fit: contain; }
.topbar-title { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; letter-spacing: -0.01em; }
.topbar-sub { font-size: .78rem; color: var(--muted); }
.topbar-right { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.topbar-link { color: var(--lime); text-decoration: none; font-size: .9rem; font-weight: 600; }
.topbar-user { display: flex; align-items: center; gap: .6rem; }
.user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--lime); color: #0a0a0b; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--display); }
.user-name { color: var(--ink); font-weight: 600; font-size: .9rem; }
.user-role { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.btn-logout { padding: .5rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; color: var(--text2); cursor: pointer; font-size: .85rem; transition: var(--t-fast); }
.btn-logout:hover { border-color: var(--coral); color: var(--coral); }

.admin-nav { display: flex; gap: .4rem; padding: 1.2rem 1.6rem 0; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.nav-tab { display: flex; align-items: center; gap: .5rem; padding: .7rem 1.3rem; background: transparent; border: 1px solid transparent; border-radius: 100px; color: var(--muted); font-family: var(--font); font-weight: 600; font-size: .92rem; cursor: pointer; transition: var(--t-fast); }
.nav-tab svg { width: 18px; height: 18px; }
.nav-tab:hover { color: var(--text2); border-color: var(--line); }
.nav-tab.active { color: #0a0a0b; background: var(--lime); border-color: var(--lime); }

.admin-main { max-width: 1200px; margin: 0 auto; padding: 1.8rem 1.6rem 4rem; }
.view { display: none; animation: view-in .4s var(--ease); }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.view-head h2 { font-family: var(--display); color: var(--ink); font-size: 1.9rem; letter-spacing: -0.02em; }
.view-desc { color: var(--muted); font-size: .92rem; }

.btn-primary { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.5rem; background: var(--lime); border: none; border-radius: 100px; color: #0a0a0b; font-weight: 700; font-family: var(--font); font-size: .92rem; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t); }
.btn-primary svg { width: 18px; height: 18px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--lime-glow); }
.btn-ghost { padding: .75rem 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 100px; color: var(--text2); font-weight: 600; cursor: pointer; transition: var(--t-fast); }
.btn-ghost:hover { border-color: var(--muted); color: var(--ink); }

.filter-bar { display: flex; gap: .6rem; margin-bottom: 1.6rem; flex-wrap: wrap; }
.filter-btn { padding: .5rem 1.1rem; background: transparent; border: 1px solid var(--line); border-radius: 100px; color: var(--muted); font-size: .86rem; font-weight: 600; cursor: pointer; transition: var(--t-fast); }
.filter-btn:hover { color: var(--ink); border-color: var(--muted); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: #0a0a0b; }

/* Grid de proyectos */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.4rem; }
.proj-item { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: var(--t); display: flex; flex-direction: column; }
.proj-item:hover { transform: translateY(-5px); border-color: var(--muted); }
.proj-thumb { height: 150px; display: flex; align-items: center; justify-content: center; font-size: 3rem; position: relative; overflow: hidden;
    background: radial-gradient(120% 120% at 20% 0%, var(--lime-glow), transparent 55%), var(--surface-2); }
.proj-item.cat-data .proj-thumb { background: radial-gradient(120% 120% at 20% 0%, var(--coral-glow), transparent 55%), var(--surface-2); }
.proj-thumb img { width: 100%; height: 100%; object-fit: cover; }
.proj-badge { position: absolute; top: .7rem; left: .7rem; padding: .22rem .7rem; border-radius: 100px; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--lime); color: #0a0a0b; }
.proj-badge.data { background: var(--coral); }
.proj-info { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.proj-name { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.05rem; line-height: 1.25; letter-spacing: -0.01em; }
.proj-excerpt { color: var(--muted); font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-meta { display: flex; gap: .9rem; align-items: center; font-size: .75rem; color: var(--muted); margin-top: auto; }
.proj-actions { display: flex; gap: .5rem; padding: .9rem 1.1rem; border-top: 1px solid var(--line-soft); }
.proj-actions button { flex: 1; padding: .55rem; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--text2); cursor: pointer; font-size: .82rem; font-weight: 600; transition: var(--t-fast); }
.btn-edit:hover { border-color: var(--lime); color: var(--lime); }
.btn-del:hover { border-color: var(--coral); color: var(--coral); }
.proj-link { font-size: .72rem; color: var(--lime); text-decoration: none; }

.empty-state { text-align: center; padding: 3.5rem; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: 18px; }

/* Tabla usuarios */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.admin-table th { text-align: left; padding: 1rem 1.2rem; font-family: var(--font); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); border-bottom: 1px solid var(--line); font-weight: 600; }
.admin-table td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--line-soft); color: var(--text2); }
.admin-table tr:last-child td { border-bottom: none; }
.role-pill { padding: .2rem .7rem; border-radius: 100px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.role-admin { background: var(--coral-glow); color: var(--coral); border: 1px solid rgba(255,106,61,.3); }
.role-editor { background: var(--lime-glow); color: var(--lime); border: 1px solid rgba(198,255,58,.3); }
.row-actions { display: flex; gap: .4rem; justify-content: flex-end; }
.row-actions button { padding: .4rem .9rem; border-radius: 100px; border: 1px solid var(--line); background: transparent; color: var(--text2); cursor: pointer; font-size: .8rem; transition: var(--t-fast); }

/* Cuenta */
.account-card { max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 1.9rem; }

/* ================================================================
   FORMULARIOS Y MODALES
================================================================ */
.form-group { margin-bottom: 1.1rem; }
.form-group label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--text2); }
.form-group small { display: block; margin-top: .3rem; color: var(--muted); font-size: .76rem; }
.form-group input, .form-group textarea, .form-group select {
    width: 100%; padding: .8rem 1rem; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
    font-family: var(--font); font-size: .95rem; transition: var(--t-fast); resize: vertical;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
    outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px var(--lime-glow); background: var(--surface-2);
}
.form-group select option { background: var(--bg2); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-emoji { max-width: 130px; }
.form-error { color: var(--err); font-size: .86rem; min-height: 1.2rem; margin-bottom: .5rem; }

.upload-zone { border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; transition: var(--t-fast); overflow: hidden; }
.upload-zone:hover, .upload-zone.dragover { border-color: var(--lime); background: var(--lime-glow); }
.upload-preview { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: 1.8rem; color: var(--muted); text-align: center; }
.upload-preview svg { width: 34px; height: 34px; color: var(--lime); }
.upload-preview small { font-size: .74rem; }
.upload-zone.has-image .upload-preview { padding: 0; }
.upload-zone img.preview-img { width: 100%; max-height: 220px; object-fit: cover; display: block; }

.modal { position: fixed; inset: 0; background: rgba(5,5,6,.78); backdrop-filter: blur(8px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.2rem; opacity: 0; pointer-events: none; transition: opacity var(--t); }
.modal.open { opacity: 1; pointer-events: all; }
.modal-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 24px; padding: 2.2rem; width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(16px) scale(.96); transition: transform var(--t); }
.modal.open .modal-box { transform: none; }
.modal-sm { max-width: 460px; }
.modal-box h3 { font-family: var(--display); color: var(--ink); font-size: 1.4rem; letter-spacing: -0.01em; margin-bottom: 1.5rem; }
.modal-x { position: absolute; top: 1.1rem; right: 1.1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); color: var(--muted); cursor: pointer; font-size: .95rem; transition: var(--t-fast); }
.modal-x:hover { color: var(--ink); transform: rotate(90deg); }
.modal-actions { display: flex; justify-content: flex-end; gap: .8rem; margin-top: 1rem; }

/* Toasts */
.toast-wrap { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 200; display: flex; flex-direction: column; gap: .6rem; }
.toast { padding: .9rem 1.3rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lime); color: var(--ink); font-size: .9rem; box-shadow: 0 12px 30px rgba(0,0,0,.5); animation: toast-in .3s var(--ease), toast-out .3s var(--ease) 3s forwards; max-width: 340px; }
.toast.ok { border-left-color: var(--lime); }
.toast.err { border-left-color: var(--coral); }
@keyframes toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }

/* Responsive */
@media (max-width: 640px) {
    .form-row { grid-template-columns: 1fr; }
    .topbar-sub { display: none; }
    .view-head { flex-direction: column; }
}