:root { --fondo:#fafaf7; --panel:#fff; --tinta:#1c1f23; --suave:#5d636b; --linea:#d9d9d2; --marca:#11731f; --marca-t:#fff; --error:#a4262c; --ok:#1e6b3a; --aviso:#8a5a00; }
@media (prefers-color-scheme: dark) { :root { --fondo:#14171a; --panel:#1b1f23; --tinta:#eceae4; --suave:#a2a7ad; --linea:#2c3136; --marca:#4fd65f; --marca-t:#06210b; --error:#ff8a8f; --ok:#7fd49b; --aviso:#e8b960; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--fondo); color:var(--tinta); font:17px/1.5 system-ui,"Segoe UI",Roboto,Arial,sans-serif; }
header.barra { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; border-bottom:1px solid var(--linea); flex-wrap:wrap; }
header.barra a.logo { font-weight:700; color:inherit; text-decoration:none; display:flex; align-items:center; gap:10px; }
header.barra a.logo img { width:30px; height:30px; display:block; }
.marca-grande { width:88px; height:88px; display:block; margin:0 0 20px; }
header.barra nav { display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:.95rem; }
header.barra nav a { color:var(--suave); text-decoration:none; } header.barra nav a:hover { color:var(--tinta); text-decoration:underline; }
main { max-width:760px; margin:0 auto; padding:48px 20px 40px; } main.ancho { max-width:1040px; }
main a:not(.boton) { color:var(--marca); }
h1 { margin:0 0 8px; font-size:1.9rem; letter-spacing:-.01em; } h2 { margin:32px 0 8px; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--suave); font-weight:600; }
.lema { color:var(--suave); margin:0 0 32px; } p.nota { color:var(--suave); font-size:.92rem; }
ul.lista { list-style:none; margin:0; padding:0; border-top:1px solid var(--linea); } ul.lista li { border-bottom:1px solid var(--linea); }
ul.lista a { display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:16px 4px; color:inherit; text-decoration:none; }
ul.lista a:hover strong { color:var(--marca); text-decoration:underline; } ul.lista span { color:var(--suave); font-size:.95rem; text-align:right; }
form.campos { display:grid; gap:14px; max-width:420px; } label { display:grid; gap:4px; font-size:.92rem; color:var(--suave); }
input[type=text], input[type=password] { font:inherit; padding:10px 12px; border:1px solid var(--linea); border-radius:4px; background:var(--panel); color:var(--tinta); }
input:focus-visible, button:focus-visible, a:focus-visible { outline:2px solid var(--marca); outline-offset:2px; }
button, .boton { font:inherit; font-weight:600; padding:9px 16px; border:1px solid var(--marca); background:var(--marca); color:var(--marca-t); border-radius:4px; cursor:pointer; text-decoration:none; display:inline-block; }
button.sec, .boton.sec { background:transparent; color:var(--marca); } button.peligro { background:transparent; border-color:var(--error); color:var(--error); }
button.mini { padding:4px 9px; font-size:.82rem; }
.acciones { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.avisos { margin:0 0 20px; display:grid; gap:8px; } .aviso { padding:10px 14px; border-left:3px solid var(--aviso); background:var(--panel); border-radius:2px; }
.aviso.error { border-color:var(--error); } .aviso.ok { border-color:var(--ok); }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--linea); vertical-align:middle; }
th { color:var(--suave); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; }
.etiqueta { display:inline-block; padding:1px 8px; border:1px solid var(--linea); border-radius:10px; font-size:.78rem; color:var(--suave); } .etiqueta.pend { border-color:var(--aviso); color:var(--aviso); } .etiqueta.susp { border-color:var(--error); color:var(--error); }
.codigo { font:700 2.2rem/1 ui-monospace,Consolas,monospace; letter-spacing:.18em; margin:6px 0; }
form.en-linea { display:inline; } .tabla-scroll { overflow-x:auto; }
footer { max-width:760px; margin:0 auto; padding:0 20px 40px; color:var(--suave); font-size:.85rem; }
@media (max-width:520px) { main { padding-top:28px; } ul.lista a { flex-direction:column; gap:2px; } ul.lista span { text-align:left; } }