@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;1,14..32,400&display=swap');

/* ─────────────────────────────────────────────────────────────────────────
   Design system de El Rincon de los Antojitos.
   Copiado del ERP de Agua Inmaculada con la misma nomenclatura de tokens y
   los mismos componentes, para que las pantallas sean intercambiables.

   PALETA DE MARCA. El gris pizarra provisional se retiro el 2026-08-16: la
   escala --erp-color-primary-* es el verde de la identidad y --erp-color-accent-*
   el naranja que la acompaña. Ningun otro archivo del frontend tiene
   hexadecimales, asi que el cambio de marca vive completo en este bloque.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light;
  font-family: 'Inter', system-ui, sans-serif;

  --erp-color-bg: #f3f4f6;
  --erp-color-surface: #ffffff;
  --erp-color-border: #e5e7eb;
  --erp-color-text: #1f2937;
  --erp-color-text-muted: #6b7280;

  /* Marca: verde de la identidad. El 500 es el verde del logotipo; el 600 y el
     700 estan oscurecidos hasta pasar 4.5:1 con texto blanco, porque el 600
     pinta la barra superior y los botones primarios. */
  --erp-color-primary-50: #f3faef;
  --erp-color-primary-100: #e3f4d9;
  --erp-color-primary-200: #c6e8b4;
  --erp-color-primary-400: #79c455;
  --erp-color-primary-500: #57ab35;
  --erp-color-primary-600: #3b8425;
  --erp-color-primary-700: #2c6519;

  /* Sombra y foco derivados del primario, para no tener rgba hardcodeados */
  --erp-color-primary-shadow: rgba(59, 132, 37, .20);
  --erp-color-primary-shadow-strong: rgba(59, 132, 37, .30);
  --erp-color-primary-ring: rgba(87, 171, 53, .25);

  /* Marca: naranja de acompañamiento. NO lleva texto blanco encima: el 500
     da 2.8:1 contra blanco. Es para filos, subrayados y realces; cuando el
     naranja tenga que ser texto sobre fondo claro, va el 700. */
  --erp-color-accent-50: #fff6ed;
  --erp-color-accent-200: #fbd2a5;
  --erp-color-accent-500: #ef7c1f;
  --erp-color-accent-600: #d2650f;
  --erp-color-accent-700: #9c4a0a;

  --erp-color-danger-50: #fff1f2;
  --erp-color-danger-100: #ffe4e6;
  --erp-color-danger-500: #ef4444;
  --erp-color-danger-bg: #fff1f2;
  --erp-color-danger-line: #fecaca;
  --erp-color-success-500: #16a34a;
  --erp-color-success-600: #15803d;
  --erp-color-success-bg: #f0fdf4;
  --erp-color-success-line: #bbf7d0;
  --erp-color-warning-500: #f59e0b;
  --erp-color-warning-bg: #fffbeb;
  --erp-color-warning-line: #fde68a;
  --erp-color-blue: #3b82f6;
  --erp-color-blue-bg: #eff6ff;
  --erp-color-blue-line: #bfdbfe;

  --erp-font-family-base: 'Inter', system-ui, sans-serif;
  --erp-font-size-xs: 11px;
  --erp-font-size-sm: 12px;
  --erp-font-size-md: 14px;
  --erp-font-size-lg: clamp(16px, 1.4vw, 20px);
  --erp-font-size-xl: clamp(18px, 2vw, 24px);

  --erp-space-2: clamp(4px, 0.4vw, 6px);
  --erp-space-3: clamp(6px, 0.6vw, 10px);
  --erp-space-4: clamp(8px, 0.8vw, 12px);
  --erp-space-5: clamp(10px, 1vw, 16px);

  --erp-radius-md: 8px;
  --erp-radius-lg: 12px;
  --erp-shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 4px 14px rgba(0,0,0,.05);

  --erp-sidebar-width: clamp(176px, 12.6vw, 196px);
  --erp-sidebar-width-collapsed: 62px;
}

* { box-sizing: border-box; }

/* El atributo hidden lo pone el UA con display:none, y cualquier clase de aqui que declare
   display (los badges y los botones son inline-flex) le gana por ser estilo de autor. Sin esta
   regla, esconder un elemento desde el JS con .hidden = true no hace nada. */
