/* Tema Fuego (marca del software): Plus Jakarta Sans, fondo gris cálido, tarjetas blancas, barra lateral negra
   y acentos brasa (naranja). Botones y etiquetas tipo píldora. Nació del tema "vidrio" (de ahí la clase).
   Se activa con la clase .vidrio en <html>: todas las pantallas del personal (no la web de clientes). */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

.vidrio {
  --ink: #0b0b0c; --muted: #6d6d72; --line: rgba(11, 11, 12, .12); --accent: #0b0b0c; --accent-text: #fff;
  --glass: #fff; --glass-strong: #fff; --edge: rgba(11, 11, 12, .06);
  --lift: 0 1px 2px rgba(20, 20, 30, .04), 0 8px 24px rgba(20, 20, 30, .04);
  --wide: 'Plus Jakarta Sans', system-ui, sans-serif; --lime: #FF7A1A; --lime-dark: #E8410C;
}
.vidrio body {
  font-family: var(--wide); color: var(--ink); font-size: 13.5px; background: #ECECE8;
}
/* Superficies de vidrio */
.vidrio .card, .vidrio .orow, .vidrio .pos, .vidrio .content > .bar, .vidrio .statusbar, .vidrio dialog, .vidrio .omenu {
  background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--lift);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.vidrio .card, .vidrio .pos { border-radius: 22px; }
