/* Sección de recursos: chuletas y herramientas. Usa las variables de color de app.css. */
:root {
    --codigo-fondo: #0f1720;
    --codigo-texto: #d7f5e3;
    --c-verde: #15803d; --c-azul: #1d4ed8; --c-naranja: #c2410c; --c-rojo: #b91c1c;
    --c-morado: #7e22ce; --c-cian: #0e7490; --c-amarillo: #a16207; --c-rosa: #be185d;
}
@media (prefers-color-scheme: dark) {
    :root {
        --codigo-fondo: #0a0f15;
        --c-verde: #4ade80; --c-azul: #60a5fa; --c-naranja: #fb923c; --c-rojo: #f87171;
        --c-morado: #c084fc; --c-cian: #22d3ee; --c-amarillo: #facc15; --c-rosa: #f472b6;
    }
}
.color-verde { --c: var(--c-verde); } .color-azul { --c: var(--c-azul); } .color-naranja { --c: var(--c-naranja); }
.color-rojo { --c: var(--c-rojo); } .color-morado { --c: var(--c-morado); } .color-cian { --c: var(--c-cian); }
.color-amarillo { --c: var(--c-amarillo); } .color-rosa { --c: var(--c-rosa); }

[hidden] { display: none !important; }

/* Portada de recursos */
.rec-hero { padding: 24px 0 4px; }
.rec-hero p { color: var(--suave); max-width: 680px; }
.rec-buscar, .rec-filtro {
    width: 100%; padding: 11px 14px; font: inherit; border-radius: 8px;
    border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.rec-buscar { max-width: 560px; margin: 8px 0 4px; font-size: 1.02rem; }
.rec-buscar:focus, .rec-filtro:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.rec-categoria h2 { font-family: var(--mono); font-size: 1rem; color: var(--suave); text-transform: uppercase; letter-spacing: .06em; }
.rec-categoria h2::before { content: "## "; color: var(--acento); }
.rec-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.rec-tarjeta {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 12px; row-gap: 4px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px;
    color: var(--texto); transition: border-color .15s, transform .15s;
}
.rec-tarjeta:hover { text-decoration: none; border-color: var(--c, var(--acento)); transform: translateY(-1px); }
.rec-tarjeta:has(.color-verde) { --c: var(--c-verde); } .rec-tarjeta:has(.color-azul) { --c: var(--c-azul); }
.rec-tarjeta:has(.color-naranja) { --c: var(--c-naranja); } .rec-tarjeta:has(.color-rojo) { --c: var(--c-rojo); }
.rec-tarjeta:has(.color-morado) { --c: var(--c-morado); } .rec-tarjeta:has(.color-cian) { --c: var(--c-cian); }
.rec-tarjeta:has(.color-amarillo) { --c: var(--c-amarillo); } .rec-tarjeta:has(.color-rosa) { --c: var(--c-rosa); }
.rec-tarjeta .rec-sigla { grid-row: 1 / span 2; }
.rec-tarjeta strong { font-size: 1.05rem; line-height: 1.25; }
.rec-tarjeta .rec-desc { grid-column: 1 / -1; color: var(--suave); font-size: .9rem; margin-top: 6px; }
.rec-tipo { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--c, var(--suave)); }
.rec-pie { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; font-size: .85rem; color: var(--suave); }
.rec-abrir { color: var(--enlace); font-weight: 600; }
.rec-sigla {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px;
    font-family: var(--mono); font-weight: 700; font-size: .85rem; color: var(--c);
    background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.rec-sigla.grande { width: 58px; height: 58px; font-size: 1.05rem; flex: none; }

/* Página de un recurso */
.rec-cab { display: flex; gap: 16px; align-items: center; margin: 8px 0 12px; }
.rec-cab h1 { margin: 0; }
.rec-cab .subtitulo { margin: .3em 0 0; max-width: 760px; }
.rec-vars { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; margin: 12px 0 18px; position: sticky; top: 0; z-index: 5; }
.rec-vars-cab { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.rec-vars-cab small { color: var(--suave); }
.enlace-btn { margin-left: auto; background: none; border: 0; color: var(--enlace); cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
.rec-vars-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 12px; }
.rec-vars-campos label { display: flex; flex-direction: column; gap: 3px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.rec-vars-campos input {
    font-family: var(--mono); font-size: .92rem; padding: 7px 9px; border-radius: 6px;
    border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); width: 100%;
}
.rec-vars-campos input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

.chuleta-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 6px 0 4px; }
.chuleta-barra .rec-filtro { max-width: 280px; padding: 8px 12px; }
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; }
.pestana {
    padding: 6px 12px; border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie);
    color: var(--suave); font-weight: 600; font-size: .9rem;
}
.pestana small { font-family: var(--mono); font-weight: 400; opacity: .75; }
.pestana:hover { color: var(--texto); text-decoration: none; }
.pestana.activa { background: var(--acento); border-color: var(--acento); color: var(--superficie); }
body.filtrando .pestana.activa { background: var(--superficie); color: var(--suave); border-color: var(--borde); }
/* Con JavaScript las pestañas ocultan los demás paneles y sobra el título repetido */
body.con-pestanas:not(.filtrando) .panel-titulo { display: none; }
.panel-titulo { border-bottom: 1px solid var(--borde); padding-bottom: 6px; }

