@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:      #0c0c0c;
  --surface: #111111;
  --border:  #2a2a2a;
  --green:   #39ff14;
  --amber:   #ffb300;
  --blue:    #00bfff;
  --purple:  #cc88ff;
  --dim:     #555;
  --text:    #cccccc;
  --white:   #eeeeee;
  --red:     #ff4444;

  --fs-title: 1.4rem;
  --fs-label: 0.95rem;
  --fs-ref:   1.4rem;
  --fs-item:  1.25rem;
  --fs-cant:  1.05rem;
  --fs-obs:   0.98rem;
  --fs-btn:   0.98rem;
  --fs-timer: 1.2rem;
  --fs-nota:  0.8rem;
  --card-min: 320px;
  --pad-card: 16px;
  --pad-item: 7px 0;
  --btn-pad:  12px;
  --dot-size: 14px;
}

/* ── FORMATOS ─────────────────────── */
body.fmt-telefono {
  --fs-title: 0.95rem; --fs-label: 0.68rem; --fs-ref: 0.95rem;
  --fs-item: 0.88rem;  --fs-cant: 0.78rem;  --fs-obs: 0.74rem;
  --fs-btn: 0.74rem;   --fs-timer: 0.82rem; --card-min: 200px;
  --pad-card: 8px;     --btn-pad: 7px;      --dot-size: 10px;
}
body.fmt-tablet {
  --fs-title: 1.15rem; --fs-label: 0.8rem;  --fs-ref: 1.15rem;
  --fs-item: 1.05rem;  --fs-cant: 0.92rem;  --fs-obs: 0.86rem;
  --fs-btn: 0.86rem;   --fs-timer: 1rem;    --card-min: 260px;
  --pad-card: 12px;    --btn-pad: 10px;     --dot-size: 12px;
}
body.fmt-monitor {
  --fs-title: 1.4rem;  --fs-label: 0.95rem; --fs-ref: 1.4rem;
  --fs-item: 1.25rem;  --fs-cant: 1.05rem;  --fs-obs: 0.98rem;
  --fs-btn: 0.98rem;   --fs-timer: 1.2rem;  --card-min: 320px;
  --pad-card: 16px;    --btn-pad: 12px;     --dot-size: 14px;
}
body.fmt-tv32 {
  --fs-title: 1.9rem;  --fs-label: 1.2rem;  --fs-ref: 1.9rem;
  --fs-item: 1.65rem;  --fs-cant: 1.35rem;  --fs-obs: 1.2rem;
  --fs-btn: 1.2rem;    --fs-timer: 1.55rem; --card-min: 400px;
  --pad-card: 20px;    --btn-pad: 16px;     --dot-size: 18px;
}
body.fmt-tv43 {
  --fs-title: 2.4rem;  --fs-label: 1.5rem;  --fs-ref: 2.4rem;
  --fs-item: 2.1rem;   --fs-cant: 1.7rem;   --fs-obs: 1.5rem;
  --fs-btn: 1.5rem;    --fs-timer: 2rem;    --card-min: 520px;
  --pad-card: 26px;    --btn-pad: 20px;     --dot-size: 22px;
}

/* ── BASE ─────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  min-height: 100vh;
}

/* ── HEADER ───────────────────────── */
header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--green);
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}

.app-version {
  font-size: calc(var(--fs-label) * 0.85);
  color: var(--dim);
  letter-spacing: 2px;
  white-space: nowrap;
}

.header-stats {
  display: flex;
  gap: 20px;
  font-size: var(--fs-label);
  letter-spacing: 2px;
}
.stat { color: var(--dim); }
.stat span { color: var(--white); font-weight: 700; }
.stat.urg span { color: var(--amber); }

.header-clock {
  font-size: var(--fs-timer);
  font-weight: 700;
  color: var(--dim);
  letter-spacing: 3px;
  white-space: nowrap;
}

