/*
 * Consola de tenants con el tema de la v2 (estructura de Sneat; colores, fuente y logo de 2ISAC, 2isac.com):
 * menú lateral blanco, fondo gris verdoso, tarjetas con sombra suave y tablas con filas separadas.
 * Hoja propia, sin dependencias externas ni estilos en línea (CSP default-src 'self'). Fuente Manrope (OFL) en
 * /fonts. Todos los pares texto/fondo cumplen WCAG AA (≥ 4.5:1).
 */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-display: swap;
    font-weight: 200 800;
    src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
}

:root {
    --fondo: #f4f8f5;
    --superficie: #ffffff;
    --texto: #35463e;
    --texto-fuerte: #10201a;
    --texto-suave: #5f6e66;
    --borde: #dbe5de;
    --tenue: #f7faf8;
    --primario: #07824f;          /* verde de la marca, 4.9:1 con blanco */
    --primario-hover: #066a40;
    --primario-tenue: #ddf2e7;
    --primario-texto-tenue: #075c3a;
    --primario-texto: #ffffff;
    --naranja: #ee8b35;
    --aviso: #a84f1b;
    --aviso-fondo: #fff0df;
    --peligro: #ae453a;
    --peligro-solido: #c13f2f;
    --peligro-fondo: #fce6e3;
    --ok: #3d6b0e;
    --ok-fondo: #eaf5dc;
    --info: #006b82;
    --info-fondo: #d7f5fc;
    --radio: 8px;
    --radio-chico: 6px;
    --sombra: 0 .125rem .375rem rgba(16, 32, 26, .08);
    --sombra-alta: 0 .25rem 1rem rgba(16, 32, 26, .12);
    --menu-ancho: 16.5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--fondo);
}

a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--primario-hover); text-decoration: underline; }
code { font-size: .9em; background: var(--tenue); border: 1px solid var(--borde); padding: 0 5px; border-radius: 4px; }
h1 { font-size: 1.5rem; font-weight: 700; color: var(--texto-fuerte); margin: 0 0 1.25rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 700; color: var(--texto-fuerte); margin: 2rem 0 .75rem; }
h3 { font-size: 1rem; font-weight: 700; color: var(--texto-fuerte); margin: 1rem 0 .5rem; }

.saltar { position: absolute; left: -999px; top: 0; padding: .5rem 1rem; background: var(--superficie); z-index: 10; }
.saltar:focus { left: 0; }

/* ---------- Marco con sesión: menú lateral + barra + contenido ---------- */
.marco { display: flex; min-height: 100vh; }

.menu {
    position: sticky; top: 0; align-self: flex-start;
    display: flex; flex-direction: column;
    width: var(--menu-ancho); flex: 0 0 var(--menu-ancho); height: 100vh;
    background: var(--superficie); box-shadow: var(--sombra);
    padding: 1.25rem 1rem 0;
}
.menu-logo { display: block; padding: .25rem .875rem 1rem; }
.menu-logo img { height: 2rem; width: auto; display: block; }
.menu-titulo {
    margin: .5rem .875rem .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .05rem; word-spacing: .2em;
    text-transform: uppercase; color: var(--texto-suave);
}
.menu nav { display: flex; flex-direction: column; gap: .125rem; flex: 1; }
.menu nav a {
    display: flex; align-items: center; gap: .75rem;
    min-height: 2.75rem; padding: .625rem .875rem; border-radius: var(--radio-chico);
    color: var(--texto); font-weight: 500; text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.menu nav a:hover { background: rgba(7, 130, 79, .06); color: var(--texto-fuerte); }
.menu nav a[aria-current="page"] {
    background: var(--primario-tenue); color: var(--primario-texto-tenue); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--primario);
}
.menu-pie {
    display: flex; align-items: center; gap: .5rem; margin: 1rem -1rem 0; padding: .75rem 1.25rem;
    border-top: 1px solid var(--borde); font-size: .75rem; color: var(--texto-suave); text-decoration: none;
}
.menu-pie:hover { background: rgba(7, 130, 79, .06); color: var(--texto-fuerte); text-decoration: none; }
.menu-pie img { height: 1.125rem; width: auto; }

