@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root {
    --bg: #0a0d12;
    --bg-elevated: #12161d;
    --surface: #171c25;
    --surface-2: #1e2430;
    --line: rgba(255, 255, 255, 0.09);
    --orange: #ff6a1a;
    --orange-dark: #e85400;
    --blue: #2f7bf0;
    --blue-dark: #1857b8;
    --red: #e53e3e;
    --ink: #f4f5f7;
    --muted: #9aa3b2;
    --muted-dim: #6b7383;
    --success: #2fb673;
    --white: #fff;
    --font-head: 'Oswald', sans-serif;
    --font-body: 'Barlow', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background-color: var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.5; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1 { font-family: var(--font-head); font-size: 26px; text-transform: uppercase; letter-spacing: .5px; }
h2 { font-family: var(--font-head); font-size: 17px; text-transform: uppercase; letter-spacing: .4px; }

/* ------------------------------ botones ------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-head);
    font-size: 13px;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color .18s ease, color .18s ease;
}
.btn-primary { background-color: var(--orange); color: var(--white); }
.btn-primary:hover { background-color: var(--orange-dark); }
.btn-blue { background-color: var(--blue); color: var(--white); }
.btn-blue:hover { background-color: var(--blue-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
.btn-danger { background: transparent; color: var(--red); border-color: rgba(229,62,62,.4); }
.btn-danger:hover { background-color: rgba(229,62,62,.12); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-mini { padding: 5px 10px; font-size: 11.5px; }

/* ------------------------------ campos ------------------------------ */
.field { display: grid; gap: 5px; }
.field label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
input[type="text"], input[type="password"], input[type="number"], input[type="search"],
input[type="email"], input[type="file"], select, textarea {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 12px;
    width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--orange); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.check input { width: auto; }
.form-note { font-size: 12.5px; color: var(--muted-dim); margin-top: 8px; }
.lead { color: var(--muted); font-size: 14.5px; margin: 8px 0 20px; max-width: 70ch; }

/* ------------------------------ login ------------------------------ */
.login-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 0%, #1a2130 0%, var(--bg) 60%);
}
.login-box {
    width: min(400px, 100%);
    background-color: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 32px 28px;
    display: grid;
    gap: 14px;
    justify-items: stretch;
}
.login-box img { margin: 0 auto; }
.login-box h1 { font-size: 21px; text-align: center; color: var(--orange); }
.login-box > p { font-size: 13.5px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.login-error { color: var(--red); font-size: 13px; min-height: 18px; text-align: center; }
.login-back { font-size: 12.5px; color: var(--muted-dim); text-align: center; }
.login-back:hover { color: var(--orange); }

/* ------------------------------ layout ------------------------------ */
.admin { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }

/* El atributo "hidden" pierde contra cualquier regla de display normal del
   propio CSS, sin importar la especificidad (las reglas del navegador tienen
   menor prioridad de "origen" que las del sitio). Sin esto, aunque admin.js
   ponga hidden=true/false, el login y el panel quedan siempre visibles a la
   vez y el login no te "lleva" al panel al ingresar. */
.login-screen[hidden],
.admin[hidden] {
    display: none !important;
}

.side {
    background-color: var(--bg-elevated);
    border-right: 1px solid var(--line);
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.side-brand { display: flex; align-items: center; gap: 10px; }
.side-brand strong { display: block; font-family: var(--font-head); font-size: 16px; }
.side-brand span { font-size: 11.5px; color: var(--muted-dim); }
.side-nav { display: grid; gap: 4px; }
.side-link {
    background: transparent;
    border: 0;
    color: var(--muted);
    text-align: left;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.side-link:hover { background-color: var(--surface); color: var(--ink); }
.side-link.active { background-color: var(--orange); color: var(--white); font-weight: 600; }
.side-foot { margin-top: auto; display: grid; gap: 8px; font-size: 12.5px; color: var(--muted-dim); }
.side-foot a:hover { color: var(--orange); }

.main { padding: 28px 30px 60px; max-width: 1200px; }
.tab { display: none; }
.tab.active { display: block; }
.page-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.page-title select { width: auto; }

/* ------------------------------ tarjetas ------------------------------ */
.card {
    background-color: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 18px;
}
.card h2 { margin-bottom: 14px; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 18px 0; }
.stat {
    background-color: var(--bg-elevated);
    border: 1px solid var(--line);
    border-left: 3px solid var(--orange);
    border-radius: 8px;
    padding: 16px 18px;
}
.stat span { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.stat strong { font-family: var(--font-head); font-size: 26px; }
.stat.alerta { border-left-color: var(--red); }
.stat.alerta strong { color: var(--red); }
.stat.ok { border-left-color: var(--success); }

/* ------------------------------ tablas ------------------------------ */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
    text-align: left;
    font-family: var(--font-head);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--muted);
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:hover { background-color: var(--surface); }
.td-prod { display: flex; align-items: center; gap: 10px; min-width: 240px; }
.td-thumb {
    width: 42px; height: 42px; flex-shrink: 0;
    background-color: var(--surface-2);
    border-radius: 6px;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.td-thumb img { width: 100%; height: 100%; object-fit: cover; }
.td-prod strong { display: block; font-size: 13.5px; font-weight: 600; }
.td-prod span { font-size: 11.5px; color: var(--muted-dim); }
.precio-min { font-family: var(--font-head); font-size: 15px; }
.precio-may { font-family: var(--font-head); font-size: 15px; color: var(--blue); }

.stock-cell { display: flex; align-items: center; gap: 5px; }
.stock-cell input {
    width: 62px; text-align: center; padding: 5px; font-size: 13px;
}
.stock-cell button {
    width: 26px; height: 26px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    border-radius: 4px;
    line-height: 1;
}
.stock-cell button:hover { border-color: var(--orange); color: var(--orange); }
.stock-bajo input { border-color: var(--red); color: var(--red); }

.pill {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--muted);
    white-space: nowrap;
}
.pill.ok { color: var(--success); border-color: rgba(47,182,115,.4); }
.pill.off { color: var(--muted-dim); }
.pill.warn { color: var(--orange); border-color: rgba(255,106,26,.4); }
.pill.danger { color: var(--red); border-color: rgba(229,62,62,.4); }
.pill.info { color: var(--blue); border-color: rgba(47,123,240,.4); }

.acciones { display: flex; gap: 6px; justify-content: flex-end; }
.vacio { text-align: center; color: var(--muted); padding: 30px 10px; }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 14px; font-size: 13px; color: var(--muted); }

/* ------------------------------ filtros ------------------------------ */
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.filtros input, .filtros select { width: auto; min-width: 180px; flex: 1 1 180px; }
.precio-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.precio-row label { font-size: 13px; color: var(--muted); }
.precio-row input { width: 120px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.lista-simple { display: grid; gap: 6px; margin-top: 12px; }
.lista-simple li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 12px;
    background-color: var(--surface);
    border-radius: 6px;
    font-size: 13.5px;
}

/* ------------------------------ modal ------------------------------ */
.modal {
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, .7);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    z-index: 100;
}
.modal[hidden] { display: none; }
.modal-box {
    background-color: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: 12px;
    width: min(760px, 100%);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
}
.modal-head, .modal-foot {
    padding: 16px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.modal-head { border-bottom: 1px solid var(--line); }
.modal-foot { border-top: 1px solid var(--line); justify-content: flex-end; }
.modal-close { background: transparent; border: 0; color: var(--ink); font-size: 26px; line-height: 1; }
.modal-body { padding: 20px 22px; overflow-y: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.checks { display: flex; flex-wrap: wrap; gap: 18px; }
.preview { margin-top: 8px; }
.preview img { max-height: 110px; border-radius: 6px; border: 1px solid var(--line); }

/* ------------------------------ toast ------------------------------ */
.toast {
    position: fixed;
    left: 50%; bottom: 26px;
    transform: translate(-50%, 140%);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--success);
    padding: 12px 18px;
    border-radius: 6px;
    font-size: 13.5px;
    z-index: 200;
    max-width: min(460px, 90vw);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.error { border-left-color: var(--red); }

/* ------------------------------ responsive ------------------------------ */
@media (max-width: 900px) {
    .admin { grid-template-columns: 1fr; }
    .side { position: static; height: auto; flex-direction: column; }
    .side-nav { grid-auto-flow: column; grid-auto-columns: 1fr; overflow-x: auto; }
    .side-link { text-align: center; font-size: 12.5px; padding: 9px 6px; white-space: nowrap; }
    .main { padding: 20px 16px 50px; }
}

/* =========================================================================
   ADAPTACIÓN A CELULARES Y TABLETS
   ========================================================================= */
html, body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
input, select, textarea { font-size: 16px; }

.info-mayorista { border-left: 3px solid var(--blue); }
.info-mayorista p { font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.info-mayorista strong { color: var(--ink); }
.info-mayorista code {
    background-color: var(--surface);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    color: var(--orange);
}

@media (max-width: 900px) {
    .main { padding: 18px 14px 40px; }
    .side { padding: 14px 12px; gap: 14px; }
    .side-brand span { display: none; }
    .card { padding: 16px 14px; }
    h1 { font-size: 21px; }
    .page-title { gap: 10px; }
    .page-title .btn { width: 100%; }
    .page-title select { width: 100%; }
    .filtros { flex-direction: column; align-items: stretch; }
    .filtros input, .filtros select { width: 100%; min-width: 0; }
    .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stat { padding: 13px 14px; }
    .stat strong { font-size: 21px; }
    .stat span { font-size: 11px; }
}

@media (max-width: 700px) {

    /* La tabla de productos deja de ser tabla y pasa a ser una lista de fichas:
       en un celular una tabla de 6 columnas es imposible de usar. */
    #tablaProductos thead { display: none; }
    #tablaProductos, #tablaProductos tbody, #tablaProductos tr, #tablaProductos td { display: block; width: 100%; }
    #tablaProductos tr {
        background-color: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 12px;
    }
    #tablaProductos td { border: 0; padding: 5px 0; }
    #tablaProductos td[data-etiqueta]::before {
        content: attr(data-etiqueta);
        display: block;
        font-size: 10.5px;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--muted-dim);
        margin-bottom: 2px;
    }
    #tablaProductos .td-prod { min-width: 0; }
    #tablaProductos .acciones { justify-content: stretch; }
    #tablaProductos .acciones .btn { flex: 1; padding: 10px; font-size: 12px; }
    .stock-cell button { width: 34px; height: 34px; font-size: 17px; }
    .stock-cell input { width: 70px; height: 34px; }

    /* Lo mismo con los pedidos */
    #tablaPedidos thead { display: none; }
    #tablaPedidos, #tablaPedidos tbody, #tablaPedidos tr, #tablaPedidos td { display: block; width: 100%; }
    #tablaPedidos tr {
        background-color: var(--surface);
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 12px;
        margin-bottom: 12px;
    }
    #tablaPedidos td { border: 0; padding: 4px 0; }
    #tablaPedidos select { width: 100%; margin-top: 6px; }

    .stats { grid-template-columns: 1fr 1fr; }
    .btn-row { flex-direction: column; }
    .btn-row .btn { width: 100%; }
    .precio-row { flex-direction: column; align-items: stretch; }
    .precio-row input { width: 100%; }
    .precio-row .btn { width: 100%; }

    /* Modal a pantalla completa */
    .modal { padding: 0; }
    .modal-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
    .modal-body { padding: 16px; }
    .modal-head, .modal-foot { padding: 14px 16px; }
    .modal-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
    .modal-foot .btn { flex: 1; }
    .form-grid { grid-template-columns: 1fr; }
    .checks { flex-direction: column; gap: 12px; }

    .login-box { padding: 26px 20px; }
    .toast { bottom: 16px; font-size: 13px; }
}

@media (max-width: 420px) {
    .stats { grid-template-columns: 1fr; }
    .side-nav { gap: 2px; }
    .side-link { font-size: 11.5px; padding: 9px 4px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}