/* Ruta: assets/css/admin.css
   ============================================================
   SISTEMA DE DISEÑO — Panel Administrativo (CMS)
   ============================================================
   Objetivo: nivel de acabado tipo producto SaaS (Linear, Stripe,
   Notion) — no "plantilla de admin". Reglas de diseño aplicadas:

   1. Paleta mayormente NEUTRA (grises cálidos + blanco). El oliva y
      el dorado de marca se usan como ACENTO puntual (botón primario,
      item activo del menú, avatar) — no como color de fondo
      generalizado. Eso es lo que distingue "producto premium" de
      "sitio con tema de color".
   2. Bordes finos (1px, bajo contraste) en vez de sombras pesadas.
   3. Un solo radio de esquina consistente en todo el sistema.
   4. Tipografía Inter — grotesca profesional, la misma familia que
      usan la mayoría de productos SaaS modernos.
   5. Estados vacíos, tablas y formularios diseñados como
      componentes, no como HTML por defecto.
   ============================================================ */

:root {
    /* Neutros */
    --gray-25:  #FCFCFB;
    --gray-50:  #F7F7F5;
    --gray-100: #EFEEEA;
    --gray-200: #E3E1DA;
    --gray-400: #A8A69C;
    --gray-600: #6F6E64;
    --gray-800: #38372F;
    --gray-900: #1E1D18;

    /* Acento de marca — uso puntual, no de fondo */
    --brand:       #45532B;
    --brand-soft:  #EEF1E6;
    --gold:        #B4832A;
    --gold-soft:   #F7EFDD;
    --danger:      #B3261E;
    --danger-soft: #FBEAE8;
    --success:     #3A6B35;
    --success-soft:#E7F0DD;

    --radius: 10px;
    --radius-sm: 7px;
    --shadow-sm: 0 1px 2px rgba(20,20,15,.05);
    --shadow-md: 0 8px 24px rgba(20,20,15,.08);

    --font: 'Inter', -apple-system, system-ui, sans-serif;
}

* { box-sizing: border-box; }

body.admin-body {
    margin: 0;
    font-family: var(--font);
    background: var(--gray-50);
    color: var(--gray-900);
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; color: var(--gray-900); margin: 0 0 4px; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.05rem; }
p { margin: 0 0 1em; color: var(--gray-600); }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(circle at 20% 20%, rgba(69,83,43,.06), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(180,131,42,.07), transparent 40%),
        var(--gray-50);
}
.login-form {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 36px 30px;
    box-shadow: var(--shadow-md);
}
.login-form h1 { font-size: 1.2rem; margin-bottom: 22px; }
.login-form label { display: block; font-size: .82rem; color: var(--gray-600); margin-bottom: 16px; font-weight: 500; }
.login-form input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.login-form input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.login-form button {
    width: 100%;
    padding: 11px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}
.login-form button:hover { background: #38431f; }
.login-form button:active { transform: scale(.98); }
.form-error {
    background: var(--danger-soft);
    color: var(--danger);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    margin-bottom: 16px;
}
.form-success {
    background: var(--success-soft);
    color: var(--success);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: .84rem;
    margin-bottom: 16px;
}

/* ============================================================
   SHELL: sidebar + topbar + contenido
   ============================================================ */
.admin-shell { display: flex; min-height: 100vh; }

.admin-sidebar {
    width: 232px;
    flex-shrink: 0;
    background: var(--gray-900);
    color: var(--gray-100);
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
}
.admin-sidebar__brand {
    font-weight: 700;
    font-size: .98rem;
    padding: 4px 10px 20px;
    color: #fff;
    letter-spacing: -.01em;
}
.admin-sidebar__group {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--gray-400);
    margin: 18px 12px 6px;
    font-weight: 600;
}
.admin-sidebar__nav { display: flex; flex-direction: column; gap: 1px; }
.admin-sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: #C9C8BE;
    text-decoration: none;
    font-size: .87rem;
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background .15s ease, color .15s ease;
}
.admin-sidebar__link svg { width: 17px; height: 17px; flex-shrink: 0; opacity: .8; }
.admin-sidebar__link:hover { background: rgba(255,255,255,.06); color: #fff; }
.admin-sidebar__link.is-active {
    background: rgba(255,255,255,.08);
    color: #fff;
    border-left-color: var(--gold);
}
.admin-sidebar__link.is-active svg { opacity: 1; color: var(--gold); }
.admin-sidebar__logout {
    margin-top: auto;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    color: #C99A93;
    text-decoration: none;
    font-size: .84rem;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 16px;
    margin-top: 14px;
}
.admin-sidebar__logout:hover { color: #E2B0A9; }

.admin-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.admin-topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #fff;
    border-bottom: 1px solid var(--gray-200);
}
.admin-avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .78rem;
}
.admin-topbar__nombre { font-size: .84rem; color: var(--gray-600); font-weight: 500; }

