/* =========================================================
   VARIABLES DE TEMA
   ========================================================= */

body.theme-dark{
  --bg: #111;
  --text: #eee;

  --title: #fff;
  --line: #f2f2f2;
  --meta: #c6c6c6;
  --muted: #cfcfcf;

  --card-bg: #1c1c1c;
  --card-border: #333;
  --card-bar-default: #444;

  --warn-border: #b08b00;
  --warn-shadow: rgba(176,139,0,.25);

  --urgent-bar: #ff2a2a;

  --col-head-bg1: #161616;
  --col-head-bg2: #0f0f0f;
  --col-head-border: #2f2f2f;

  --col-head-new-border: rgba(255,193,7,.55);
  --col-head-new-shadow: rgba(255,193,7,.15);

  --col-head-ip-border: rgba(13,202,240,.55);
  --col-head-ip-shadow: rgba(13,202,240,.15);

  --col-sub: #bdbdbd;

  --comanda-inline: #9aa4ad;
  --comanda-bg: #1c2f40;
  --comanda-border: #2f6fa0;
  --comanda-text: #9fd3ff;

  --state-new-bg: rgba(255,193,7,.18);
  --state-new-border: rgba(255,193,7,.55);
  --state-new-text: #ffd24d;

  --state-ip-bg: rgba(13,202,240,.16);
  --state-ip-border: rgba(13,202,240,.55);
  --state-ip-text: #79e6ff;

  --ribbon-warn-bg: #b08b00;
  --ribbon-warn-text: #111;
  --ribbon-urgent-bg: #b00020;
  --ribbon-urgent-text: #fff;

  --flash-brightness: 1.35;
  --head-pulse: rgba(255,193,7,.22);

  --state-new-bar: #ffc107;
  --state-ip-bar: #0dcaf0;
}

body.theme-light{
  --bg: #f4f6f8;
  --text: #1f2937;

  --title: #111827;
  --line: #1f2937;
  --meta: #4b5563;
  --muted: #6b7280;

  --card-bg: #ffffff;
  --card-border: #d1d5db;
  --card-bar-default: #9ca3af;

  --warn-border: #d4a017;
  --warn-shadow: rgba(212,160,23,.22);

  --urgent-bar: #ef4444;

  --col-head-bg1: #ffffff;
  --col-head-bg2: #f8fafc;
  --col-head-border: #d1d5db;

  --col-head-new-border: rgba(255,193,7,.85);
  --col-head-new-shadow: rgba(255,193,7,.18);

  --col-head-ip-border: rgba(13,202,240,.75);
  --col-head-ip-shadow: rgba(13,202,240,.16);

  --col-sub: #6b7280;

  --comanda-inline: #6b7280;
  --comanda-bg: #eaf3fb;
  --comanda-border: #8bbce6;
  --comanda-text: #245b86;

  --state-new-bg: rgba(255,193,7,.14);
  --state-new-border: rgba(255,193,7,.85);
  --state-new-text: #8a6300;

  --state-ip-bg: rgba(13,202,240,.12);
  --state-ip-border: rgba(13,202,240,.75);
  --state-ip-text: #0b6f86;

  --ribbon-warn-bg: #d4a017;
  --ribbon-warn-text: #111;
  --ribbon-urgent-bg: #dc2626;
  --ribbon-urgent-text: #fff;

  --flash-brightness: 1.12;
  --head-pulse: rgba(255,193,7,.18);

  --state-new-bar: #ffc107;
  --state-ip-bar: #0ea5e9;
}

body{
  transition: background .55s ease, color .55s ease;
}

.kds-card{
  transition: background .55s ease, border .55s ease;
}

/* =========================================================
   ESTILOS BASE
   ========================================================= */

body {
  background: var(--bg);
  color: var(--text);
}

.kds-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--title);
}

.kds-mesa-badge{

  display:inline-flex;
  align-items:center;

  padding:3px 7px;
  border-radius:10px;

  font-size:1.3rem;
  font-weight:600;

  letter-spacing:.04em;

  background:#2b2f33;
  color:#ffffff;

  border:1px solid #3b4146;
}

.kds-line {
  font-size: 1.15rem;
  color: var(--line);
}

.kds-meta {
  color: var(--meta);
}

.kds-badge {
  font-size: .95rem;
}

.kds-bigbtn {
  font-size: .95rem;
  padding: .25rem .6rem;
  border-radius: 6px;
}

.muted {
  color: var(--muted);
}

.timer {
  font-variant-numeric: tabular-nums;
}

/* Card base + barra lateral */
.kds-card{
  width: 100%;
  max-width: 360px;
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
}

.kds-card-wrap{
  max-width: 100%;
}

/* barra izquierda (default) */
.kds-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:6px;
  background: var(--card-bar-default);
  border-radius:4px 0 0 4px;
}

/* colores barra por estado */
.kds-card.state-new::before{
  background: var(--state-new-bar);
}
.kds-card.state-ip::before{
  background: var(--state-ip-bar);
}

/* Prioridad por tiempo */
.kds-card.warn{
  border-color: var(--warn-border) !important;
  box-shadow: 0 0 0 1px var(--warn-shadow) inset;
}

/* urgente más visible en la barra */
.kds-card.urgent::before{
  background: var(--urgent-bar);
}

