:root{--primary:#C9C7E8;--blue:#0D6EFD;--accent:#FFD966;--link:#006BA8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Merriweather',Georgia,serif;color:#000;background:#fff;line-height:1.5}
h1,h2,h3,label,th,button,.badge,.btn,.stat,.msg{font-family:'Montserrat',system-ui,sans-serif}
header{background:var(--primary);padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
header img{height:clamp(44px,10vw,64px);width:auto}
header h1{margin:0;font-size:clamp(1.05rem,4vw,1.4rem);font-weight:800}
header p{margin:0;font-size:clamp(.7rem,2.6vw,.85rem)}
header .spacer{flex:1}
header a.nav{color:#000;font-family:'Montserrat';font-weight:700;font-size:.8rem;text-decoration:none;padding:8px 14px;border-radius:20px;background:#fff}
main{max-width:1100px;margin:20px auto;padding:0 14px}
.card{background:#fff;border:2px solid var(--primary);border-radius:20px;padding:clamp(14px,4vw,24px);margin-bottom:20px}
h2{margin:0 0 14px;font-size:1.1rem}
form,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
label{display:flex;flex-direction:column;font-size:.8rem;font-weight:700;gap:4px}
input,select,textarea{font:inherit;font-size:16px;padding:12px;border:1.5px solid #999;border-radius:12px;width:100%;background:#fff}
input:focus,select:focus,button:focus-visible{outline:3px solid var(--blue);border-color:var(--blue)}
.btn{background:var(--accent);color:#000;border:0;border-radius:40px;padding:13px 26px;font-weight:700;font-size:.95rem;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
.btn:hover{filter:brightness(.95)}
.btn.sec{background:var(--link);color:#fff;border-radius:20px}
.btn.ghost{background:#eee;border-radius:20px}
.btn.danger{background:#b00020;color:#fff;border-radius:20px}
.btn.small{padding:8px 14px;font-size:.8rem}
.actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.msg{font-size:.85rem;font-weight:700}
.msg.err{color:#b00020}.msg.ok{color:#0a7a2f}
.note{grid-column:1/-1;font-size:.85rem;background:#f4f3fb;border-radius:12px;padding:8px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.note[hidden]{display:none}
.note button{border:0;background:none;color:var(--link);font-weight:700;cursor:pointer;font-size:.8rem}
.summary{background:#f1fbf4;border-color:#9bd8ae}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;font-size:.9rem}
.summary dt{font-family:'Montserrat';font-weight:700}
.summary dd{margin:0;word-break:break-word}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.toolbar .tools{display:flex;gap:10px;flex-wrap:wrap;flex:1;justify-content:flex-end}
.toolbar .tools input,.toolbar .tools select{width:auto;flex:1;min-width:140px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.stat{background:var(--primary);border-radius:14px;padding:8px 14px;font-size:.8rem;flex:1;min-width:110px}
.stat b{display:block;font-size:1.15rem}
.stat.warn{background:var(--accent)}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{background:var(--primary);text-align:left;padding:10px;font-size:.8rem;white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid #ddd;vertical-align:top}
.badge{padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;background:#e3f2e8;white-space:nowrap}
.badge.pp{background:var(--accent)}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
dialog{border:0;border-radius:20px;padding:22px;width:min(94vw,460px);box-shadow:0 10px 40px #0005}
dialog::backdrop{background:#0008}
dialog h3{margin:0 0 10px}
dialog .actions{margin-top:16px}
.warnbox{background:var(--accent);border-radius:12px;padding:10px 14px;font-size:.88rem;margin-bottom:12px}
.preview{max-width:100%;max-height:50vh;border-radius:12px;display:block;margin:10px auto}
footer{text-align:center;font-size:.75rem;padding:20px 16px;background:#000;color:#fff}
footer .legal{max-width:760px;margin:12px auto 0;font-size:.68rem;line-height:1.5;color:#ccc;border-top:1px solid #444;padding-top:12px}
footer .legal a{color:var(--accent)}
.login{max-width:380px;margin:40px auto}
.login form{grid-template-columns:1fr}

/* Móvil: la tabla se convierte en tarjetas */
@media (max-width:720px){
  table.cards thead{display:none}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards tr{border:1.5px solid var(--primary);border-radius:14px;margin-bottom:12px;padding:8px 4px}
  table.cards td{border:0;padding:5px 10px;display:flex;justify-content:space-between;gap:12px;text-align:right}
  table.cards td::before{content:attr(data-label);font-family:'Montserrat';font-weight:700;font-size:.75rem;text-align:left;flex-shrink:0}
  table.cards td.acts{justify-content:flex-end}
  table.cards td.acts::before{content:none}
  .toolbar .tools{justify-content:stretch}
  .toolbar .tools>*{flex:1 1 100%}
  .btn{width:100%}
  .actions .btn{flex:1}
  .row-actions .btn{width:auto}
}