/* Lineamientos ui-ux-pro-max: flat, alto contraste, targets táctiles >=48px, labels visibles, foco visible, SVG (sin emojis) */
:root {
  /* Paleta CCU (www.ccu.com.ar): verde oscuro #034e31, verde #57b847, franja amarillo/azul/bordó */
  --bg: #f6f9f5; --fg: #14211b; --muted: #475a50; --card: #ffffff; --border: #c5d3c9;
  --primary: #034e31; --on-primary: #ffffff;
  --cta: #034e31; --cta-hover: #02402a; --on-cta: #ffffff;
  --brand: #57b847; --brand-strong: #3d8f31; --brand-soft: #e8f5e4;
  --amarillo: #fab700; --azul: #0085c9; --bordo: #ae0a3b;
  --danger: #ae0a3b; --danger-bg: #fdf0f4; --ok-bg: #f1f9ef; --warn: #7a4a00; --warn-bg: #fff8e1;
  --ring: #0085c9;
  --font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > main { flex: 1 0 auto; width: 100%; }
body { background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 18px; -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; }
:focus-visible { outline: 4px solid var(--ring); outline-offset: 2px; }
.icon { width: 1.4em; height: 1.4em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

header { background: #fff; color: var(--primary); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 3px solid var(--brand); }
header h1 { margin: 0; font-size: 1.3rem; font-weight: 700; display: flex; gap: 14px; align-items: center; }
header h1 img { height: 44px; width: auto; display: block; }
header h1 .sep { width: 2px; height: 32px; background: var(--border); }
header a { color: var(--primary); font-weight: 600; text-decoration: none; padding: 12px 16px; min-height: 48px; display: inline-flex; align-items: center; border-radius: 8px; }
header a:hover { background: var(--brand-soft); }
.reloj { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--muted); }

main { max-width: 1100px; margin: 0 auto; padding: 24px; }
.panel { display: none; }
.panel.activo { display: block; }

.registro { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 800px) { .registro { grid-template-columns: 1fr; } main { padding: 16px; } }

label, .label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--muted); font-size: 1rem; }
.servicios { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.servicios button { flex: 1 1 140px; min-height: 64px; border: 2px solid var(--border); background: var(--card); color: var(--fg); border-radius: 12px; font: inherit; font-size: 1.25rem; font-weight: 600; cursor: pointer; transition: background-color .15s, border-color .15s; }
.servicios button:hover { border-color: var(--brand-strong); }
.servicios button:disabled { background: #e2e8f0; color: #475569; cursor: not-allowed; border-style: dashed; }
.servicios button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.dni-display { width: 100%; min-height: 84px; border: 2px solid var(--primary); border-radius: 12px; background: var(--card); font-size: 2.6rem; font-weight: 700; letter-spacing: .12em; font-variant-numeric: tabular-nums; padding: 8px 20px; display: flex; align-items: center; margin-bottom: 8px; }
.dni-display .ph { color: #64748b; font-weight: 500; letter-spacing: 0; font-size: 1.3rem; }
.ayuda { color: var(--muted); margin: 0 0 16px; font-size: 1rem; min-height: 1.4em; }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.keypad button { min-height: 76px; border: 2px solid var(--border); background: var(--card); border-radius: 12px; font: inherit; font-size: 2rem; font-weight: 700; color: var(--fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .12s; }
.keypad button:hover { background: var(--brand-soft); border-color: var(--brand); }
.keypad button:active { background: #d3ecce; }
.keypad .sec { font-size: 1.1rem; color: var(--muted); }

.btn { min-height: 64px; padding: 0 28px; border: 0; border-radius: 12px; font: inherit; font-size: 1.35rem; font-weight: 700; cursor: pointer; display: inline-flex; gap: 12px; align-items: center; justify-content: center; transition: background-color .15s; }
.btn-cta { background: var(--cta); color: var(--on-cta); width: 100%; margin-top: 16px; }
.btn-cta:hover:not(:disabled) { background: var(--cta-hover); }
.btn-cta:disabled { background: #7d8f84; color: #fff; cursor: not-allowed; }
.btn-sec { background: var(--card); color: var(--fg); border: 2px solid var(--border); }
.btn-sec:hover { border-color: var(--primary); }

.mensaje { border-radius: 12px; padding: 16px 20px; margin-top: 16px; font-weight: 600; display: none; gap: 12px; align-items: flex-start; }
.mensaje.show { display: flex; }
.mensaje.error { background: var(--danger-bg); color: var(--danger); border: 2px solid var(--danger); }
.mensaje.warn { background: var(--warn-bg); color: var(--warn); border: 2px solid var(--warn); }

.tarjeta { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 32px; max-width: 640px; margin: 40px auto; text-align: center; }
.tarjeta.ok { border-color: var(--brand); background: var(--ok-bg); }
.tarjeta h2 { margin: 12px 0 4px; font-size: 2rem; }
.tarjeta .nro { font-size: 4.5rem; font-weight: 800; line-height: 1; margin: 12px 0; font-variant-numeric: tabular-nums; }
.tarjeta p { margin: 4px 0; color: var(--muted); font-size: 1.2rem; }
.tarjeta .acciones { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.tarjeta .acciones .btn { flex: 1 1 200px; }
.tarjeta .icon.grande { width: 72px; height: 72px; color: var(--brand-strong); }
.field { text-align: left; margin-top: 16px; }
.field input { width: 100%; min-height: 64px; font: inherit; font-size: 1.5rem; padding: 8px 16px; border: 2px solid var(--primary); border-radius: 12px; }

/* Admin */
.barra { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 16px; }
.barra input[type=date], .barra input[type=password], .barra input[type=search], .barra input[type=text], .barra input[type=time] { min-height: 48px; font: inherit; padding: 6px 12px; border: 2px solid var(--border); border-radius: 8px; }
.barra .btn { min-height: 48px; font-size: 1rem; padding: 0 18px; width: auto; margin: 0; }
table { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--border); border-radius: 12px; overflow: hidden; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); }
th { background: var(--brand-soft); color: var(--primary); font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
tr.anulado td { color: #64748b; text-decoration: line-through; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #e2e8f0; font-size: .85rem; font-weight: 600; }
td .btn { min-height: 44px; font-size: .95rem; padding: 0 14px; }
.resumen { font-weight: 600; margin: 0 0 12px; }

/* Ticket de impresión: térmica POS58 (papel 58 mm, zona imprimible ~48 mm) */
#ticket { display: none; }
@page { size: 58mm auto; margin: 0; }
@media print {
  body.kiosko > *:not(#ticket) { display: none !important; }
  body.kiosko { background: #fff; }
  body.kiosko #ticket { display: block; width: 48mm; margin: 0; padding: 2mm 0 12mm 2mm; color: #000; background: #fff; font-family: Arial, Helvetica, sans-serif; font-size: 9pt; line-height: 1.25; text-align: center; overflow-wrap: anywhere; }
  #ticket h2 { font-size: 13pt; margin: 0 0 1mm; }
  #ticket .sub { font-size: 8pt; letter-spacing: .04em; }
  #ticket .serv { font-size: 12pt; font-weight: 700; }
  #ticket .nro { font-size: 30pt; font-weight: 800; line-height: 1.1; margin: 1mm 0; }
  #ticket .linea { border-top: 1px dashed #000; margin: 2mm 0; }
  #ticket .campo { text-align: left; margin: 1mm 0; }
  #ticket .campo small { display: block; font-size: 7pt; text-transform: uppercase; letter-spacing: .05em; }
  #ticket .campo strong { font-size: 10pt; }
  #ticket .pie { font-size: 7pt; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Reportes */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.kpi { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 16px; }
.kpi b { display: block; font-size: 2.2rem; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--muted); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.bloque { background: var(--card); border: 2px solid var(--border); border-radius: 12px; padding: 16px; }
.bloque h3 { margin: 0 0 12px; font-size: 1.1rem; }
.bar-row { display: grid; grid-template-columns: minmax(80px, 170px) 1fr 48px; gap: 10px; align-items: center; margin: 6px 0; font-variant-numeric: tabular-nums; }
.bar-row > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar { height: 22px; background: var(--primary); border-radius: 4px; min-width: 2px; }
.bar-row .bar.alt { background: var(--brand-strong); }
.bar-row span:last-child { text-align: right; font-weight: 700; }
@media print {
  body.reporte header, body.reporte .barra, body.reporte .noprint { display: none !important; }
  body.reporte { background: #fff; font-size: 12pt; }
  body.reporte main { padding: 0; max-width: none; }
  .bloque, .kpi { break-inside: avoid; }
}

/* Franja de marca superior */
.franja { display: flex; height: 8px; }
.franja i { display: block; height: 100%; }
.franja i:nth-child(1) { flex: 15; background: #034e31; }
.franja i:nth-child(2) { flex: 35; background: #57b847; }
.franja i:nth-child(3) { flex: 20; background: #fab700; }
.franja i:nth-child(4) { flex: 15; background: #0085c9; }
.franja i:nth-child(5) { flex: 15; background: #ae0a3b; }
@media print { .franja { display: none !important; } }

/* Firma del desarrollo */
.firma { flex: none; text-align: center; padding: 14px 16px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--border); background: #fff; }
.firma strong { color: var(--primary); letter-spacing: .04em; }