/* ==========================================================================
   FEMA ANTIVIRUS — sistema visual (base compartida con FEMA CRM)
   Mismos colores, letra, redondeos y gestos que el panel FEMA
   (fema-sistema.css): el brillo que cruza el logo, el barrido de los botones,
   el azul que ordena y el rojo que llama a hacer algo.
   Para personalizar, se tocan solo los tokens de acá arriba.
   ========================================================================== */
:root {
    /* ---- TEXTO ---- */
    --f-titulo-pagina:  34px;
    --f-lead:           18px;
    --f-titulo-seccion: 20px;
    --f-titulo-tarjeta: 15.5px;
    --f-texto:          16px;
    --f-texto-chico:    14px;
    --f-etiqueta:       11.5px;
    --f-boton:          16px;

    --peso-titulo: 700;
    --peso-medio:  700;
    --peso-normal: 500;

    /* ---- COLORES (los de FEMA) ---- */
    --c-marca:       #1e169c;   /* azul de Felipe: lo que ordena  */
    --c-marca-suave: #d9d7f0;
    --c-marca-fondo: #fbfaff;
    --c-accion:      #ff203c;   /* rojo de Maite: lo que llama a hacer algo */
    --c-accion-suave:#ffd6dc;
    --c-accion-fondo:#fff5f6;
    --c-tinta:   #0a0e27;
    --c-texto:   #5b6170;
    --c-suave:   #8a8e9c;
    --c-tenue:   #b6bac7;
    --c-linea:   #ececef;
    --c-linea-2: #e4e6ee;
    --c-fondo:   #f7f8fa;
    --c-boton:   #353535;
    --c-wa:      #128c4a;

    --c-ok:    #166534; --c-ok-fondo:    #dcfce7; --c-ok-borde:    #86efac;
    --c-aviso: #b45309; --c-aviso-fondo: #fffbeb; --c-aviso-borde: #fcd34d;
    --c-error: #b91c1c; --c-error-fondo: #fee2e2; --c-error-borde: #fca5a5;

    --degrade: linear-gradient(90deg, var(--c-marca) 0%, var(--c-accion) 100%);
    --degrade-titulo: linear-gradient(95deg, var(--c-marca) 0%, var(--c-marca) 42%, var(--c-accion) 100%);

    /* ---- MEDIDAS ---- */
    --alto-control:       48px;
    --alto-control-chico: 38px;
    --alto-control-m:     52px;
    --radio:      11px;
    --radio-caja: 14px;
    --ancho-lado: 240px;

    --sep-bloque:  22px;
    --sep-interno: 16px;
    --sep-campo:   18px;

    --sombra-caja:  0 1px 2px rgba(10,14,39,.04);
    --sombra-hover: 0 12px 26px -18px rgba(10,14,39,.55);
    --sombra-flota: 0 30px 70px -30px rgba(10,14,39,.45);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: var(--f-texto); color: var(--c-texto); background: var(--c-fondo);
    line-height: 1.5; -webkit-font-smoothing: antialiased;
}
a { color: var(--c-marca); text-decoration: none; }
a:hover { color: var(--c-accion); }
h1, h2, h3, h4 { color: var(--c-tinta); margin: 0; line-height: 1.2; }
p { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font-family: inherit; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico.es-chico { width: 16px; height: 16px; }
.oculto-movil { }

/* ---------- El brillo del logo (igual que el panel FEMA) ---------- */
.brillo { position: relative; display: inline-block; line-height: 0; }
.brillo img { display: block; width: auto; }
.brillo::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%);
    background-size: 300% 100%; background-repeat: no-repeat;
    -webkit-mask-image: url('logo-color.png'); mask-image: url('logo-color.png');
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: left center; mask-position: left center;
    animation: femaBrilloLogo 3s linear infinite;
}
.brillo.es-blanco::after { -webkit-mask-image: url('logo-blanco.png'); mask-image: url('logo-blanco.png'); }
@keyframes femaBrilloLogo { 0% { background-position: 130% 0; } 70%, 100% { background-position: -30% 0; } }
@keyframes femaSweep { 0% { left: -100%; } 100% { left: 200%; } }
@media (prefers-reduced-motion: reduce) { .brillo::after { animation: none; display: none; } }