.admin-theme-toggle {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-600);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    margin-right: 4px;
    transition: background .15s ease, color .15s ease;
}
.admin-theme-toggle:hover { background: var(--gray-100); color: var(--gray-900); }
.admin-theme-toggle svg { width: 17px; height: 17px; }
.admin-theme-toggle .icon-luna { display: none; }
[data-theme="oscuro"] .admin-theme-toggle .icon-sol { display: none; }
[data-theme="oscuro"] .admin-theme-toggle .icon-luna { display: block; }

.admin-content { padding: 32px; flex: 1; max-width: 1100px; }
.admin-content--auth { padding: 0; max-width: none; }

.admin-eyebrow {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 6px;
}

/* ============================================================
   ENCABEZADO DE PÁGINA (patrón reutilizado en todos los listados)
   ============================================================ */
.admin-page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
}
.admin-page-header h1 { margin-bottom: 2px; }
.admin-page-header p { margin: 0; font-size: .88rem; }

/* ============================================================
   BOTONES
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: .86rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active { transform: scale(.98); }

.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #38431f; box-shadow: var(--shadow-sm); }

.btn--secondary { background: #fff; color: var(--gray-800); border-color: var(--gray-200); }
.btn--secondary:hover { border-color: var(--gray-400); background: var(--gray-25); }

/* ============================================================
   TARJETA CONTENEDORA (listados y formularios)
   ============================================================ */
.admin-productos,
.admin-form-page {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 28px 30px;
}
.admin-form-page { max-width: 620px; }

/* ============================================================
   TABLA
   ============================================================ */
.admin-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.admin-table thead th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--gray-400);
    font-weight: 600;
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--gray-200);
}
.admin-table tbody td {
    padding: 13px 12px;
    border-bottom: 1px solid var(--gray-100);
    color: var(--gray-800);
    vertical-align: middle;
}
.admin-table tbody tr:hover { background: var(--gray-25); }
.admin-table tbody tr:last-child td { border-bottom: none; }

.admin-table__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); }
.admin-table__no-img {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--gray-100); color: var(--gray-400); font-size: .65rem;
}
.admin-table__actions { display: flex; gap: 8px; align-items: center; }

.admin-table__actions a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    color: var(--gray-800);
    text-decoration: none;
    font-size: .78rem;
    font-weight: 500;
    transition: background .15s ease, border-color .15s ease;
}
.admin-table__actions a:hover { background: var(--gray-100); border-color: var(--gray-400); }

.admin-table__delete {
    padding: 5px 12px !important;
    border-radius: var(--radius-sm);
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border: 1px solid transparent !important;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
}
.admin-table__delete:hover { background: #f6d9d5 !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.badge--green { background: var(--success-soft); color: var(--success); }
.badge--gray  { background: var(--gray-100); color: var(--gray-600); }
.badge--gold  { background: var(--gold-soft); color: var(--gold); }
.badge--red   { background: var(--danger-soft); color: var(--danger); }

/* ============================================================
   ESTADO VACÍO
   ============================================================ */
.admin-empty {
    text-align: center;
    padding: 56px 24px;
    color: var(--gray-600);
}
.admin-empty__icon {
    width: 48px; height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--gray-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--gray-400);
}
.admin-empty__icon svg { width: 22px; height: 22px; }
.admin-empty h3 { color: var(--gray-800); margin-bottom: 4px; font-size: .98rem; }
.admin-empty p { font-size: .85rem; margin-bottom: 18px; }

/* ============================================================
   FORMULARIOS
   ============================================================ */
.admin-form label { display: block; margin-bottom: 16px; font-size: .82rem; color: var(--gray-600); font-weight: 500; }