[hidden] { display: none !important; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--erp-color-bg);
  color: var(--erp-color-text);
  font-family: var(--erp-font-family-base);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}

/* ── Layout ─────────────────────────────────────────────────────── */

.erp-layout {
  display: grid;
  grid-template-areas:
    "sidebar header"
    "sidebar content";
  grid-template-columns: var(--erp-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}

.erp-layout__sidebar { grid-area: sidebar; }
.erp-layout__header { grid-area: header; }
.erp-layout__content { grid-area: content; min-width: 0; padding: var(--erp-space-5); }

.erp-header {
  align-items: center;
  background: var(--erp-color-primary-600);
  /* El filo naranja repite la marca: banda verde cortada por el trazo naranja. */
  border-bottom: 3px solid var(--erp-color-accent-500);
  box-shadow: var(--erp-shadow-sm);
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-space-2);
  justify-content: space-between;
  padding: 8px 16px;
  width: 100%;
}

.erp-header h1,
.erp-header__title {
  font-size: 1.125rem;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.erp-header__actions {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────── */

.erp-sidebar {
  background: var(--erp-color-surface);
  border-right: 1px solid var(--erp-color-border);
  display: flex;
  flex-direction: column;
  gap: var(--erp-space-3);
  min-height: 100vh;
  padding: var(--erp-space-4) var(--erp-space-3);
  position: sticky;
  top: 0;
}

.erp-sidebar__brand {
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 4px 6px 10px;
}

.erp-sidebar__brand-mark {
  align-items: center;
  background: var(--erp-color-primary-600);
  border-radius: 10px;
  color: #fff;
  display: flex;
  font-weight: 700;
  height: 34px;
  justify-content: center;
  letter-spacing: .5px;
  width: 34px;
}

.erp-sidebar__brand-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.15;
}

.erp-sidebar__brand-sub {
  color: var(--erp-color-text-muted);
  font-size: 11px;
}

.erp-sidebar__nav { display: grid; gap: 2px; }

.erp-sidebar__link {
  align-items: center;
  border-radius: var(--erp-radius-md);
  color: var(--erp-color-text);
  display: flex;
  font-size: 13px;
  font-weight: 500;
  gap: 9px;
  padding: 8px 10px;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.erp-sidebar__link:hover { background: var(--erp-color-primary-50); }

.erp-sidebar__link.is-active {
  background: var(--erp-color-primary-100);
  color: var(--erp-color-primary-700);
  font-weight: 600;
}

.erp-sidebar__footer {
  border-top: 1px solid var(--erp-color-border);
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--erp-space-3);
}

.erp-sidebar__user { display: grid; gap: 1px; padding: 0 6px; }
.erp-sidebar__user-name { font-size: 12px; font-weight: 600; }
.erp-sidebar__user-role { color: var(--erp-color-text-muted); font-size: 11px; }

/* ── Componentes ────────────────────────────────────────────────── */

.erp-card {
  background: var(--erp-color-surface);
  border: 1px solid var(--erp-color-border);
  border-radius: var(--erp-radius-lg);
  box-shadow: var(--erp-shadow-sm);
  display: grid;
  gap: var(--erp-space-3);
  overflow: hidden;
  padding: var(--erp-space-4);
}

.erp-card__header {
  align-items: start;
  display: flex;
  gap: var(--erp-space-3);
  justify-content: space-between;
}

.erp-card__header--bordered {
  border-bottom: 1px solid var(--erp-color-border);
  padding-bottom: var(--erp-space-3);
}

.erp-card__body { display: grid; gap: var(--erp-space-3); min-width: 0; }

.erp-card__footer {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-space-2);
  justify-content: flex-end;
}

/* Naranja y no verde: en las pantallas que combinan --accent con --accent-green
   dos filos verdes contiguos se confundian, y el verde ya lo carga el primario. */
.erp-card--accent       { border-top: 3px solid var(--erp-color-accent-500); }
.erp-card--accent-green { border-top: 3px solid var(--erp-color-success-500); }
.erp-card--accent-amber { border-top: 3px solid var(--erp-color-warning-500); }
.erp-card--accent-red   { border-top: 3px solid var(--erp-color-danger-500); }

