/* Estilos del generador de matrícula. Tema UNO por defecto; Pronto sobrescribe variables. */
:root{
  --brand-yellow:#FDD201;
  --brand-accent:#002E6D;
  --brand-accent-hover:#001f4d;
  --brand-accent-text:#FFFFFF;
  --brand-accent-rgb:0,46,109;
  --brand-black:#1A1A1A;
  --ok-bg:#e8f6ec; --ok-text:#1e7e34; --ok-border:#bfe4c9;
  --err-bg:#fdecea; --err-text:#c0392b; --err-border:#f5c6c0;
  --border:#e4e2dd; --border-strong:#c7c4bd;
  --muted:#787468; --card-bg:#ffffff; --page-bg:#f5f4f0;
  --radius:14px; --radius-sm:9px;
  --font-heading:'Univers Next Extra Black','Univers Extra Black','Univers-ExtraBlack','Univers 95 Extra Black','Helvetica Neue',Arial,sans-serif;
  --font-heading-weight:800;
  --font-body:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-1:0 1px 2px rgba(20,18,10,.04), 0 2px 10px rgba(20,18,10,.05);
  --shadow-2:0 4px 20px rgba(20,18,10,.08);
  --focus-ring:var(--brand-accent);
  --topbar-photo:url('../img/uno-topbar.jpg');
}
:root[data-brand="pronto"]{
  --brand-accent:#FDD201;
  --brand-accent-hover:#e6bd00;
  --brand-accent-text:#1A1A1A;
  --brand-accent-rgb:253,210,1;
  --font-heading:'Baloo Bhai 2',system-ui,sans-serif;
  --font-heading-weight:700;
  --focus-ring:#1A1A1A;
  --topbar-photo:url('../img/pronto-topbar.jpg');
}
*{box-sizing:border-box;}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(var(--brand-accent-rgb),.10), transparent 60%),
    var(--page-bg);
  color:var(--brand-black); margin:0; padding:0 0 48px;
  font-size:14px; line-height:1.55;
}
.page{max-width:1280px; margin:0 auto; padding:0 28px;}
h1{font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:23px; margin:0 0 2px; letter-spacing:.01em;}
h2{font-size:15px; font-weight:600; margin:0 0 12px;}
.sub{color:var(--muted); font-size:13px; margin:0;}

.topbar{
  display:flex; align-items:center; gap:16px; padding:26px 28px;
  background:var(--card-bg); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-1); position:relative; margin-bottom:28px;
  overflow:hidden; min-height:96px;
}
.topbar-photo{position:absolute; inset:0; background-image:var(--topbar-photo); background-size:cover; background-position:center; opacity:.55; filter:saturate(1.05);}
.topbar-scrim{position:absolute; inset:0;
  background:
    linear-gradient(90deg, var(--card-bg) 0%, var(--card-bg) 40%, rgba(255,255,255,0) 82%),
    linear-gradient(180deg, rgba(var(--brand-accent-rgb),.16), rgba(var(--brand-accent-rgb),.16));
}
.topbar::after{content:'';position:absolute; left:0; right:0; bottom:-4px; height:4px;
  background:linear-gradient(90deg, var(--brand-accent), rgba(var(--brand-accent-rgb),.15)); z-index:2;}
.topbar-inner{max-width:1280px; margin:0 auto; width:100%; display:flex; align-items:center; gap:16px; position:relative; z-index:1;}
.topbar img{height:32px; width:auto;}

.tabs{display:inline-flex; gap:2px; margin-bottom:24px; background:#eceae4; border-radius:999px; padding:4px;}
.tab-btn{padding:9px 20px; border:none; background:none; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--muted); border-radius:999px; font-family:var(--font-body); transition:background .15s, color .15s;}
.tab-btn.active{color:var(--brand-accent-text); background:var(--brand-accent); box-shadow:var(--shadow-1);}
.tab-btn:not(.active):hover{color:var(--brand-black); background:rgba(0,0,0,.04);}
.panel{display:none;}
.panel.active{display:block;}
.card{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; margin-bottom:18px; box-shadow:var(--shadow-1);}