.principal { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.barra {
    position: sticky; top: .75rem; z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 4rem; margin: .75rem 1.5rem 0; padding: 0 1.25rem;
    background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
}
.barra-titulo { font-weight: 700; color: var(--texto-fuerte); }
.sesion { display: flex; align-items: center; gap: .75rem; color: var(--texto-suave); font-size: .9rem; }
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: 50%;
    background: var(--primario-tenue); color: var(--primario-texto-tenue); font-weight: 700;
}
.boton-salir {
    padding: .4rem .85rem; border: 1px solid var(--borde); border-radius: var(--radio-chico);
    color: var(--texto); font-weight: 600; text-decoration: none;
}
.boton-salir:hover { background: var(--tenue); text-decoration: none; color: var(--texto-fuerte); }

.contenido { flex: 1 0 auto; padding: 1.5rem; width: 100%; max-width: 1440px; }
.pie {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem;
    padding: 1rem 1.5rem 1.5rem; font-size: .8125rem; color: var(--texto-suave);
}

/* ---------- Sin sesión (login y segundo factor): acceso oscuro, distinto del de las cuentas ----------
 * Negro con una retícula sutil y un brillo verde de la marca; tarjeta negra al centro, logo en blanco, campos oscuros y
 * botón blanco con texto negro. Contrastes: texto #f5f5f5 / #a3a3a3 sobre #0d0d0d (≥ 7:1). */