/* ── FORMATO SELECTOR ─────────────── */
.fmt-selector {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.fmt-btn {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  cursor: pointer;
  text-transform: uppercase;
}
.fmt-btn:hover  { border-color: var(--green); color: var(--green); }
.fmt-btn.activo { border-color: var(--green); color: var(--green); background: rgba(57,255,20,0.07); }

/* ── BANNER SIN CONEXION ──────────── */
#banner-offline {
  display: none;
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 6px;
  font-size: var(--fs-label);
  letter-spacing: 3px;
  font-weight: 700;
}
#banner-offline.visible { display: block; }

/* ── GRID ─────────────────────────── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
  gap: 14px;
  padding: 16px 20px;
}

.grid-vacio {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--dim);
  font-size: var(--fs-label);
  letter-spacing: 4px;
  padding: 60px 0;
}

/* ── CARD ─────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.card.espera  { border-top: 3px solid var(--amber); }
.card.proceso { border-top: 3px solid var(--blue); }
.card.listo   { border-top: 3px solid var(--green); opacity: 0.55; }

/* CARD HEAD */
.card-head {
  padding: var(--pad-card);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.tipo {
  font-size: var(--fs-label);
  letter-spacing: 3px;
  font-weight: 700;
  text-transform: uppercase;
}
.tipo.mesa     { color: var(--blue); }
.tipo.delivery { color: var(--amber); }
.tipo.pickup   { color: var(--purple); }

.ticket-num {
  font-size: calc(var(--fs-label) * 0.9);
  color: var(--dim);
  letter-spacing: 1px;
  margin-top: 2px;
}
.timer { font-size: var(--fs-timer); font-weight: 700; letter-spacing: 2px; }
.card.espera  .timer { color: var(--amber); }
.card.proceso .timer { color: var(--blue); }
.card.listo   .timer { color: var(--green); }

/* CARD BODY */
.card-body { padding: var(--pad-card); flex: 1; }

.referencia {
  font-size: var(--fs-ref);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

/* ITEM */
.item {
  display: flex;
  gap: 10px;
  padding: var(--pad-item);
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.item:last-child { border-bottom: none; }

.dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border: 1px solid var(--dim);
  flex-shrink: 0;
  margin-top: 4px;
}
.dot.hecho    { background: var(--green); border-color: var(--green); }
.dot.haciendo { background: var(--blue);  border-color: var(--blue); }
.dot.pendiente{ background: transparent;  border-color: var(--amber); }

.item-txt { flex: 1; }

.item-nombre {
  font-size: var(--fs-item);
  color: var(--white);
  line-height: 1.3;
}
.item.hecho .item-nombre {
  text-decoration: line-through;
  text-decoration-color: var(--green);
  color: var(--dim);
}
.item-cant { font-size: var(--fs-cant); color: var(--dim); margin-top: 1px; }
.item.hecho .item-cant { color: var(--border); }
.item-obs  { font-size: var(--fs-obs); color: var(--amber); margin-top: 2px; }
.item.hecho .item-obs { color: var(--dim); }

/* CARD FOOT */
.card-foot { padding: var(--pad-card); border-top: 1px solid var(--border); }

.btn {
  width: 100%;
  padding: var(--btn-pad);
  border: 1px solid;
  background: transparent;
  font-family: 'Courier Prime', monospace;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
}
.btn-iniciar   { border-color: var(--amber); color: var(--amber); }
.btn-listo     { border-color: var(--blue);  color: var(--blue); }
.btn-entregado { border-color: var(--green); color: var(--green); }
.btn:hover     { background: rgba(255,255,255,0.04); }

.listo-label {
  text-align: center;
  font-size: var(--fs-btn);
  color: var(--green);
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 4px 0;
}

/* ── UTILIDADES ───────────────────── */
.oculto { display: none !important; }

/* ── LOGIN ────────────────────────── */
.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.login-card {
  width: min(360px, 90%);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-brand {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 4px;
  text-align: center;
}

.login-ver {
  font-size: 0.72rem;
  color: var(--dim);
  letter-spacing: 2px;
  text-align: center;
}

.login-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  padding: 12px;
  letter-spacing: 2px;
  outline: none;
}
.login-input:focus { border-color: var(--green); }
.login-input::placeholder { color: var(--dim); letter-spacing: 2px; }

.login-btn {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 4px;
  cursor: pointer;
}
.login-btn:hover     { background: rgba(57,255,20,0.07); }
.login-btn:disabled  { opacity: 0.4; cursor: not-allowed; }

.login-error {
  font-size: 0.8rem;
  color: var(--red);
  letter-spacing: 1px;
  text-align: center;
  min-height: 1em;
}

/* ── HEADER EMPRESA / LOGOUT ──────── */
.header-empresa {
  font-size: var(--fs-label);
  color: var(--dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.btn-logout {
  padding: 4px 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--dim);
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  letter-spacing: 1px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-logout:hover { border-color: var(--red); color: var(--red); }

/* ── CONFIG PAGE ──────────────────── */
.config-wrap {
  max-width: 560px;
  margin: 40px auto;
  padding: 0 20px;
}
.config-wrap h2 {
  font-size: var(--fs-title);
  color: var(--green);
  letter-spacing: 4px;
  margin-bottom: 30px;
}
.campo {
  margin-bottom: 20px;
}
.campo label {
  display: block;
  font-size: var(--fs-label);
  color: var(--dim);
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.campo input, .campo select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--white);
  font-family: 'Courier Prime', monospace;
  font-size: var(--fs-label);
  padding: 10px;
  outline: none;
}
.campo input:focus, .campo select:focus { border-color: var(--green); }
.campo select option { background: var(--surface); }

.btn-guardar {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--green);
  background: transparent;
  color: var(--green);
  font-family: 'Courier Prime', monospace;
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 10px;
}
.btn-guardar:hover { background: rgba(57,255,20,0.07); }

.config-version {
  text-align: center;
  color: var(--border);
  font-size: 0.75rem;
  letter-spacing: 2px;
  margin-top: 40px;
}

/* ── Rollback ── */
.btn-rollback {
  border-color: var(--border);
  color: var(--border);
  padding: 6px 10px;
  font-size: 0.8em;
  margin-left: 6px;
}
.btn-rollback:hover { border-color: var(--yellow); color: var(--yellow); }

/* ── Botón Histórico ── */
.btn-historico {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--border);
  font-family: 'Courier Prime', monospace;
  font-size: var(--fs-ui);
  letter-spacing: 2px;
  cursor: pointer;
  padding: 4px 10px;
}
.btn-historico:hover { border-color: var(--yellow); color: var(--yellow); }

/* ── Histórico overlay ── */
.hist-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 200;
  display: flex;
  flex-direction: column;
}
.hist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--yellow);
  font-size: 1rem;
  letter-spacing: 3px;
}
.btn-cerrar-hist {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Courier Prime', monospace;
  letter-spacing: 2px;
  cursor: pointer;
  padding: 4px 12px;
}
.btn-cerrar-hist:hover { border-color: var(--green); color: var(--green); }
.hist-contenido {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hist-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.hist-resumen b { color: var(--green); }
.hist-card {
  border: 1px solid var(--border);
  padding: 10px 14px;
}
.hist-card.listo    { border-color: var(--green); }
.hist-card.proceso  { border-color: var(--yellow); }
.hist-card.entregado { opacity: 0.5; }
.hist-head {
  display: flex;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 0.9rem;
  letter-spacing: 1px;
}
.hist-orden  { color: var(--yellow); font-weight: 700; }
.hist-ref    { color: var(--text); flex: 1; }
.hist-estado { color: var(--border); font-size: 0.75rem; }
.hist-tiempo { color: var(--green); }
.hist-items  { display: flex; flex-wrap: wrap; gap: 8px; }
.hist-item   { color: var(--text); font-size: 0.8rem; border: 1px solid var(--border); padding: 2px 8px; }

/* ── Selector Sucursal ── */
.login-sub {
  color: var(--border);
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-align: center;
  margin-bottom: 20px;
}
.sucursal-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.suc-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-family: 'Courier Prime', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
}
.suc-btn:hover { border-color: var(--green); color: var(--green); }
.suc-codigo {
  color: var(--yellow);
  font-weight: 700;
  min-width: 36px;
}