/* =====================================================================
   SISTEMA DE DISEÑO — "Bitácora de propiedad"
   Inspirado en libros de registro y control de propiedad: sellos de
   estado, pestañas de índice y cifras en monoespaciado.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab:wght@400;500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
    /* Color */
    --papel: #EDEEE6;
    --papel-alto: #F7F8F3;
    --tinta: #1B2733;
    --tinta-suave: #4A5560;
    --tinta-tenue: #8A9199;
    --borde: #C9CBC0;
    --borde-fuerte: #A9AC9E;

    --acento: #1F6F5C;         /* teal de registro — positivo, acción principal */
    --acento-suave: #E4EEEA;
    --acento-fuerte: #164F41;

    --alerta: #A83232;         /* rojo sello — atrasos, alertas */
    --alerta-suave: #F5E4E2;

    --advertencia: #93631E;    /* ámbar — pendiente */
    --advertencia-suave: #F3E9D8;

    /* Tipografía */
    --fuente-titulo: 'Zilla Slab', serif;
    --fuente-cuerpo: 'Inter', sans-serif;
    --fuente-mono: 'IBM Plex Mono', monospace;

    /* Layout */
    --radio: 3px;
    --sombra: 0 1px 3px rgba(27, 39, 51, 0.08);
    --ancho-sidebar: 232px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--fuente-cuerpo);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3, h4 {
    font-family: var(--fuente-titulo);
    font-weight: 600;
    margin: 0 0 0.5em;
    color: var(--tinta);
    letter-spacing: -0.01em;
}

h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }

a { color: var(--acento-fuerte); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono { font-family: var(--fuente-mono); }

/* --- Layout general --- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--ancho-sidebar);
    background: var(--tinta);
    color: var(--papel-alto);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-marca {
    padding: 22px 20px;
    font-family: var(--fuente-titulo);
    font-size: 18px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* Selector de moneda de vista (Bs / USD / EUR) */
.selector-moneda {
    display: flex;
    gap: 4px;
    padding: 0 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 4px;
}

.selector-moneda a {
    flex: 1;
    text-align: center;
    padding: 6px 0;
    font-family: var(--fuente-mono);
    font-size: 13px;
    color: rgba(247, 248, 243, 0.6);
    border: 1px solid rgba(247, 248, 243, 0.18);
    border-radius: var(--radio);
    text-decoration: none;
}

.selector-moneda a:hover {
    color: var(--papel-alto);
    border-color: rgba(247, 248, 243, 0.4);
    text-decoration: none;
}

.selector-moneda a.activo {
    background: var(--acento);
    border-color: var(--acento);
    color: var(--papel-alto);
    font-weight: 500;
}

.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }

/* Pestañas de índice: el elemento activo "sobresale" como una ficha de carpeta */
.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(247, 248, 243, 0.72);
    font-size: 14px;
    border-left: 3px solid transparent;
    text-decoration: none;
}

.sidebar-nav a:hover {
    background: rgba(247, 248, 243, 0.06);
    color: var(--papel-alto);
}

.sidebar-nav a.activo {
    background: var(--papel);
    color: var(--tinta);
    border-left: 3px solid var(--acento);
    font-weight: 500;
}

.sidebar-usuario {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.12);
    font-size: 13px;
}

.sidebar-usuario .rol {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(247, 248, 243, 0.55);
}

.main {
    flex: 1;
    padding: 32px 40px;
    max-width: 1200px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 28px;
}

/* --- Tarjetas --- */
.card {
    background: var(--papel-alto);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 20px 22px;
    box-shadow: var(--sombra);
}

.card + .card { margin-top: 16px; }

.grid { display: grid; gap: 16px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
}

/* --- Métricas resumen --- */
.metrica .etiqueta {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-tenue);
    margin-bottom: 6px;
}

.metrica .valor {
    font-family: var(--fuente-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--tinta);
}

.metrica .valor.positivo { color: var(--acento-fuerte); }
.metrica .valor.negativo { color: var(--alerta); }

/* --- Badges de estado tipo "sello" --- */
.sello {
    display: inline-block;
    font-family: var(--fuente-mono);
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 9px;
    border-radius: var(--radio);
    border: 1.5px solid currentColor;
    background: transparent;
}

.sello-pagado { color: var(--acento-fuerte); }
.sello-pendiente { color: var(--advertencia); }
.sello-atrasado { color: var(--alerta); }
.sello-activo { color: var(--acento-fuerte); }
.sello-inactivo { color: var(--tinta-tenue); }

/* --- Formularios --- */
.form-grupo { margin-bottom: 18px; }

.form-grupo label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--tinta-suave);
}

.form-grupo input,
.form-grupo select,
.form-grupo textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    color: var(--tinta);
    background: var(--papel-alto);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
}

.form-grupo input:focus,
.form-grupo select:focus,
.form-grupo textarea:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    font-family: var(--fuente-cuerpo);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radio);
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primario {
    background: var(--acento);
    color: var(--papel-alto);
}
.btn-primario:hover { background: var(--acento-fuerte); text-decoration: none; }

.btn-secundario {
    background: transparent;
    color: var(--tinta);
    border-color: var(--borde-fuerte);
}
.btn-secundario:hover { background: var(--papel); text-decoration: none; }

/* --- Tablas --- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-tenue);
    font-weight: 500;
    padding: 10px 12px;
    border-bottom: 1.5px solid var(--borde-fuerte);
}
td { padding: 12px; border-bottom: 1px solid var(--borde); }
tr:hover td { background: rgba(31, 111, 92, 0.03); }

/* --- Modo compra: checklist táctil para usar en el súper --- */
.item-compra {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 4px;
    border-bottom: 1px solid var(--borde);
    cursor: pointer;
}
.item-compra:last-child { border-bottom: none; }

.item-compra-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    accent-color: var(--acento);
}

.item-compra-nombre {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

.item-compra-cantidad {
    width: 84px;
    padding: 10px;
    font-size: 15px;
    text-align: center;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio);
    background: var(--papel-alto);
}
.item-compra-cantidad:disabled { background: var(--papel); color: var(--tinta-tenue); }

/* --- Alertas / flash --- */
.alerta-flash {
    padding: 12px 16px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-size: 14px;
    border-left: 3px solid currentColor;
}
.alerta-flash.exito { background: var(--acento-suave); color: var(--acento-fuerte); }
.alerta-flash.error { background: var(--alerta-suave); color: var(--alerta); }
.alerta-flash.info { background: var(--advertencia-suave); color: var(--advertencia); }

/* --- Página de login --- */
.pantalla-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tinta);
    padding: 20px;
}

.login-caja {
    width: 100%;
    max-width: 380px;
    background: var(--papel-alto);
    border-radius: var(--radio);
    padding: 40px 36px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.login-marca {
    font-family: var(--fuente-titulo);
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 4px;
}

.login-subtitulo {
    font-size: 13px;
    color: var(--tinta-tenue);
    margin-bottom: 28px;
}

/* Foco de teclado visible en toda la app (accesibilidad) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}