:root {
  --dos-black: #000;
  --dos-blue: #0000aa;
  --dos-green: #00aa00;
  --dos-cyan: #00aaaa;
  --dos-red: #aa0000;
  --dos-caret: #ff0000;
  --dos-gray: #aaa;
  --dos-yellow: #ffff55;
  --dos-white: #fff;
  --cell-w: 1ch;
  --cell-h: 1.2em;
}

* { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--dos-black);
}

body {
  display: grid;
  place-items: center;
  color: var(--dos-gray);
  font-family: "Perfect DOS VGA 437", "IBM Plex Mono", Consolas, monospace;
}

.dos-screen {
  position: relative;
  width: 80ch;
  height: 30em;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  background: var(--dos-black);
  font-size: min(1.25vw, 4vh);
  line-height: var(--cell-h);
  transform: scaleY(0.667);
  transform-origin: center;
}

.dos-window { position: absolute; inset: 0; }

.dos-frame::before {
  content: "";
  position: absolute;
  border: 3px double var(--dos-white);
  pointer-events: none;
}

.dos-header::before {
  top: calc(1 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(3 * var(--cell-h));
}

.dos-body::before {
  top: calc(5 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(var(--body-height, 16) * var(--cell-h));
}

.dos-body::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: calc(6 * var(--cell-h));
  left: 2ch;
  width: 76ch;
  height: calc(var(--body-fill-height, 15) * var(--cell-h));
  background-color: var(--dos-black);
  background-image: radial-gradient(circle, #777 0.55px, transparent 0.75px);
  background-size: 2px 2px;
  pointer-events: none;
}

.dos-body > * { z-index: 1; }

.dos-statusbar::before {
  top: calc(var(--status-start, 22) * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(2 * var(--cell-h));
}

.dos-text,
.dos-option,
.dos-field,
.dos-message {
  position: absolute;
  top: calc(var(--row) * var(--cell-h));
  left: calc(var(--col) * 1ch);
  margin: 0;
  white-space: pre;
  font: inherit;
  line-height: inherit;
}

.dos-menu { margin: 0; padding: 0; list-style: none; }
.dos-option { z-index: 1; display: flex; }
.dos-bracket { color: var(--dos-white); }
.dos-bracket b { color: var(--dos-yellow); font-weight: 700; }
.dos-label { min-width: 27ch; color: var(--dos-blue); background: var(--dos-gray); }
.dos-gray { color: var(--dos-gray); }
.dos-white { color: var(--dos-white); }
.dos-yellow { color: var(--dos-yellow); }
.dos-cyan { color: var(--dos-cyan); }
.cash-report-body::before {
  top: calc(5 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(16 * var(--cell-h));
}
.cash-date-label { color: #ff00ff; }
.cash-paper-note { color: #00ffff; }
.control-zone-label { color: #00ff00; }
.control-wait {
  position: absolute;
  top: calc(12 * var(--cell-h));
  left: 24ch;
  max-width: 54ch;
  padding: 0.5em;
  border: 3px double white;
  background: black;
  color: var(--dos-yellow);
}
.control-wait p { margin: 0; }
.route-save { top: calc(18 * var(--cell-h)); left: 24ch; }
.route-barrio-list {
  position: absolute;
  z-index: 10;
  top: calc(9 * var(--cell-h));
  left: 25ch;
  padding: 0.5em;
  background: black;
  color: var(--dos-yellow);
  border: 3px double white;
}
.route-barrio-list select { width: 42ch; font: inherit; }
.overdue-empty {
  position: absolute;
  top: calc(12 * var(--cell-h));
  left: 24ch;
  padding: 0.5em;
  border: 3px double white;
  background: black;
}
.overdue-empty p { margin: 0; }
.dos-input[hidden], .dos-text[hidden] { display: none; }
.dos-red { color: var(--dos-red); }
.dos-yellow-on-green { color: var(--dos-yellow); background: var(--dos-green); font-size: inherit; }
.dos-yellow-on-gray { color: var(--dos-yellow); background: var(--dos-gray); }
.dos-green-on-olive { color: #00ff00; background: #808000; }
.dos-red-on-white { color: var(--dos-red); background: var(--dos-white); }
.dos-blue-on-white { color: var(--dos-blue); background: var(--dos-white); }

.dos-field {
  --row: 23;
  --col: 21;
  width: 1ch;
  height: var(--cell-h);
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--dos-black);
  background: var(--dos-gray);
  caret-color: var(--dos-black);
  text-align: center;
}

.dos-field:focus { background: var(--dos-white); }

.dos-message {
  --row: var(--field-row, 23);
  --col: 5;
  display: none;
  color: var(--dos-red);
  background: var(--dos-black);
}

.dos-message::after {
  content: " Cualquier tecla para continuar ";
  position: absolute;
  left: calc((var(--wait-col, 34) - 5) * 1ch);
  color: var(--dos-yellow);
  white-space: pre;
}

.dos-message.is-visible { display: block; }

.dos-money {
  width: calc(var(--width) * 1ch);
  text-align: right;
}

.payment-body::before {
  top: calc(4 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(16 * var(--cell-h));
}

.payment-status::before {
  top: calc(21 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(2 * var(--cell-h));
}

.dos-input {
  position: absolute;
  top: calc(var(--row) * var(--cell-h));
  left: calc(var(--col) * 1ch);
  width: calc(var(--width) * 1ch);
  height: var(--cell-h);
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--dos-black);
  background: var(--dos-white);
  font: inherit;
  line-height: inherit;
}

.access-key-body::before {
  height: calc(16 * var(--cell-h));
}

.access-key-body > form {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.access-key-input,
.access-key-body input[type="password"] {
  letter-spacing: 0.08ch;
}

.access-key-body input::placeholder {
  color: var(--dos-black);
  opacity: 1;
}

.access-key-result {
  top: calc(13 * var(--cell-h));
  left: 22ch;
  width: 48ch;
  text-align: center;
}

.overdue-window {
  position: absolute;
  z-index: 5;
  top: calc(10 * var(--cell-h));
  left: 1ch;
  width: 78ch;
  height: calc(8 * var(--cell-h));
  padding: 0.35em 1ch;
  border: 3px double var(--dos-white);
  color: var(--dos-black);
  background: var(--dos-gray);
  font-size: 0.72em;
  line-height: 1.15;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.overdue-window h2 { margin: 0 0 0.35em; font: inherit; font-weight: 700; }
.overdue-window table { width: 100%; border-collapse: collapse; text-align: right; }
.overdue-window th, .overdue-window td { padding: 0 0.25ch; white-space: nowrap; }
.overdue-window thead { position: sticky; top: 0; background: var(--dos-gray); }

.receipt {
  width: 72ch;
  margin: 1em auto;
  padding: 1em 2ch;
  border: 3px double var(--dos-white);
  color: var(--dos-white);
  font-size: 0.75em;
  line-height: 1.35;
}
.receipt header { position: relative; text-align: center; }
.receipt header strong { position: absolute; left: 0; color: var(--dos-red); background: white; }
.receipt h1 { margin: 0; font-size: 1.15em; }
.receipt header p { position: absolute; right: 0; top: 0; margin: 0; }
.receipt-customer { display: grid; grid-template-columns: 16ch 1fr; margin: 1em 0; }
.receipt-customer dt, .receipt-customer dd { margin: 0; }
.receipt-customer dt::after { content: ":"; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt th, .receipt td { padding: 0.15em 1ch; border: 1px solid var(--dos-gray); }
.receipt th:first-child, .receipt td:first-child { text-align: left; }
.receipt th:not(:first-child), .receipt td:not(:first-child) { text-align: right; }
.receipt-words { min-height: 2.7em; text-transform: uppercase; }
.receipt-summary { display: flex; justify-content: flex-end; gap: 5ch; color: var(--dos-yellow); }
.receipt footer { margin-top: 1em; text-align: center; color: var(--dos-yellow); }

.foxpro-wait {
  position: absolute;
  z-index: 5;
  top: calc(14 * var(--cell-h));
  left: 34ch;
  width: 42ch;
  min-height: calc(4 * var(--cell-h));
  padding: 0.35em 1ch;
  border: 3px double var(--dos-white);
  outline: 0;
  color: var(--dos-red);
  background: var(--dos-black);
}
.foxpro-wait p { margin: 0; white-space: nowrap; }
.foxpro-wait p + p { color: var(--dos-yellow); }
.client-label, .client-value {
  width: calc(var(--width) * 1ch);
  overflow: hidden;
}
.client-query-body [data-client-search] {
  position: absolute;
  z-index: 2;
  inset: 0;
}
.client-query-body [data-client-number-form],
.client-query-body [data-client-add-form] {
  position: absolute;
  z-index: 2;
  inset: 0;
}
.confirm-window {
  position: absolute;
  z-index: 6;
  top: calc(14 * var(--cell-h));
  left: 20ch;
  display: flex;
  align-items: baseline;
  width: max-content;
  padding: 0.5em 1ch;
  border: 3px double var(--dos-white);
  color: var(--dos-yellow);
  background: var(--dos-black);
  white-space: nowrap;
}
.confirm-window[hidden] { display: none; }
.billing-header::before { top: calc(4 * var(--cell-h)); left: 1ch; width: 78ch; height: calc(8 * var(--cell-h)); }
.billing-details::before { top: calc(13 * var(--cell-h)); left: 1ch; width: 78ch; height: calc(11.8 * var(--cell-h)); }
.billing-confirm { top: calc(7 * var(--cell-h)); left: 49ch; }
.money-input { text-align: right; }
.billing-errors { position: absolute; z-index: 7; top: 5em; left: 40ch; max-width: 38ch; padding: 0.5em; background: black; color: red; border: 1px solid white; }
.billing-errors p { margin: 0; }

.confirm-window input {
  flex: 0 0 1ch;
  width: 1ch;
  height: var(--cell-h);
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--dos-black);
  background: var(--dos-white);
  font: inherit;
}

@media print {
  html, body { height: auto; overflow: visible; background: white; }
  body { display: block; color: black; }
  .dos-screen { width: auto; height: auto; max-width: none; max-height: none; overflow: visible; font-size: 12pt; transform: none; }
  .receipt { color: black; border-color: black; }
  .receipt header strong, .receipt-summary { color: black; }
  .receipt footer { display: none; }
}

@media (max-aspect-ratio: 4 / 3) {
  .dos-screen { font-size: min(1.25vw, 3.2vh); }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* CONSUPAN: positions use the screen font; cell fonts do not change coordinates. */
.detail-result { position:absolute; top:calc(5.5 * var(--cell-h)); left:2ch; width:76ch; }
.detail-client-header { width:100%; min-height:calc(4 * var(--cell-h)); padding:calc(0.5 * var(--cell-h)) 1ch;
 border:1px solid var(--dos-white); display:grid;
 grid-template-columns:18ch minmax(0,1fr) 13ch 10ch; column-gap:1ch;
 grid-template-areas:"name-label name user-label user"
 "address-label address address address" "zone-label zone meter-label meter";
 align-items:baseline; }
.detail-client-header .dos-text { position:static; min-width:0;
 white-space:normal; overflow-wrap:anywhere; }
.detail-client-header .detail-client-name { font-size:0.8em; }
.detail-header-number { text-align:right; }
.invoice-detail-table { margin-top:calc(0.5 * var(--cell-h));
 width:100%; border-collapse:collapse; color:var(--dos-white); }
.invoice-detail-table th { color:#ff0000; background:transparent; text-align:left;
 padding:0.15em; border-bottom:1px solid #ff0000; white-space:nowrap; }
.invoice-detail-table th,.invoice-detail-table td { font-size:0.78em; line-height:1.2em; }
.invoice-detail-table td { padding:0.12em 0.2em; white-space:nowrap; }
.invoice-detail-table .detail-amount { text-align:right; font-variant-numeric:tabular-nums; }
.invoice-detail-table th:nth-child(1),.invoice-detail-table th:nth-child(3),
.invoice-detail-table th:nth-child(4),.invoice-detail-table th:nth-child(5),
.invoice-detail-table th:nth-child(6) { text-align:right; }

/* Keep deletion notices contained without changing their existing colors. */
[data-client-delete] .foxpro-wait { left:20ch; width:56ch; }
[data-client-delete] .foxpro-wait p { white-space:normal; overflow-wrap:anywhere; }

.index-review-results { position:absolute; top:calc(11 * var(--cell-h)); left:5ch;
 width:70ch; height:calc(9 * var(--cell-h)); overflow-y:auto; outline:none; }
.index-review-results table { width:100%; border-collapse:collapse; color:var(--dos-white); }
.index-review-results th { text-align:left; color:var(--dos-yellow); }
.index-review-results td,.index-review-results th { padding:0.2em 0.5ch; }
[data-index-review] .foxpro-wait p { white-space:normal; overflow-wrap:anywhere; }

/* Acceso único: conserva la grilla, colores y secuencia de entrada DOS. */
.auth-body::before { height: calc(16 * var(--cell-h)); }
.auth-body::after { height: calc(15 * var(--cell-h)); }
.auth-input { text-transform: none; }
.auth-error { width: 40ch; text-align: center; }
.auth-form { z-index: 2; }
/* Entrada numérica de CARGAFAC/MODIFACT. */
[data-invoice-entry] [data-numeric] { text-align: right; font-variant-numeric: tabular-nums; }

/* Foco DOS global: caret nativo fino, datos legibles y campo activo identificable. */
.dos-screen input:not([type="hidden"]):focus,
.dos-screen textarea:focus,
.dos-screen select:focus {
  caret-color: var(--dos-caret);
  outline: 1px solid var(--dos-yellow);
  outline-offset: 1px;
  box-shadow: none;
}
.dos-screen input::selection,
.dos-screen textarea::selection {
  color: var(--dos-white);
  background: var(--dos-blue);
}