:root{
  --verde:#1f6f4a; --verde-2:#2b8f61; --rojo:#c0392b; --amarillo:#d9a300;
  --tinta:#1c2430; --gris:#6b7280; --linea:#e3e6ea; --fondo:#f6f7f9; --panel:#fff;
  --input:#fff; --topbar:#1f6f4a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --verde:#3aa876; --verde-2:#48c088; --rojo:#e06a5c; --amarillo:#e6b53d;
    --tinta:#e6e9ec; --gris:#98a2af; --linea:#2b3541; --fondo:#12171d; --panel:#1b232c;
    --input:#232c37; --topbar:#123c28;
  }
}
:root[data-theme="dark"]{
  --verde:#3aa876; --verde-2:#48c088; --rojo:#e06a5c; --amarillo:#e6b53d;
  --tinta:#e6e9ec; --gris:#98a2af; --linea:#2b3541; --fondo:#12171d; --panel:#1b232c;
  --input:#232c37; --topbar:#123c28;
}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--fondo);color:var(--tinta)}
a{color:var(--verde);text-decoration:none}
main{max-width:960px;margin:0 auto;padding:16px}
h1{font-size:1.4rem;margin:.2rem 0 1rem}
h2{font-size:1.1rem;margin:1.5rem 0 .6rem}

.topbar{background:var(--topbar);color:#fff;padding:10px 16px;display:flex;
  flex-wrap:wrap;gap:6px 14px;align-items:center}
.btn-tema{background:transparent;border:0;font-size:1rem;cursor:pointer;padding:0 4px;line-height:1}
.volver-admin{color:#ffe08a !important;font-weight:700}
.preview-bar{background:#8a5a00;color:#fff;text-align:center;padding:6px 10px;font-size:.88rem}
.preview-bar a{color:#fff;text-decoration:underline;margin-left:8px}
.topbar .brand{color:#fff;font-weight:700;font-size:1.05rem;margin-right:auto}
.topbar nav{display:flex;flex-wrap:wrap;gap:4px 14px}
.topbar nav a{color:#e7f4ec;font-size:.9rem}
.topbar nav a:hover{color:#fff;text-decoration:underline}
.topbar nav a.active{color:#fff;font-weight:700;border-bottom:2px solid #fff;padding-bottom:2px}
.badge{background:var(--rojo);color:#fff;border-radius:10px;padding:0 6px;font-size:.75rem}

.flash{background:#fef7e0;border:1px solid #f0d894;border-radius:8px;padding:8px 12px;margin-bottom:14px}
.flash p{margin:.2rem 0}

.card{background:var(--panel);border:1px solid var(--linea);border-radius:12px;
  padding:16px;margin-bottom:16px}
.grid{display:grid;gap:12px}
@media(min-width:640px){ .grid.cols-2{grid-template-columns:1fr 1fr} .grid.cols-3{grid-template-columns:repeat(3,1fr)} }

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:top}
th{color:var(--gris);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.tabla-scroll{overflow-x:auto}

label{display:block;font-size:.85rem;color:var(--gris);margin:.6rem 0 .2rem}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--linea);
  border-radius:8px;font:inherit;background:var(--input);color:var(--tinta)}
input[type=checkbox]{width:auto}
input:disabled{opacity:.5}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:40px}
.pw-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  background:transparent;border:0;font-size:1rem;cursor:pointer;padding:4px 6px;line-height:1}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row > *{flex:1;min-width:120px}

button,.btn{background:var(--verde);color:#fff;border:0;border-radius:8px;
  padding:9px 14px;font:inherit;cursor:pointer}
button.sec,.btn.sec{background:#fff;color:var(--verde);border:1px solid var(--verde)}
button.gris{background:var(--linea);color:var(--tinta)}
button.rojo{background:var(--rojo)}
button:disabled{opacity:.6;cursor:default}
.mini{padding:5px 9px;font-size:.82rem}

.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:600}
.pill.ok{background:#e4f6ec;color:var(--verde)}
.pill.warn{background:#fdf0d5;color:var(--amarillo)}
.pill.bad{background:#fbe4e1;color:var(--rojo)}
.pill.gris{background:#eef0f2;color:var(--gris)}

.muted{color:var(--gris);font-size:.87rem}
.big{font-size:1.6rem;font-weight:700}
.right{text-align:right}
details summary{cursor:pointer;color:var(--verde);font-size:.9rem}
details[open] summary{margin-bottom:8px}
.venc-hoy{color:var(--rojo);font-weight:700}
.venc-cerca{color:var(--amarillo);font-weight:600}

.auth{max-width:400px;margin:8vh auto}
.auth .card{padding:22px}
.auth h1{text-align:center}
.steps{font-size:.8rem;color:var(--gris);text-align:center;margin-bottom:10px}