.stat-row{display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
.stat{background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:14px 18px; min-width:130px; display:flex; align-items:center; gap:12px; box-shadow:var(--shadow-1);}
.stat .icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#f1f0eb; color:var(--muted);}
.stat.ok .icon{background:var(--ok-bg); color:var(--ok-text);}
.stat.err .icon{background:var(--err-bg); color:var(--err-text);}
.stat .num{font-size:21px; font-weight:var(--font-heading-weight); line-height:1.1; font-family:var(--font-heading);}
.stat .lbl{font-size:11.5px; color:var(--muted); font-weight:500;}
.stat.ok .num{color:var(--ok-text);}
.stat.err .num{color:var(--err-text);}

table{border-collapse:collapse; width:100%;}
.reg-table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-1); background:var(--card-bg);}
.reg-table{min-width:1600px;}
.reg-table th{background:#faf9f6; text-align:left; padding:10px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; position:sticky; top:0; z-index:1;}
.reg-table td{padding:6px; border-bottom:1px solid var(--border); vertical-align:middle;}
.reg-table tbody tr:hover td{background:#fbfaf7;}
.reg-table th.auto, .reg-table td.auto{background:#f3f2ed;}
.reg-table tbody tr:hover td.auto{background:#efeee7;}
.reg-table input, .reg-table select{
  width:100%; min-width:110px; padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-size:13px; font-family:var(--font-body); background:#fff; transition:border-color .12s, box-shadow .12s;
}
.reg-table input:focus, .reg-table select:focus{outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb),.25);}
.reg-table td.auto-val{color:#3f3c35; font-size:13px; padding:6px 9px; white-space:nowrap; font-weight:500;}
.badge{display:inline-block; padding:4px 12px; border-radius:999px; font-size:11.5px; font-weight:700; white-space:nowrap; letter-spacing:.01em;}
.badge.ok{background:var(--ok-bg); color:var(--ok-text); border:1px solid var(--ok-border);}
.badge.err{background:var(--err-bg); color:var(--err-text); border:1px solid var(--err-border); cursor:help;}
.badge.empty{background:#f1f0eb; color:var(--muted); border:1px solid var(--border);}
.row-actions{display:flex; gap:4px;}
.icon-btn{border:1px solid var(--border); background:#fff; border-radius:8px; width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; padding:0; transition:background .12s,border-color .12s;}
.icon-btn:hover{background:#f5f4f0; border-color:var(--border-strong); color:var(--brand-black);}
.btn{border:1px solid var(--border-strong); background:#fff; border-radius:var(--radius-sm); padding:10px 18px; font-size:13px; font-weight:600; cursor:pointer; font-family:var(--font-body); color:var(--brand-black); transition:background .12s, box-shadow .12s, transform .05s;}
.btn:hover{background:#f5f4f0;}
.btn:active{transform:scale(.98);}
.btn.primary{background:var(--brand-accent); border-color:var(--brand-accent); color:var(--brand-accent-text); box-shadow:var(--shadow-1);}
.btn.primary:hover{background:var(--brand-accent-hover); border-color:var(--brand-accent-hover);}
.btn.small{padding:7px 12px; font-size:12px;}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.toolbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; gap:12px; flex-wrap:wrap;}
.toolbar-left{display:flex; gap:8px; flex-wrap:wrap;}
.help-box{background:#fbf8ee; border:1px solid #ecdfa8; border-radius:var(--radius); padding:12px 16px; font-size:12.5px; color:#5c5230; margin-bottom:18px; display:flex; gap:10px; align-items:flex-start;}
.help-box .dot{width:6px; height:6px; border-radius:50%; background:#c9a227; margin-top:5px; flex-shrink:0;}
.cat-tabs{display:flex; gap:8px; margin-bottom:16px;}
.cat-tab-btn{padding:8px 16px; border:1px solid var(--border); background:#fff; border-radius:999px; cursor:pointer; font-size:13px; font-weight:600; font-family:var(--font-body); transition:background .12s,color .12s;}
.cat-tab-btn.active{background:var(--brand-black); color:#fff; border-color:var(--brand-black);}
.cat-panel{display:none;}
.cat-panel.active{display:block;}
.cat-table-wrap{max-height:440px; overflow-y:auto; border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; box-shadow:var(--shadow-1);}
.cat-table th{position:sticky; top:0; background:#faf9f6; text-align:left; padding:10px 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--border);}
.cat-table td{padding:5px 6px; border-bottom:1px solid var(--border);}
.cat-table tbody tr:hover td{background:#fbfaf7;}
.cat-table input{width:100%; padding:7px 9px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body);}
.cat-table input:focus{outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb),.25);}
.search-input{padding:9px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:13px; font-family:var(--font-body); width:260px;}
.search-input:focus{outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb),.25);}
.warn-note{font-size:12px; color:var(--muted); margin-top:8px;}
.save-status{font-size:12px; color:var(--muted); margin-left:8px; font-weight:500;}
.field-err{font-size:11px; color:var(--err-text); margin-top:2px;}
.toast{position:fixed; bottom:22px; right:22px; background:var(--brand-black); color:#fff; padding:13px 20px; border-radius:10px; font-size:13px; box-shadow:var(--shadow-2); z-index:999; opacity:0; transform:translateY(8px); transition:all .25s;}
.toast.show{opacity:1; transform:translateY(0);}
.lock-wrap{max-width:380px; margin:64px auto; text-align:center; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius); padding:40px 32px; box-shadow:var(--shadow-2);}
.lock-wrap .icon-badge{width:52px; height:52px; border-radius:50%; background:rgba(var(--brand-accent-rgb),.16); color:var(--brand-black); display:flex; align-items:center; justify-content:center; margin:0 auto 16px;}
.lock-wrap input{width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font-size:14px; font-family:var(--font-body); margin:16px 0 8px; text-align:center;}
.lock-wrap input + input{margin-top:0;}
.lock-wrap input:focus{outline:none; border-color:var(--brand-accent); box-shadow:0 0 0 3px rgba(var(--brand-accent-rgb),.25);}

/* Antes eran estilos en línea; movidos aquí para permitir una CSP estricta. */
.lock-wrap h2{margin-bottom:4px;}
.lock-wrap .field-err{min-height:16px;}
.lock-wrap .btn{width:100%; margin-top:6px;}
.toolbar.cat-toolbar{margin-bottom:8px;}
.cat-toolbar .cat-tabs{margin-bottom:0;}
.w-14{width:14%;} .w-16{width:16%;} .w-18{width:18%;} .w-26{width:26%;}
.w-32{width:32%;} .w-38{width:38%;} .w-60{width:60%;}

/* Accesibilidad: foco visible solo con teclado (no altera el uso con ratón). */
.btn:focus-visible, .tab-btn:focus-visible, .cat-tab-btn:focus-visible, .icon-btn:focus-visible{
  outline:2px solid var(--focus-ring); outline-offset:2px;
}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}