.admin-form input[type="text"],
.admin-form input[type="number"],
.admin-form input[type="email"],
.admin-form input[type="file"],
.admin-form select,
.admin-form textarea {
    width: 100%;
    padding: 9px 11px;
    margin-top: 6px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: .89rem;
    font-family: inherit;
    color: var(--gray-900);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.admin-form input:focus, .admin-form select:focus, .admin-form textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.admin-form select {
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23A8A69C'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.admin-form small { display: block; color: var(--gray-400); margin-top: 5px; font-size: .78rem; }

.admin-form__checkbox { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.admin-form__checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }

.admin-form__preview { max-width: 140px; border-radius: var(--radius-sm); margin-bottom: 14px; display: block; border: 1px solid var(--gray-200); }
.admin-form__cancel { margin-left: 4px; color: var(--gray-600); text-decoration: none; font-size: .86rem; }
.admin-form__cancel:hover { color: var(--gray-900); }

.admin-form h2 {
    margin-top: 26px;
    margin-bottom: 4px;
    font-size: .95rem;
    border-top: 1px solid var(--gray-100);
    padding-top: 22px;
}
.admin-form h2:first-child { border-top: none; padding-top: 0; }

/* ============================================================
   GALERÍA (dentro del form de producto)
   ============================================================ */
.admin-gallery { margin-top: 30px; }
.admin-gallery__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 10px;
    margin: 14px 0;
}
.admin-gallery__item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--gray-200); }
.admin-gallery__item form button {
    width: 100%;
    margin-top: 4px;
    background: var(--danger-soft);
    color: var(--danger);
    border: none;
    border-radius: 6px;
    padding: 4px;
    font-size: .72rem;
    cursor: pointer;
}
.admin-gallery__add { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ============================================================
   DASHBOARD
   ============================================================ */
.dashboard__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin: 20px 0 30px;
}
.dashboard__card {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: 20px 22px;
}
.dashboard__card-label { font-size: .74rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.dashboard__card-number { display: block; font-size: 2rem; font-weight: 700; margin: 8px 0 12px; color: var(--gray-900); letter-spacing: -.02em; }
.dashboard__card-link { font-size: .8rem; color: var(--brand); font-weight: 600; text-decoration: none; }
.dashboard__card-link:hover { text-decoration: underline; }

.dashboard__quick-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dashboard__quick-links a {
    padding: 9px 16px;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    color: var(--gray-800);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
    transition: border-color .15s ease, background .15s ease;
}
.dashboard__quick-links a:hover { border-color: var(--brand); background: var(--brand-soft); }

/* ============================================================
   RESPONSIVE — sidebar como "cajón" (drawer) que se abre con
   hamburguesa, en vez de apilarse arriba de todo
   ============================================================ */

.admin-sidebar-toggle {
    display: none;
    width: 34px; height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
    background: transparent;
    color: var(--gray-800);
    cursor: pointer;
    margin-right: 10px;
}
.admin-sidebar-toggle:hover { background: var(--gray-100); }

.admin-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 15, .45);
    z-index: 90;
    opacity: 0;
    transition: opacity .2s ease;
}
.admin-sidebar-backdrop.is-open { display: block; opacity: 1; }

@media (max-width: 900px) {
    .admin-topbar { justify-content: space-between; }
    .admin-sidebar-toggle { display: flex; }

    .admin-sidebar {
        position: fixed;
        top: 0; left: 0;
        height: 100vh;
        width: 250px;
        z-index: 95;
        transform: translateX(-100%);
        transition: transform .25s cubic-bezier(.22,.61,.36,1);
        box-shadow: var(--shadow-md);
    }
    .admin-sidebar.is-open { transform: translateX(0); }

    .admin-content { padding: 18px; }
    .admin-productos, .admin-form-page { padding: 20px; }
}

/* ============================================================
   MODO OSCURO — redefine las variables de color; como casi todo
   el panel ya usa estas variables (no colores fijos), la mayoría
   de los componentes se adaptan solos. Solo los fondos que estaban
   hardcodeados en #fff necesitan su propia regla acá abajo.
   ============================================================ */
[data-theme="oscuro"] {
    --gray-25:  #16171A;
    --gray-50:  #1B1C20;
    --gray-100: #24252A;
    --gray-200: #33343A;
    --gray-400: #7A7B82;
    --gray-600: #ACADB3;
    --gray-800: #E4E4E6;
    --gray-900: #F5F5F6;

    --brand-soft:  rgba(69, 83, 43, .28);
    --gold-soft:   rgba(180, 131, 42, .22);
    --success-soft:rgba(58, 107, 53, .28);
    --danger-soft: rgba(179, 38, 30, .28);
}

[data-theme="oscuro"] body.admin-body { background: var(--gray-50); }

[data-theme="oscuro"] .login-wrapper {
    background:
        radial-gradient(circle at 20% 20%, rgba(69,83,43,.15), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(180,131,42,.15), transparent 40%),
        var(--gray-50);
}
[data-theme="oscuro"] .login-form,
[data-theme="oscuro"] .admin-topbar,
[data-theme="oscuro"] .admin-productos,
[data-theme="oscuro"] .admin-form-page,
[data-theme="oscuro"] .dashboard__card,
[data-theme="oscuro"] .admin-table,
[data-theme="oscuro"] .dashboard__quick-links a,
[data-theme="oscuro"] .admin-table__actions a {
    background: var(--gray-100);
}

[data-theme="oscuro"] .admin-form input[type="text"],
[data-theme="oscuro"] .admin-form input[type="number"],
[data-theme="oscuro"] .admin-form input[type="email"],
[data-theme="oscuro"] .admin-form input[type="password"],
[data-theme="oscuro"] .admin-form input[type="file"],
[data-theme="oscuro"] .admin-form select,
[data-theme="oscuro"] .admin-form textarea,
[data-theme="oscuro"] .login-form input {
    background: var(--gray-50);
    color: var(--gray-900);
}

[data-theme="oscuro"] .admin-empty__icon { background: var(--gray-200); }
[data-theme="oscuro"] .admin-form__preview { border-color: var(--gray-200); }
[data-theme="oscuro"] .admin-gallery__item img { border-color: var(--gray-200); }