:root {
  --fondo: #f3f5f7; --tarjeta: #fff; --texto: #1c2733; --suave: #5b6b7a; --borde: #d5dce3;
  --primario: #0b6e4f; --primario-h: #095a41; --bien: #0b6e4f; --mal: #b3261e; --aviso: #8a5a00;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #12181e; --tarjeta: #1b242d; --texto: #e7edf2; --suave: #9bacba; --borde: #2d3a46;
          --primario: #2fb587; --primario-h: #27a076; --bien: #2fb587; --mal: #ff7b72; --aviso: #e3b341; }
}
[hidden] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto);
       font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.barra { display: flex; align-items: center; gap: 1.5rem; padding: .75rem 1.25rem;
         background: var(--tarjeta); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.barra nav { display: flex; gap: 1rem; flex: 1; }
.barra a { color: var(--primario); text-decoration: none; font-weight: 600; }
.salir { display: flex; align-items: center; gap: .75rem; margin: 0; }
.quien { color: var(--suave); font-size: .9rem; }
main { max-width: 860px; margin: 1.5rem auto; padding: 0 1rem; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px;
           padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.tarjeta.estrecha { max-width: 380px; margin: 3rem auto; }
.tarjeta.ancha { max-width: none; }
h1 { margin: 0 0 .5rem; font-size: 1.4rem; }
h2 { margin: 1.25rem 0 .5rem; font-size: 1.05rem; }
.ayuda { color: var(--suave); font-size: .9rem; margin: .25rem 0 1rem; }
code { background: var(--fondo); padding: 0 .3em; border-radius: 4px; }
label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .75rem; }
input[type=text], input[type=email], input[type=password], select {
  display: block; width: 100%; margin-top: .25rem; padding: .55rem .65rem; font: inherit;
  color: var(--texto); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 6px; }
input:focus, select:focus, button:focus-visible { outline: 2px solid var(--primario); outline-offset: 1px; }
.fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.app { border: 1px solid var(--borde); border-radius: 8px; padding: .75rem .9rem; }
.app.caida { opacity: .85; }
.app-cab { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: 1rem; }
.app-cab input { width: auto; margin: 0; }
fieldset.ramas { border: 1px solid var(--borde); border-radius: 6px; margin: 0 0 .25rem; padding: .4rem .7rem; }
fieldset.ramas legend { font-size: .85rem; color: var(--suave); padding: 0 .3rem; }
label.check { display: inline-block; margin: 0 1rem 0 0; font-weight: 500; }
label.check input { width: auto; display: inline; margin: 0 .25rem 0 0; }
button { font: inherit; cursor: pointer; border-radius: 6px; padding: .55rem 1rem; border: 1px solid var(--borde);
         background: var(--tarjeta); color: var(--texto); }
button.primario { background: var(--primario); border-color: var(--primario); color: #fff; font-weight: 600; }
button.primario:hover:not(:disabled) { background: var(--primario-h); }
button.enlace { border: 0; background: none; color: var(--primario); padding: 0; font-weight: 600; }
button:disabled { opacity: .55; cursor: not-allowed; }
.aviso { padding: .5rem .75rem; border-radius: 6px; margin: .5rem 0; font-size: .92rem; }
.aviso.error { color: var(--mal); border: 1px solid var(--mal); }
.resultados { list-style: none; margin: 0; padding: 0; }
.resultado { border-bottom: 1px solid var(--borde); padding: .6rem 0; }
.resultado:last-child { border-bottom: 0; }
.resultado .detalle { margin: .3rem 0; color: var(--suave); font-size: .9rem; }
.resultado button { margin-top: .25rem; }
.insignia { display: inline-block; margin-left: .5rem; padding: .1rem .55rem; border-radius: 999px;
            font-size: .82rem; font-weight: 600; border: 1px solid currentColor; }
.insignia.bien { color: var(--bien); } .insignia.mal { color: var(--mal); } .insignia.aviso { color: var(--aviso); }
.intento { margin-left: .5rem; color: var(--suave); font-size: .82rem; }
.tabla-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: .55rem .6rem; border-bottom: 1px solid var(--borde); }
th { color: var(--suave); font-weight: 600; white-space: nowrap; }