/* ==========================================================================
   VIVENTRA - Hoja de estilos
   Autocontenida: sin CDN ni fuentes externas, funciona sin conexión.
   El color de acento lo inyecta cada condominio (--acento).
   ========================================================================== */

:root {
    --acento: #4f46e5;
    --acento-2: #0ea5e9;

    --tinta: #11151c;
    --tinta-2: #3d4757;
    --tinta-3: #6b7684;

    --papel: #f5f6f8;
    --superficie: #ffffff;
    --borde: #e2e5ea;

    --ok: #0f7b4f;
    --ok-fondo: #e6f5ee;
    --alerta: #9a6700;
    --alerta-fondo: #fdf6e3;
    --error: #b3261e;
    --error-fondo: #fdecea;

    --radio: 10px;
    --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
    --sombra-alta: 0 4px 6px -1px rgba(16, 24, 40, .08), 0 12px 24px -4px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--tinta);
    background: var(--papel);
    -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0 0 .35em; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1em; }

code, .mono {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: .875em;
}

/* --- Barra superior ------------------------------------------------------ */
.barra {
    background: var(--superficie);
    border-bottom: 1px solid var(--borde);
    position: sticky;
    top: 0;
    z-index: 30;
}
.barra-int {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.marca {
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    color: var(--tinta);
    display: flex;
    align-items: center;
    gap: 9px;
}
.marca:hover { text-decoration: none; }
.marca-punto {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: linear-gradient(135deg, var(--acento), var(--acento-2));
    display: inline-block;
}
.barra-sep { flex: 1; }

.condo-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 12px 5px 6px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--papel);
    font-size: .85rem;
    color: var(--tinta-2);
}
.condo-chip:hover { text-decoration: none; border-color: var(--acento); }
.condo-inicial {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--acento);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .75rem;
    font-weight: 700;
}

/* --- Estructura ---------------------------------------------------------- */
.envoltura { max-width: 1240px; margin: 0 auto; padding: 28px 24px 60px; }
.envoltura-angosta { max-width: 860px; }

.encabezado-pag { margin-bottom: 24px; }
.encabezado-pag p { color: var(--tinta-3); margin: 0; }
.migas { font-size: .8rem; color: var(--tinta-3); margin-bottom: 6px; }

/* --- Tarjetas ------------------------------------------------------------ */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
}
.tarjeta-cuerpo { padding: 20px; }
.tarjeta-cabeza {
    padding: 15px 20px;
    border-bottom: 1px solid var(--borde);
    display: flex;
    align-items: center;
    gap: 12px;
}
.tarjeta-cabeza h2, .tarjeta-cabeza h3 { margin: 0; }

.rejilla { display: grid; gap: 16px; }
.rejilla-kpi { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.rejilla-mod { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* --- KPI ----------------------------------------------------------------- */
.kpi { padding: 18px 20px; }
.kpi-eti {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-3);
    font-weight: 650;
}
.kpi-num { font-size: 1.85rem; font-weight: 680; letter-spacing: -.025em; margin: 4px 0 0; }
.kpi-pie { font-size: .8rem; color: var(--tinta-3); }

/* --- Módulos ------------------------------------------------------------- */
.modulo {
    display: block;
    padding: 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: inherit;
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.modulo:hover {
    text-decoration: none;
    border-color: var(--acento);
    box-shadow: var(--sombra-alta);
    transform: translateY(-1px);
}
.modulo-nom { font-weight: 640; margin-bottom: 3px; }
.modulo-desc { font-size: .82rem; color: var(--tinta-3); line-height: 1.45; }
.modulo-grupo {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-3);
    font-weight: 650;
    margin: 26px 0 12px;
}

/* --- Formularios --------------------------------------------------------- */
.campo { margin-bottom: 16px; }
.campo label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--tinta-2);
}
.campo input[type=text],
.campo input[type=email],
.campo input[type=password],
.campo select,
.campo textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 8px;
    outline: none;
    transition: border-color .12s, box-shadow .12s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
    border-color: var(--acento);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
.campo-ayuda { font-size: .8rem; color: var(--tinta-3); margin-top: 5px; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--acento);
    color: #fff;
    cursor: pointer;
    transition: filter .12s;
}
.boton:hover { filter: brightness(1.08); text-decoration: none; }
.boton:disabled { opacity: .55; cursor: not-allowed; }
.boton-bloque { width: 100%; }
.boton-suave {
    background: var(--superficie);
    color: var(--tinta-2);
    border-color: var(--borde);
}
.boton-suave:hover { border-color: var(--tinta-3); filter: none; }
.boton-chico { padding: 6px 11px; font-size: .84rem; }