body.sin-sesion {
    background-color: #050505;
    background-image:
        radial-gradient(ellipse 60% 45% at 50% -5%, rgba(7, 130, 79, .35), transparent 70%),
        radial-gradient(ellipse 40% 30% at 100% 100%, rgba(238, 139, 53, .12), transparent 70%),
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, auto, 40px 40px, 40px 40px;
    color: #e5e5e5;
}
.sin-sesion .saltar { background: #111; color: #fff; }
.acceso-marco { min-height: 100vh; display: flex; }
.acceso-panel {
    flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem;
    padding: 2rem 1.25rem;
}
.acceso-formulario {
    width: 100%; max-width: 25rem; padding: 2.25rem 2rem 2rem;
    background: rgba(13, 13, 13, .92); border: 1px solid #262626; border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .02), 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.acceso-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }
.acceso-logo { height: 2.1rem; width: auto; display: block; }
.acceso-insignia {
    padding: .25rem .6rem; border: 1px solid #2f2f2f; border-radius: 999px; background: #000;
    color: #f5f5f5; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.acceso-etiqueta {
    margin: 0 0 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #1f1f1f;
    color: #a3a3a3; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.acceso-pie { margin: 0; max-width: 25rem; text-align: center; font-size: .78rem; color: #8a8a8a; }

.sin-sesion .tarjeta.acceso { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.sin-sesion .acceso h1 { font-size: 1.6rem; font-weight: 800; color: #fafafa; margin-bottom: .35rem; letter-spacing: -.02em; }
.sin-sesion .acceso p { color: #a3a3a3; }
.sin-sesion .acceso form { display: flex; flex-direction: column; gap: .45rem; margin-top: 1.25rem; }
.sin-sesion label { color: #d4d4d4; font-weight: 600; }
.sin-sesion input[type=email], .sin-sesion input[type=password], .sin-sesion input[type=text] {
    padding: .8rem .95rem; font-size: 1rem; color: #fafafa; background: #000; border: 1px solid #2e2e2e; border-radius: 8px;
    font-variant-numeric: tabular-nums;
}
.sin-sesion input::placeholder { color: #6b6b6b; }
.sin-sesion input:focus { border-color: #07824f; box-shadow: 0 0 0 .2rem rgba(7, 130, 79, .35); }
.sin-sesion #_auth_code { font-size: 1.5rem; letter-spacing: .5em; text-align: center; }
.sin-sesion .acceso button[type=submit] {
    margin-top: 1.25rem; padding: .85rem 1rem; font-size: 1rem; font-weight: 700;
    background: #fafafa; color: #0a0a0a; border: 1px solid #fafafa; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}
.sin-sesion .acceso button[type=submit]:hover { background: #07824f; border-color: #07824f; color: #fff; }
.sin-sesion .acceso a { color: #6fd3a3; }
.sin-sesion .alerta { background: rgba(193, 63, 47, .15); color: #ffb4a8; border-left-color: #c13f2f; }
.sin-sesion .exito { background: rgba(7, 130, 79, .15); color: #8fe0b8; border-left-color: #07824f; }
.sin-sesion .nota { color: #a3a3a3; }

/* ---------- Componentes ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1.5rem; }
section.tarjeta { margin: 1.5rem 0; }
section.tarjeta h2 { margin-top: 0; position: relative; padding-left: .75rem; }
section.tarjeta h2::before {
    content: ""; position: absolute; left: -1.5rem; top: .15rem; width: 3px; height: 1.2rem;
    border-radius: 0 3px 3px 0; background: var(--primario);
}
.acceso { max-width: 380px; margin: 4rem auto; }
.acceso form { display: flex; flex-direction: column; gap: .5rem; }

label { font-size: .875rem; font-weight: 600; color: var(--texto); }
input[type=email], input[type=password], input[type=text], input[type=search], input[type=number],
input[type=date], input[type=month], select, textarea {
    padding: .55rem .75rem; border: 1px solid var(--borde); border-radius: var(--radio-chico);
    font: inherit; color: var(--texto-fuerte); background: var(--superficie);
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { width: 100%; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: #6fc39d; box-shadow: 0 0 0 .2rem rgba(7, 130, 79, .18);
}
button:focus-visible, a:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
input[type=checkbox] { accent-color: var(--primario); width: 1rem; height: 1rem; }

button {
    padding: .6rem 1.1rem; border: 1px solid var(--primario); border-radius: var(--radio-chico);
    background: var(--primario); color: var(--primario-texto);
    font: inherit; font-weight: 600; cursor: pointer; margin-top: .5rem;
    box-shadow: 0 .125rem .25rem rgba(7, 130, 79, .35);
    transition: background-color .15s ease, transform .15s ease;
}
button:hover { background: var(--primario-hover); border-color: var(--primario-hover); }
button.secundario { background: var(--superficie); color: var(--primario); border-color: var(--primario); box-shadow: none; }
button.secundario:hover { background: var(--primario-tenue); }
button.peligro { background: var(--peligro-solido); border-color: var(--peligro-solido); box-shadow: none; }
button.peligro:hover { background: #a3331f; }
button.enlace { background: none; border: 0; box-shadow: none; color: var(--peligro); padding: 0; margin: 0; font-weight: 500; text-decoration: underline; }
button:disabled { opacity: .5; cursor: not-allowed; }

.alerta, .exito {
    padding: .75rem 1rem; border-radius: var(--radio-chico); margin: 0 0 1rem; font-weight: 500;
    border-left: 4px solid currentColor;
}
.alerta { background: var(--peligro-fondo); color: var(--peligro); }
.exito { background: var(--ok-fondo); color: var(--ok); }
.nota { color: var(--texto-suave); font-size: .9rem; }
.migas { color: var(--texto-suave); font-size: .875rem; margin: 0 0 .5rem; }
.texto-aviso { color: var(--aviso); font-weight: 600; }

/* Indicadores (tarjetas de resumen) */
.indicadores { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.indicador {
    position: relative; overflow: hidden;
    background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra);
    padding: 1.1rem 1.25rem 1.1rem 1.5rem; display: flex; flex-direction: column; gap: .15rem;
}
.indicador::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primario); }
.indicador .valor { font-size: 1.75rem; font-weight: 800; color: var(--texto-fuerte); line-height: 1.2; }
.indicador .etiqueta { color: var(--texto-suave); font-size: .85rem; font-weight: 500; }
.indicador.aviso { background: var(--aviso-fondo); }
.indicador.aviso::before { background: var(--naranja); }
.indicador.aviso .valor { color: var(--aviso); }

/* Filtros */
.filtros {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1rem;
    background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 1rem 1.25rem;
}
.filtros input[type=search] { min-width: 260px; }
.filtros button { margin-top: 0; }
.casilla { display: flex; align-items: center; gap: .4rem; color: var(--texto); font-weight: 500; }

/* Tablas */
.tabla-contenedor { overflow-x: auto; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
th {
    font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05rem;
    color: var(--texto-fuerte); background: var(--tenue); white-space: nowrap;
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background: rgba(7, 130, 79, .05); }
tbody tr:last-child td { border-bottom: 0; }
td a { font-weight: 600; }
td small { color: var(--texto-suave); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { text-align: center; color: var(--texto-suave); padding: 2.5rem 1rem; }

/* Etiquetas de estado */
.estado {
    display: inline-block; font-size: .8rem; font-weight: 600; padding: .2rem .6rem; border-radius: var(--radio-chico);
    background: #edf1ee; color: var(--texto); white-space: nowrap;
}
.estado-active { background: var(--ok-fondo); color: var(--ok); }
.estado-suspended { background: var(--aviso-fondo); color: var(--aviso); }
.estado-disabled { background: var(--peligro-fondo); color: var(--peligro); }
.trabajo-pendiente, .trabajo-procesando { background: var(--aviso-fondo); color: var(--aviso); }
.trabajo-hecho { background: var(--ok-fondo); color: var(--ok); }
.trabajo-error { background: var(--peligro-fondo); color: var(--peligro); }

/* <meter> nativo (sin estilos en línea): verde y, sobre «high», naranja. */
.barra-uso { width: 120px; height: 8px; margin: 4px 0; }
meter { accent-color: var(--primario); }

.lista { margin: 0; padding-left: 1.25rem; }

/* Formularios y secciones de la ficha */
.indice {
    display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; font-size: .9rem;
}
.indice a {
    padding: .35rem .8rem; border-radius: 999px; background: var(--superficie); box-shadow: var(--sombra);
    color: var(--texto); font-weight: 600;
}
.indice a:hover { background: var(--primario-tenue); color: var(--primario-texto-tenue); text-decoration: none; }
.en-linea { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .75rem 0; }
.en-linea button { margin-top: 0; }
.rejilla { display: flex; flex-direction: column; gap: .5rem; }
.rejilla label { display: flex; flex-direction: column; gap: .25rem; }
.rejilla label.casilla { flex-direction: row; }
.rejilla button { align-self: flex-start; }
.formulario-corto { max-width: 520px; }
.formulario-corto form { display: flex; flex-direction: column; gap: .5rem; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin: 1rem 0; }
form.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); align-items: end; gap: .75rem; margin-bottom: .75rem; }
.modulos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 1.5rem; }
.modulos li { display: flex; align-items: center; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--borde); }
.modulos li > span:first-child { flex: 1; font-weight: 500; }
.modulos form button { margin: 0; padding: .3rem .7rem; font-size: .85rem; box-shadow: none; }
tr.cancelado td { color: var(--texto-suave); text-decoration: line-through; }
tr.cancelado td:last-child { text-decoration: none; }

/* ---------- Celular ---------- */
@media (max-width: 900px) {
    .marco { flex-direction: column; }
    .menu {
        position: static; width: 100%; flex: none; height: auto; padding: .75rem 1rem;
        flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem;
    }
    .menu-logo { padding: 0 .5rem 0 0; }
    .menu-titulo, .menu-pie { display: none; }
    .menu nav { flex-direction: row; flex-wrap: wrap; flex: 1 1 100%; }
    .menu nav a { min-height: 2.5rem; padding: .5rem .75rem; }
    .barra { margin: .75rem 1rem 0; top: 0; }
    .sesion-correo { display: none; }
    .contenido { padding: 1rem; }
    .filtros input[type=search] { min-width: 0; width: 100%; }
}