.vidrio .orow { border-radius: 18px; }
.vidrio dialog { background: var(--glass-strong); border-radius: 26px; }
.vidrio dialog::backdrop { background: rgba(230, 230, 233, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Menú lateral negro: logo de Fuego arriba, el restaurante en una tarjeta y la sección activa en brasa */
.vidrio #side { background: var(--ink); color: #fff; border-right: 0; box-shadow: none; }
.vidrio #side .ryze { padding: 4px 8px 0; color: #fff; }
.vidrio #side .ryze { display: flex; align-items: flex-end; gap: 6px; }
.vidrio #side .ryze svg { height: 26px; display: block; }
/* subnombre a la mitad del tamaño de "ryze", sobre la misma línea base del texto del logo */
.vidrio #side .ryze span { color: var(--lime); font-weight: 600; font-size: 13px; letter-spacing: 0; line-height: 1; margin-bottom: 5.4px; }
.vidrio #side .brand { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; background: #1C1D1F; border-radius: 16px; padding: 10px 12px; line-height: 1.25; }
.vidrio #side .place small { color: #8A8A8F; }
.vidrio #side .place select { background: #1C1D1F; color: #fff; border: 1px solid #2E3033; border-radius: 999px; }
.vidrio #side nav a { color: #D8D8DC; border-radius: 999px; padding: 8px 14px; font-weight: 500; }
.vidrio #side nav a:hover { background: #1C1D1F; color: #fff; }
.vidrio #side nav a[aria-current="page"] { background: var(--lime); color: var(--ink); font-weight: 700; }
.vidrio #side nav a.switch { border-top-color: #2E3033; color: #8A8A8F; }
.vidrio #side .who { color: #8A8A8F; }
.vidrio #side .who a { color: #8A8A8F !important; }
.vidrio #side .who button { border-color: #3A3C40; color: #fff; }
.vidrio #side .who button:hover:not(:disabled) { background: #1C1D1F; }
.vidrio .mbar { background: var(--ink); }

/* Títulos anchos y pesados */
.vidrio .content > .bar { border-radius: 0 0 22px 22px; border-top: 0; }
.vidrio .content > .bar h1, .vidrio .pos h2, .vidrio .board h2, .vidrio dialog h3 {
  font-family: var(--wide); font-weight: 800; letter-spacing: -.02em; }
.vidrio .content > .bar h1 { font-size: 22px; }
.vidrio .board h2 { font-size: 10px; display: inline-flex; padding: 4px 11px; border: 1.5px solid var(--ink); border-radius: 999px; margin-bottom: 12px; }
.vidrio .pos h2 { font-size: 14px; }
.vidrio .order > .spread:first-child b, .vidrio .orow-id b { font-family: var(--wide); font-weight: 800; font-size: 13px; letter-spacing: -.01em; }

/* Botones: píldoras. El principal, negro sólido. */
.vidrio button { border-radius: 999px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.vidrio .mbar button, .vidrio .mbar button:hover { border: 0; background: transparent; color: #fff; transform: none; }
.vidrio button:hover:not(:disabled) { background: rgba(255, 255, 255, .8); transform: translateY(-1px); }
.vidrio .primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.vidrio .primary:hover:not(:disabled) { background: #222; }
.vidrio .danger { background: #c62828; border-color: #c62828; color: #fff; }
.vidrio .dots { border: 0; font-weight: 900; }
.vidrio .order > .primary { padding: 8px; font-family: var(--wide); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }

/* Etiquetas tipo píldora con borde */
.vidrio .badge { background: transparent; border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .04em; padding: 2px 9px; color: var(--ink); }
.vidrio .seg { background: rgba(255, 255, 255, .5); border: 1.5px solid var(--ink); }
.vidrio .seg button { border: 0; }
.vidrio .seg button.on { background: var(--ink); color: #fff; }
.vidrio .counter { border: 1.5px solid var(--ink); background: rgba(255, 255, 255, .5); }
.vidrio .counter b { font-family: var(--wide); font-weight: 700; font-size: 12px; }
.vidrio .counter button { border-width: 1.5px; }

/* Cuenta regresiva: mantiene sus colores de estado, en píldora con borde */
.vidrio .timer { border: 1.5px solid currentColor; font-family: var(--wide); font-weight: 700; font-size: 11px; }
.vidrio .timer.ok { background: #e8f6ec; }
.vidrio .timer.late { border-color: #d32f2f; }

/* Panel Nuevo pedido */
.vidrio .pos input, .vidrio .pos select, .vidrio dialog input, .vidrio dialog select, .vidrio #tools input, .vidrio #tools select {
  background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 14px; }
.vidrio .pos input:focus, .vidrio dialog input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.vidrio .pos-products button { border: 1px solid var(--edge); background: var(--glass-strong); border-radius: 16px; box-shadow: var(--lift); text-align: left; }
.vidrio .pos-products button b { font-family: var(--wide); font-weight: 700; font-size: 11.5px; }
.vidrio .pos-cats button { border-width: 1.5px; }
.vidrio .pos-cats button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vidrio .pos-client { border: 1px solid var(--edge); background: rgba(255, 255, 255, .45); border-radius: 16px; }
.vidrio .pos-actions button { border-radius: 18px; }
.vidrio .pos-total .total b { font-family: var(--wide); font-weight: 800; font-size: 15px; }

/* Barra de estado de canales */
.vidrio .statusbar { margin: 10px 16px 0; border-radius: 999px; }
.vidrio .light { font-weight: 600; }

/* Detalles */
.vidrio .knote { background: rgba(255, 244, 204, .8); border-radius: 10px; }
.vidrio .line { border-bottom-color: var(--line); }
.vidrio .muted, .vidrio small.muted { color: var(--muted); }
.vidrio .omenu { border-radius: 18px; }
.vidrio .omenu button { border: 0; border-radius: 0; }
.vidrio .stepper { border: 1.5px solid var(--ink); background: transparent; }
.vidrio .stepper button { border: 0; }
/* La letra ancha necesita más espacio para el código y la cuenta regresiva en la vista Lista */
.vidrio .orow { grid-template-columns: 160px 120px 1fr 2fr 110px auto; }
@container (max-width: 900px) { .vidrio .orow { grid-template-columns: 150px 1fr 100px auto; } }

/* ===== Resto del software del personal ===== */
/* Superficies: listas y detalles (Carta, Turnos, Usuarios…), tarjetas KPI, tickets del KDS */
.vidrio .md-list, .vidrio .md-detail, .vidrio .ticket, .vidrio .ds-nav, .vidrio .ds-form, .vidrio .ds-frame, .vidrio fieldset {
  background: var(--glass); border: 1px solid var(--edge); box-shadow: var(--lift); border-radius: 22px;
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
}
.vidrio fieldset { border-radius: 16px; box-shadow: none; }
.vidrio .md-detail h2, .vidrio .reports h2, .vidrio .ds-form h2 {
  font-family: var(--wide); font-weight: 800; letter-spacing: -.02em; font-size: 15px; }
.vidrio .reports h3, .vidrio .md-detail h3, .vidrio dialog h4 { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.vidrio .md-tools, .vidrio .md-new { border-color: var(--line); }
.vidrio .md-head { color: var(--muted); }
.vidrio .md-item { border-bottom-color: var(--line); border-radius: 0; }
.vidrio .md-item:hover { background: rgba(255, 255, 255, .6); transform: none; }
.vidrio .md-item.on { background: rgba(11, 11, 12, .06); box-shadow: inset 3px 0 0 var(--ink); }
.vidrio .md-foot { border-top-color: var(--line); }

/* Pestañas (Carta, Página web) */
.vidrio .tabs button { border: 0; border-radius: 999px; color: var(--muted); padding: 6px 12px; }
.vidrio .tabs button.on { background: var(--ink); color: #fff; border: 0; }
.vidrio .tabs.sub { border-bottom: 0; gap: 4px; }

/* Etiquetas del selector (modificadores, sugerencias) */
.vidrio .tags { background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 14px; }
.vidrio .tags .chip { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); font-weight: 600; }
.vidrio .tags .chip button { border: 0; }
.vidrio .tags .drop { border-radius: 14px; background: var(--glass-strong); }

/* Tablas */
.vidrio .grid-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--line); }
.vidrio .grid-table td { border-bottom-color: var(--line); }
.vidrio .history tbody tr:hover { background: rgba(255, 255, 255, .6); }

/* Campos de formularios en todo el personal */
.vidrio .md-detail input:not([type=checkbox]):not([type=file]):not([type=color]):not([type=radio]), .vidrio .md-detail select, .vidrio .md-detail textarea,
.vidrio label.field input, .vidrio label.field select, .vidrio label.field textarea, .vidrio .md-tools input, .vidrio .md-tools select, .vidrio .md-new input,
.vidrio .ds-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), .vidrio .ds-form select, .vidrio .ds-form textarea,
.vidrio .cfg-row input:not([type=checkbox]), .vidrio .cfg-row select, .vidrio #filters select, .vidrio #filters input, .vidrio .cuadre input {
  background: rgba(255, 255, 255, .75); border: 1px solid var(--line); border-radius: 12px; }

/* KPIs y gráficos (Reportes, Turnos) */
.vidrio .kpi b { font-family: var(--wide); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.vidrio .bar-fill { background: var(--ink); opacity: .85; border-radius: 6px 6px 0 0; }
.vidrio .share-bar span { background: var(--ink); opacity: .75; }

/* Diseño web (admin) y opciones */
.vidrio .ds-nav button { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.vidrio .ds-nav button.on { background: rgba(11, 11, 12, .06); box-shadow: inset 3px 0 0 var(--ink); }
.vidrio .choice { border-color: var(--line); border-radius: 14px; background: rgba(255, 255, 255, .5); }
.vidrio .choice:has(input:checked) { border-color: var(--ink); background: rgba(255, 255, 255, .9); }
.vidrio .ds-save { background: var(--glass-strong); }

/* KDS */
.vidrio .ticket { border-top-width: 6px; }
.vidrio .ticket header b { font-family: var(--wide); font-weight: 800; }
.vidrio .kitem { border-top-color: var(--line); }

/* Avisos */
.vidrio .toast { background: var(--ink); border-radius: 999px; padding: 8px 18px; }
.vidrio .ok { color: #1b7a3a; }

/* ===== Ingreso del personal: fondo negro con brillo brasa y el logo de Fuego ===== */
.vidrio body:has(#login) { min-height: 100vh; background: radial-gradient(120% 70% at 50% 115%, #E8410C 0%, #2a0d02 40%, var(--ink) 70%); }
.vidrio body:has(#login) .top { background: transparent; color: #fff; box-shadow: none; font-weight: 700; letter-spacing: -.01em; }
.vidrio #login { padding: 28px; border-radius: 28px; background: #fff; border: 0; }
.vidrio #login h3 { font-weight: 800; font-size: 26px; letter-spacing: -.03em; margin-top: 0; }
.vidrio #login .primary { padding: 12px; }
.vidrio body:has(#login) .ryze-login { color: #fff; }
/* Botones que son filas de una lista (no píldoras) */
.vidrio .md-item { border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.vidrio .suggest button { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--glass-strong); }
.vidrio .md-item:hover, .vidrio .suggest button:hover, .vidrio .omenu button:hover, .vidrio .ds-nav button:hover { transform: none; }

/* ===== Fuego en el contenido (como las referencias): controles rellenos en gris suave, sin borde negro,
   rótulos en texto normal y el brasa para lo activo o destacado. Va al final para ganarle a las reglas de arriba. ===== */
.vidrio { --soft: #F1F1EC; --soft-hover: #E6E6E0; --field: #F6F6F2; }
.vidrio .card, .vidrio .orow, .vidrio .pos, .vidrio .md-list, .vidrio .md-detail, .vidrio .ticket, .vidrio .ds-nav, .vidrio .ds-form,
.vidrio .ds-frame, .vidrio fieldset, .vidrio .content > .bar, .vidrio .statusbar { border: 1px solid rgba(11, 11, 12, .05); border-radius: 20px; }
.vidrio .content > .bar { border-radius: 0 0 20px 20px; border-top: 0; }

/* Botones: píldoras rellenas; el principal negro; los de peligro rojos */
.vidrio button { border: 1px solid transparent; background: var(--soft); color: var(--ink); font-weight: 600; }
.vidrio button:hover:not(:disabled) { background: var(--soft-hover); transform: none; }
.vidrio .primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: none; }
.vidrio .primary:hover:not(:disabled) { background: #26282B; }
.vidrio .danger { background: #c62828; border-color: #c62828; color: #fff; }
.vidrio .mbar button, .vidrio .mbar button:hover { background: transparent; }
.vidrio .md-item, .vidrio .suggest button, .vidrio .omenu button, .vidrio .ds-nav button { background: transparent; }
.vidrio .md-item:hover, .vidrio .suggest button:hover, .vidrio .omenu button:hover, .vidrio .ds-nav button:hover { background: var(--soft); }
.vidrio .md-item.on, .vidrio .ds-nav button.on { background: var(--soft); box-shadow: inset 3px 0 0 var(--lime-dark); }

/* Pestañas y selectores segmentados: fondo gris, la opción activa en negro */
.vidrio .tabs button { background: transparent; }
.vidrio .tabs button:hover:not(:disabled) { background: var(--soft); }
.vidrio .seg { background: var(--soft); border: 0; }
.vidrio .seg button { background: transparent; }
.vidrio .seg button.on, .vidrio .pos-cats button.on { background: var(--ink); color: #fff; }

/* Etiquetas: rellenas, texto normal; los títulos de columnas del tablero como chips */
.vidrio .badge { background: var(--soft); border: 0; text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 600; padding: 3px 10px; }
.vidrio .board h2 { background: #fff; border: 0; font-size: 12px; font-weight: 700; padding: 5px 12px; letter-spacing: 0; box-shadow: var(--lift); }
.vidrio .tags { background: var(--field); border: 1px solid transparent; }
.vidrio .tags .chip { background: #fff; border: 0; box-shadow: var(--lift); }
.vidrio .counter, .vidrio .stepper { background: var(--soft); border: 0; }
.vidrio .counter button, .vidrio .stepper button { background: #fff; border: 0; }

/* Campos: claros y sin borde duro; al escribir, borde negro */
.vidrio input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]), .vidrio select, .vidrio textarea {
  background: var(--field); border: 1px solid transparent; border-radius: 12px; }
.vidrio input:focus, .vidrio select:focus, .vidrio textarea:focus { outline: 0; border-color: var(--ink); background: #fff; }
.vidrio #side .place select { background: #1C1D1F; border-color: #2E3033; }
.vidrio .choice { border: 1px solid transparent; background: var(--field); }
.vidrio .choice:has(input:checked) { border-color: var(--ink); background: #fff; }
.vidrio input[type=checkbox], .vidrio input[type=radio] { accent-color: var(--ink); }

/* Rótulos en texto normal (no mayúsculas) */
.vidrio .reports h3, .vidrio .md-detail h3, .vidrio dialog h4 { text-transform: none; letter-spacing: -.01em; font-size: 14px; color: var(--ink); }
.vidrio .grid-table th { text-transform: none; letter-spacing: 0; }
.vidrio .order > .primary { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

/* Gráficos: barras en negro con la más alta en brasa */
.vidrio .bar-fill { opacity: 1; border-radius: 8px 8px 3px 3px; }
.vidrio .bar-fill.top { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .15); }
.vidrio .kpi b { font-weight: 800; font-size: 22px; letter-spacing: -.02em; }
.vidrio #side .who button { background: #1C1D1F; border-color: #2E3033; color: #fff; }
.vidrio #side .who button:hover:not(:disabled) { background: #2A2C2F; }