/* ---------- Botones: tres colores y el barrido ---------- */
.fbtn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: var(--alto-control); padding: 0 20px; border-radius: var(--radio);
    border: 1.5px solid var(--c-marca); background: var(--c-marca); color: #fff;
    font-size: var(--f-boton); font-weight: var(--peso-medio);
    cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.fbtn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg);
}
.fbtn:hover::before { animation: femaSweep .9s ease-out forwards; }
.fbtn:hover { color: #fff; box-shadow: 0 12px 26px -18px rgba(30,22,156,.8); }
.fbtn.es-rojo { background: var(--c-accion); border-color: var(--c-accion); }
.fbtn.es-rojo:hover { box-shadow: 0 12px 26px -16px rgba(255,32,60,.75); }
.fbtn.es-sec, .fbtn.es-neutro { background: #fff; color: var(--c-boton); border-color: var(--c-linea-2); }
.fbtn.es-sec::before, .fbtn.es-neutro::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent); }
.fbtn.es-sec:hover, .fbtn.es-neutro:hover { background: var(--c-tinta); border-color: var(--c-tinta); color: #fff; box-shadow: var(--sombra-hover); }
.fbtn.es-peligro { background: #fff; color: var(--c-accion); border-color: #f3c6c6; }
.fbtn.es-peligro:hover { background: var(--c-accion); color: #fff; border-color: var(--c-accion); }
.fbtn.es-wa { background: var(--c-wa); border-color: var(--c-wa); }
.fbtn.es-wa:hover { box-shadow: 0 12px 26px -16px rgba(18,140,74,.8); }
.fbtn.es-chico { min-height: var(--alto-control-chico); padding: 0 14px; font-size: var(--f-texto-chico); }
.fbtn.es-ancho { width: 100%; }
.fbtn[disabled], .fbtn.es-off { opacity: .45; cursor: not-allowed; box-shadow: none; }

.icobtn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: var(--c-suave); display: inline-grid; place-items: center; cursor: pointer; transition: all .15s; flex: none; }
.icobtn:hover { background: var(--c-fondo); color: var(--c-tinta); border-color: var(--c-linea); }
.icobtn.es-wa { color: #fff; background: var(--c-wa); }
.icobtn.es-wa:hover { filter: brightness(1.1); }
.icobtn.es-borde { border-color: var(--c-linea-2); background: #fff; color: var(--c-tinta); width: var(--alto-control); height: var(--alto-control); border-radius: var(--radio); }
.icobtn.es-borde:hover { background: var(--c-tinta); color: #fff; border-color: var(--c-tinta); }

/* ---------- Estructura: menú lateral ---------- */
.app { display: flex; min-height: 100vh; }
.lado {
    position: sticky; top: 0; height: 100vh; flex: 0 0 var(--ancho-lado); width: var(--ancho-lado);
    background: #fff; color: var(--c-tinta); display: flex; flex-direction: column;
    padding: 26px 16px 18px; overflow: hidden; z-index: 30; border-right: 1px solid var(--c-linea);
}
.lado::before, .lado::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.lado::before { width: 260px; height: 260px; background: var(--c-marca); filter: blur(90px); opacity: .10; left: -140px; top: -140px; }
.lado::after { width: 240px; height: 240px; background: var(--c-accion); filter: blur(90px); opacity: .10; right: -150px; bottom: -130px; }
.lado > * { position: relative; z-index: 1; }
.lado-logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 28px; }
.lado-logo span:last-child { font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--c-accion); border-left: 1.5px solid var(--c-linea-2); padding-left: 10px; }
.lado-items { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.lado-item, .lado-personalizar, .lado-salir {
    display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
    font-size: 16px; font-weight: 600; color: var(--c-texto); background: transparent; border: 0; cursor: pointer; text-align: left; width: 100%;
    transition: background .18s, color .18s; position: relative;
}
.lado-item:hover, .lado-personalizar:hover { background: var(--c-marca-fondo); color: var(--c-marca); }
.lado-item:hover .ico { color: var(--c-marca); }
.lado-item.activo { background: var(--c-accion-fondo); color: var(--c-accion); }
.lado-item.activo::before { content: ''; position: absolute; left: -16px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-accion); }
.lado-item.activo .ico { color: var(--c-accion); }
.lado-item .ico { color: var(--c-marca); transition: color .18s; }
.lado-item span { flex: 1; }
.lado-cuenta { font-size: 12px; font-weight: 800; background: var(--c-accion); color: #fff; border-radius: 999px; padding: 2px 8px; }
.lado-pie { display: flex; flex-direction: column; gap: 6px; }
.lado-personalizar { border: 1.5px solid var(--c-linea-2); color: var(--c-tinta); margin-bottom: 6px; }
.lado-personalizar .ico { color: var(--c-accion); }
.lado-usuario { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; color: var(--c-tinta); }
.lado-usuario:hover, .lado-usuario.activo { background: var(--c-fondo); color: var(--c-tinta); }
.lado-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--degrade); display: grid; place-items: center; font-weight: 700; flex: none; color: #fff; }
.lado-usuario-txt { min-width: 0; line-height: 1.25; }
.lado-usuario-txt b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lado-usuario-txt small { font-size: 12px; color: var(--c-suave); }
.lado-salir { font-size: 14px; padding: 9px 12px; color: var(--c-suave); }
.lado-salir:hover { background: var(--c-accion-fondo); color: var(--c-accion); }
.lado-salir .ico { width: 17px; height: 17px; }
.app-cuerpo { flex: 1; min-width: 0; }

/* ---------- Contenido ---------- */
.av-main { padding: 30px 34px 60px; display: flex; flex-direction: column; gap: var(--sep-bloque); max-width: 1600px; }
.av-cab { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-titulo-pag { font-size: var(--f-titulo-pagina); font-weight: var(--peso-titulo); letter-spacing: -.02em; background: var(--degrade-titulo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.av-bajada { font-size: var(--f-lead); color: var(--c-suave); margin-top: 4px; }
.av-cab-acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.av-seccion-titulo { font-size: var(--f-titulo-seccion); font-weight: var(--peso-medio); color: var(--c-tinta); display: flex; align-items: center; gap: 10px; }
.av-seccion-titulo .ico { color: var(--c-marca); }
.av-ayuda { font-size: var(--f-texto-chico); color: var(--c-suave); }
.av-rotulo { font-size: var(--f-etiqueta); font-weight: 800; color: var(--c-suave); text-transform: uppercase; letter-spacing: .1em; }

/* ---------- Tarjetas, chips, avisos ---------- */
.fcard { background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-caja); box-shadow: var(--sombra-caja); padding: 22px 24px; }
.fcard-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--sep-interno); flex-wrap: wrap; }
.fchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--c-fondo); color: var(--c-texto); border: 1px solid var(--c-linea); line-height: 1.4; max-width: 100%; }
.fchip .ico { width: 13px; height: 13px; }
.fchip.es-azul  { background: var(--c-marca-fondo); color: var(--c-marca); border-color: var(--c-marca-suave); }
.fchip.es-rojo  { background: var(--c-error-fondo); color: var(--c-error); border-color: var(--c-error-borde); }
.fchip.es-aviso { background: var(--c-aviso-fondo); color: var(--c-aviso); border-color: var(--c-aviso-borde); }
.fchip.es-ok    { background: var(--c-ok-fondo); color: var(--c-ok); border-color: var(--c-ok-borde); }
.fchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.falert { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--radio); border: 1px solid; font-weight: var(--peso-normal); }
.falert .ico { margin-top: 1px; }
.falert.es-ok    { background: var(--c-ok-fondo); color: var(--c-ok); border-color: var(--c-ok-borde); }
.falert.es-aviso { background: var(--c-aviso-fondo); color: var(--c-aviso); border-color: var(--c-aviso-borde); }
.falert.es-error { background: var(--c-error-fondo); color: var(--c-error); border-color: var(--c-error-borde); }
.falert.es-info  { background: var(--c-marca-fondo); color: var(--c-marca); border-color: var(--c-marca-suave); }

/* ---------- Campos ---------- */
.fcampo { margin-bottom: var(--sep-campo); }
.fcampo > label, .fcampo-rotulo { display: block; font-weight: var(--peso-medio); color: var(--c-tinta); margin-bottom: 7px; }
.fcampo .av-ayuda { margin-top: 6px; }
.finput, .fcampo input:not([type=checkbox]):not([type=radio]):not([type=file]), .fcampo select, .fcampo textarea {
    width: 100%; min-height: var(--alto-control); padding: 0 14px;
    border: 1.5px solid var(--c-linea-2); border-radius: var(--radio);
    background: #fff; color: var(--c-tinta); font-size: var(--f-texto);
    transition: border-color .15s, box-shadow .15s;
}
.fcampo textarea, textarea.finput { min-height: 100px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.finput:focus, .fcampo input:focus, .fcampo select:focus, .fcampo textarea:focus { outline: none; border-color: var(--c-marca); box-shadow: 0 0 0 3px rgba(30,22,156,.12); }
::placeholder { color: var(--c-tenue); }
.fgrilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.fgrilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }

