:root {
  --fondo: #f5f3ef;
  --tarjeta: #fff;
  --texto: #1f1c18;
  --tenue: #6f675e;
  --borde: #e2ddd4;
  --primario: #7a4e24;
  --primario-2: #5e3a19;
  --ok: #2f7d4f;
  --adv: #a76b00;
  --error: #b3261e;
  --radio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--primario); }
h1 { font-size: 1.6rem; margin: .2em 0 .6em; }
h2 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
h3 { font-size: 1rem; margin: 1em 0 .4em; }
small, .tenue { color: var(--tenue); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1.2rem; background: var(--primario-2); color: #fff; flex-wrap: wrap; }
.topbar a, .topbar .link { color: #fff; text-decoration: none; opacity: .85; }
.topbar .marca { font-weight: 700; opacity: 1; font-size: 1.1rem; }
.topbar nav { display: flex; gap: 1rem; align-items: center; }
.topbar a.on, .topbar a:hover { opacity: 1; text-decoration: underline; }
.subbar { display: flex; align-items: center; gap: 1.2rem; padding: .5rem 1.2rem; background: #fff; border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.subbar nav { display: flex; gap: .4rem; flex-wrap: wrap; }
.subbar nav a { text-decoration: none; padding: .3rem .7rem; border-radius: 99px; color: var(--texto); }
.subbar nav a.on { background: var(--primario); color: #fff; }
.subbar nav a:hover:not(.on) { background: var(--fondo); }

.contenedor { max-width: 1180px; margin: 0 auto; padding: 1.2rem; }
.angosto { max-width: 460px; margin: 0 auto; }
.login { margin-top: 8vh; text-align: center; }
.login form { text-align: left; }

.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.formulario label { display: flex; flex-direction: column; gap: .25rem; font-size: .88rem; color: var(--tenue); margin-bottom: .7rem; }
.formulario label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--texto); }
input, select, textarea { font: inherit; color: var(--texto); padding: .5rem .6rem; border: 1px solid var(--borde); border-radius: 8px; background: #fff; width: 100%; }
input[type=checkbox] { width: auto; }
input[type=color] { padding: 2px; height: 2.4rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primario) 45%, transparent); border-color: var(--primario); }
fieldset { border: 1px solid var(--borde); border-radius: var(--radio); margin: 0 0 1rem; padding: .6rem 1rem .2rem; }
legend { font-weight: 600; padding: 0 .3rem; }
.fila { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.fila > label { flex: 1 1 140px; }
.fila > label.crece { flex: 3 1 220px; }
.fila > .btn { margin-bottom: .7rem; }
.inline { display: inline; margin: 0; }

.btn { display: inline-flex; align-items: center; gap: .3rem; padding: .55rem 1rem; border-radius: 8px; border: 1px solid var(--borde); background: #fff; color: var(--texto); font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--primario); }
.btn.primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn.primario:hover { background: var(--primario-2); }
.btn.peligro { color: var(--error); border-color: color-mix(in srgb, var(--error) 40%, white); }
.btn.ghost { background: transparent; }
.btn.chico { padding: .25rem .6rem; font-size: .85rem; }
button.link { background: none; border: 0; font: inherit; cursor: pointer; padding: 0; }

.aviso { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid; }
.aviso.ok { background: #e8f5ed; border-color: #b9dfc8; color: var(--ok); }
.aviso.info { background: #eef3fb; border-color: #c8d7f0; color: #2a4f8a; }
.aviso.adv { background: #fff6e0; border-color: #f0d79a; color: var(--adv); }
.aviso.error { background: #fdecea; border-color: #f2bdb8; color: var(--error); }
.nota { font-size: .86rem; color: var(--tenue); margin: .2rem 0 .8rem; }
.vacio { color: var(--tenue); text-align: center; padding: 1.5rem; }
.checks { list-style: none; padding: 0; }
.checks .ok { color: var(--ok); } .checks .mal { color: var(--error); } .checks .adv { color: var(--adv); }

.grid-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.sorteo-card { text-decoration: none; color: inherit; transition: transform .1s, box-shadow .1s; }
.sorteo-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.sorteo-card h3 { margin: 0 0 .3rem; }
.meta { color: var(--tenue); font-size: .86rem; margin: .2rem 0; }
.barra { height: 6px; background: var(--fondo); border-radius: 99px; overflow: hidden; margin: .6rem 0 .2rem; }
.barra span { display: block; height: 100%; background: var(--primario); }

.etiqueta { display: inline-block; font-size: .78rem; padding: .1rem .55rem; border-radius: 99px; background: var(--fondo); border: 1px solid var(--borde); }
.etiqueta.adv { background: #fff6e0; color: var(--adv); border-color: #f0d79a; }
.etiqueta.error { background: #fdecea; color: var(--error); border-color: #f2bdb8; }
.e-entregada { background: #eef3fb; color: #2a4f8a; border-color: #c8d7f0; }
.e-liquidada { background: #e8f5ed; color: var(--ok); border-color: #b9dfc8; }

.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.stat { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); padding: .7rem .9rem; }
.stat b { display: block; font-size: 1.5rem; }
.stat span { font-size: .8rem; color: var(--tenue); }
.stat.destacado { background: var(--primario); color: #fff; border-color: var(--primario); }
.stat.destacado span { color: #f3e6d8; }

.dos-col { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.4rem; }
.dos-col h2:first-child { margin-top: 0; }
@media (max-width: 860px) { .dos-col { grid-template-columns: 1fr; } }

.previa { display: flex; align-items: center; gap: .8rem; margin: -.3rem 0 .8rem; }
.previa img { max-width: 220px; max-height: 90px; border-radius: 6px; border: 1px solid var(--borde); }

details.peligro { margin-top: 1.5rem; border: 1px dashed color-mix(in srgb, var(--error) 40%, white); border-radius: var(--radio); padding: .6rem 1rem; }
details.peligro summary { cursor: pointer; color: var(--error); }
details.peligro form { margin-top: .8rem; }
details.plegable summary { cursor: pointer; font-weight: 600; }
details.plegable form { margin-top: .8rem; }

.filtros { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.filtros input[type=search] { flex: 1 1 260px; width: auto; }
.filtros select { width: auto; }

.tabla-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); }
table.lista { width: 100%; border-collapse: collapse; }
table.lista th, table.lista td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
table.lista th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); background: #faf8f5; }
table.lista tr:last-child td { border-bottom: 0; }
table.lista tr.anulado td { opacity: .55; text-decoration: line-through; }
table.lista tr.anulado td:last-child { text-decoration: none; opacity: 1; }
.num-tabla a { font-weight: 700; font-variant-numeric: tabular-nums; text-decoration: none; }
.num-grande { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: .25rem; min-width: 260px; }
.chip { font-size: .78rem; font-variant-numeric: tabular-nums; padding: .05rem .4rem; border-radius: 5px; background: var(--fondo); }
.chip.hit { background: #ffd54a; font-weight: 700; }
.acciones-fila { display: flex; gap: .4rem; }
details.anular summary { list-style: none; }
details.anular form { display: flex; gap: .3rem; margin-top: .4rem; }

.cabecera-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cabecera-pagina h2 { margin: 0 0 .6rem; }
.paginador { display: flex; gap: .4rem; }

table.hoja { width: 100%; border-collapse: collapse; }
table.hoja th { font-size: .78rem; text-transform: uppercase; color: var(--tenue); text-align: left; padding: .4rem; }
table.hoja td { padding: .3rem; border-top: 1px solid var(--borde); }
table.hoja td.numero { color: #fff; font-weight: 800; text-align: center; width: 90px; border-radius: 6px; font-variant-numeric: tabular-nums; }
table.hoja tr.ganador td { background: #fff8d6; }
table.hoja select { min-width: 120px; }
.acciones { display: flex; gap: .6rem; position: sticky; bottom: 0; padding: .8rem 0; background: var(--fondo); }