/* ─── Reset + base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; font-family: 'Inter', system-ui, sans-serif; color: #fff; }
body { background:
    radial-gradient(circle at 12% 18%, rgba(34,197,94,.10), transparent 45%),
    radial-gradient(circle at 88% 82%, rgba(103,232,249,.08), transparent 45%),
    linear-gradient(135deg, #060f16 0%, #0d1a24 50%, #060f16 100%);
    min-height: 100vh;
}
.bg-grid { position: fixed; inset: 0; pointer-events: none; opacity: .35; z-index: 0;
    background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 48px 48px; }
code { font-family: 'Consolas', 'Courier New', monospace; }

/* ─── Login overlay ───────────────────────────────────────────────────────── */
.overlay-page { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-box { position: relative; z-index: 2; max-width: 460px; width: 100%; padding: 2rem 2rem 1.6rem;
    background: linear-gradient(155deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
    border: 1px solid rgba(255,255,255,.1); border-radius: 18px; backdrop-filter: blur(8px); }
.login-box .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem 1rem; border-radius: 999px;
    background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.28); color: #4ade80;
    font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; margin-bottom: .85rem; }
.login-box h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 900; font-size: 2rem; line-height: 1.1;
    margin: 0 0 .25rem; background: linear-gradient(180deg, #fde68a 0%, #fbbf24 60%, #b45309 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 8px rgba(251,191,36,.25)); }
.login-box .sub { font-size: .85rem; color: rgba(255,255,255,.7); margin: 0 0 1.2rem; }
.login-box label { display: block; font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: .3rem; }
.login-box input { width: 100%; padding: .65rem .85rem; border-radius: 9px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12); color: #fff; font-family: 'Consolas', monospace; font-size: .9rem; }
.login-box input:focus { outline: none; border-color: #22c55e; background: rgba(34,197,94,.06); }
.login-box .btn-primary { width: 100%; margin-top: 1.1rem; padding: .75rem; font-size: .92rem; }

/* ─── App layout ──────────────────────────────────────────────────────────── */
#app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
header.top { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(15,23,42,.7); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
header .brand { display: flex; align-items: center; gap: .85rem; }
header .brand > i { font-size: 1.85rem; color: #fbbf24; }
header .brand strong { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; display: block; }
header .brand small { font-size: .72rem; color: rgba(255,255,255,.55); display: block; }
.top-actions { display: flex; gap: .5rem; }

main { flex: 1; padding: 1.25rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.1rem; max-width: 1400px; margin: 0 auto; width: 100%; }

footer.foot { padding: .85rem 1.5rem; border-top: 1px solid rgba(255,255,255,.06);
    background: rgba(0,0,0,.2); display: flex; justify-content: space-between; font-size: .72rem; color: rgba(255,255,255,.45); }

/* ─── Botones ─────────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost, .btn-danger, .btn-warn { padding: .45rem .9rem; border-radius: 8px; font-weight: 700; font-size: .82rem; cursor: pointer;
    border: none; display: inline-flex; align-items: center; gap: .35rem; font-family: 'Space Grotesk', sans-serif; transition: filter .15s, transform .15s; }
.btn-primary { background: linear-gradient(135deg, #15803d, #22c55e); color: #fff; }
.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-ghost { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.12); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-warn { background: #d97706; color: #fff; }
.btn-warn:hover { filter: brightness(1.1); }
.btn-icon { padding: .35rem .55rem; }

/* ─── KPIs ────────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .65rem; }
.kpi { background: linear-gradient(155deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: .65rem .85rem; }
.kpi .l { font-size: .68rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.kpi .v { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 900; margin-top: .15rem; }

/* ─── Tarjetas de tier ─────────────────────────────────────────────────────── */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .75rem; }
.tier-card { background: linear-gradient(155deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
    border: 2px solid rgba(255,255,255,.08); border-radius: 14px; padding: .9rem 1rem; text-align: center; cursor: pointer; transition: transform .15s, border-color .15s; }
.tier-card:hover { transform: translateY(-2px); }
.tier-card.uniempresarial { border-color: rgba(2,132,199,.4); }
.tier-card.basico { border-color: rgba(34,197,94,.4); }
.tier-card.pymes { border-color: rgba(103,232,249,.4); }
.tier-card.pro { border-color: rgba(196,181,253,.4); }
.tier-card.promax { border-color: rgba(251,191,36,.4); }
.tier-card .name { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 800; }
.tier-card .limit { font-size: 1.8rem; font-weight: 900; margin: .25rem 0 0; font-family: 'Space Grotesk', sans-serif; }
.tier-card .limit small { font-size: .7rem; color: rgba(255,255,255,.5); display: block; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; }
.tier-card .meta { font-size: .72rem; color: rgba(255,255,255,.55); margin-top: .35rem; line-height: 1.4; }
.tier-card .count { display: inline-block; margin-top: .4rem; padding: 2px 10px; border-radius: 999px; font-size: .68rem; font-weight: 700;
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.1); }

/* ─── Filtros ─────────────────────────────────────────────────────────────── */
.filters { display: flex; gap: .55rem; flex-wrap: wrap; }
.filters input, .filters select { padding: .55rem .8rem; border-radius: 8px; background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: .85rem; font-family: inherit; }
.filters input { flex: 1; min-width: 240px; }
.filters input:focus, .filters select:focus { outline: none; border-color: #22c55e; }

/* ─── Card / tabla ────────────────────────────────────────────────────────── */
.card { background: linear-gradient(155deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
    border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1rem 1.15rem; }
.card h3 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }

table { width: 100%; border-collapse: collapse; font-size: .82rem; }
thead th { text-align: left; padding: .55rem .65rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    color: rgba(255,255,255,.55); font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.1); }
tbody td { padding: .6rem .65rem; border-bottom: 1px solid rgba(255,255,255,.04); vertical-align: top; }
tbody tr:hover { background: rgba(34,197,94,.04); }
tbody code { background: rgba(0,0,0,.3); padding: 1px 7px; border-radius: 4px; font-size: .76rem; color: #a5f3fc; }
.actions { display: flex; gap: .25rem; flex-wrap: nowrap; }

/* Badges */
.b { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.b-PENDIENTE { background: #fef3c7; color: #92400e; }
.b-ACTIVA    { background: #dcfce7; color: #166534; }
.b-SUSPENDIDA { background: #fee2e2; color: #991b1b; }
.b-EXPIRADA   { background: #fef3c7; color: #92400e; }
.b-REVOCADA   { background: #1f2937; color: #fca5a5; }
.b-BASICO   { background: rgba(34,197,94,.2); color: #86efac; }
.b-UNIEMPRESARIAL        { background: rgba(2,132,199,.2);   color: #7dd3fc; }
.b-PYMES, .b-PROFESIONAL { background: rgba(103,232,249,.2); color: #a5f3fc; }
.b-PRO, .b-EMPRESARIAL   { background: rgba(196,181,253,.2); color: #ddd6fe; }
.b-PROMAX, .b-CORPORATIVO{ background: rgba(251,191,36,.2);  color: #fde68a; }
.muted { color: rgba(255,255,255,.5); font-size: .72rem; }

/* ─── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: linear-gradient(160deg, #0f172a 0%, #1e293b 100%); border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
    max-width: 580px; width: 100%; max-height: 90vh; overflow: auto; }
.detail-box { max-width: 720px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.modal-head h3 { margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: 1.05rem; font-weight: 700; }
.modal-body { padding: 1.1rem 1.25rem; }
.modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .85rem 1.25rem; border-top: 1px solid rgba(255,255,255,.08); }
.hint { font-size: .82rem; color: rgba(255,255,255,.65); margin: 0 0 1rem; line-height: 1.5; }
.modal-body label { display: block; font-size: .76rem; color: rgba(255,255,255,.75); font-weight: 600; margin-bottom: .85rem; }
.modal-body label .req { color: #fca5a5; }
.modal-body input, .modal-body select, .modal-body textarea { width: 100%; margin-top: .25rem; padding: .55rem .75rem;
    border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); color: #fff; font-family: inherit; font-size: .88rem; }
.modal-body input:focus, .modal-body select:focus, .modal-body textarea:focus { outline: none; border-color: #22c55e; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
@media (max-width: 540px) { .grid-2 { grid-template-columns: 1fr; } }

/* Clave generada */
.key-display { background: rgba(0,0,0,.45); border: 2px solid #22c55e; border-radius: 12px; padding: 1.2rem 1rem;
    text-align: center; font-family: 'Consolas', monospace; font-size: 1.5rem; letter-spacing: .07em; color: #86efac; font-weight: 800;
    box-shadow: 0 0 32px rgba(34,197,94,.2); margin-bottom: .85rem; }
.key-meta { text-align: center; font-size: .85rem; color: rgba(255,255,255,.65); }
.key-meta b { color: #fff; }

/* Alertas */
.alert { padding: .7rem .9rem; border-radius: 9px; font-size: .82rem; line-height: 1.4; margin-top: .8rem; }
.alert.error { background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
.alert.ok { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
.alert.warn { background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: #fde68a; }

/* Eventos */
.event { display: flex; align-items: center; gap: .65rem; padding: .55rem .65rem; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .82rem; }
.event:last-child { border: none; }
.event .ev-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ev-icon.ok { background: rgba(34,197,94,.15); color: #86efac; }
.ev-icon.warn { background: rgba(251,191,36,.15); color: #fde68a; }
.ev-icon.err { background: rgba(239,68,68,.15); color: #fca5a5; }
.ev-icon.info { background: rgba(103,232,249,.15); color: #a5f3fc; }
.event small { color: rgba(255,255,255,.5); font-size: .7rem; }

/* Detail rows */
.dt-row { display: grid; grid-template-columns: 140px 1fr; gap: .4rem; padding: .35rem 0; border-bottom: 1px dashed rgba(255,255,255,.06); font-size: .85rem; }
.dt-row .k { color: rgba(255,255,255,.55); font-weight: 600; font-size: .78rem; }
.dt-row .v { color: #fff; word-break: break-all; }

/* Empty */
.empty { text-align: center; padding: 2rem 1rem; color: rgba(255,255,255,.5); font-size: .9rem; }
.empty i { display: block; font-size: 2.5rem; margin-bottom: .5rem; color: rgba(34,197,94,.4); }

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — adaptación para tablet (≤980px) y móvil (≤640px)
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tablet (≤ 980px) ──────────────────────────────────────────────── */
@media (max-width: 980px) {
    header.top { padding: .75rem 1rem; flex-wrap: wrap; gap: .65rem; }
    header .brand strong { font-size: 1rem; }
    header .brand small { font-size: .68rem; }
    .top-actions { flex-wrap: wrap; gap: .35rem; width: 100%; justify-content: flex-end; }
    .top-actions .btn-ghost, .top-actions .btn-primary { font-size: .76rem; padding: .4rem .75rem; }
    main { padding: .85rem 1rem 1.5rem; gap: .85rem; }

    /* Pestañas admin */
    .adm-tabs { padding: .5rem .65rem 0 !important; gap: .25rem !important; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .adm-tab { padding: .55rem .8rem !important; font-size: .8rem !important; white-space: nowrap; }
    .adm-tab i { font-size: .9rem !important; }

    /* KPIs y tiers */
    .kpis { grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
    .kpi .v { font-size: 1.3rem; }
    .tiers { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .tier-card { padding: .75rem .85rem; }
    .tier-card .limit { font-size: 1.5rem; }

    /* Filtros: stack en columna */
    .filters { gap: .4rem !important; flex-direction: row; flex-wrap: wrap; }
    .filters input, .filters select { flex: 1 1 140px; min-width: 0; font-size: .82rem; padding: .5rem .7rem; }

    /* Tablas con scroll horizontal */
    .card > div[style*="overflow:auto"], #tableHost, #intHost, #solHost {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table { font-size: .78rem; min-width: 720px; }
    table.dt { min-width: 700px; }
    table th, table td { padding: .5rem .55rem; }

    /* Modal de detalle */
    .modal-box { max-width: 95vw; padding: 1.2rem; }
    .modal-head h3 { font-size: 1rem; }
    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
    .dt-row { grid-template-columns: 110px 1fr; font-size: .78rem; }
}

/* ─── Móvil (≤ 640px) ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    header.top { padding: .6rem .8rem; }
    header .brand > i { font-size: 1.45rem; }
    header .brand strong { font-size: .92rem; }
    header .brand small { font-size: .64rem; }
    .top-actions { gap: .25rem; }
    .top-actions .btn-ghost, .top-actions .btn-primary { font-size: .72rem; padding: .35rem .6rem; }
    .top-actions .btn-ghost i, .top-actions .btn-primary i { font-size: .85rem; }
    /* Texto del botón emitir/actualizar — ocultar en pantallas muy pequeñas */
    @media (max-width: 480px) {
        .top-actions .btn-ghost span, .top-actions .btn-primary span { display: none; }
    }

    main { padding: .7rem .65rem 1rem; gap: .7rem; }

    /* Pestañas más compactas, scroll horizontal forzado */
    .adm-tabs { padding: .4rem .5rem 0 !important; }
    .adm-tab { padding: .5rem .7rem !important; font-size: .76rem !important; }
    .adm-tab i { font-size: .88rem !important; margin-right: 2px; }
    .badge-count { font-size: .62rem !important; padding: 1px 6px !important; }

    /* KPIs en 2 columnas */
    .kpis { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .kpi { padding: .55rem .65rem; }
    .kpi .l { font-size: .62rem; }
    .kpi .v { font-size: 1.15rem; }

    /* Tiers cards también en 2 columnas */
    .tiers { grid-template-columns: repeat(2, 1fr); gap: .45rem; }
    .tier-card { padding: .6rem .55rem; }
    .tier-card .name { font-size: .92rem; }
    .tier-card .limit { font-size: 1.3rem; }
    .tier-card .limit small { font-size: .6rem; }
    .tier-card .meta { font-size: .65rem; }
    .tier-card .count { font-size: .62rem; padding: 1px 7px; }

    /* Filtros en columna 100% */
    .filters { flex-direction: column; align-items: stretch; }
    .filters input, .filters select { width: 100%; flex: 1 1 auto; font-size: .85rem; padding: .55rem .75rem; }

    /* Cards de configuración: secciones de limpieza apilan */
    .card > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Tablas — scroll horizontal */
    .card h3 { font-size: .95rem; }
    table { font-size: .73rem; min-width: 640px; }
    table th, table td { padding: .42rem .5rem; }

    /* Footer */
    footer.foot { flex-direction: column; gap: .35rem; text-align: center; padding: .7rem 1rem; }

    /* Login en móvil */
    .login-box { padding: 1.5rem 1.2rem 1.2rem; max-width: 100%; margin: 1rem; }
    .login-box h1 { font-size: 1.65rem; }
    .login-box .sub { font-size: .8rem; }

    /* Modal: pantalla completa en móvil */
    .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
    .modal-box { max-width: 100vw !important; border-radius: 18px 18px 0 0 !important; max-height: 92vh; overflow-y: auto; }
    .modal-head { padding: .9rem 1rem !important; position: sticky; top: 0; background: var(--surface, #fff); z-index: 5; }
    .modal-body { padding: 1rem !important; }
    .modal-foot { padding: .85rem 1rem !important; }
    .grid-2 { grid-template-columns: 1fr !important; }

    /* Acciones de licencia en tabla — apilan */
    .actions { display: flex; flex-wrap: wrap; gap: .2rem; }
    .actions .btn-icon { padding: .3rem .45rem; font-size: .75rem; }

    /* Mensaje de scroll para tablas */
    #tableHost::before, #intHost::before, #solHost::before {
        content: '⇄ Desliza horizontalmente para ver más columnas';
        display: block;
        font-size: .7rem;
        color: rgba(255,255,255,.5);
        text-align: center;
        padding: .35rem;
        font-style: italic;
        border-bottom: 1px dashed rgba(255,255,255,.08);
        margin-bottom: .3rem;
    }
}

/* ─── Ajustes ultra-pequeños (≤ 380px) ─────────────────────────────── */
@media (max-width: 380px) {
    .kpis { grid-template-columns: 1fr; }
    .tiers { grid-template-columns: 1fr; }
    .adm-tab { padding: .45rem .6rem !important; font-size: .72rem !important; }
    .adm-tab i { font-size: .85rem !important; }
}

/* ─── PWA y dispositivos táctiles ───────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Botones más grandes para dedos */
    .btn-ghost, .btn-primary, .btn-danger, .btn-warn { min-height: 38px; }
    .btn-icon { min-height: 34px; min-width: 34px; }
    .adm-tab { min-height: 42px; }
}