.rec-seccion h3 { display: flex; align-items: center; gap: 8px; font-size: 1rem; margin: 22px 0 8px; }
.rec-seccion h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); flex: none; }
.rec-seccion > .ayuda { margin-top: -4px; }

.cmd { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 12px; margin: 8px 0; }
.cmd.sin-borde { border: 0; padding: 0; background: none; margin: 0; }
.cmd-cab { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cmd-titulo { font-weight: 600; font-size: .92rem; flex: 1; }
.cmd pre {
    margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--codigo-fondo); color: var(--codigo-texto);
    overflow-x: auto; font-size: .86rem; line-height: 1.5;
}
.cmd code { font-family: var(--mono); white-space: pre; }
.cmd-nota { margin: 6px 0 0; color: var(--suave); font-size: .85rem; }
.cmd.atenuado { opacity: .45; }
.copiar {
    border: 1px solid var(--borde); background: transparent; color: var(--suave); border-radius: 6px;
    font: inherit; font-size: .78rem; padding: 3px 9px; cursor: pointer; white-space: nowrap;
}
.copiar:hover { color: var(--texto); border-color: var(--suave); }
.copiar.ok { color: var(--acento); border-color: var(--acento); }
.cmd[data-donde="tecla"] .copiar { display: none; }
.cmd[data-donde="tecla"] pre { color: var(--c-amarillo); }
.donde { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.donde-atacante { color: var(--c-azul); } .donde-victima { color: var(--c-morado); } .donde-tecla { color: var(--c-amarillo); }

.rec-final { margin-top: 32px; }
.rec-final h2 { font-size: 1rem; }
.lista-fuentes { padding-left: 20px; }

/* Binarios */
.filtro-funciones { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.funcion { border: 1px solid var(--borde); background: var(--superficie); color: var(--suave); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.funcion.activa { color: var(--superficie); background: var(--texto); border-color: var(--texto); }
.funcion.fn-shell, .tag.fn-shell { --c: var(--c-verde); } .funcion.fn-sudo, .tag.fn-sudo { --c: var(--c-rojo); }
.funcion.fn-suid, .tag.fn-suid { --c: var(--c-naranja); } .funcion.fn-cap, .tag.fn-cap { --c: var(--c-morado); }
.funcion.fn-lectura, .tag.fn-lectura { --c: var(--c-azul); } .funcion.fn-escritura, .tag.fn-escritura { --c: var(--c-amarillo); }
.funcion.fn-descarga, .tag.fn-descarga { --c: var(--c-cian); }
.funcion[class*="fn-"] { color: var(--c); }
.funcion[class*="fn-"].activa { background: var(--c); border-color: var(--c); color: var(--superficie); }
.bin-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; align-items: start; }
.bin { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.bin[open] { grid-column: 1 / -1; }
.bin summary { list-style: none; cursor: pointer; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.bin summary::-webkit-details-marker { display: none; }
.bin summary:hover .bin-nombre { text-decoration: underline; }
.bin-nombre { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--c-naranja); }
.bin-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.bin > .cmd, .bin > .bin-mas { margin-left: 12px; margin-right: 12px; }
.bin-mas { font-size: .85rem; margin-bottom: 12px; }

/* Herramientas */
.herramienta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin: 12px 0 24px; }
.herramienta h3 { font-size: 1rem; margin: 18px 0 8px; }
.herramienta .campo textarea, .herramienta .campo input { font-family: var(--mono); font-size: .92rem; }
.herramienta .campo { margin-bottom: 10px; }
.jwt-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-top: 10px; }
.jwt-parte h3 { margin-top: 0; }
.jwt-parte pre, .red-bin, .herramienta .cmd pre { margin: 0; padding: 10px 12px; border-radius: 7px; background: var(--codigo-fondo); overflow-x: auto; font-size: .85rem; }
.jwt-parte code, .red-bin code { font-family: var(--mono); white-space: pre-wrap; word-break: break-all; }
.jwt-h code { color: #fb7185; } .jwt-p code { color: #c4b5fd; } .jwt-f code { color: #67e8f9; }
.jwt-a, .jwt-editar { grid-column: 1 / -1; }
.jwt-editar summary { cursor: pointer; font-weight: 700; }
.jwt-edicion { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
#jwt-nuevo code { white-space: pre-wrap; word-break: break-all; }
.analisis { list-style: none; padding: 0; margin: 0; }
.analisis li { padding: 7px 10px 7px 12px; border-left: 3px solid var(--borde); margin: 5px 0; font-size: .92rem; }
.analisis li.nivel-alto { border-color: var(--hard); }
.analisis li.nivel-medio { border-color: var(--medium); }
.analisis code { font-family: var(--mono); font-size: .82rem; color: var(--suave); }
.cod-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cod-rejilla .cmd pre { min-height: 9.5em; }
#cod-salida { white-space: pre-wrap; word-break: break-all; color: var(--codigo-texto); }
#cod-salida.error { color: #f87171; }
#cod-salida[data-vacio]::before { content: attr(data-vacio); color: #6b7785; }
.cod-ops { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.op { border: 1px solid var(--borde); background: var(--fondo); color: var(--texto); border-radius: 6px; padding: 5px 10px; font-family: var(--mono); font-size: .82rem; cursor: pointer; }
.op.activa { background: var(--acento); border-color: var(--acento); color: var(--superficie); }
.tabla-hashes, .tabla-red { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla-hashes th, .tabla-red th { text-align: left; color: var(--suave); font-weight: 600; padding: 6px 12px 6px 0; white-space: nowrap; width: 1%; vertical-align: top; }
.tabla-hashes td, .tabla-red td { padding: 6px 0; border-bottom: 1px solid var(--borde); }
.tabla-hashes code, .tabla-red code { font-family: var(--mono); word-break: break-all; }
.red-bin code { color: var(--codigo-texto); white-space: pre; word-break: normal; }
.hash-tipos { padding-left: 22px; }
.hash-tipos li { margin: 4px 0; }
.hash-tipos li:first-child strong { color: var(--acento); }
.hash-tipos small { color: var(--suave); font-family: var(--mono); }

.tecnica-recursos h2 { font-size: 1rem; margin-top: 1em; }

@media (max-width: 600px) {
    .rec-vars { position: static; }
    .rec-cab { align-items: flex-start; }
    .chuleta-barra .rec-filtro { max-width: none; }
}
.rec-vars.estatica { position: static; }

/* Máquinas del catálogo donde se practica una pestaña o sección */
.rec-maquinas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .85rem; color: var(--suave); margin: 4px 0 8px; }
.rec-maquinas a { border: 1px solid var(--borde); border-radius: 999px; padding: 2px 10px; background: var(--superficie); font-weight: 600; }
.rec-maquinas a:hover { border-color: var(--acento); text-decoration: none; }

/* Generadores (msfvenom, PowerShell, phishing, AD) */
.gen-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin: 8px 0 14px; }
.gen-campos label { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); }
.gen-campos label.ancho { grid-column: 1 / -1; }
.gen-campos input, .gen-campos select, .gen-campos textarea {
    font: inherit; font-family: var(--mono); font-size: .9rem; text-transform: none; letter-spacing: 0; font-weight: 400;
    color: var(--texto); background: var(--superficie); border: 1px solid var(--borde); border-radius: 8px; padding: 7px 9px; width: 100%; box-sizing: border-box;
}
.gen-campos input:focus, .gen-campos select:focus, .gen-campos textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.gen-explica { background: var(--superficie); border-left: 3px solid var(--acento); border-radius: 0 var(--radio) var(--radio) 0; padding: 8px 12px; margin: 10px 0; color: var(--suave); font-size: .9rem; }
.gen-explica strong { color: var(--texto); }