/* =============================================================
   Admin panel + Auth screens · Mauw Tienda
   Paleta: #1F2C5C (azul) #E64A1A (naranja) #F5F6FA (fondo)
   ============================================================= */

:root {
    --azul:    #1F2C5C;
    --azul-2:  #2c3a78;
    --naranja: #E64A1A;
    --gris:    #F5F6FA;
    --borde:   #e3e6ee;
    --texto:   #1f2530;
    --muted:   #6b7280;
    --ok:      #16a34a;
    --warn:    #d97706;
    --bad:     #dc2626;
}

/* ========== AUTH (login + setup) ========== */
.auth-body {
    background: linear-gradient(135deg, var(--azul), var(--azul-2));
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    padding: 20px;
}
.auth-card {
    background: white;
    border-radius: 14px;
    padding: 32px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.auth-logo { text-align:center; margin-bottom: 8px; }
.auth-logo img {
    max-width: 130px;
    max-height: 110px;
    width: auto;
    height: auto;
    display: inline-block;
}
.auth-card h1 {
    margin: 8px 0 4px;
    font-size: 20px;
    color: var(--azul);
    text-align: center;
}
.auth-sub { color: var(--muted); text-align: center; margin: 0 0 22px; font-size: 14px; }
.auth-card label { display:block; margin-bottom: 14px; }
.auth-card label > span {
    display:block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 4px;
    font-weight: 500;
}
.auth-card input[type=text],
.auth-card input[type=password] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}
.auth-card input:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(31,44,92,0.1);
}
.auth-error {
    background: #fee;
    color: #b91c1c;
    border: 1px solid #fcc;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 14px;
}
.btn-primary {
    background: var(--naranja);
    color: white;
    border: none;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}
.btn-primary:hover { background: #d33d12; }
.btn-secondary {
    background: var(--azul);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    cursor: pointer;
}
.btn-primary.small, .btn-secondary.small { padding: 6px 12px; font-size: 13px; width: auto; }

/* ========== HEADER del verificador (con usuario logueado) ========== */
.header-user {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 13px;
    margin-left: auto;
    color: rgba(255,255,255,0.92);
    flex-wrap: wrap;
}
.user-name { font-weight: 600; }
.user-link {
    color: rgba(255,255,255,0.92);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.4);
}
.user-link:hover { color: white; border-bottom-color: white; }

/* ========== ADMIN PANEL ========== */
.admin-body {
    background: var(--gris);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--texto);
}
.admin-topbar {
    background: var(--azul);
    color: white;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.admin-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700;
}
.admin-brand-logo {
    width: 36px; height: 36px;
    object-fit: cover;
    border-radius: 50%;
    background: white;
    flex-shrink: 0;
}
.admin-nav { display: flex; gap: 4px; }
.admin-nav a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 14px;
}
.admin-nav a:hover { background: rgba(255,255,255,0.1); }
.admin-nav a.active { background: var(--naranja); color: white; }
.admin-user {
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
    font-size: 13px;
}
.admin-user span small { opacity: 0.7; }

.admin-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 24px;
}
.admin-h1 { margin: 0 0 18px; font-size: 22px; color: var(--azul); }

/* ========== CARDS / GRID ========== */
.admin-card {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 18px;
}
.admin-card h2 {
    margin: 0 0 14px;
    font-size: 15px;
    color: var(--azul);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.admin-card h2 small { font-weight: normal; color: var(--muted); text-transform: none; letter-spacing: 0; }
.admin-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 0;
}
@media (max-width: 800px) { .admin-grid-2 { grid-template-columns: 1fr; } }