.erp-button {
  align-items: center;
  background: var(--erp-color-primary-600);
  border: 0;
  border-radius: var(--erp-radius-md);
  box-shadow: 0 2px 8px var(--erp-color-primary-shadow);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  gap: 6px;
  min-height: 32px;
  padding: 6px 14px;
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.erp-button:hover:not(:disabled) {
  background: var(--erp-color-primary-700);
  box-shadow: 0 4px 12px var(--erp-color-primary-shadow-strong);
  transform: translateY(-1px);
}

.erp-button:disabled { cursor: not-allowed; opacity: .65; }

.erp-button:focus-visible {
  outline: 3px solid var(--erp-color-primary-ring);
  outline-offset: 1px;
}

.erp-button--secondary {
  background: var(--erp-color-primary-100);
  box-shadow: none;
  color: var(--erp-color-primary-700);
}

.erp-button--secondary:hover:not(:disabled) { background: var(--erp-color-primary-200); }

.erp-button--outline {
  background: transparent;
  border: 1px solid var(--erp-color-border);
  box-shadow: none;
  color: var(--erp-color-text);
}

.erp-button--outline:hover:not(:disabled) {
  background: var(--erp-color-primary-50);
  border-color: var(--erp-color-primary-200);
  color: var(--erp-color-primary-700);
}

.erp-button--danger {
  background: var(--erp-color-danger-500);
  box-shadow: 0 2px 8px rgba(239,68,68,.2);
}

.erp-button--success {
  background: var(--erp-color-success-500);
  box-shadow: 0 2px 8px rgba(22,163,74,.2);
}

.erp-button--success:hover:not(:disabled) {
  background: var(--erp-color-success-600);
  box-shadow: 0 4px 12px rgba(22,163,74,.3);
}

/* Tamano de tablet: se toca con el dedo, no con mouse. */
.erp-button--xl {
  font-size: 16px;
  justify-content: center;
  min-height: 58px;
  padding: 12px 18px;
  width: 100%;
}

.erp-input,
.erp-select,
.erp-textarea {
  background: #fff;
  border: 1.5px solid var(--erp-color-border);
  border-radius: var(--erp-radius-md);
  color: var(--erp-color-text);
  font: inherit;
  min-height: 34px;
  padding: 6px 10px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
}

.erp-input:focus,
.erp-select:focus,
.erp-textarea:focus {
  border-color: var(--erp-color-primary-400);
  box-shadow: 0 0 0 3px var(--erp-color-primary-ring);
  outline: none;
}

.erp-input::placeholder,
.erp-textarea::placeholder { color: var(--erp-color-text-muted); }

.erp-textarea { min-height: 80px; resize: vertical; }

.erp-field { display: grid; gap: 4px; }
.erp-field > label { font-size: 12px; font-weight: 600; }

.erp-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 600;
  gap: 5px;
  min-height: 22px;
  padding: 3px 10px;
}

