/* MattIA TicketS — paleta MSC (dorado #EED484, azul #135193/#1B365D, negro #222221, rojo #A6192E, verde #00685E) */
:root {
  --dorado:#EED484; --azul:#135193; --azul-oscuro:#1B365D; --negro:#222221;
  --rojo:#A6192E; --verde:#00685E; --gris:#6b7280; --fondo:#f4f6f9; --blanco:#fff;
  --borde:#e2e6ec; --sombra:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
}
* { box-sizing:border-box; }
body { margin:0; background:var(--fondo); color:var(--negro);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

.barra { display:flex; align-items:center; gap:18px; padding:10px 20px; background:var(--azul-oscuro);
  color:#fff; position:sticky; top:0; z-index:20; flex-wrap:wrap; }
.marca { font-size:18px; letter-spacing:.3px; display:flex; align-items:center; gap:8px; }
.marca b { color:var(--dorado); }
.punto { width:10px; height:10px; border-radius:50%; background:var(--dorado); box-shadow:0 0 0 4px rgba(238,212,132,.25); }
.barra nav { display:flex; gap:4px; flex-wrap:wrap; }
.barra nav a { color:#dbe3ee; text-decoration:none; padding:6px 10px; border-radius:6px; font-size:14px; }
.barra nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
.barra nav a.activa { background:var(--azul); color:#fff; }
.usuario { margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; }
.usuario .rol { background:var(--dorado); color:var(--negro); padding:2px 8px; border-radius:10px; text-transform:uppercase; font-size:11px; }
.usuario .hora { font-variant-numeric:tabular-nums; color:#c9d5e6; }
.salir { color:#ffd9de; text-decoration:none; }

.contenido { max-width:1280px; margin:20px auto; padding:0 18px 40px; }
h1 { font-size:22px; margin:6px 0 14px; }
h2 { font-size:16px; margin:18px 0 8px; color:var(--azul-oscuro); display:flex; align-items:center; gap:10px; }
h3 { font-size:14px; color:var(--gris); margin:14px 0 6px; }
.sub { color:var(--gris); margin:0 0 14px; }

.tarjetas { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.tarjeta { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:14px; box-shadow:var(--sombra);
  display:flex; flex-direction:column; gap:4px; }
.tarjeta .etiqueta { font-size:12px; color:var(--gris); text-transform:uppercase; letter-spacing:.4px; }
.tarjeta .valor { font-size:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.valor.verde { color:var(--verde); } .valor.rojo { color:var(--rojo); } .valor.dorado { color:#a9822a; }

.dos-columnas { display:grid; grid-template-columns:1.15fr 1fr; gap:16px; }
@media (max-width:960px){ .dos-columnas { grid-template-columns:1fr; } }
.bloque { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; padding:16px; box-shadow:var(--sombra); }

table.datos { width:100%; border-collapse:collapse; }
table.datos th { text-align:left; color:var(--gris); font-weight:500; font-size:13px; padding:6px 8px 6px 0; width:42%; vertical-align:top; }
table.datos td { padding:6px 0; }

table.lista { width:100%; border-collapse:collapse; font-size:14px; }
table.lista th { text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.3px; color:var(--gris);
  border-bottom:1px solid var(--borde); padding:6px 8px; }
table.lista td { padding:7px 8px; border-bottom:1px solid #f1f3f7; vertical-align:top; }
table.lista.ancha { background:var(--blanco); border:1px solid var(--borde); border-radius:12px; overflow:hidden; }
tr.descartado { opacity:.5; text-decoration:line-through; }
a { color:var(--azul); }
.mini { font-size:12px; color:var(--gris); }
.vacio { color:var(--gris); font-style:italic; text-align:center; padding:14px; }

.chip { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.chip.verde { background:#e6f2ef; color:var(--verde); }
.chip.rojo { background:#fbe9ec; color:var(--rojo); }
.chip.dorado { background:#fdf5e0; color:#8a6a13; }
.chip.gris { background:#eef0f4; color:var(--gris); }
.vivo { font-size:11px; color:var(--verde); background:#e6f2ef; padding:2px 8px; border-radius:10px; }
.vivo::before { content:"● "; }

.consola { background:#0f172a; color:#c9f1e5; padding:12px; border-radius:8px; font-size:12.5px;
  overflow:auto; max-height:300px; white-space:pre-wrap; }
.oculto { display:none; }

.aviso { padding:10px 14px; border-radius:8px; margin:0 0 14px; font-size:14px; }
.aviso.ok { background:#e6f2ef; color:var(--verde); border:1px solid #bfe0da; }
.aviso.error { background:#fbe9ec; color:var(--rojo); border:1px solid #f0c9d0; }

button, .boton { background:var(--blanco); border:1px solid var(--borde); color:var(--azul-oscuro); padding:8px 14px;
  border-radius:8px; cursor:pointer; font-size:14px; text-decoration:none; display:inline-block; }
button:hover, .boton:hover { border-color:var(--azul); }
button.primario { background:var(--azul); border-color:var(--azul); color:#fff; }
button.primario:hover { background:var(--azul-oscuro); }
button.peligro { background:var(--rojo); border-color:var(--rojo); color:#fff; }

form.formulario, form.filtros { display:flex; flex-direction:column; gap:12px; }
form.filtros { flex-direction:row; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
form.formulario.compacto input, form.formulario.compacto textarea { width:100%; }
input, select, textarea { padding:9px 10px; border:1px solid var(--borde); border-radius:8px; font-size:14px;
  font-family:inherit; background:var(--blanco); }
textarea { resize:vertical; }
fieldset { border:1px solid var(--borde); border-radius:10px; padding:14px; margin:0 0 13px; }
legend { color:var(--azul-oscuro); font-size:13px; font-weight:600; padding:0 6px; }
label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--azul-oscuro); }
label.check { flex-direction:row; align-items:center; gap:6px; }
.fila { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.enlinea { display:inline-flex; gap:8px; align-items:center; }
.acciones { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.acciones form { display:flex; gap:6px; }
.simular input { width:130px; }

.login-caja { max-width:400px; margin:8vh auto; background:var(--blanco); padding:28px; border-radius:14px;
  box-shadow:var(--sombra); border:1px solid var(--borde); }
.login-caja h1 { margin:0 0 4px; color:var(--azul-oscuro); }
.login-caja h1 b { color:var(--dorado); }
.login-caja form { display:flex; flex-direction:column; gap:14px; margin-top:18px; }
.login-caja .sub { font-size:13px; }

.bitacora { list-style:none; padding:0; margin:0; font-size:13.5px; max-height:280px; overflow:auto; }
.bitacora li { padding:6px 0; border-bottom:1px solid #f1f3f7; }
.bitacora li.error { color:var(--rojo); }
.bitacora li.aviso { color:#8a6a13; }
.pasos { margin:0 0 14px 18px; padding:0; font-size:14px; }
.pasos li { margin-bottom:6px; }

.pie { text-align:center; color:var(--gris); font-size:12px; padding:18px; }
