@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wdth,wght@12..96,75..100,600..800&family=Onest:wght@400;500;600;700&family=Martian+Mono:wght@500&family=Source+Serif+4:ital,opsz,wght@0,8..60,600;0,8..60,700;1,8..60,500;1,8..60,700&display=swap");

:root {
  --fondo: #FBF1D8; --tarjeta: #FFFDF7; --borde: #E2D3A6; --linea: #EEE2BD; --tinta: #0C1A47; --sub: #394468; --tenue: #5F6A8E;
  --banda: #0B1946; --oro: #F4C451; --rojo: #C0262D; --rojo2: #A11F25; --azul: #2B49B0; --ok: #0A5C52; --ok-f: #D8F0EA; --av: #7A4700; --av-f: #FBE7C2;
  --inst: #15264D;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.5 Onest, system-ui, sans-serif; }
a { color: var(--azul); } a:hover { color: #14276F; }
h1 { font: 800 clamp(28px, 4vw, 38px)/1.1 "Bricolage Grotesque", system-ui, sans-serif; margin: 0; letter-spacing: -.01em; }
h2 { font: 700 20px/1.2 "Bricolage Grotesque", system-ui, sans-serif; margin: 0; }
h3 { font: 600 11px/1 "Martian Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); margin: 0 0 10px; }
.sub { color: var(--sub); margin: 6px 0 0; }
.k { font: 500 10px/1.2 "Martian Mono", monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.tenue { color: var(--tenue); font-size: 14px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.band { background: var(--banda); color: #F1F4FF; padding: 12px clamp(16px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.band.inst { background: var(--inst); }
.marca { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.marca b { font: 800 20px/1.1 "Bricolage Grotesque", system-ui, sans-serif; display: block; }
.marca small { font-size: 12px; opacity: .85; display: block; }
.sello { background: var(--oro); color: var(--tinta); border-radius: 99px; padding: 6px 14px; font-weight: 700; font-size: 14px; }
.con { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); border-radius: 99px; padding: 5px 12px 5px 8px; font-size: 13px; font-weight: 600; }
.quien { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 14px; }
.av { width: 36px; height: 36px; border-radius: 50%; background: #FBF1D8; color: var(--inst); display: grid; place-items: center; font-weight: 700; flex: none; }
.mono { display: grid; place-items: center; color: #fff; font: 800 15px/1 "Bricolage Grotesque", system-ui, sans-serif; border-radius: 50%; flex: none; border: 2px solid rgba(255,255,255,.7); }

.card { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px; padding: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 99px; font: 600 15px/1 Onest, system-ui, sans-serif; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; }
.btn-1 { background: var(--rojo); color: #fff; } .btn-1:hover { background: var(--rojo2); color: #fff; }
.btn-2 { background: var(--tarjeta); color: var(--tinta); border: 1.5px solid var(--borde); } .btn-2:hover { background: #F3E7C6; color: var(--tinta); }
.btn-v { background: var(--inst); color: #fff; } .btn-v:hover { filter: brightness(1.1); color: #fff; }
.btn.chico { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.est { display: inline-flex; align-items: center; border-radius: 99px; padding: 3px 10px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.e-ok { background: var(--ok-f); color: var(--ok); } .e-warn { background: var(--av-f); color: var(--av); } .e-no { background: #F3E7C6; color: var(--sub); }

label.c { display: flex; flex-direction: column; gap: 5px; font-size: 14px; font-weight: 600; }
.in { font: 500 15px/1.3 Onest, system-ui, sans-serif; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--borde); background: #fff; color: var(--tinta); min-height: 44px; width: 100%; }
.in:focus, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #7FA0FF; outline-offset: 2px; }
textarea.in { min-height: 90px; resize: vertical; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--tinta); flex: none; }
.aviso { display: flex; gap: 10px; align-items: flex-start; border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.aviso.mal { background: #FBE3E3; color: #8A1C21; } .aviso.bien { background: var(--ok-f); color: var(--ok); } .aviso.info { background: var(--av-f); color: #3A2600; }

.tabla { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabla th { text-align: left; font: 500 10px/1.3 "Martian Mono", monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); padding: 10px; border-bottom: 1.5px solid var(--tinta); white-space: nowrap; }
.tabla td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla .c { text-align: center; }
.caja-tabla { overflow-x: auto; }
.barra { height: 8px; border-radius: 99px; background: #EFE3BF; overflow: hidden; width: 110px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.barra i { display: block; height: 100%; background: var(--inst); }

.dialogo { position: fixed; inset: 0; background: rgba(12,26,71,.45); display: grid; place-items: center; padding: 16px; z-index: 50; }
.dialogo > div { background: var(--tarjeta); border-radius: 20px; padding: 22px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinta); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; z-index: 60; max-width: calc(100% - 32px); }
.enlace-caja { display: flex; gap: 8px; align-items: center; background: #fff; border: 1.5px dashed #C9B47A; border-radius: 12px; padding: 10px; word-break: break-all; font: 500 13px/1.4 "Martian Mono", monospace; }
.pie { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--sub); padding: 18px; }