:root { --marca:#0F6E7C; --marca2:#0B5560; --tinta:#14262B; --fondo:#F4F8F9; --linea:#D6E2E5; --alerta:#B3261E; --ok:#1F7A4D; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--tinta); background:var(--fondo); }
main { max-width:1100px; margin:0 auto; padding:16px; }
h1 { font-size:1.5rem; margin:.2em 0 .6em; } h2 { font-size:1.2rem; }
.barra { background:var(--marca); color:#fff; display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:10px 16px; }
.barra a { color:#fff; text-decoration:none; margin-right:14px; } .barra a:hover { text-decoration:underline; }
.marca { font-weight:700; } .usuario { margin-left:auto; display:flex; gap:10px; align-items:center; flex-wrap:wrap; font-size:.9rem; }
.tarjeta { background:#fff; border:1px solid var(--linea); border-radius:10px; padding:20px; margin:16px auto; }
.angosta { max-width:440px; }
label { display:block; margin:12px 0 4px; font-weight:600; }
input, select { width:100%; padding:10px; border:1px solid #9BB; border-radius:6px; font:inherit; background:#fff; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline:3px solid #38C3D2; outline-offset:1px; }
button, .boton { display:inline-block; margin-top:14px; padding:10px 18px; border:0; border-radius:6px; background:var(--marca); color:#fff; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
button:hover, .boton:hover { background:var(--marca2); }
.secundario { background:#fff; color:var(--marca); border:1px solid var(--marca); } .secundario:hover { background:#E6F3F5; }
.chico { padding:4px 10px; margin:2px; font-size:.82rem; }
.enlace { background:none; color:var(--marca); text-decoration:underline; padding:0; margin-top:8px; font-weight:400; }
.en-linea { display:inline; } .en-linea select { width:auto; padding:4px 8px; } .en-linea button { margin:0; padding:4px 12px; }
.alerta { background:#FBE3E1; color:#7A1712; border-left:4px solid var(--alerta); padding:8px 12px; border-radius:4px; }
.aviso { background:#E4F4EA; border-left:4px solid var(--ok); padding:8px 12px; border-radius:4px; }
.nota { color:#4A6168; font-size:.9rem; }
.oculto { position:absolute; left:-9999px; }
.qr { width:240px; max-width:100%; margin:12px auto; background:#fff; } .qr svg { width:100%; height:auto; display:block; }
code { background:#EEF3F4; padding:2px 6px; border-radius:4px; } .grande { font-size:1.4rem; letter-spacing:.05em; }
.codigos { columns:2; list-style:none; padding:0; } .codigos li { margin:6px 0; }
.tabla-envoltura { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.9rem; }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--linea); vertical-align:top; } th { background:#EEF3F4; }
.detalle { max-width:320px; word-break:break-word; font-family:ui-monospace, monospace; font-size:.78rem; }
.etq { background:#E6F3F5; color:var(--marca2); padding:1px 6px; border-radius:10px; font-size:.75rem; } .acciones { white-space:nowrap; }
@media (max-width:600px) { .codigos { columns:1; } .usuario { margin-left:0; } }