:root{--az:#165bb9;--azo:#0066CC;--azc:#165bb9;--do:#926300;--tx:#23384f;--at:#586c82;--f0:#ffffff;--f1:#f7faff;--f2:#ffffff;--ln:#dce5ee;--ok:#17734d;--ko:#b53030}
*{box-sizing:border-box}
[hidden]{display:none!important}  /* .fila es flex y anulaba el atributo hidden */
body{margin:0;background:var(--f0);color:var(--tx);font:15px/1.55 system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;padding:24px 16px}
main{max-width:1040px;margin:0 auto;display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}  /* r7.3: sin minmax(0,…) una tabla o un texto largo ensanchaba la rejilla y la página desbordaba en móvil (vigilancia y clave, 390 px) */
h1{color:#23384f;font-size:24px;margin:0}h2{color:#23384f;font-size:18px;margin:0 0 8px}
p{margin:0}.at{color:var(--at);font-size:13px}
/* Aviso que BLOQUEA una accion del usuario: tiene que verse. En gris no se leia. */
.at.rojo{color:var(--ko);font-weight:700;font-size:14px}
.caja{background:var(--f2);border:1px solid var(--ln);border-radius:10px;padding:18px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.aviso{border-left:4px solid var(--do);background:#fff8e5;color:#795100;padding:12px 14px;border-radius:6px;font-size:14px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
input,select{background:var(--f0);color:#23384f;border:1px solid var(--ln);border-radius:6px;padding:10px 12px;font:inherit}
input{flex:1 1 240px;min-width:0}
button,.boton{background:var(--az);color:#23384f;border:0;border-radius:6px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;display:inline-block}
button:hover,.boton:hover{background:var(--azo)}
/* Capturar: el boton que el usuario tiene que encontrar rapido cuando su web se cae. */
button.captura{background:var(--do);color:#fff8e5}button.captura:hover{background:#C8900A}
/* Borrar: destruye prueba. Rojo, y nunca con el aspecto de un boton cualquiera. */
button.peligro{background:transparent;border:1px solid var(--ko);color:var(--ko);font-weight:700}
button.peligro:hover{background:var(--ko);color:#1a0606}button.sec,.boton.sec{background:transparent;border:1px solid var(--ln);color:var(--tx)}
button[disabled]{opacity:.55;cursor:not-allowed}
input[disabled],select[disabled]{opacity:.55;cursor:not-allowed}
/* La caja de dominio queda FIJA mientras haya cadena: aqui se dice como se suelta. Azul y legible:
   no es un error del usuario, es el estado de la aplicacion. */
.caja-consent{border-left:2px solid var(--at);background:var(--f1);padding:.6rem .8rem;border-radius:0 6px 6px 0;display:grid;gap:6px}
.caja-consent b{color:var(--tx)}
.etq-opcional{color:var(--at);font-size:12px;border:1px solid var(--at);border-radius:10px;padding:0 .4rem;white-space:nowrap}
/* La jerarquia se nota por los DOS lados: el requisito sube y el opcional baja. La casilla que
   IMPIDE arrancar no puede gritar menos que una casilla que se puede dejar apagada sin perder
   nada. Decidido por el titular el 02/10/2026 al verlas juntas en pantalla. */
.caja-requisito{border-left:3px solid var(--do);background:var(--f1);padding:.6rem .8rem;margin:.6rem 0;border-radius:0 6px 6px 0;display:grid;gap:6px}
.caja-requisito b{color:var(--do)}
.caja-fijada{border-left:3px solid var(--az);background:var(--f1);padding:.5rem .7rem;border-radius:0 6px 6px 0;font-size:.9rem;color:var(--tx)}
/* Pantalla previa al borrado. Borrar destruye prueba: la pantalla se ve y no se confunde con la pagina. */
.pantalla-borrar{border:1px solid var(--ko);background:#fff5f5;border-radius:8px;padding:14px;display:grid;gap:10px}
.pantalla-borrar h3{margin:0;color:var(--ko);font-size:16px}
input:focus,button:focus,select:focus,.boton:focus{outline:2px solid var(--azc);outline-offset:2px}
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.cifra{background:var(--f1);border:1px solid var(--ln);border-radius:8px;padding:12px}.cifra b{display:block;color:#23384f;font-size:22px}
.tabla{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:13px}
th,td{border-bottom:1px solid var(--ln);padding:6px 8px;text-align:left;white-space:nowrap}th{color:var(--at);font-weight:600}
.si{color:var(--ok)}.no{color:var(--ko)}.nd{color:var(--at)}
/* Mismos colores que el dibujo de la guia: origen dorado, dominio verde, referencia azul, control rojo */
.k-origen{color:var(--do)}.k-dominio{color:var(--ok)}.k-ref{color:var(--az)}.k-ref-b{color:var(--do)}.k-control{color:var(--ko)}
/* dentro del detalle, tr.detalle td gana por especificidad: hay que subirla */
tr.detalle .k-origen{color:var(--do)}tr.detalle .k-dominio{color:var(--ok)}tr.detalle .k-ref{color:var(--az)}tr.detalle .k-ref-b{color:var(--do)}tr.detalle .k-control{color:var(--ko)}
tr.detalle b.k-origen,tr.detalle b.k-dominio,tr.detalle b.k-ref,tr.detalle b.k-ref-b{font-weight:700}
code{font:12px ui-monospace,Consolas,monospace;color:var(--azc);word-break:break-all;white-space:normal}
.estado{font-weight:600}.estado.on{color:var(--ok)}.estado.off{color:var(--at)}
.barra-app{max-width:1040px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:14px}
.barra-app a{color:var(--tx);text-decoration:none;border:1px solid var(--ln);border-radius:6px;padding:7px 12px;background:var(--f2)}
.barra-app a:hover,.barra-app a:focus-visible{color:var(--az);border-color:var(--az)}
h3{color:#23384f;font-size:15px;margin:6px 0 0}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:none;grid-template-columns:minmax(0,1fr)}
.paso{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:10px;align-items:baseline;background:var(--f1);border:1px solid var(--ln);border-radius:8px;padding:9px 12px;font-size:14px}
.paso .ico{font-size:12px;line-height:1.6}
.paso .val{font-weight:600;text-align:right;white-space:nowrap}
.paso .at{font-size:12.5px}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;background:var(--f1);border:1px solid var(--ln);border-radius:8px;padding:12px}
.ficha>div>.at{display:block;font-size:12px}
tr.detalle td{border-bottom:1px solid var(--ln);color:var(--at);font-size:12px;white-space:normal;padding-top:0;padding-bottom:8px;line-height:1.5}
tr.detalle td:last-child{max-width:0}  /* con colspan, obliga a envolver en vez de estirar la tabla */
tr.detalle b{color:var(--tx);font-weight:600}
tr.detalle+tr>td{border-top:0}
@media(max-width:620px){.paso{grid-template-columns:20px minmax(0,1fr)}.paso .val{grid-column:2;text-align:left}
  /* en movil la tabla envuelve en vez de obligar a barrido horizontal */
  table{font-size:12px}th,td{white-space:normal}tr.detalle td:last-child{max-width:none}
  /* IP y huella se ocultan: van en la linea de detalle. Desde la v0.41 la tabla tiene 9 columnas
     (entra el canario B), asi que son la 8 y la 9, no la 7 y la 8. */
  thead th:nth-child(9),thead th:nth-child(10),tbody tr:not(.detalle) td:nth-child(9),tbody tr:not(.detalle) td:nth-child(10){display:none}}
@media print{.tabla{overflow:visible}table{font-size:10px}th,td{white-space:normal;padding:4px 5px}.caja{break-inside:auto}h2{break-after:avoid}tr{break-inside:avoid}body{background:#23384f;color:#000;padding:0}.caja{background:#23384f;border-color:#bbb}.no-imprimir{display:none!important}th{color:#333}code{color:#000}.aviso{background:#23384f;color:#000;border-color:#999}h1,h2,.cifra b{color:#000}.cifra{background:#23384f}.si{color:#0a6}.no{color:#c00}.paso,.ficha{background:#23384f;border-color:#bbb}tr.detalle td{color:#333;font-size:9px}h3{color:#000}}
a{color:var(--azc)}

/* Aviso «un paquete por episodio» (clausula: texto de juridica, no se reescribe aqui) */
.aviso-episodio{border-left:3px solid #926300;background:#ffffff;padding:.6rem .8rem;margin:.6rem 0;border-radius:0 6px 6px 0;color:#23384f;font-size:.92rem}
.aviso-episodio b{color:#926300}
/* Confirmación de «Parar»: diálogo propio, no window.confirm (que detiene la página y las mediciones) */
dialog.confirmar-parada{background:var(--f2);color:var(--tx);border:1px solid var(--az);border-radius:10px;padding:18px;max-width:min(92vw,440px)}
dialog.confirmar-parada::backdrop{background:rgba(6,9,15,.72)}
dialog.confirmar-parada h2{margin:0 0 8px;font-size:1.15rem}
dialog.confirmar-parada .botones{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.mono{overflow-wrap:anywhere}  /* r7.3: huellas largas de /clave/ desbordaban a 390 px */
main a{overflow-wrap:anywhere}  /* r7.3: nombres de fichero largos (/clave/) desbordaban a 390 px */
@media(max-width:620px){.paso .val{white-space:normal;overflow-wrap:anywhere}}  /* r7.3: el valor de cada paso no se partía y desbordaba /vigilancia/ a 390 px */

/* 11/10/2026: resultados extensos en su propia fila, sin comprimir el titulo. */
.paso{grid-template-columns:20px minmax(0,1fr)}
.paso>*{min-width:0;overflow-wrap:anywhere}
.paso .val{grid-column:2;text-align:left;white-space:normal;overflow-wrap:anywhere}


/* Aviso de seguridad: estilo externo compatible con CSP. */
#aviso-seguridad { padding: .75rem 1rem; max-width: 75rem; margin: 1rem auto; overflow-wrap: anywhere; }