/* ========== KPIs ========== */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.kpi {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.kpi-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-value { font-size: 26px; font-weight: 700; color: var(--azul); }

/* ========== TABLAS ========== */
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td {
    padding: 9px 10px;
    text-align: left;
    border-bottom: 1px solid var(--borde);
}
.admin-table th {
    background: #fafbfd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
}
.admin-table tbody tr:hover { background: #fafbfd; }
.admin-table.clickable tbody tr[data-href] { cursor: pointer; }
.admin-table.clickable tbody tr[data-href]:hover { background: #eef2ff; }
.admin-table.clickable tbody tr[data-href]:focus { outline: 2px solid var(--azul); outline-offset: -2px; background: #eef2ff; }
.admin-table .ok  { color: var(--ok);  font-weight: 600; }
.admin-table .bad { color: var(--bad); font-weight: 600; }

table.kv { width: 100%; font-size: 14px; }
table.kv th {
    text-align: left;
    color: var(--muted);
    font-weight: 500;
    width: 140px;
    padding: 6px 0;
    font-size: 13px;
}
table.kv td { padding: 6px 0; word-break: break-word; }

/* ========== PILLS ========== */
.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    background: #e5e7eb;
    color: #374151;
}
.pill.small { font-size: 11px; padding: 2px 8px; }
.pill.big   { font-size: 14px; padding: 6px 16px; }
.pill.verdadero        { background: #d1fae5; color: #065f46; }
.pill.sospechoso       { background: #fef3c7; color: #92400e; }
.pill.falso            { background: #fee2e2; color: #991b1b; }
.pill.no_verificable   { background: #e5e7eb; color: #374151; }
.pill.error            { background: #f3f4f6; color: #6b7280; }
.pill.coincide         { background: #d1fae5; color: #065f46; }
.pill.coincide_menor   { background: #fef3c7; color: #92400e; }
.pill.difiere          { background: #fee2e2; color: #991b1b; }
.pill.ocr_vacio        { background: #f3f4f6; color: #6b7280; }
.pill.warn             { background: #fef3c7; color: #92400e; }
.pill.admin            { background: #ddd6fe; color: #5b21b6; }

/* ========== VEREDICTOS BAR (dashboard) ========== */
.ver-bars { display: flex; flex-direction: column; gap: 8px; }
.ver-row { display: grid; grid-template-columns: 130px 1fr 100px; align-items: center; gap: 10px; font-size: 13px; }
.ver-bar {
    background: var(--gris);
    border-radius: 4px;
    height: 20px;
    overflow: hidden;
}
.ver-bar-fill { height: 100%; transition: width .3s ease; }
.ver-bar-fill.verdadero        { background: #16a34a; }
.ver-bar-fill.sospechoso       { background: #d97706; }
.ver-bar-fill.falso            { background: #dc2626; }
.ver-bar-fill.no_verificable   { background: #94a3b8; }
.ver-bar-fill.error            { background: #6b7280; }
.ver-num { text-align: right; color: var(--muted); }
.ver-num small { color: var(--muted); }

/* ========== SPARKLINE (dashboard) ========== */
.spark { display: flex; gap: 4px; align-items: flex-end; height: 110px; padding-top: 8px; }
.spark-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}
.spark-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--naranja), #f57b4a);
    border-radius: 3px 3px 0 0;
    min-height: 0;
    transition: height .3s ease;
}
.spark-day { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ========== FILTROS ========== */
.admin-filters {
    background: white;
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    align-items: end;
}
.admin-filters label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.admin-filters input,
.admin-filters select {
    padding: 7px 10px;
    border: 1px solid var(--borde);
    border-radius: 6px;
    font-size: 14px;
}
.filter-actions { display: flex; gap: 10px; align-items: center; }

/* ========== FORMS ========== */
.form-grid { display: flex; flex-direction: column; gap: 10px; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form-grid input, .form-grid select {
    padding: 9px 11px; border: 1px solid var(--borde); border-radius: 6px; font-size: 14px;
}
.form-inline {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: end;
    padding: 12px; background: var(--gris); border-radius: 6px; margin-top: 8px;
}
.form-inline label { font-size: 12px; display: flex; flex-direction: column; gap: 3px; color: var(--muted); }
.form-inline label.check { flex-direction: row; align-items: center; gap: 5px; }
.form-inline input, .form-inline select {
    padding: 6px 9px; border: 1px solid var(--borde); border-radius: 5px; font-size: 13px;
}

.inline-actions summary { cursor: pointer; }
.inline-actions[open] summary { color: var(--azul); }

/* ========== FLASH ========== */
.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 14px; }
.flash.ok  { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash.err { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }

/* ========== MISC ========== */
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono  { font-family: 'SF Mono', Menlo, Consolas, monospace; }
.btn-link {
    color: var(--azul);
    text-decoration: none;
    border-bottom: 1px dotted var(--azul);
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 1px dotted var(--azul);
    padding: 0;
}
.btn-link:hover { color: var(--naranja); border-bottom-color: var(--naranja); }
.pager { display: flex; gap: 16px; align-items: center; justify-content: center; padding: 12px 0; }
.pager a { color: var(--azul); text-decoration: none; font-weight: 600; }
.pager a:hover { color: var(--naranja); }

details.admin-card[open] summary { color: var(--azul); margin-bottom: 10px; }
details.admin-card summary { cursor: pointer; }

/* ========== Footer GEOMASTERSOLUTIONS ========== */
.dev-footer {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    padding: 14px 16px 18px;
    line-height: 1.7;
}
.dev-footer strong { color: var(--azul); font-weight: 600; }
.dev-footer a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px dotted #b9bcc7;
}
.dev-footer a:hover { color: var(--naranja); border-bottom-color: var(--naranja); }
.dev-footer .sep { margin: 0 6px; opacity: 0.5; }

/* Variante para fondo oscuro (login / setup) */
.auth-body .dev-footer { color: rgba(255,255,255,0.75); margin-top: 18px; }
.auth-body .dev-footer strong { color: white; }
.auth-body .dev-footer a { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.4); }
.auth-body .dev-footer a:hover { color: var(--naranja); border-bottom-color: var(--naranja); }

/* ========== Imagen del comprobante en detalle ========== */
.comprobante-img {
    margin-top: 12px;
    text-align: center;
    background: var(--gris);
    border-radius: 8px;
    padding: 10px;
}
.comprobante-img img {
    max-width: 100%;
    max-height: 400px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    cursor: zoom-in;
    display: block;
    margin: 0 auto;
}

/* ========== Plan resumen (admin de org) ========== */
.plan-resumen {
    border-left: 4px solid var(--naranja);
}
.plan-resumen-header {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; justify-content: space-between;
    margin-bottom: 14px;
}
.plan-resumen-header h2 { margin: 0; font-size: 17px; text-transform: none; letter-spacing: 0; }
.plan-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.plan-num {
    background: var(--gris);
    border-radius: 8px;
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
}
.plan-num-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.plan-num-value { font-size: 22px; font-weight: 700; color: var(--azul); }
.plan-num.plus  .plan-num-value { color: #16a34a; }
.plan-num.minus .plan-num-value { color: var(--naranja); }
.plan-num.saldo {
    background: var(--azul); color: white;
}
.plan-num.saldo .plan-num-label { color: rgba(255,255,255,0.7); }
.plan-num.saldo .plan-num-value { color: white; }

.plan-progress { display: flex; flex-direction: column; gap: 8px; }
.plan-progress-row { display: flex; flex-direction: column; gap: 4px; }
.plan-bar { background: var(--gris); border-radius: 4px; height: 10px; overflow: hidden; }
.plan-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #16a34a, #f59e0b 75%, var(--bad) 100%);
    transition: width .3s ease;
}
.plan-bar-fill.diario { background: linear-gradient(90deg, var(--azul), var(--naranja)); }

.flash.warn { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* ========== Mini barra (en filas de tablas) ========== */
.mini-bar { background: var(--gris); border-radius: 3px; height: 4px; margin-top: 4px; overflow: hidden; }
.mini-bar-fill { height: 100%; background: var(--naranja); }

/* ========== Página de planes (super admin) ========== */
.planes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}
.plan-card {
    background: white;
    border: 2px solid var(--borde);
    border-radius: 12px;
    padding: 22px;
}
.plan-card h3 { margin: 0 0 10px; color: var(--azul); }
.plan-price {
    font-size: 32px;
    font-weight: 700;
    color: var(--naranja);
    margin-bottom: 4px;
}
.plan-price small { font-size: 14px; color: var(--muted); font-weight: 400; }
.plan-features { list-style: none; padding: 0; margin: 14px 0; line-height: 2; font-size: 14px; }
.plan-features li::before { content: "✓"; color: #16a34a; font-weight: 700; margin-right: 8px; }
.plan-edit summary { color: var(--azul); font-size: 13px; }

/* ========== Topbar SUPER ADMIN (variante naranja) ========== */
.admin-topbar.super { border-bottom: 3px solid var(--naranja); }

/* ========== Hamburger (móvil) ========== */
.admin-nav-toggle {
    display: none;
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    width: 36px; height: 32px;
    font-size: 18px;
    cursor: pointer;
    margin-left: auto;
}
.admin-nav-toggle:focus { outline: 2px solid var(--naranja); }

/* =============================================================
   RESPONSIVE — móvil
   ============================================================= */
@media (max-width: 800px) {

    /* Topbar: hamburger + nav colapsable */
    .admin-topbar { padding: 10px 14px; gap: 10px; }
    .admin-nav-toggle { display: inline-block; }
    .admin-nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        background: rgba(0,0,0,0.15);
        border-radius: 8px;
        padding: 6px;
        margin-top: 4px;
    }
    .admin-topbar.nav-open .admin-nav { display: flex; }
    .admin-nav a { padding: 10px 14px; }
    .admin-user {
        margin-left: 0;
        flex-basis: 100%;
        font-size: 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    /* Main padding más compacto */
    .admin-main { padding: 14px; }
    .admin-h1   { font-size: 18px; }

    /* KPIs: 2 columnas en móvil */
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .kpi { padding: 12px; }
    .kpi-value { font-size: 20px; }

    /* Cards más compactas */
    .admin-card { padding: 14px 14px; }
    .admin-card h2 { font-size: 13px; }

    /* Filtros: 1 columna */
    .admin-filters { grid-template-columns: 1fr; padding: 12px; }
    .filter-actions { flex-wrap: wrap; }

    /* Plan resumen: números 2 columnas */
    .plan-numeros { grid-template-columns: repeat(2, 1fr); }
    .plan-num { padding: 10px; }
    .plan-num-value { font-size: 18px; }

    /* Tablas → cards verticales con data-label */
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody { display: block; }
    .admin-table tr {
        display: block;
        border: 1px solid var(--borde);
        border-radius: 8px;
        background: white;
        padding: 10px 12px;
        margin-bottom: 10px;
    }
    .admin-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 5px 0;
        border: none;
        text-align: right;
        word-break: break-word;
    }
    .admin-table td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 11px;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.4px;
        flex-shrink: 0;
        text-align: left;
    }
    .admin-table td[data-label=""]::before { display: none; }
    .admin-table.clickable tbody tr[data-href]:hover,
    .admin-table.clickable tbody tr[data-href]:focus { background: #eef2ff; }

    /* Pills más chicos */
    .pill { font-size: 11px; padding: 2px 8px; }
    .pill.big { font-size: 13px; padding: 4px 12px; }

    /* Form-inline en móvil: 1 columna */
    .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline label { width: 100%; }
}

@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .plan-numeros { grid-template-columns: 1fr; }
    .admin-h1 { font-size: 17px; }
}