/* ---------- Pestañas y filtros ---------- */
.fpestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--c-linea); overflow-x: auto; scrollbar-width: none; }
.fpestanas::-webkit-scrollbar { display: none; }
.fpestanas a, .fpestanas button {
    display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 48px;
    background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px;
    font-size: var(--f-texto); font-weight: 700; color: var(--c-texto); cursor: pointer; white-space: nowrap;
}
.fpestanas a:hover, .fpestanas button:hover { color: var(--c-tinta); }
.fpestanas .activo { color: var(--c-accion); border-bottom-color: var(--c-accion); }
.ffiltros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ffiltro { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--c-linea-2); background: #fff; color: var(--c-texto); font-size: var(--f-texto-chico); font-weight: 700; cursor: pointer; transition: all .15s; }
.ffiltro:hover { border-color: var(--c-tinta); color: var(--c-tinta); }
.ffiltro.activo { background: var(--c-accion); border-color: var(--c-accion); color: #fff; }
select.ffiltro, select.fselect { padding-right: 32px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6170' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; }
select.fselect { height: var(--alto-control); border: 1.5px solid var(--c-linea-2); border-radius: var(--radio); padding-left: 14px; font-size: var(--f-texto-chico); font-weight: 700; color: var(--c-tinta); cursor: pointer; }

/* ---------- Números ---------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kpi { background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-caja); padding: 16px 18px; display: flex; gap: 14px; align-items: center; box-shadow: var(--sombra-caja); }
.kpi-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--c-marca-fondo); color: var(--c-marca); }
.kpi-ico.es-rojo { background: var(--c-accion-fondo); color: var(--c-accion); }
.kpi-ico.es-ok { background: var(--c-ok-fondo); color: var(--c-ok); }
.kpi-ico.es-aviso { background: var(--c-aviso-fondo); color: var(--c-aviso); }
.kpi-num { font-size: 24px; font-weight: 800; color: var(--c-tinta); line-height: 1.1; letter-spacing: -.01em; }
.kpi-txt { font-size: var(--f-texto-chico); color: var(--c-suave); margin-top: 2px; }

/* ---------- Buscador y menú "Más" ---------- */
.fbuscar { position: relative; }
.fbuscar > .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--c-suave); pointer-events: none; }
.fbuscar input { width: 100%; height: var(--alto-control); border: 1.5px solid var(--c-linea-2); border-radius: 12px; padding: 0 14px 0 44px; font-size: var(--f-texto); background: #fff; color: var(--c-tinta); }
.fbuscar input:focus { outline: none; border-color: var(--c-marca); box-shadow: 0 0 0 3px rgba(30,22,156,.12); }
.buscar-resultados { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-caja); box-shadow: var(--sombra-flota); z-index: 60; max-height: 380px; overflow-y: auto; }
.buscar-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--c-linea); cursor: pointer; }
.buscar-item:last-child { border-bottom: 0; }
.buscar-item:hover { background: var(--c-marca-fondo); }
.buscar-item b { color: var(--c-tinta); display: block; }
.buscar-item small { color: var(--c-suave); }
.buscar-vacio { padding: 16px; color: var(--c-suave); font-size: var(--f-texto-chico); }
.fmenu { position: relative; }
.fmenu-lista { position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; background: #fff; border: 1px solid var(--c-linea); border-radius: var(--radio-caja); box-shadow: var(--sombra-flota); padding: 6px; z-index: 60; }
.fmenu-lista button, .fmenu-lista a { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; background: none; border-radius: 9px; font-size: 15.5px; font-weight: 600; color: var(--c-tinta); cursor: pointer; text-align: left; }
.fmenu-lista button:hover, .fmenu-lista a:hover { background: var(--c-fondo); color: var(--c-tinta); }
.fmenu-lista .ico { color: var(--c-marca); }
.fmenu-lista small { display: block; color: var(--c-suave); font-size: 12.5px; font-weight: 500; line-height: 1.3; }
.fmenu-lista hr { border: 0; border-top: 1px solid var(--c-linea); margin: 6px 4px; }
/* ---------- Modales ---------- */
.av-modal { position: fixed; inset: 0; background: rgba(10,14,39,.5); backdrop-filter: blur(3px); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; animation: av-fade .15s ease-out; }
.av-modal-caja { background: #fff; border-radius: 20px; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: var(--sombra-flota); overflow: hidden; animation: av-pop2 .18s ease-out; }
.av-modal-caja.es-chica { max-width: 420px; }
.av-modal-cab { padding: 22px 24px 18px; border-bottom: 1px solid var(--c-linea); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; position: relative; }
.av-modal-cab::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--degrade); }
.av-modal-cab h3 { font-size: var(--f-titulo-seccion); font-weight: 700; }
.av-modal-cab p { color: var(--c-suave); font-size: var(--f-texto-chico); margin-top: 3px; }
.av-modal-cuerpo { padding: 22px 24px 6px; overflow-y: auto; flex: 1; }
.av-modal-pie { padding: 16px 24px; border-top: 1px solid var(--c-linea); display: flex; gap: 10px; justify-content: flex-end; background: #fff; }
.av-modal-pie .fbtn { min-width: 130px; }
.av-confirmar-cuerpo { padding: 28px 26px 18px; text-align: center; }
.av-confirmar-ico { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 14px; display: grid; place-items: center; background: var(--c-marca-fondo); color: var(--c-marca); }
.av-confirmar-ico.es-peligro { background: var(--c-accion-fondo); color: var(--c-accion); }
.av-confirmar-ico .ico { width: 26px; height: 26px; }
.av-confirmar-cuerpo h3 { font-size: var(--f-titulo-seccion); font-weight: 700; }
.av-confirmar-cuerpo p { margin-top: 8px; color: var(--c-texto); }
#av-confirmar .av-modal-pie { border-top: 0; padding-top: 4px; }
#av-confirmar .av-modal-pie .fbtn { flex: 1; min-width: 0; }
/* ---------- Avisos flotantes ---------- */
.av-avisos { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.av-aviso { display: flex; align-items: center; gap: 10px; background: var(--c-tinta); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: var(--sombra-flota); font-weight: 600; animation: av-pop2 .2s ease-out; max-width: 92vw; }
.av-aviso.es-ok .ico { color: #6ee7a0; }
.av-aviso.es-error { background: var(--c-error); }

/* ---------- Cuenta ---------- */
.cuenta-grilla { display: grid; grid-template-columns: minmax(0, 760px); gap: var(--sep-bloque); }
.uso { margin-bottom: 18px; }
.uso-txt { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--c-tinta); font-weight: 700; }
.persona-dato b { color: var(--c-tinta); display: block; }
.dosfa-qr { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.dosfa-qr #qr { padding: 10px; background: #fff; border: 1px solid var(--c-linea); border-radius: 12px; width: 180px; height: 180px; }
.dosfa-qr #qr img, .dosfa-qr #qr canvas { width: 158px !important; height: 158px !important; }
.clave { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 18px; letter-spacing: .14em; color: var(--c-marca); background: var(--c-fondo); border: 1px solid var(--c-linea); border-radius: 9px; padding: 8px 12px; display: inline-block; user-select: all; word-break: break-all; }
.codigo-input { text-align: center; letter-spacing: .5em; font-family: ui-monospace, Menlo, monospace !important; font-size: 26px !important; font-weight: 700; min-height: 60px !important; }
.vencida-caja { max-width: 560px; margin: 60px auto; text-align: center; }
.vencida-caja .fbtn { margin-top: 10px; }

/* ---------- Ingreso ---------- */
.acceso { min-height: 100vh; display: flex; background: #fff; color: var(--c-tinta); }
.acceso-form { flex: 0 0 40%; max-width: 40%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 5vw 36px; }
.acceso-marca { display: flex; align-items: center; justify-content: center; gap: 16px; }
.acceso-marca span:last-child { font-size: 22px; font-weight: 800; letter-spacing: .2em; color: var(--c-accion); border-left: 2px solid var(--c-linea-2); padding-left: 16px; line-height: 1.6; }
.acceso-caja { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 4px; }
.acceso-caja h1 { font-size: 42px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; background: var(--degrade-titulo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acceso-caja .av-bajada { font-size: 19px; margin: 8px 0 22px; }
.acceso-caja .falert { margin-bottom: 16px; }
.acceso-caja .fcampo label { display: flex; justify-content: space-between; }
.acceso-caja .fbtn { min-height: 56px; font-size: 18px; margin-top: 4px; }
.acceso-pie { font-size: 14px; color: var(--c-suave); text-align: center; }
.acceso-pie a { font-weight: 600; }

/* Panel animado (60%) */
.acceso-visual {
    flex: 1; position: relative; margin: 16px 16px 16px 0; border-radius: 28px; overflow: hidden; min-height: 620px;
    background: var(--c-fondo);
    background-image: radial-gradient(rgba(30,22,156,.09) 1px, transparent 1px); background-size: 26px 26px;
}
.av-luz { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); }
.av-luz.es-azul { width: 520px; height: 520px; background: #cfcaff; left: -140px; top: -160px; opacity: .8; animation: av-deriva 18s ease-in-out infinite; }
.av-luz.es-roja { width: 460px; height: 460px; background: #ffc9d1; right: -120px; bottom: -150px; opacity: .85; animation: av-deriva 22s ease-in-out infinite reverse; }
.av-luz.es-chica { width: 240px; height: 240px; background: #ffd6dc; left: 55%; top: 12%; opacity: .5; animation: av-deriva 15s ease-in-out infinite; }
@keyframes av-deriva { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(60px, 40px) scale(1.08); } 66% { transform: translate(-30px, 70px) scale(.95); } }

.av-escena {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 34px;
    padding: 56px clamp(32px, 5vw, 80px) 84px;
    opacity: 0; visibility: hidden; transform: translateY(26px) scale(.985); filter: blur(8px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1), filter .7s ease, visibility 0s .8s;
}
.av-escena.activa { opacity: 1; visibility: visible; transform: none; filter: none; transition: opacity .7s ease .15s, transform .8s cubic-bezier(.2,.8,.2,1) .15s, filter .7s ease .15s, visibility 0s; }
.av-escena.sale { visibility: visible; opacity: 0; transform: translateY(-26px) scale(.985); filter: blur(8px); transition: opacity .6s ease, transform .7s ease, filter .6s ease; }
.av-titulo small { display: block; font-size: 13px; font-weight: 800; letter-spacing: .18em; color: var(--c-accion); margin-bottom: 12px; }
.av-titulo h2 { font-size: clamp(30px, 2.9vw, 46px); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; max-width: 640px; }
.av-titulo h2 em { font-style: normal; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }
.av-escena.activa .av-titulo > * { animation: av-sube .7s cubic-bezier(.2,.8,.2,1) both; }
.av-escena.activa .av-titulo h2 { animation-delay: .25s; }
@keyframes av-sube { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes av-pop { 0% { opacity: 0; transform: translateY(14px) scale(.96); } 100% { opacity: 1; transform: none; } }


.k-ini { width: 34px; height: 34px; border-radius: 50%; background: var(--c-marca-fondo); border: 1.5px solid var(--c-marca-suave); color: var(--c-marca); display: grid; place-items: center; font-weight: 800; font-size: 12.5px; flex: none; }
.k-ini.es-rojo { background: var(--c-accion-fondo); border-color: var(--c-accion-suave); color: var(--c-accion); }
/* Puntos */
.av-puntos { position: absolute; left: clamp(32px, 5vw, 80px); bottom: 34px; display: flex; gap: 8px; z-index: 5; }
.av-puntos button { width: 28px; height: 6px; border-radius: 999px; border: 0; padding: 0; background: rgba(30,22,156,.15); cursor: pointer; position: relative; overflow: hidden; transition: width .4s; }
.av-puntos button.activo { width: 64px; }
.av-puntos button.activo::after { content: ''; position: absolute; inset: 0; background: var(--degrade); transform-origin: left; animation: av-progreso 7s linear both; }
@keyframes av-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ver-clave { position: relative; }
.ver-clave input { padding-right: 48px !important; }
.ver-clave button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- Animaciones ---------- */
@keyframes av-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes av-pop2 { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes av-entra { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes av-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ===== Ingreso: franja blanca con la marca + banda clara, tarjeta con marco degradé ===== */
.acceso { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.acceso-cab { flex: none; display: flex; justify-content: center; align-items: center; padding: 28px 24px; background: #fff; position: relative; z-index: 3; }
.acceso-cab .acceso-marca { gap: 20px; }
.acceso-cab .acceso-marca span:last-child { font-size: 28px; letter-spacing: .22em; border-left-width: 2px; padding-left: 20px; line-height: 1.7; }
.acceso-cuerpo {
    flex: 1; position: relative; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); align-items: center; gap: 40px;
    padding: 48px max(40px, calc((100vw - 1320px) / 2));
    background: linear-gradient(100deg, #e6ecff 0%, #efeafc 50%, #ffe5eb 100%);
}
.acceso-cuerpo .acceso-visual { position: relative; height: 500px; z-index: 1; }
.acceso-visual .av-escena { padding: 22px 0; gap: 18px; justify-content: center; }
.acceso-visual .av-titulo {
    align-self: flex-start; max-width: 100%; padding: 16px 20px 18px; border-radius: 16px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px -28px rgba(30,22,156,.45); border: 1px solid rgba(30,22,156,.06);
}
.acceso-visual .av-titulo small { font-size: 11.5px; margin-bottom: 6px; }
.acceso-visual .av-titulo h2 { font-size: clamp(20px, 1.75vw, 28px); color: var(--c-tinta); }
.acceso-cuerpo .acceso-form {
    position: relative; z-index: 2; justify-self: stretch; width: 100%;
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 22px;
    padding: 46px 52px 28px; border-radius: 30px; border: 9px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, #1e169c 0%, #5a1a9e 45%, #ff203c 100%) border-box;
    box-shadow: 0 50px 90px -45px rgba(30,22,156,.55);
    animation: av-pop .8s cubic-bezier(.2,.8,.2,1) both;
}
.acceso-cuerpo .acceso-caja { max-width: none; }
.acceso-cuerpo .acceso-caja h1 { font-size: 44px; }
.acceso-cuerpo .acceso-caja .av-bajada { font-size: 18px; margin: 6px 0 22px; }
.acceso-cuerpo .acceso-pie { border-top: 1px solid var(--c-linea); padding-top: 18px; margin: 0; }
@media (max-width: 1280px) {
    .acceso-cuerpo { padding: 40px 32px; gap: 28px; }
    .acceso-cuerpo .acceso-form { padding: 36px 36px 24px; }
}
@media (max-width: 1080px) {
    .acceso-cuerpo { grid-template-columns: 1fr; justify-items: center; }
    .acceso-cuerpo .acceso-visual { display: none; }
    .acceso-cuerpo .acceso-form { max-width: 560px; justify-self: center; }
}
@media (max-width: 760px) {
    .acceso-cab { padding: 18px 16px; }
    .acceso-cab .brillo img { height: 42px !important; }
    .acceso-cab .acceso-marca { gap: 14px; }
    .acceso-cab .acceso-marca span:last-child { font-size: 20px; padding-left: 14px; }
    .acceso-cuerpo { padding: 22px 14px 32px; align-items: start; }
    .acceso-cuerpo .acceso-form { padding: 28px 22px 20px; border-width: 6px; border-radius: 22px; }
    .acceso-cuerpo .acceso-caja h1 { font-size: 32px; }
}

/* =========================================================
   COLOR EQUILIBRADO: menú lateral, franja de arriba y "Para hoy"
   con azul y rojo de FEMA mezclados, moderados
   ========================================================= */
.lado {
    background: linear-gradient(175deg, #241ba8 0%, #3a1ca6 38%, #7a1c96 72%, #c8173f 100%);
    color: #fff; border-right: 0;
}
.lado::before { background: #6c63ff; opacity: .35; }
.lado::after { background: #ff4d63; opacity: .35; }
.lado-logo span:last-child { color: #fff; border-left-color: rgba(255,255,255,.3); }
.lado-item, .lado-personalizar, .lado-salir { color: rgba(255,255,255,.82); }
.lado-item .ico { color: rgba(255,255,255,.75); }
.lado-item:hover, .lado-personalizar:hover { background: rgba(255,255,255,.12); color: #fff; }
.lado-item:hover .ico { color: #fff; }
.lado-item.activo { background: rgba(255,255,255,.18); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.lado-item.activo::before { background: #fff; }
.lado-item.activo .ico { color: #fff; }
.lado-cuenta { background: #fff; color: var(--c-accion); }
.lado-personalizar { border-color: rgba(255,255,255,.3); color: #fff; }
.lado-personalizar .ico { color: #fff; }
.lado-usuario, .lado-usuario:hover, .lado-usuario.activo { color: #fff; }
.lado-usuario:hover, .lado-usuario.activo { background: rgba(255,255,255,.12); }
.lado-usuario-txt small { color: rgba(255,255,255,.7); }
.lado-avatar { background: #fff; color: var(--c-marca); }

/* =========================================================
   FEMA ANTIVIRUS — piezas propias
   ========================================================= */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lado-cuentas { padding: 0 6px 16px; }
.lado-cuentas select { width: 100%; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; color: #fff; font: inherit; font-size: 14px; font-weight: 600; padding: 0 30px 0 12px; appearance: none; cursor: pointer; }
.lado-cuentas select option { color: var(--c-tinta); }
.lado-salir { border: 1px solid rgba(255,255,255,.25); justify-content: center; font-weight: 700; color: #fff; }
.lado-salir:hover { background: #fff; color: var(--c-accion); }

.av-franja { background: linear-gradient(90deg, #2a1fae 0%, #5a1c9e 50%, #d0183f 100%); color: #fff; font-size: var(--f-texto-chico); }
.av-franja-in { padding: 9px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.av-franja-in > span { display: flex; align-items: center; gap: 8px; }
.av-franja-btn { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--c-accion) !important; font-weight: 700; padding: 7px 14px; border-radius: 9px; }

.fchip.es-gris { background: #f1f2f5; color: var(--c-suave); border-color: var(--c-linea-2); }
.kpi-ico.es-gris { background: #f1f2f5; color: var(--c-suave); }

/* ---- Estado general (tablero) ---- */
.estado-hero {
    position: relative; overflow: hidden; border-radius: 22px; padding: 28px 32px; color: #fff;
    display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center;
    background: radial-gradient(50% 140% at 100% 100%, rgba(255,77,99,.35), rgba(255,77,99,0) 70%), linear-gradient(110deg, #2a1fae 0%, #4b1ca2 45%, #9a1a86 80%, #d0183f 100%);
    box-shadow: 0 24px 44px -28px rgba(30,22,156,.7);
}
.estado-hero.es-alerta { background: radial-gradient(60% 140% at 0% 0%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%), linear-gradient(110deg, #b4134f 0%, #e0183f 55%, #ff203c 100%); }
.estado-hero h2 { color: #fff; font-size: 30px; letter-spacing: -.02em; }
.estado-hero p { color: rgba(255,255,255,.85); margin-top: 6px; font-size: 17px; }
.estado-escudo { width: 108px; height: 108px; position: relative; display: grid; place-items: center; }
.estado-escudo .ico { width: 62px; height: 62px; stroke-width: 1.6; color: #fff; position: relative; z-index: 2; }
.estado-escudo::before, .estado-escudo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: eh-onda 2.8s ease-out infinite; }
.estado-escudo::after { animation-delay: 1.4s; }
.estado-escudo i { position: absolute; inset: 14px; border-radius: 50%; background: rgba(255,255,255,.14); }
@keyframes eh-onda { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
.estado-hero .fbtn.es-blanco { background: #fff; color: var(--c-marca); border-color: #fff; }
.estado-hero .fbtn.es-blanco:hover { color: var(--c-accion); }

/* ---- Tarjetas de equipos: el hover dibuja una línea degradé abajo y gira el ícono ---- */
.eq-grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.eq-card {
    position: relative; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px;
    background: #fff linear-gradient(90deg, var(--c-marca), var(--c-accion)) no-repeat left bottom / 0 3px;
    border: 1px solid var(--c-linea); border-radius: var(--radio-caja); color: var(--c-texto);
    transition: background-size .45s cubic-bezier(.2,.8,.2,1), border-color .2s;
}
.eq-card:hover { background-size: 100% 3px; border-color: var(--c-marca-suave); color: var(--c-texto); }
.eq-card:hover .eq-ico { transform: rotate(-8deg); background: var(--c-marca); color: #fff; }
.eq-card-cab { display: flex; gap: 12px; align-items: center; }
.eq-ico { width: 46px; height: 46px; border-radius: 13px; background: var(--c-marca-fondo); color: var(--c-marca); display: grid; place-items: center; flex: none; transition: transform .3s, background .3s, color .3s; }
.eq-ico.es-pc { background: var(--c-accion-fondo); color: var(--c-accion); }
.eq-card-cab b { display: block; color: var(--c-tinta); font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-card-cab small { display: block; color: var(--c-suave); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-card-cab > div { min-width: 0; flex: 1; }
.eq-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13.5px; }
.eq-datos span { display: block; color: var(--c-suave); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.eq-datos b { color: var(--c-tinta); font-weight: 700; }
.eq-datos b.es-rojo { color: var(--c-accion); }
.eq-card-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.eq-vacio { text-align: center; padding: 50px 20px; border: 2px dashed var(--c-marca-suave); border-radius: var(--radio-caja); background: var(--c-marca-fondo); }
.eq-vacio > .ico { width: 44px; height: 44px; color: var(--c-marca); }
.eq-vacio h3 { margin: 10px 0 6px; }
.eq-vacio p { margin-bottom: 18px; }

/* ---- Tablas: al pasar, aparece una barra a la izquierda y la fila se tiñe ---- */
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.tabla th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-suave); padding: 0 12px 10px; border-bottom: 1px solid var(--c-linea); white-space: nowrap; }
.tabla td { padding: 13px 12px; border-bottom: 1px solid var(--c-linea); vertical-align: middle; color: var(--c-tinta); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr { transition: background .2s; }
.tabla tbody tr td:first-child { box-shadow: inset 0 0 0 transparent; transition: box-shadow .2s; }
.tabla tbody tr:hover { background: linear-gradient(90deg, var(--c-marca-fondo), #fff 70%); }
.tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--c-accion); }
.tabla .ruta { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; word-break: break-all; color: var(--c-tinta); }
.tabla small { display: block; color: var(--c-suave); font-size: 12.5px; }
.tabla .acc { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.tabla-scroll { overflow-x: auto; }
.frag { display: block; margin-top: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: #9f1239; background: #fff1f2; border: 1px solid #ffe4e6; border-radius: 8px; padding: 6px 8px; word-break: break-all; white-space: pre-wrap; max-height: 70px; overflow: hidden; }
.vacio-txt { color: var(--c-suave); padding: 26px 0; text-align: center; }
.vacio-txt .ico { width: 34px; height: 34px; color: var(--c-ok); display: block; margin: 0 auto 8px; }

/* ---- Ficha del equipo ---- */
.ficha-cab { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ficha-cab .eq-ico { width: 64px; height: 64px; border-radius: 18px; }
.ficha-cab .eq-ico .ico { width: 30px; height: 30px; }
.ficha-cab h1 { font-size: 30px; letter-spacing: -.02em; }
.ficha-cab > div { flex: 1; min-width: 220px; }
.ficha-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.datos-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 22px; }
.datos-lista span { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c-suave); }
.datos-lista b { color: var(--c-tinta); font-weight: 700; word-break: break-word; }
.chequeos { display: grid; gap: 8px; }
.chequeo { display: flex; gap: 12px; align-items: center; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--c-linea); }
.chequeo .ico { flex: none; }
.chequeo.es-ok .ico { color: var(--c-ok); }
.chequeo.es-mal { border-color: var(--c-error-borde); background: var(--c-error-fondo); }
.chequeo.es-mal .ico { color: var(--c-error); }
.chequeo b { color: var(--c-tinta); }
.escaneando { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-marca); }
.escaneando i { width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--c-marca-suave); border-top-color: var(--c-marca); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.actividad { display: grid; gap: 0; }
.actividad div { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-linea); font-size: 14.5px; color: var(--c-tinta); }
.actividad div:last-child { border-bottom: 0; }
.actividad em { font-style: normal; color: var(--c-suave); font-size: 13px; margin-left: auto; white-space: nowrap; }
.actividad .ico { color: var(--c-marca); margin-top: 1px; }

/* ---- Alta de equipos ---- */
.tipo-elegir { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.tipo-elegir label { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1.5px solid var(--c-linea-2); border-radius: var(--radio-caja); cursor: pointer; overflow: hidden; transition: border-color .2s, color .2s; }
.tipo-elegir label::after { content: ''; position: absolute; inset: auto -20% -60% auto; width: 120px; height: 120px; border-radius: 50%; background: var(--c-marca-fondo); transform: scale(0); transition: transform .4s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.tipo-elegir label:hover::after { transform: scale(1.6); }
.tipo-elegir label > * { position: relative; z-index: 1; }
.tipo-elegir input { position: absolute; opacity: 0; }
.tipo-elegir label:has(input:checked) { border-color: var(--c-marca); box-shadow: 0 0 0 3px rgba(30,22,156,.12); }
.tipo-elegir .ico { width: 30px; height: 30px; color: var(--c-marca); }
.tipo-elegir b { color: var(--c-tinta); font-size: 17px; }
.tipo-elegir small { color: var(--c-suave); }
.pasos { margin: 0 0 18px; padding: 0; list-style: none; counter-reset: p; display: grid; gap: 12px; }
.pasos li { counter-increment: p; display: flex; gap: 12px; align-items: flex-start; color: var(--c-tinta); }
.pasos li::before { content: counter(p); width: 26px; height: 26px; border-radius: 50%; background: var(--degrade); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: none; }
.copiar-fila { display: flex; gap: 8px; }
.copiar-fila input { flex: 1; min-height: 44px; border: 1.5px solid var(--c-linea-2); border-radius: 10px; padding: 0 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; background: var(--c-fondo); color: var(--c-tinta); }
.uso { margin-bottom: 14px; }
.uso-txt { display: flex; justify-content: space-between; margin-bottom: 7px; color: var(--c-tinta); font-weight: 700; }
.barra-pista { height: 10px; background: var(--c-fondo); border-radius: 999px; overflow: hidden; border: 1px solid var(--c-linea); }
.barra-llena { height: 100%; border-radius: 999px; background: var(--degrade); }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sep-bloque); align-items: start; }
.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; font-weight: 600; color: var(--c-tinta); cursor: pointer; }
.interruptor small { display: block; font-size: 13px; color: var(--c-suave); font-weight: 500; }
.interruptor input { position: absolute; opacity: 0; pointer-events: none; }
.interruptor .pista { width: 44px; height: 26px; border-radius: 999px; background: var(--c-linea-2); position: relative; flex: none; transition: background .2s; }
.interruptor .pista::after { content: ''; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.interruptor input:checked + .pista { background: var(--degrade); }
.interruptor input:checked + .pista::after { left: 22px; }

/* ---- Ingreso: el panel de animaciones sin fondo propio ---- */
.acceso-cuerpo .acceso-visual { flex: none; margin: 0; border-radius: 0; overflow: visible; min-height: 0; background: none; }
.av-tarjeta { background: #fff; border-radius: 18px; box-shadow: 0 24px 46px -28px rgba(30,22,156,.45); padding: 16px 18px; }

/* Escena 1: escaneo en vivo */
.sc-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sc-cab .eq-ico { width: 38px; height: 38px; border-radius: 11px; }
.sc-cab b { display: block; color: var(--c-tinta); font-size: 15px; }
.sc-cab small { color: var(--c-suave); font-size: 12.5px; }
.sc-cab em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--c-marca); font-size: 14px; }
.sc-barra { height: 6px; border-radius: 999px; background: var(--c-fondo); overflow: hidden; margin-bottom: 12px; }
.sc-barra i { display: block; height: 100%; width: 0; background: var(--degrade); border-radius: 999px; }
.av-escena.activa .sc-barra i { animation: sc-llena 5.2s cubic-bezier(.4,.1,.3,1) .4s forwards; }
@keyframes sc-llena { to { width: 100%; } }
.sc-lista { display: grid; gap: 6px; }
.sc-fila { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: var(--c-fondo); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--c-tinta); position: relative; overflow: hidden; }
.sc-fila span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-fila b { font-family: 'Outfit', sans-serif; font-size: 11.5px; font-weight: 800; opacity: 0; }
.sc-fila b.es-ok { color: var(--c-ok); }
.sc-fila::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(30,22,156,.14), transparent); transform: translateX(-100%); }
.av-escena.activa .sc-fila::before { animation: sc-barre .7s ease-in-out var(--d) both; }
.av-escena.activa .sc-fila b { animation: sc-aparece .3s ease-out calc(var(--d) + .6s) forwards; }
@keyframes sc-barre { to { transform: translateX(100%); } }
@keyframes sc-aparece { to { opacity: 1; } }
.sc-fila.es-virus { transition: none; }
.av-escena.activa .sc-fila.es-virus { animation: sc-rojo .3s ease-out calc(var(--d) + .6s) forwards; }
@keyframes sc-rojo { to { background: #fff1f2; color: #9f1239; box-shadow: inset 3px 0 0 var(--c-accion); } }
.sc-fila.es-virus b { color: #fff; background: var(--c-accion); padding: 2px 8px; border-radius: 999px; }
.sc-cuar { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-marca); color: #fff; font-weight: 700; font-size: 14px; opacity: 0; transform: translateY(10px); }
.sc-cuar .ico { width: 18px; height: 18px; }
.av-escena.activa .sc-cuar { animation: av-pop .5s cubic-bezier(.2,.8,.2,1) 5s forwards; }

/* Escena 2: radar que atrapa amenazas */
.rd-grilla { display: grid; grid-template-columns: 210px 1fr; gap: 16px; align-items: center; }
.rd-radar { width: 210px; height: 210px; border-radius: 50%; position: relative; overflow: hidden;
    background: repeating-radial-gradient(circle, rgba(255,255,255,0) 0 33px, rgba(255,255,255,.22) 33px 34px), linear-gradient(rgba(255,255,255,0) calc(50% - .5px), rgba(255,255,255,.18) calc(50% - .5px) calc(50% + .5px), rgba(255,255,255,0) calc(50% + .5px)), linear-gradient(90deg, rgba(255,255,255,0) calc(50% - .5px), rgba(255,255,255,.18) calc(50% - .5px) calc(50% + .5px), rgba(255,255,255,0) calc(50% + .5px)), linear-gradient(140deg, #2b22c9, #1e169c 55%, #5a1a9e);
    box-shadow: 0 24px 46px -24px rgba(30,22,156,.7), inset 0 0 0 1px rgba(255,255,255,.15); }
.rd-radar::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,255,255,.45), rgba(255,255,255,0) 60deg); animation: girar 3.2s linear infinite; }
.rd-radar::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.rd-punto { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: #ff4d63; box-shadow: 0 0 0 0 rgba(255,77,99,.7); opacity: 0; z-index: 2; }
.av-escena.activa .rd-punto { animation: rd-aparece 3.2s ease-out var(--d) infinite; }
@keyframes rd-aparece { 0% { opacity: 0; transform: scale(.3); box-shadow: 0 0 0 0 rgba(255,77,99,.7); } 15% { opacity: 1; transform: scale(1); } 45% { box-shadow: 0 0 0 12px rgba(255,77,99,0); background: #ff4d63; } 70% { opacity: 1; background: #fff; transform: scale(.5); } 100% { opacity: 0; transform: scale(0); } }
.rd-lista { display: grid; gap: 8px; }
.rd-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: #fff; box-shadow: 0 18px 36px -26px rgba(30,22,156,.5); opacity: 0; transform: translateX(24px); }
.av-escena.activa .rd-item { animation: rd-entra .5s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
@keyframes rd-entra { to { opacity: 1; transform: none; } }
.rd-item .rd-ico { width: 32px; height: 32px; border-radius: 10px; background: var(--c-marca); color: #fff; display: grid; place-items: center; flex: none; }
.rd-item .rd-ico .ico { width: 17px; height: 17px; }
.rd-item b { display: block; font-size: 13.5px; color: var(--c-tinta); }
.rd-item small { font-size: 12px; color: var(--c-suave); }
.rd-total { display: flex; align-items: baseline; gap: 8px; padding: 4px 4px 0; color: var(--c-tinta); font-weight: 700; }
.rd-total b { font-size: 34px; letter-spacing: -.02em; background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Escena 3: todos los equipos a la vista */
.mp-grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mp-eq { background: #fff; border-radius: 15px; padding: 13px; box-shadow: 0 18px 36px -26px rgba(30,22,156,.5); display: flex; flex-direction: column; gap: 8px; position: relative; opacity: 0; transform: scale(.92); }
.av-escena.activa .mp-eq { animation: av-pop .5s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
.mp-eq .eq-ico { width: 34px; height: 34px; border-radius: 10px; }
.mp-eq .eq-ico .ico { width: 18px; height: 18px; }
.mp-eq b { font-size: 13px; color: var(--c-tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-estado { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--c-ok); }
.mp-estado i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: mp-late 1.8s ease-out infinite; }
@keyframes mp-late { 0% { box-shadow: 0 0 0 0 rgba(22,101,52,.45); } 100% { box-shadow: 0 0 0 7px rgba(22,101,52,0); } }
.av-escena.activa .mp-eq.es-ataque { animation: av-pop .5s cubic-bezier(.2,.8,.2,1) var(--d) forwards, mp-ataque 4.4s ease 1.6s forwards; }
@keyframes mp-ataque { 0% { box-shadow: 0 18px 36px -26px rgba(30,22,156,.5); } 10%, 55% { box-shadow: 0 0 0 3px var(--c-accion), 0 18px 36px -20px rgba(255,32,60,.6); } 75%, 100% { box-shadow: 0 0 0 3px #22c55e, 0 18px 36px -20px rgba(22,101,52,.4); } }
.mp-eq.es-ataque .mp-estado { display: grid; }
.mp-t { grid-area: 1 / 1; display: flex; align-items: center; gap: 6px; opacity: 0; }
.mp-t.es-1 { opacity: 1; }
.mp-t.es-2 { color: var(--c-accion); }
.av-escena.activa .mp-t.es-1 { animation: mp-t1 4.4s steps(1) 1.6s forwards; }
.av-escena.activa .mp-t.es-2 { animation: mp-t2 4.4s steps(1) 1.6s forwards; }
.av-escena.activa .mp-t.es-3 { animation: mp-t3 4.4s steps(1) 1.6s forwards; }
@keyframes mp-t1 { 0% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes mp-t2 { 0% { opacity: 0; } 10% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes mp-t3 { 0% { opacity: 0; } 70%, 100% { opacity: 1; } }
.mp-t.es-2 i { background: var(--c-accion); animation: none; }
.mp-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding: 12px 16px; border-radius: 14px; background: var(--c-marca); color: #fff; font-weight: 700; font-size: 14px; }
.mp-pie b { font-size: 22px; }

/* Escena 4: avisos que caen como notificaciones del celular */
.al-cel { width: 330px; max-width: 100%; margin-left: 20px; border-radius: 34px; padding: 14px 12px 18px; background: linear-gradient(160deg, #1e169c, #5a1a9e 60%, #c8173f); box-shadow: 0 30px 60px -30px rgba(30,22,156,.8), inset 0 0 0 6px #0a0e27; position: relative; }
.al-cel::before { content: ''; display: block; width: 90px; height: 20px; border-radius: 999px; background: #0a0e27; margin: 0 auto 12px; }
.al-hora { text-align: center; color: #fff; font-size: 40px; font-weight: 300; letter-spacing: -.02em; line-height: 1; margin-bottom: 14px; }
.al-hora small { display: block; font-size: 12px; font-weight: 600; opacity: .75; letter-spacing: .04em; margin-top: 4px; }
.al-pila { display: grid; gap: 7px; }
.al-not { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border-radius: 16px; background: rgba(255,255,255,.93); opacity: 0; transform: translateY(-22px) scale(.96); }
.av-escena.activa .al-not { animation: al-cae .55s cubic-bezier(.2,.9,.25,1.15) var(--d) forwards; }
@keyframes al-cae { to { opacity: 1; transform: none; } }
.al-not .al-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--c-marca); color: #fff; }
.al-not .al-ico.es-rojo { background: var(--c-accion); }
.al-not .al-ico.es-ok { background: var(--c-ok); }
.al-not .al-ico .ico { width: 16px; height: 16px; }
.al-not b { display: block; font-size: 12.5px; color: var(--c-tinta); line-height: 1.25; }
.al-not small { display: block; font-size: 11.5px; color: var(--c-texto); line-height: 1.3; }
.al-not em { font-style: normal; font-size: 10.5px; color: var(--c-suave); margin-left: auto; white-space: nowrap; }
.al-lado { display: flex; gap: 22px; align-items: center; }
.al-dato { display: grid; gap: 10px; }
.al-dato div { background: #fff; border-radius: 14px; padding: 12px 16px; box-shadow: 0 18px 36px -26px rgba(30,22,156,.5); opacity: 0; }
.av-escena.activa .al-dato div { animation: av-pop .5s cubic-bezier(.2,.8,.2,1) var(--d) forwards; }
.al-dato b { display: block; font-size: 24px; color: var(--c-tinta); letter-spacing: -.02em; }
.al-dato span { font-size: 12.5px; color: var(--c-suave); font-weight: 600; }

/* ---- Responsive ---- */
@media (max-width: 1280px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1080px) {
    .grilla-2 { grid-template-columns: 1fr; }
    :root { --ancho-lado: 84px; }
    .lado { padding: 22px 12px; }
    .lado-logo { justify-content: center; padding: 0 0 24px; }
    .lado-logo .brillo img { height: 20px !important; }
    .lado-logo span:last-child, .lado-item span, .lado-usuario-txt, .lado-salir span, .lado-cuentas { display: none; }
    .lado-item, .lado-salir, .lado-usuario { justify-content: center; position: relative; }
    .lado-cuenta { position: absolute; top: 4px; right: 6px; padding: 1px 6px; font-size: 11px; }
    .estado-hero { grid-template-columns: auto 1fr; }
    .estado-hero > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    :root { --f-titulo-pagina: 27px; --f-lead: 15.5px; }
    .app { flex-direction: column; }
    .lado { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; width: 100%; flex-direction: row; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 80; background: linear-gradient(90deg, #2a1fae 0%, #5a1c9e 50%, #d0183f 100%); }
    .lado::before, .lado::after, .lado-logo { display: none; }
    .lado-items { flex-direction: row; gap: 2px; }
    .lado-item, .lado-usuario, .lado-salir { flex: 1; flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 11px; border: 0; }
    .lado-item span, .lado-salir span { display: block; flex: none; }
    .lado-pie { flex-direction: row; flex: 0 0 auto; gap: 2px; }
    .lado-item.activo::before { display: none; }
    .lado-avatar { width: 26px; height: 26px; font-size: 12px; }
    .app-cuerpo { padding-bottom: 80px; }
    .av-main { padding: 18px 14px 40px; gap: 16px; }
    .kpis { gap: 10px; }
    .kpi { padding: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
    .fcard { padding: 18px 16px; }
    .fgrilla, .fgrilla-3, .tipo-elegir { grid-template-columns: 1fr; }
    .estado-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 24px 18px; }
    .estado-hero h2 { font-size: 24px; }
    .av-modal { padding: 0; align-items: flex-end; }
    .av-modal-caja { border-radius: 18px 18px 0 0; max-height: 94vh; }
    .tabla thead { display: none; }
    .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
    .tabla tr { padding: 10px 0; border-bottom: 1px solid var(--c-linea); }
    .tabla td { border: 0; padding: 4px 0; }
    .tabla .acc { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .estado-escudo::before, .estado-escudo::after, .rd-radar::before, .mp-estado i { animation: none; } }

/* Ingreso: la tarjeta del formulario ocupa su columna entera */
.acceso-cuerpo .acceso-form { flex: none; max-width: none; }
.acceso-cuerpo .acceso-visual { height: 560px; }
.acceso-visual .av-puntos { left: 0; bottom: -4px; }
@media (max-width: 1080px) { .acceso-cuerpo .acceso-form { max-width: 560px; } }
.grilla-2 > *, .av-main > * { min-width: 0; }
.actividad span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
    .tabla td[style*="text-align:right"] { text-align: left !important; }
    .actividad div { flex-wrap: wrap; }
    .actividad em { margin-left: 32px; }
}
@media (max-width: 760px) { .actividad span { flex: 1 1 calc(100% - 40px); } }