.erp-badge--neutral { background: #fff; border-color: var(--erp-color-border); color: var(--erp-color-text-muted); }
.erp-badge--success { background: var(--erp-color-success-bg); border-color: var(--erp-color-success-line); color: var(--erp-color-success-500); }
.erp-badge--warning { background: var(--erp-color-warning-bg); border-color: var(--erp-color-warning-line); color: #b45309; }
.erp-badge--danger  { background: var(--erp-color-danger-bg);  border-color: var(--erp-color-danger-line);  color: #dc2626; }
/* Clasificacion, no estado: distingue sin sugerir que algo salio bien o mal.
   Va en azul y no en el primario porque el primario es verde de marca: en
   verde claro este badge se leia igual que --success, que si es estado. */
.erp-badge--info    { background: var(--erp-color-blue-bg); border-color: var(--erp-color-blue-line); color: #1d4ed8; }

.erp-result {
  background: rgba(255,255,255,.94);
  border: 1px solid var(--erp-color-border);
  border-radius: var(--erp-radius-md);
  color: var(--erp-color-text-muted);
  padding: 12px 14px;
  /* Algunos resultados traen un renglon por sucursal; se respetan los saltos de linea
     para no tener que armar HTML desde el JS. */
  white-space: pre-line;
}

.erp-result--success { background: var(--erp-color-success-bg); border-color: var(--erp-color-success-line); color: #15803d; }
.erp-result--warning { background: var(--erp-color-warning-bg); border-color: var(--erp-color-warning-line); color: #b45309; }
.erp-result--error   { background: var(--erp-color-danger-bg);  border-color: var(--erp-color-danger-line);  color: #b91c1c; }

.erp-table {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
}

.erp-table th,
.erp-table td {
  border-bottom: 1px solid var(--erp-color-border);
  padding: 8px 10px;
  text-align: left;
}

.erp-table th {
  color: var(--erp-color-text-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.erp-table tbody tr:hover { background: var(--erp-color-primary-50); }
.erp-table__num { font-variant-numeric: tabular-nums; text-align: right; }

.erp-table-wrap { overflow-x: auto; }

.erp-empty {
  color: var(--erp-color-text-muted);
  padding: 24px 12px;
  text-align: center;
}

.erp-spinner {
  animation: erp-spin .7s linear infinite;
  border: 2px solid var(--erp-color-border);
  border-radius: 50%;
  border-top-color: var(--erp-color-primary-600);
  display: inline-block;
  height: 20px;
  width: 20px;
}

@keyframes erp-spin { to { transform: rotate(360deg); } }

.stat-row {
  align-items: center;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
}
.stat-row:last-child { border-bottom: none; }
.stat-key { color: var(--erp-color-text-muted); font-size: 12px; }
.stat-val { font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 700; }

.erp-grid { display: grid; gap: var(--erp-space-4); }
/* El numero es el ancho minimo de la columna, no un conteo fijo: auto-fit acomoda las que quepan
   y en movil todas caen en una sola. */
.erp-grid--2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.erp-grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.erp-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Lista de casillas en linea: permisos por pantalla, filtros de varias opciones. */
.erp-checks { display: flex; flex-wrap: wrap; gap: var(--erp-space-3); }
.erp-check {
  align-items: center;
  border: 1px solid var(--erp-color-border);
  border-radius: var(--erp-radius-md);
  cursor: pointer;
  display: flex;
  font-size: var(--erp-font-size-sm);
  gap: 6px;
  padding: 6px 10px;
}
.erp-check:has(input:checked) {
  background: var(--erp-color-primary-50);
  border-color: var(--erp-color-primary-400);
}
.erp-check:has(input:disabled) { color: var(--erp-color-text-muted); cursor: default; }
.erp-check input { accent-color: var(--erp-color-primary-600); margin: 0; }

.erp-hint { color: var(--erp-color-text-muted); font-size: 12px; margin-right: auto; }
.erp-stat-big { font-size: clamp(22px, 3vw, 30px); font-variant-numeric: tabular-nums; font-weight: 700; }
.erp-stat-sub { color: var(--erp-color-text-muted); font-size: 12px; }

/* ── Dialogo ────────────────────────────────────────────────────── */

.erp-dialog-backdrop {
  align-items: center;
  background: rgba(15, 23, 42, .45);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 220;
}

.erp-dialog {
  background: var(--erp-color-surface);
  border-radius: var(--erp-radius-lg);
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
  display: grid;
  gap: var(--erp-space-3);
  max-width: 420px;
  padding: var(--erp-space-5);
  width: 100%;
}

.erp-dialog__title { font-size: 15px; font-weight: 700; margin: 0; }
.erp-dialog__message { color: var(--erp-color-text-muted); margin: 0; }
.erp-dialog__actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── Login ──────────────────────────────────────────────────────── */

.login-page {
  align-items: center;
  background: linear-gradient(160deg, var(--erp-color-primary-700), var(--erp-color-primary-500));
  display: flex;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  background: var(--erp-color-surface);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  display: grid;
  gap: var(--erp-space-4);
  max-width: 380px;
  padding: 28px;
  width: 100%;
}

.login-brand { display: grid; gap: 10px; justify-items: center; text-align: center; }

.login-brand__mark {
  align-items: center;
  background: var(--erp-color-primary-600);
  border-radius: 14px;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  height: 52px;
  justify-content: center;
  letter-spacing: .5px;
  width: 52px;
}

.login-brand__name { font-size: 17px; font-weight: 700; }
.login-brand__sub { color: var(--erp-color-text-muted); font-size: 12px; }

.login-form { display: grid; gap: var(--erp-space-3); }

.login-password-wrap { position: relative; }
.login-password-wrap .erp-input { padding-right: 40px; }

.login-password-toggle {
  align-items: center;
  background: none;
  border: 0;
  color: var(--erp-color-text-muted);
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 38px;
}

.login-kiosk {
  align-items: center;
  border: 1px solid var(--erp-color-border);
  border-radius: var(--erp-radius-md);
  color: var(--erp-color-text);
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease;
}

.login-kiosk:hover { background: var(--erp-color-primary-50); border-color: var(--erp-color-primary-200); }
.login-kiosk strong { display: block; font-size: 13px; }
.login-kiosk small { color: var(--erp-color-text-muted); font-size: 11px; }

/* ── Kiosko de turno ────────────────────────────────────────────── */

/* Pantalla completa sin sidebar: la tablet de la cocina no tiene sesion ni menu.
   El fondo la distingue de un vistazo del ERP con sesion. */

.erp-kiosk {
  align-content: start;
  background: linear-gradient(160deg, var(--erp-color-primary-700), var(--erp-color-primary-500));
  display: grid;
  gap: var(--erp-space-5);
  min-height: 100vh;
  padding: var(--erp-space-5);
}

.erp-kiosk__header {
  align-items: center;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-space-4);
  justify-content: space-between;
}

.erp-kiosk__brand { align-items: center; display: flex; gap: 12px; }

.erp-kiosk__brand-mark {
  align-items: center;
  background: rgba(255,255,255,.16);
  border-radius: 12px;
  display: flex;
  font-weight: 700;
  height: 42px;
  justify-content: center;
  letter-spacing: .5px;
  width: 42px;
}

.erp-kiosk__brand-name { font-size: 15px; font-weight: 700; line-height: 1.2; }
.erp-kiosk__brand-sub { font-size: 12px; opacity: .82; }

.erp-kiosk__clock {
  font-size: clamp(30px, 5vw, 46px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  line-height: 1;
  text-align: right;
}

.erp-kiosk__date { font-size: 12px; opacity: .82; text-align: right; text-transform: capitalize; }

.erp-kiosk__grid {
  align-content: start;
  display: grid;
  gap: var(--erp-space-4);
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.erp-kiosk__pin {
  align-items: center;
  background: var(--erp-color-primary-50);
  border: 1.5px solid var(--erp-color-border);
  border-radius: var(--erp-radius-md);
  display: flex;
  gap: 14px;
  justify-content: center;
  min-height: 62px;
}

.erp-kiosk__pin-dot {
  background: var(--erp-color-primary-200);
  border-radius: 50%;
  height: 16px;
  transition: background 120ms ease, transform 120ms ease;
  width: 16px;
}

.erp-kiosk__pin-dot.is-filled { background: var(--erp-color-primary-600); transform: scale(1.15); }

.erp-keypad { display: grid; gap: var(--erp-space-3); grid-template-columns: repeat(3, 1fr); }

.erp-keypad__key {
  background: var(--erp-color-surface);
  border: 1.5px solid var(--erp-color-border);
  border-radius: var(--erp-radius-lg);
  color: var(--erp-color-text);
  cursor: pointer;
  font: inherit;
  font-size: 24px;
  font-weight: 600;
  min-height: 62px;
  transition: background 120ms ease, transform 120ms ease;
}

.erp-keypad__key:hover { background: var(--erp-color-primary-50); }
.erp-keypad__key:active { transform: scale(.97); }
.erp-keypad__key--soft { color: var(--erp-color-text-muted); font-size: 14px; }

.erp-keypad__key:focus-visible {
  outline: 3px solid var(--erp-color-primary-ring);
  outline-offset: 1px;
}

.erp-kiosk__identity { display: grid; gap: 2px; }
.erp-kiosk__identity-name { font-size: 18px; font-weight: 700; }
.erp-kiosk__identity-meta { color: var(--erp-color-text-muted); font-size: 12px; }

.erp-kiosk__actions {
  display: grid;
  gap: var(--erp-space-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.erp-kiosk__footer { color: #fff; font-size: 12px; opacity: .8; text-align: center; }
.erp-kiosk__footer a { color: #fff; }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .erp-layout {
    grid-template-areas:
      "header"
      "content";
    grid-template-columns: minmax(0, 1fr);
  }

  .erp-layout__sidebar { display: none; }
  .erp-layout__sidebar.is-open {
    display: block;
    grid-area: content;
    min-height: auto;
    position: static;
  }
}