/* Cabeceras columnas */
.col-head{
  background: linear-gradient(180deg, var(--col-head-bg1), var(--col-head-bg2));
  border: 1px solid var(--col-head-border);
  border-radius: 1rem;
  padding: .85rem 1.1rem;
  margin-bottom: .85rem;
  position: sticky;
  top: .75rem;
  z-index: 10;
}

.col-head.new{
  border-color: var(--col-head-new-border);
  box-shadow: 0 0 0 1px var(--col-head-new-shadow) inset;
}

.col-head.ip{
  border-color: var(--col-head-ip-border);
  box-shadow: 0 0 0 1px var(--col-head-ip-shadow) inset;
}

.col-title{
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height: 1.1;
}

.col-sub{
  font-size: .9rem;
  color: var(--col-sub);
  margin-top: .1rem;
}

/* Número de la comanda */
.kds-comanda-inline{
  font-size: .92rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 8px;
}

.kds-comanda{
  display:inline-block;
  margin-top:2px;
  padding:2px 6px;
  border-radius:6px;
  background: var(--comanda-bg);
  border:1px solid var(--comanda-border);
  font-size:.85rem;
  font-weight:700;
  color: var(--comanda-text);
  text-transform:uppercase;
}

/* Estado en la card */
.kds-state{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding: .25rem .6rem;
  border-radius: .75rem;
  font-weight: 800;
  font-size: .65rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.kds-state.new{
  background: var(--state-new-bg);
  border: 1px solid var(--state-new-border);
  color: var(--state-new-text);
}

.kds-state.ip{
  background: var(--state-ip-bg);
  border: 1px solid var(--state-ip-border);
  color: var(--state-ip-text);
}

/* Ribbon de retraso */
.kds-ribbon{
  display:inline-block;
  padding:.15rem .5rem;
  border-radius:.5rem;
  font-weight:700;
  font-size:.65rem;
  vertical-align: middle;
}

.kds-ribbon.warn{
  background: var(--ribbon-warn-bg);
  color: var(--ribbon-warn-text);
}

.kds-ribbon.urgent{
  background: var(--ribbon-urgent-bg);
  color: var(--ribbon-urgent-text);
}

/* Parpadeo al llegar pedido */
@keyframes kdsFlash {
  0%   { transform: scale(1);    filter: brightness(1); }
  20%  { transform: scale(1.02); filter: brightness(var(--flash-brightness)); }
  40%  { transform: scale(1); }
  60%  { transform: scale(1.02); filter: brightness(var(--flash-brightness)); }
  100% { transform: scale(1);    filter: brightness(1); }
}

.kds-card.flash {
  animation: kdsFlash .6s ease-in-out 0s 8;
}

@keyframes headPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
  50%  { box-shadow: 0 0 0 5px var(--head-pulse); }
  100% { box-shadow: 0 0 0 0 rgba(255,193,7,0); }
}

.col-head.pulse-new {
  animation: headPulse .6s ease-in-out 0s 8;
}

/* =========================================================
   MODO COMPACTO
   ========================================================= */

body.compact .container-fluid{
  padding: .75rem !important;
}

body.compact .col-head{
  padding: .55rem .8rem;
  margin-bottom: .55rem;
  border-radius: .75rem;
}

body.compact .col-title{
  font-size: .95rem;
}

body.compact .col-sub{
  font-size: .78rem;
}

body.compact .kds-card .card-body{
  padding: .55rem .8rem;
}

body.compact .kds-title{
  font-size: 1rem;
  margin-bottom: 0;
}

body.compact .kds-comanda-inline{
  font-size: .82rem;
}

body.compact .kds-meta{
  font-size: .74rem;
  line-height: 1.2;
}

body.compact .kds-line{
  font-size: .9rem;
  line-height: 1.2;
  margin-bottom: 1px;
}

body.compact .muted{
  font-size: .78rem;
}

body.compact .kds-state,
body.compact .kds-ribbon{
  font-size: .58rem;
  padding: .15rem .4rem;
}

body.compact .kds-bigbtn{
  font-size: .8rem;
  padding: .18rem .45rem;
  border-radius: 5px;
}

body.compact .kds-badge{
  font-size: .78rem;
}

body.compact hr{
  margin: .45rem 0;
}

body.compact .d-flex.gap-2.mt-3{
  margin-top: .5rem !important;
  gap: .35rem !important;
}

/* Color del tiempo transcurrido */
.kds-time{
  font-weight:600;
  font-size:.9rem;
  margin-left:8px;
}

.kds-time::before{
  content:"🕒";
  margin-right:4px;
  opacity:.9;
}

.kds-time-label{
  color:#8a939c;
  font-size:.9rem;
}

.kds-time.normal{
  color:#8a939c;
}

.kds-time.warn{
  color:#e2b200;
}

.kds-time.urgent{
  color:#ff4d4d;
  animation: timePulse 1.6s infinite;
}

@keyframes timePulse{
  0%{opacity:1}
  50%{opacity:.45}
  100%{opacity:1}
}

.kds-card-header{
  margin: -10px -14px 10px -14px;
  padding: 10px 14px 8px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Fondo de la Card */
body.theme-dark .kds-card.state-new .kds-card-header{
  background: rgba(255,193,7,.06);
}

body.theme-dark .kds-card.state-ip .kds-card-header{
  background: rgba(13,202,240,.06);
}

body.theme-light .kds-card.state-new .kds-card-header{
  background: rgba(255,193,7,.10);
}

body.theme-light .kds-card.state-ip .kds-card-header{
  background: rgba(13,202,240,.10);
}