/* --- Avisos -------------------------------------------------------------- */
.aviso {
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid;
    margin-bottom: 18px;
    font-size: .9rem;
}
.aviso-ok    { background: var(--ok-fondo);     border-color: #b6e0cb; color: var(--ok); }
.aviso-error { background: var(--error-fondo);  border-color: #f3c2be; color: var(--error); }
.aviso-alert { background: var(--alerta-fondo); border-color: #ecd9a5; color: var(--alerta); }

/* --- Tablas -------------------------------------------------------------- */
.tabla-marco { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.tabla th, table.tabla td {
    padding: 10px 13px;
    text-align: left;
    border-bottom: 1px solid var(--borde);
}
table.tabla th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-3);
    font-weight: 650;
    background: var(--papel);
    white-space: nowrap;
}
table.tabla tbody tr:hover { background: #fafbfc; }
table.tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Matriz de permisos */
.matriz th.rot { text-align: center; width: 78px; }
.matriz td.chk { text-align: center; }
.matriz td.mod { font-weight: 600; }
.matriz input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--acento); cursor: pointer; }
.matriz tbody tr.apagado { opacity: .45; }
.matriz tbody tr.apagado td.mod::after {
    content: " no contratado";
    font-weight: 400;
    font-size: .75rem;
    color: var(--tinta-3);
}

/* --- Etiquetas ----------------------------------------------------------- */
.eti {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 640;
    background: var(--papel);
    color: var(--tinta-2);
    border: 1px solid var(--borde);
}
.eti-ok    { background: var(--ok-fondo);     color: var(--ok);     border-color: #b6e0cb; }
.eti-alert { background: var(--alerta-fondo); color: var(--alerta); border-color: #ecd9a5; }
.eti-error { background: var(--error-fondo);  color: var(--error);  border-color: #f3c2be; }
.eti-sist  { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }

/* --- Login --------------------------------------------------------------- */
.pantalla-acceso {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(900px 500px at 15% -10%, color-mix(in srgb, var(--acento) 12%, transparent), transparent),
        var(--papel);
}
.caja-acceso { width: 100%; max-width: 400px; }
.caja-acceso .marca { justify-content: center; font-size: 1.35rem; margin-bottom: 6px; }
.acceso-sub { text-align: center; color: var(--tinta-3); font-size: .9rem; margin-bottom: 22px; }

/* --- Selector de condominio ---------------------------------------------- */
.lista-condos { display: grid; gap: 12px; }
.condo-op {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 18px;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
}
.condo-op:hover { text-decoration: none; border-color: var(--acento); box-shadow: var(--sombra-alta); }
.condo-op-ini {
    width: 42px; height: 42px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 700; font-size: 1.05rem;
    color: #fff;
    flex-shrink: 0;
}
.condo-op-nom { font-weight: 640; }
.condo-op-emp { font-size: .82rem; color: var(--tinta-3); }
.condo-op-fl { margin-left: auto; color: var(--tinta-3); font-size: 1.2rem; }

/* --- Utilidades ---------------------------------------------------------- */
.fila { display: flex; align-items: center; gap: 12px; }
.fila-fin { margin-left: auto; }
.apilado { display: flex; flex-direction: column; gap: 3px; }
.tenue { color: var(--tinta-3); }
.chico { font-size: .85rem; }
.centro { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 18px; } .mt-3 { margin-top: 28px; }
.mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 18px; }

.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-3); }
.vacio-icono { font-size: 2rem; opacity: .35; margin-bottom: 8px; }

@media (max-width: 640px) {
    .barra-int { padding: 0 16px; gap: 12px; }
    .envoltura { padding: 20px 16px 44px; }
    .condo-chip span.nom { display: none; }
}

/* --- Enlaces de la barra superior ---------------------------------------- */
.barra-enlace {
    font-size: .88rem;
    font-weight: 600;
    color: var(--tinta-2);
    padding: 6px 10px;
    border-radius: 7px;
}
.barra-enlace:hover { text-decoration: none; background: var(--papel); color: var(--tinta); }

/* --- Barra de consumo ----------------------------------------------------- */
.medidor {
    height: 6px;
    background: var(--borde);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 6px;
}
.medidor span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }
.medidor.alto  span { background: var(--alerta); }
.medidor.lleno span { background: var(--error); }

/* --- Línea de actividad --------------------------------------------------- */
.actividad { list-style: none; margin: 0; padding: 0; }
.actividad li {
    display: flex;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--borde);
    font-size: .88rem;
}
.actividad li:last-child { border-bottom: 0; }
.actividad .cuando { color: var(--tinta-3); white-space: nowrap; font-size: .82rem; min-width: 108px; }