/*========================
+PARTE 1
========================*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top left, rgba(54, 120, 255, 0.22), transparent 35%),
    radial-gradient(circle at bottom right, rgba(255, 167, 38, 0.14), transparent 35%),
    #05060a;
  color: #ffffff;
}

button {
  border: none;
  cursor: pointer;
  font-weight: 700;
  width: auto;
  flex: 0 0 auto;
}

input,
select {
  outline: none;
}

.app {
  min-height: 100vh;
}

.screen {
  display: none;
  min-height: 100vh;
}

.screen.active {
  display: block;
}

.hidden {
  display: none !important;
}

/* LOGIN */

#loginScreen {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#loginScreen.active {
  display: flex;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(28px);
}

.brand {
  text-align: center;
  margin-bottom: 32px;
}

.brand-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #1f6fff, #69a2ff);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -1px;
}

.studio-label {
  width: fit-content;
  margin: 0 auto 10px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.topbar-studio {
  margin: 0 0 7px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.055);
}

.brand h1 {
  font-size: 32px;
  margin-bottom: 8px;
}

.brand p {
  color: rgba(255, 255, 255, 0.62);
}

.login-form {
  display: grid;
  gap: 12px;
}

.login-form label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.68);
  margin-top: 8px;
}

.login-form input {
  height: 52px;
  padding: 0 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: white;
  font-size: 16px;
}

.login-error {
  margin: 4px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 107, 107, 0.28);
  border-radius: 14px;
  color: #ffb1b1;
  background: rgba(255, 77, 77, 0.1);
  font-size: 13px;
  line-height: 1.4;
}

.access-selection-copy {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.5;
}

.access-options {
  display: grid;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
}

.access-option {
  width: 100%;
  max-width: none;
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: white;
  background: rgba(255, 255, 255, 0.07);
  text-align: left;
  cursor: pointer;
}

.access-option:hover,
.access-option:focus-visible {
  border-color: rgba(105, 162, 255, 0.65);
  background: rgba(105, 162, 255, 0.14);
}

.access-option span {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.demo-hint {
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.58);
}

/* BUTTONS */

.primary-btn,
.success-btn,
.warning-btn,
.danger-btn,
.ghost-btn,
.small-btn {
  width: auto;
  max-width: max-content;
  min-width: unset;
  flex: 0 0 auto;
  border-radius: 16px;
  padding: 14px 18px;
  color: white;
  transition: 0.2s ease;
}

.primary-btn {
  background: linear-gradient(145deg, #1f6fff, #5d9bff);
}

.success-btn {
  background: linear-gradient(145deg, #17b26a, #47d18c);
}

.warning-btn {
  background: linear-gradient(145deg, #f59e0b, #fbbf24);
  color: #1b1200;
}

.danger-btn {
  background: rgba(255, 59, 48, 0.18);
  color: #ff6b63;
  border: 1px solid rgba(255, 59, 48, 0.28);
}

.ghost-btn {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.small-btn {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  padding: 10px 14px;
}

button:hover {
  transform: translateY(-1px);
}

/* POS */

.topbar {
  min-height: 86px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.topbar h2 {
  font-size: 24px;
}

.topbar p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
  margin-top: 3px;
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.top-actions button {
  width: auto;
  min-width: unset;
  flex: 0 0 auto;
  white-space: nowrap;
}

.pos-layout {
  height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  padding: 0 24px 24px;
}

/* TABLES */

.tables-panel,
.order-panel {
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  overflow: hidden;
}

.tables-panel {
  padding: 20px;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
}

.panel-header h3 {
  font-size: 22px;
}

.panel-header p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  margin-top: 3px;
}

.panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.panel-actions button {
  width: auto;
  min-width: unset;
  flex: 0 0 auto;
}

.toggle-remove-tables-btn,
#toggleRemoveProductsButton,
#toggleRemoveCategoriesButton {
  min-width: 76px;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.24);
}

.toggle-remove-tables-btn.active,
#toggleRemoveProductsButton.active,
#toggleRemoveCategoriesButton.active {
  color: #72e3aa;
  background: rgba(23, 178, 106, 0.18);
  border: 1px solid rgba(23, 178, 106, 0.28);
}

.tables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  padding-right: 4px;
}

.table-card {
  position: relative;
  min-height: 142px;
  padding: 16px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: white;
  overflow: hidden;
}

.tables-panel.remove-mode .table-card {
  border-color: rgba(255, 59, 48, 0.22);
  background:
    radial-gradient(circle at top right, rgba(255, 59, 48, 0.10), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.table-card h4 {
  font-size: 21px;
  color: white;
}

.table-card p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.table-total {
  font-size: 22px;
  font-weight: 900;
  color: white;
}

.remove-table-btn {
  display: none;
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.24);
  backdrop-filter: blur(16px);
  transition: 0.2s ease;
}

.tables-panel.remove-mode .remove-table-btn {
  display: block;
}

.remove-table-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 59, 48, 0.22);
  color: #ff8a84;
}

.inline-edit-btn {
  margin-left: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.14);
  border: 1px solid rgba(31, 111, 255, 0.24);
  vertical-align: middle;
}

.inline-edit-btn:hover {
  background: rgba(31, 111, 255, 0.22);
  color: white;
}

.status-pill {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.status-libre {
  background: rgba(255, 255, 255, 0.10);
  color: white;
}

.status-ocupada {
  background: rgba(31, 111, 255, 0.25);
  color: #8eb9ff;
}

.status-por_cobrar {
  background: rgba(245, 158, 11, 0.25);
  color: #ffc766;
}

.status-pagada {
  background: rgba(23, 178, 106, 0.25);
  color: #72e3aa;
}

.status-abierta {
  background: rgba(31, 111, 255, 0.25);
  color: #8eb9ff;
}

/* ORDER */

.order-panel {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 100%;
}

.empty-state {
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;
}

.empty-state h3 {
  font-size: 30px;
  margin-bottom: 10px;
}

.empty-state p {
  color: rgba(255, 255, 255, 0.55);
}

.order-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.order-header {
  height: 82px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.order-header h3 {
  font-size: 25px;
}

.order-header p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.order-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  padding: 0 18px 18px;
}

.products-area {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.search-box {
  position: relative;
  margin-bottom: 14px;
}

.search-box input {
  width: 100%;
  height: 50px;
  border-radius: 17px;
  padding: 0 52px 0 16px;
  color: white;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
}

.clear-search-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  line-height: 1;
  transition: 0.2s ease;
}


/*========================
+PARTE 2
========================*/



.clear-search-btn:hover {
  transform: translateY(calc(-50% - 0.5px));
  background: rgba(255, 255, 255, 0.16);
  color: white;
}

.categories-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  overflow: visible;
  margin-bottom: 16px;
  padding-bottom: 0;
}

.category-chip {
  width: 100%;
  height: 110px;

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  border-radius: 18px;

  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.08);

  color: white;

  font-size: 18px;
  font-weight: 800;

  white-space: normal;
}

.category-chip.active {
  background: linear-gradient(
    135deg,
    #2f6fff,
    #5d96ff
  );

  color: white;

  border-color: transparent;
}

.products-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  padding-right: 4px;
}

.product-card {
  min-height: 128px;
  height: auto;
  align-self: start;
  padding: 16px;
  border-radius: 24px;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.11);
}


.product-card h4 {
  font-size: 17px;
  margin-bottom: 10px;
}

.product-card strong {
  font-size: 21px;
}

/* TICKET */

.ticket-area {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px;
}

.ticket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ticket-header h4 {
  font-size: 22px;
}

.ticket-header span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.ticket-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding-right: 3px;
}

.ticket-item {
  padding: 13px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
}

.ticket-item-main {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.ticket-item h5 {
  font-size: 15px;
}

.ticket-item p {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.ticket-item-extras {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ticket-extra-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.70);
  font-size: 12px;
}

.ticket-extra-line strong {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.ticket-item-note {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  display: grid;
  gap: 4px;
  color: white;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 45%),
    rgba(21, 21, 21, 0.525);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
  backdrop-filter: blur(18px);
}

.ticket-item-note span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
}

.ticket-item-note strong {
  color: rgba(255, 255, 255, 0.591);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

.ticket-extras-widget {
  position: relative;
  margin-top: 10px;
}

.ticket-extras-widget.disabled {
  opacity: 0.55;
}

.ticket-extras-toggle {
  width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  color: white;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: 0.2s ease;
}

.ticket-extras-toggle::-webkit-details-marker {
  display: none;
}

.ticket-extras-toggle span {
  width: auto;
  min-width: unset;
  max-width: max-content;
  padding: 5px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.ticket-extras-widget[open] .ticket-extras-toggle {
  border-color: rgba(31, 111, 255, 0.42);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.26), transparent 48%),
    rgba(255, 255, 255, 0.10);
}

.ticket-extras-menu {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  padding: 9px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ticket-extra-option {
  width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: left;
  font-size: 12px;
  transition: 0.2s ease;
}

.ticket-extra-option strong {
  font-size: 12px;
  color: white;
}

.ticket-extra-option.active {
  color: white;
  background:
    radial-gradient(circle at top right, rgba(23, 178, 106, 0.22), transparent 45%),
    rgba(23, 178, 106, 0.14);
  border-color: rgba(23, 178, 106, 0.34);
}

.ticket-extra-option.apply-all {
  margin-top: 3px;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.12);
  border-color: rgba(31, 111, 255, 0.24);
}

.qty-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.qty-actions button {
  width: auto;
  min-width: 32px;
  max-width: max-content;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 10px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.10);
  color: white;
  font-size: 12px;
  white-space: nowrap;
}

.ticket-summary {
  display: grid;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  margin-top: 14px;
}

.ticket-summary div {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.68);
}

.ticket-summary strong {
  color: white;
}

.total-row {
  font-size: 22px;
  font-weight: 900;
  color: white !important;
}

.ticket-actions {
  display: grid;
  gap: 10px;
}

.ticket-actions button {
  width: 100%;
  max-width: none;
}

.ticket-actions .small-btn,
.ticket-actions .ghost-btn,
.ticket-actions .danger-btn,
.ticket-actions .warning-btn,
.ticket-actions .success-btn,
.ticket-actions .primary-btn {
  width: 100%;
  max-width: none;
}

/* DELIVERY */
.delivery-layout {
  height: calc(100vh - 86px);
  display: block;
  padding: 0 14px 14px;
}

/* Por ahora no lo borramos del HTML, solo lo ocultamos */
.delivery-ready-panel {
  display: none;
}

.delivery-order-panel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  overflow: hidden;
}

.delivery-order-panel .order-panel {
  width: 100%;
  height: 100%;
  border-radius: 30px;
  background: transparent;
  border: none;
  backdrop-filter: none;
}

.delivery-order-panel .order-content {
  height: 100%;
  background: transparent;
}

.delivery-order-panel .order-header {
  height: 74px;
  padding: 14px 16px;
}

.delivery-order-panel .order-header h3 {
  font-size: 22px;
}

.delivery-order-panel .order-header p {
  font-size: 12px;
}

.delivery-order-panel #closeOrderButton {
  display: none;
}

.delivery-order-panel .order-body {
  height: calc(100% - 74px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 14px 14px;
  background: transparent;
}

.delivery-order-panel .products-area {
  order: 2;
  flex: 1;
  min-height: 0;
  background: transparent;
}

.delivery-order-panel .ticket-area {
  order: 1;
  flex: 0 0 auto;
  max-height: 220px;
  padding: 14px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

#posScreen.delivery-mode.delivery-ticket-mode .ticket-area {
  flex: 1;
  height: 100%;
  min-height: calc(100vh - 180px);
}

.delivery-order-panel .ticket-items {
  max-height: 92px;
  overflow-y: auto;
}

.delivery-order-panel .ticket-summary {
  display: none;
}

.delivery-order-panel .ticket-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.delivery-order-panel #requestBillButton,
.delivery-order-panel #payButton,
.delivery-order-panel #releaseTableButton {
  display: none;
}

.delivery-order-panel #sendKitchenButton {
  width: 100%;
  max-width: none;
  min-height: 48px;
  border-radius: 16px;
}

.delivery-order-panel .search-box {
  margin-bottom: 12px;
}

.delivery-order-panel .search-box input {
  height: 50px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  color: white;
}

.delivery-order-panel .categories-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  overflow: visible;
  margin-bottom: 12px;
  padding-bottom: 0;
}

.delivery-order-panel .category-chip {
  width: 100%;
  max-width: none;
  height: 150px;
  min-height: 150px;

align-items: flex-end;
justify-content: flex-start;
text-align: left;

  padding: 14px;
  border-radius: 24px;

  white-space: normal;
  text-align: center;

  font-size: 18px;
  font-weight: 900;

  padding: 16px;
line-height: 1.2;
}

.delivery-order-panel .products-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 150px;
  gap: 12px;
  padding-right: 2px;
}

.delivery-order-panel .product-card {
  height: 150px;
  min-height: 150px;
  padding: 14px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.11);
}

.delivery-order-panel .product-card h4 {
  font-size: 15px;
  line-height: 1.2;
  margin-bottom: 0;
}

.delivery-order-panel .product-card strong {
  font-size: 22px;
}

.delivery-order-panel .product-card p {
  display: none;
}

.delivery-mobile-header {
  height: 64px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
}

.delivery-header-btn,
.delivery-header-title,
.delivery-header-count {
  height: 48px;
  border-radius: 18px;
  color: white;
  background: rgba(255, 255, 255, 0.085);
  border: 1px solid rgba(255, 255, 255, 0.11);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  font-weight: 800;
}
.delivery-header-btn {
  font-size: 24px;
}

.delivery-header-title {
  font-size: 15px;
  font-weight: 900;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#posScreen.delivery-mode .topbar {
  display: none;
}

#posScreen.delivery-mode .delivery-layout {
  height: 100vh;
  padding-top: 14px;
}

/* DELIVERY LIMPIO */

#posScreen.delivery-mode .topbar {
  display: none;
}

#posScreen.delivery-mode .delivery-layout {
  height: 100vh;
  padding: 14px;
}

.delivery-mobile-header {
  position: relative;
}

.kitchen-mobile-header {
  height: 64px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  position: relative;
}

.kitchen-layout {
  min-height: 100vh;
  padding: 14px;
}

.kitchen-hero {
  margin-top: 0;
}

.delivery-menu-dropdown {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 999;
  width: 220px;
  padding: 10px;
  border-radius: 22px;
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(22px);
  display: grid;
  gap: 8px;
}

.delivery-menu-dropdown button {
  width: 100%;
  max-width: none;
  padding: 14px;
  border-radius: 16px;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.delivery-menu-dropdown .danger-menu-item {
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
}

/* Ocultar encabezado interno de la orden */
#posScreen.delivery-mode .delivery-order-panel .order-header {
  display: none;
}

/* Que el banco de platillos ocupe toda la pantalla */
#posScreen.delivery-mode .delivery-order-panel .order-body {
  height: 100%;
  padding: 14px;
  display: block;
}

/* Mostrar solo banco de platillos */
#posScreen.delivery-mode .delivery-order-panel .products-area {
  height: 100%;
  display: flex;
}

/* Ocultar ticket completo */
/* Delivery: modo productos */
#posScreen.delivery-mode.delivery-products-mode .delivery-order-panel .ticket-area {
  display: none !important;
}

/* Delivery: modo ticket */
#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel .products-area {
  display: none !important;
}

#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel .ticket-area {
  display: flex !important;
  height: 100%;
  max-height: none;
}

/* Que el cuadro se vea limpio */
#posScreen.delivery-mode .delivery-order-panel {
  height: calc(100vh - 90px);
}

/* DELIVERY: categorías primero */

#posScreen.delivery-mode .delivery-show-categories .search-box {
  display: none;
}

#posScreen.delivery-mode .delivery-show-categories .products-grid {
  display: none;
}

#posScreen.delivery-mode .delivery-show-categories .categories-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  height: auto;
}

#posScreen.delivery-mode .delivery-show-categories .category-chip {
  width: 100%;
  max-width: none;
  height: 150px;
  min-height: 150px;
  font-size: 18px;
  border-radius: 24px;
}

#posScreen.delivery-mode .delivery-show-products .categories-list {
  display: none;
}

#posScreen.delivery-mode .delivery-show-products .products-grid {
  height: 100%;
}


.delivery-products-top-actions {
  margin-bottom: 10px;
}

.delivery-back-category-btn {
  width: auto;
  padding: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  font-weight: 800;
  text-align: left;
}

.delivery-back-category-btn:hover {
  color: white;
}

.delivery-back-category-btn:active {
  transform: scale(0.98);
}

.delivery-floating-ticket-btn {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom));
  width: auto;
  border: none;
  border-radius: 22px;
  padding: 18px;
  margin: 0;
  background: #ffffff;
  color: #111827;
  font-size: 17px;
  font-weight: 900;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  z-index: 20;
}

.delivery-floating-ticket-btn:active {
  transform: scale(0.98);
}

/* KITCHEN */

.kitchen-layout {
  min-height: calc(100vh - 86px);
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.kitchen-hero {
  min-height: 156px;
  padding: 24px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
}

.kitchen-hero h3 {
  font-size: 34px;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

.kitchen-hero p {
  color: rgba(255, 255, 255, 0.56);
}

.kitchen-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  min-width: 420px;
}

.kitchen-summary div {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.kitchen-summary span {
  display: block;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  margin-bottom: 8px;
}

.kitchen-summary strong {
  display: block;
  font-size: 30px;
  letter-spacing: -0.8px;
}

.kitchen-board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.kitchen-column {
  min-height: 480px;
  padding: 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.kitchen-column-header {
  margin-bottom: 16px;
}

.kitchen-column-header h4 {
  font-size: 24px;
  margin-bottom: 4px;
}

.kitchen-column-header p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 14px;
}

.kitchen-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 4px;
}

.kitchen-card {
  padding: 16px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.kitchen-card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.kitchen-card h5 {
  font-size: 20px;
}

.kitchen-card small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
}

.kitchen-order-details {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.kitchen-order-detail {
  display: grid;
  gap: 3px;
}

.kitchen-order-detail > span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kitchen-order-detail > strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.kitchen-address-button {
  width: fit-content;
  padding: 7px 10px;
  border-radius: 10px;
  color: white;
  background: #1f6fff;
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.kitchen-address-button:hover {
  background: #175bd1;
}

.kitchen-item-note {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 14px;
  display: grid;
  gap: 4px;
  color: white;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 45%),
    rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(18px);
}

.kitchen-item-note span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.kitchen-item-note strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

.kitchen-status {
  width: fit-content;
  height: fit-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kitchen-status-pendiente {
  background: rgba(245, 158, 11, 0.18);
  color: #ffc766;
}

.kitchen-status-preparando {
  background: rgba(31, 111, 255, 0.22);
  color: #8eb9ff;
}

.kitchen-status-listo {
  background: rgba(23, 178, 106, 0.20);
  color: #72e3aa;
}

.kitchen-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kitchen-item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 14px;
}

.kitchen-item-row strong {
  color: white;
}

.kitchen-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 14px;
}

.kitchen-actions button {
  width: 100%;
  max-width: none;
}

.kitchen-empty {
  min-height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.kitchen-empty h5 {
  font-size: 18px;
  margin-bottom: 6px;
}

.kitchen-empty p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
}

/*========================
+PARTE 3
========================*/



/* PRODUCTS ADMIN */

.products-admin-layout {
  height: calc(100vh - 86px);
  min-height: 0;
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.products-admin-hero {
  min-height: 120px;
  flex: 0 0 auto;
  padding: 24px 26px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top left, rgba(31, 111, 255, 0.20), transparent 34%),
    radial-gradient(circle at bottom right, rgba(168, 85, 247, 0.16), transparent 36%),
    rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.products-admin-hero h3 {
  font-size: 34px;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

.products-admin-hero p {
  color: rgba(255, 255, 255, 0.56);
}

.products-admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 12px;
  min-width: 420px;
}

.products-admin-summary div {
  padding: 16px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.products-admin-summary span {
  display: block;
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  margin-bottom: 8px;
}

.products-admin-summary strong {
  display: block;
  font-size: 24px;
  letter-spacing: -0.6px;
}

.products-admin-board {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 300px 380px minmax(0, 1fr);
  gap: 18px;
  overflow: hidden;
}

.admin-categories-panel,
.admin-products-panel,
.product-editor-panel {
  min-height: 0;
  height: 100%;
  padding: 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.admin-categories-panel .panel-header,
.admin-products-panel .panel-header {
  flex: 0 0 auto;
}

.admin-categories-list,
.admin-products-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding-right: 4px;
  padding-bottom: 6px;
}

.admin-category-chip,
.admin-category-card {
  width: 100%;
  min-height: 58px;
  padding: 14px 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: 0.2s ease;
}

.admin-category-chip:hover,
.admin-category-card:hover {
  background: rgba(255, 255, 255, 0.105);
  border-color: rgba(255, 255, 255, 0.16);
}

.admin-category-chip.active,
.admin-category-card.active {
  color: white;
  border-color: rgba(31, 111, 255, 0.42);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.20), transparent 46%),
    rgba(255, 255, 255, 0.10);
}

.admin-category-chip span,
.admin-category-card span {
  font-size: 14px;
  font-weight: 900;
}

.admin-category-chip strong,
.admin-category-card strong {
  width: auto;
  min-width: unset;
  max-width: max-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.24);
  white-space: nowrap;
}

.admin-product-card {
  position: relative;
  min-height: 116px;
  padding: 18px;
  border-radius: 24px;
  display: grid;
  gap: 12px;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: 0.2s ease;
}

.admin-product-card:hover {
  background: rgba(255, 255, 255, 0.105);
  border-color: rgba(255, 255, 255, 0.16);
}

.admin-product-card.active {
  border-color: rgba(31, 111, 255, 0.42);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 44%),
    rgba(255, 255, 255, 0.095);
}

.admin-product-card h4 {
  font-size: 17px;
  margin-bottom: 6px;
  line-height: 1.25;
}

.admin-product-card p {
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 5px;
}

.admin-product-card small {
  color: rgba(255, 255, 255, 0.50);
  font-size: 12px;
  font-weight: 800;
}

.admin-product-card strong {
  width: auto;
  min-width: unset;
  max-width: max-content;
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.24);
  white-space: nowrap;
}

.product-editor-panel {
  overflow-y: auto;
}

.product-editor-section,
.editor-section {
  padding: 18px;
  border-radius: 26px;
  margin-bottom: 16px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.product-editor-section h3,
.editor-section h3 {
  font-size: 22px;
  letter-spacing: -0.4px;
  margin-bottom: 14px;
}

.product-editor-section label {
  display: block;
  margin: 12px 0 7px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.product-editor-section input,
.product-editor-section select,
.editor-row input,
.editor-row select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border-radius: 15px;
  color: white;
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
}

.product-editor-section input:focus,
.product-editor-section select:focus,
.editor-row input:focus,
.editor-row select:focus {
  border-color: rgba(31, 111, 255, 0.42);
  background: rgba(255, 255, 255, 0.105);
}

.product-editor-section select option,
.editor-row select option {
  background: #11131b;
  color: white;
}

.editor-header,
.editor-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.editor-header h3,
.editor-section-header h4 {
  font-size: 22px;
  margin-bottom: 0;
}

.editor-section-header p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
}

.editor-header button,
.editor-section-header button,
.recipe-editor > button,
.size-card > button {
  width: auto;
  min-width: unset;
  max-width: max-content;
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 14px;
  color: white;
  background: rgba(31, 111, 255, 0.16);
  border: 1px solid rgba(31, 111, 255, 0.24);
  font-size: 12px;
  font-weight: 900;
  transition: 0.2s ease;
}

.editor-header button:hover,
.editor-section-header button:hover,
.recipe-editor > button:hover,
.size-card > button:hover {
  background: rgba(31, 111, 255, 0.24);
  border-color: rgba(31, 111, 255, 0.34);
}

.editor-row {
  display: grid;
  grid-template-columns: 1fr 110px 36px;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.size-editor-row {
  grid-template-columns: 1fr 130px 110px 36px;
}

.size-color-input {
  padding: 4px !important;
  cursor: pointer;
}

.recipe-unit-row {
  grid-template-columns: 1fr 90px 90px 36px;
}

.editor-row button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #ff6b63;
  background: rgba(255, 59, 48, 0.14);
  border: 1px solid rgba(255, 59, 48, 0.24);
  font-size: 13px;
  font-weight: 900;
}

.editor-empty {
  min-height: 58px;
  padding: 15px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.50);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 800;
}

.size-card {
  margin-top: 10px;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.2s ease;
}

.size-card.active {
  border-color: rgba(31, 111, 255, 0.42);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.16), transparent 46%),
    rgba(255, 255, 255, 0.075);
}

.size-card > button {
  margin-top: 10px;
}

.recipe-editor {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.recipe-editor > button {
  margin-bottom: 10px;
}

.recipe-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.recipe-editor-action-btn {
  width: auto;
  min-width: unset;
  max-width: max-content;
  flex: 0 0 auto;
  padding: 10px 13px;
  height: 40px;
  border-radius: 14px;
  color: white;
  background: rgba(31, 111, 255, 0.16);
  border: 1px solid rgba(31, 111, 255, 0.24);
  font-size: 12px;
  font-weight: 900;
  transition: 0.2s ease;
}

.recipe-editor-action-btn:hover {
  background: rgba(31, 111, 255, 0.24);
  border-color: rgba(31, 111, 255, 0.34);
}

body.light-theme .recipe-editor-action-btn {
  color: white;
  background: #244c93;
  border-color: rgba(80, 130, 255, 0.55);
}

body.light-theme .recipe-editor-action-btn:hover {
  background: #2c5bb1;
  border-color: rgba(80, 130, 255, 0.75);
}

.product-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.product-editor-header h3 {
  font-size: 28px;
  letter-spacing: -0.7px;
}

.product-editor-header p {
  color: rgba(255, 255, 255, 0.56);
  font-size: 14px;
  margin-top: 4px;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 0.9fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.admin-form-grid label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.admin-form-grid input,
.admin-form-grid select {
  height: 50px;
  padding: 0 14px;
  border-radius: 17px;
  color: white;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
}

.admin-form-grid select option {
  background: #11131b;
  color: white;
}

.mini-widget-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 4px;
}

.size-mini-card,
.recipe-mini-card {
  position: relative;
  flex: 0 0 150px;
  min-height: 92px;
  padding: 18px 14px 14px;
  border-radius: 22px;
  display: grid;
  align-content: center;
  gap: 6px;
  color: white;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.size-mini-card.active {
  border-color: rgba(31, 111, 255, 0.45);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 44%),
    rgba(255, 255, 255, 0.09);
}

.size-mini-card button,
.recipe-mini-card button {
  width: 23px;
  min-width: 23px;
  max-width: 23px;
  position: absolute;
  top: 8px;
  left: 8px;
  height: 23px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  color: white;
  background: rgba(255, 59, 48, 0.92);
}

.size-mini-card span,
.recipe-mini-card span {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
}

.size-mini-card strong,
.recipe-mini-card strong {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.68);
}

.recipe-row {
  flex-wrap: wrap;
  overflow-x: visible;
}

.recipe-mini-card {
  flex: 0 0 180px;
}

.admin-empty-card {
  width: 100%;
  min-height: 160px;
  padding: 20px;
  border-radius: 24px;
  display: grid;
  place-content: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.admin-empty-card h4 {
  font-size: 22px;
  margin-bottom: 8px;
}

.admin-empty-card p {
  color: rgba(255, 255, 255, 0.54);
  line-height: 1.45;
}

/* DASHBOARD MODAL */

.dashboard-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  padding: 24px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px);
}

.dashboard-modal {
  width: min(980px, 100%);
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 34px;
  background:
    radial-gradient(circle at top left, rgba(31, 111, 255, 0.20), transparent 34%),
    rgba(15, 17, 24, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62);
}

.dashboard-header {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.dashboard-kicker {
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.dashboard-header h3 {
  font-size: 28px;
  letter-spacing: -0.8px;
}

.dashboard-content {
  padding: 24px;
  overflow-y: auto;
}

.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}

.dashboard-widget {
  min-height: 128px;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.dashboard-widget span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-bottom: 10px;
}

.dashboard-widget strong {
  display: block;
  font-size: 25px;
  letter-spacing: -0.6px;
}

.dashboard-widget p {
  color: rgba(255, 255, 255, 0.50);
  font-size: 13px;
  margin-top: 8px;
}

.dashboard-list {
  display: grid;
  gap: 12px;
}

.sale-card {
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.sale-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.sale-card h4 {
  font-size: 20px;
}

.sale-card strong {
  font-size: 22px;
}

.sale-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sale-meta span {
  width: auto;
  min-width: unset;
  max-width: max-content;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.sale-items {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.sale-item-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.empty-dashboard {
  min-height: 260px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.empty-dashboard h4 {
  font-size: 24px;
  margin-bottom: 8px;
}

.empty-dashboard p {
  color: rgba(255, 255, 255, 0.56);
}

/* PAYMENT */

.payment-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.payment-option {
  min-height: 150px;
  padding: 20px;
  border-radius: 26px;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.payment-option h4 {
  font-size: 22px;
  margin-bottom: 8px;
}

.payment-option p {
  color: rgba(255, 255, 255, 0.56);
  font-size: 14px;
  line-height: 1.45;
}

.payment-option strong {
  display: block;
  margin-top: 14px;
  font-size: 22px;
}

.payment-option.card-payment {
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.22), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.payment-option.cash-payment {
  background:
    radial-gradient(circle at top right, rgba(23, 178, 106, 0.20), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.payment-option.transfer-payment {
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.payment-option.mixed-payment {
  background:
    radial-gradient(circle at top right, rgba(168, 85, 247, 0.22), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.cash-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 18px;
}

.cash-actions button {
  width: auto;
  min-width: 150px;
  max-width: max-content;
  flex: 0 0 auto;
}

.cash-state-box {
  min-width: 190px;
  padding: 12px 16px;
  border-radius: 16px;
  display: grid;
  align-content: center;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.cash-state-box span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  margin-bottom: 4px;
}

.cash-state-box strong {
  color: white;
  font-size: 16px;
}

.cash-status-card {
  padding: 18px;
  border-radius: 24px;
  margin-bottom: 18px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.cash-status-card h4 {
  font-size: 22px;
  margin-bottom: 8px;
}

.cash-status-card p {
  color: rgba(255, 255, 255, 0.56);
  line-height: 1.5;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
  .products-admin-layout {
    height: auto;
    min-height: calc(100vh - 86px);
    overflow: visible;
  }

  .products-admin-board {
    grid-template-columns: 260px 1fr;
    overflow: visible;
  }

  .product-editor-panel {
    grid-column: 1 / -1;
  }

  .admin-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 1050px) {
  .pos-layout,
  .delivery-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .delivery-ready-panel {
    min-height: 360px;
  }

  .delivery-info-panel,
  .delivery-order-panel {
    min-height: 260px;
  }

  .order-body {
    grid-template-columns: 1fr;
  }

  .tables-grid {
    grid-template-columns: repeat(3, 1fr);
    max-height: none;
  }

  .ticket-area {
    min-height: 420px;
  }

  .dashboard-widgets {
    grid-template-columns: repeat(2, 1fr);
  }

  .payment-options {
    grid-template-columns: 1fr;
  }

  .kitchen-hero,
  .products-admin-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .kitchen-summary,
  .products-admin-summary {
    width: 100%;
    min-width: 0;
  }

  .kitchen-board {
    grid-template-columns: 1fr;
  }

  .kitchen-column {
    min-height: 360px;
  }

  .products-admin-board {
    grid-template-columns: 1fr;
  }

  .admin-categories-list,
  .admin-products-grid {
    height: auto;
    max-height: 420px;
  }

  .admin-categories-panel,
  .admin-products-panel,
  .product-editor-panel {
    min-height: auto;
    height: auto;
  }
}

@media (max-width: 720px) {
  .topbar {
    height: auto;
    align-items: flex-start;
    gap: 16px;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    grid-template-columns: unset;
  }

  .top-actions button {
    width: auto;
    max-width: max-content;
  }

  .pos-layout,
  .delivery-layout {
    padding: 0 14px 14px;
  }

  .kitchen-layout,
  .products-admin-layout {
    padding: 0 14px 14px;
  }

  .kitchen-summary,
  .products-admin-summary {
    grid-template-columns: 1fr;
  }

  .kitchen-hero h3,
  .products-admin-hero h3 {
    font-size: 28px;
  }

  .tables-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .admin-form-grid {
    grid-template-columns: 1fr;
  }

}

/* ANALYTICS */

.analytics-layout {
  min-height: calc(100vh - 86px);
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.analytics-hero {
  min-height: 140px;
  padding: 24px 26px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at top left, rgba(31, 111, 255, 0.22), transparent 34%),
    radial-gradient(circle at bottom right, rgba(23, 178, 106, 0.15), transparent 36%),
    rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
}

.analytics-hero h3 {
  font-size: 34px;
  letter-spacing: -0.8px;
  margin-bottom: 8px;
}

.analytics-hero p {
  color: rgba(255, 255, 255, 0.56);
}

.analytics-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.analytics-range-btn {
  padding: 12px 16px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.analytics-range-btn.active {
  color: #05060a;
  background: white;
}

.analytics-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.analytics-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.analytics-kpi-card,
.analytics-card {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
}

.analytics-kpi-card {
  min-height: 132px;
  padding: 20px;
}

.analytics-kpi-card span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-bottom: 10px;
}

.analytics-kpi-card strong {
  display: block;
  font-size: 28px;
  letter-spacing: -0.7px;
}

.analytics-kpi-card p {
  color: rgba(255, 255, 255, 0.50);
  font-size: 13px;
  margin-top: 8px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
}

.analytics-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.analytics-card {
  padding: 20px;
}

.analytics-card-large {
  min-height: 340px;
}

.analytics-card-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.analytics-card-header h4 {
  font-size: 23px;
  margin-bottom: 4px;
}

.analytics-card-header p {
  color: rgba(255, 255, 255, 0.52);
  font-size: 14px;
}

.analytics-bars {
  display: grid;
  gap: 12px;
}

.analytics-bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 112px;
  align-items: center;
  gap: 12px;
}

.analytics-bar-row span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.analytics-bar-row strong {
  text-align: right;
  font-size: 14px;
}

.analytics-bar-track {
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.analytics-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1f6fff, #72e3aa);
}

.analytics-breakdown {
  display: grid;
  gap: 12px;
}

.analytics-breakdown-row {
  min-height: 68px;
  padding: 14px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.analytics-breakdown-row span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  margin-bottom: 5px;
}

.analytics-breakdown-row strong {
  font-size: 20px;
}

.analytics-breakdown-row p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.analytics-table {
  display: grid;
  gap: 10px;
}

.analytics-table-row {
  min-height: 68px;
  padding: 13px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.analytics-table-row > span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.14);
  font-weight: 900;
}

.analytics-table-row strong {
  display: block;
  font-size: 15px;
}

.analytics-table-row p {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  margin-top: 4px;
}

.analytics-table-row b {
  font-size: 16px;
}

.analytics-empty-mini {
  min-height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.analytics-empty-mini h5 {
  font-size: 18px;
  margin-bottom: 6px;
}

.analytics-empty-mini p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
}

@media (max-width: 1050px) {
  .analytics-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .analytics-kpis,
  .analytics-grid,
  .analytics-tables {
    grid-template-columns: 1fr;
  }

  .analytics-bar-row {
    grid-template-columns: 56px 1fr 90px;
  }
}

#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel {
  height: calc(100vh - 90px) !important;
}

#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel .order-body {
  height: 100% !important;
  padding: 14px !important;
}

#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel .ticket-area {
  display: flex !important;
  height: 100% !important;
  max-height: none !important;
}

#posScreen.delivery-mode.delivery-ticket-mode .delivery-order-panel .ticket-items {
  flex: 1 !important;
  max-height: none !important;
}

#posScreen.delivery-mode.delivery-ticket-mode #deliveryFloatingTicketButton {
  display: none !important;
}

.size-visual-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
  vertical-align: middle;
}

.size-visual-actions input[type="text"] {
  width: 160px;
  height: 40px;
}

.size-visual-actions input[type="color"] {
  width: 54px;
  height: 40px;
  padding: 4px;
} 

.size-bottom-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}


.size-color-input {
  width: 54px;
  height: 40px;
  padding: 4px !important;
}

.size-bottom-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.size-color-input {
  width: 50px;
  min-width: 50px;
  height: 40px;
}

.size-bottom-actions .recipe-toggle-btn {
  background: #244c93;
  color: #ffffff;
  border: 1px solid rgba(80, 130, 255, 0.55);
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  width: auto;
  height: 44px;
  min-width: 220px;
  text-align: center;
}

.delivery-product-options-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
}

.delivery-product-options-card {
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  padding: 18px;
  border-radius: 28px 28px 0 0;
  background: rgba(12, 14, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow-y: auto;
}

.delivery-product-options-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.delivery-product-options-header h3 {
  font-size: 24px;
}

.delivery-product-options-header p {
  color: rgba(255, 255, 255, 0.58);
  margin-top: 4px;
}

.delivery-product-options-header button {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: white;
  background: rgba(255, 255, 255, 0.10);
}

.delivery-product-options-body h4 {
  margin: 16px 0 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

.delivery-extra-option {
  min-height: 58px;
  margin-bottom: 8px;
  padding: 13px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  transition: 0.2s ease;
}

.delivery-extra-checkbox {
  display: none !important;
}

.delivery-extra-option span {
  font-weight: 900;
}

.delivery-extra-option small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
}

.delivery-extra-option:has(.delivery-extra-checkbox:checked) {
  background:
    radial-gradient(circle at top right, rgba(23, 178, 106, 0.28), transparent 45%),
    rgba(23, 178, 106, 0.22);
  border-color: rgba(23, 178, 106, 0.55);
}



.delivery-extra-option span {
  font-weight: 900;
}

.delivery-extra-option small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.55);
}

.delivery-extra-option input {
  display: none;
}

.delivery-extra-option {
  cursor: pointer;
  transition: 0.2s ease;
}

.delivery-extra-option:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(23, 178, 106, 0.28), transparent 45%),
    rgba(23, 178, 106, 0.22);
  border-color: rgba(23, 178, 106, 0.55);
}



.delivery-options-empty {
  padding: 14px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
}

.delivery-product-note-input {
  width: 100%;
  min-height: 96px;
  padding: 14px;
  border-radius: 18px;
  resize: none;
  color: white;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  outline: none;
}

.delivery-product-options-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.delivery-product-options-actions button {
  width: 100%;
  max-width: none;
}

.delivery-extra-option {
  cursor: pointer;
  transition: 0.2s ease;
}

.delivery-extra-option input {
  display: none;
}

.delivery-extra-option:has(input:checked) {
  background:
    radial-gradient(circle at top right, rgba(23, 178, 106, 0.28), transparent 45%),
    rgba(23, 178, 106, 0.22);
  border-color: rgba(23, 178, 106, 0.55);
  color: white;
}

.delivery-extra-option:has(input:checked) small {
  color: #b7f7d4;
}

/* ==========================================
   MIA
========================================== */

body {
  --mia-chart-blue: rgb(10, 132, 255);
  --mia-chart-teal: rgb(100, 210, 255);
  --mia-chart-indigo: rgb(94, 92, 230);
  --mia-chart-orange: rgb(255, 159, 10);
  --mia-chart-pink: rgb(255, 55, 95);
  --mia-chart-text: rgba(255, 255, 255, 0.72);
  --mia-chart-grid: rgba(255, 255, 255, 0.09);
  --mia-chart-card: rgb(31, 31, 33);
}

body.light-theme {
  --mia-chart-blue: rgb(0, 122, 255);
  --mia-chart-teal: rgb(50, 173, 230);
  --mia-chart-indigo: rgb(88, 86, 214);
  --mia-chart-orange: rgb(255, 149, 0);
  --mia-chart-pink: rgb(255, 45, 85);
  --mia-chart-text: rgba(29, 29, 31, 0.72);
  --mia-chart-grid: rgba(29, 29, 31, 0.08);
  --mia-chart-card: rgb(255, 255, 255);
}

.mia-layout {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 24px;
  display: grid;
  grid-template-rows: 64px minmax(0, 1fr);
  gap: 20px;
  overflow: hidden;
  overscroll-behavior: none;
  background: #05060a;
}

.mia-chat-card {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 52px;
  gap: 16px;

  padding: 20px;

  border-radius: 24px;

  background: #111218;

  border: 1px solid rgba(255,255,255,0.08);
}

.mia-messages {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  display: flex;
  flex-direction: column;

  gap: 12px;
}

.mia-message {
  max-width: 75%;

  padding: 14px 18px;

  border-radius: 18px;

  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.mia-assistant {
  align-self: flex-start;

  background: rgba(255,255,255,0.08);

  color: white;
}

.mia-user {
  align-self: flex-end;

  background: #1f6fff;

  color: white;
}

.mia-message:has(.mia-chart-container) {
  width: min(100%, 720px);
  max-width: 100%;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: var(--mia-chart-card);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.16);
}

.mia-message-text + .mia-chart-container,
.mia-chart-container + .mia-message-text {
  margin-top: 12px;
}

.mia-chart-title {
  margin: 2px 4px 16px;
  color: var(--mia-chart-text);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mia-chart-canvas {
  position: relative;
  width: 100%;
  height: 340px;
  min-height: 240px;
}

.mia-chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 720px) {
  .mia-message:has(.mia-chart-container) {
    padding: 14px;
    border-radius: 20px;
  }

  .mia-chart-canvas {
    height: 280px;
  }
}

.mia-typing-indicator {
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mia-typing-indicator span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa6ba;
  animation: mia-typing-bubble 1.2s ease-in-out infinite;
}

.mia-typing-indicator span:nth-child(2) {
  animation-delay: 0.16s;
}

.mia-typing-indicator span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes mia-typing-bubble {
  0%,
  60%,
  100% {
    opacity: 0.45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-5px);
  }
}

.mia-input-row {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 12px;
  min-width: 0;
  background: #111218;
}

.mia-input-row input {
  width: 100%;
  min-width: 0;
  height: 52px;

  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(255,255,255,0.08);

  color: white;

  padding: 0 16px;
  font-size: 16px;
  line-height: 1.5;
  caret-color: currentColor;
}

.inventory-movement-modal,
.inventory-quantity-modal {
  display: grid;
  gap: 16px;
}

.inventory-page-toolbar {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.inventory-page-search {
  position: relative;
  width: min(390px, 100%);
  flex: 1 1 300px;
}

.inventory-page-search > span {
  position: absolute;
  top: 50%;
  left: 15px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 21px;
  transform: translateY(-50%);
  pointer-events: none;
}

.inventory-page-search input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 44px;
  border-radius: 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 14px;
  font-weight: 700;
}

.inventory-page-search input::-webkit-search-cancel-button,
.inventory-page-search input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
}

.inventory-page-search input:focus {
  border-color: rgba(31, 111, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.13);
}

.inventory-page-search button {
  position: absolute;
  top: 50%;
  right: 9px;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
}

.inventory-page-search button:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-50%);
}

.inventory-search-result-count {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 800;
}

.inventory-search-empty {
  min-height: 160px;
}

@media (max-width: 720px) {
  .inventory-page-toolbar {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .inventory-page-search {
    width: 100%;
    flex-basis: auto;
  }
}

.inventory-movement-subtitle {
  color: rgba(255, 255, 255, 0.58);
  font-size: 15px;
}

.inventory-search-box input,
.inventory-field-label input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: 18px;
  color: white;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
}

.inventory-movement-list {
  display: grid;
  gap: 10px;
}

.inventory-material-option {
  width: 100%;
  max-width: none;
  min-height: 76px;
  padding: 16px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  color: white;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.inventory-material-option strong {
  display: block;
  font-size: 17px;
  margin-bottom: 5px;
}

.inventory-material-option span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.inventory-material-option b {
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.14);
}

.inventory-selected-card {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.inventory-selected-card span,
.inventory-field-label {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 900;
}

.inventory-selected-card strong {
  display: block;
  margin-top: 6px;
  font-size: 24px;
  color: white;
}

.inventory-selected-card p {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.55);
}

.inventory-quantity-row {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 10px;
  margin-top: 8px;
}

.inventory-quantity-row strong {
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: white;
  background: rgba(255, 255, 255, 0.08);
}

.inventory-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.inventory-quick-actions button {
  width: 100%;
  max-width: none;
  height: 52px;
  border-radius: 18px;
  color: white;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.inventory-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.category-chip {
  position: relative;
  overflow: hidden;
  padding: 16px;
}

.category-chip-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  overflow: hidden;
}

.category-chip-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-chip-visual span {
  display: none;
}

.category-chip > span {
  position: relative;
  z-index: 2;
  color: #fff;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

.category-chip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1;
}

/* PRODUCTOS DELIVERY CON IMAGEN */

.delivery-order-panel .product-card {
  position: relative;
  overflow: hidden !important;
  height: 150px;
  min-height: 150px;
  padding: 14px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}

.delivery-order-panel .product-card-visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  z-index: 0;
}

.delivery-order-panel .product-card-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.delivery-order-panel .product-card-visual span {
  display: none;
}

.delivery-order-panel .product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.28),
    rgba(0,0,0,.12)
  );
  z-index: 1;
}

.delivery-order-panel .product-card h4,
.delivery-order-panel .product-card strong,
.delivery-order-panel .product-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

.delivery-order-panel .product-card h4 {
  font-size: 15px;
  line-height: 1.15;
}

.delivery-order-panel .product-card strong {
  font-size: 24px;
}

.all-category-icon {
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: -1px;
  color: rgba(255, 255, 255, 0.92);
}

/* FINANZAS UI */

.finance-account-form {
  display: grid;
  gap: 15px;
}

.finance-account-form-intro {
  padding: 16px;
  border-radius: 20px;
  display: grid;
  gap: 5px;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.20), transparent 45%),
    rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.finance-account-form-intro span {
  color: #8eb9ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.finance-account-form-intro strong {
  font-size: 21px;
}

.finance-account-form-intro p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.4;
}

.finance-account-field {
  display: grid;
  gap: 8px;
}

.finance-account-field > span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.finance-account-field input,
.finance-account-field select,
.finance-account-field textarea {
  width: 100%;
  padding: 0 14px;
  border-radius: 16px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.11);
  font-size: 15px;
  font-weight: 700;
}

.finance-account-field input,
.finance-account-field select {
  height: 50px;
}

.finance-account-field textarea {
  min-height: 104px;
  padding-top: 13px;
  padding-bottom: 13px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.finance-account-field input:focus,
.finance-account-field select:focus,
.finance-account-field textarea:focus {
  outline: none;
  border-color: rgba(31, 111, 255, 0.52);
  box-shadow: 0 0 0 3px rgba(31, 111, 255, 0.13);
}

.finance-account-field select option {
  color: #ffffff;
  background: #11131b;
}

.finance-percentage-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 9px;
}

.finance-percentage-input strong {
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.13);
  border: 1px solid rgba(31, 111, 255, 0.22);
}

.finance-account-form-actions {
  margin-top: 3px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.finance-account-form-actions button {
  min-width: 140px;
}

body.light-theme .finance-account-form-intro {
  color: #131722;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.14), transparent 45%),
    rgba(17, 24, 39, 0.04);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .finance-account-form-intro p,
body.light-theme .finance-account-field > span {
  color: #5d6677;
}

body.light-theme .finance-account-field input,
body.light-theme .finance-account-field select,
body.light-theme .finance-account-field textarea {
  color: #131722;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(17, 24, 39, 0.13);
}

body.light-theme .finance-account-field select option {
  color: #131722;
  background: #ffffff;
}

@media (max-width: 560px) {
  .finance-account-form-actions {
    display: grid;
  }

  .finance-account-form-actions button {
    width: 100%;
    max-width: none;
  }
}

.finance-distribution-alert {
  width: 100%;
  margin-bottom: 16px;
  padding: 15px 17px;
  border-radius: 22px;

  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;

  color: #ffffff;
  background:
    radial-gradient(
      circle at top right,
      rgba(255, 115, 115, 0.22),
      transparent 44%
    ),
    rgba(166, 20, 20, 0.38);

  border: 1px solid rgba(255, 86, 86, 0.55);

  box-shadow:
    0 12px 30px rgba(120, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.finance-distribution-alert-icon {
  width: 42px;
  height: 42px;
  border-radius: 15px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: rgba(255, 63, 63, 0.28);
  border: 1px solid rgba(255, 123, 123, 0.38);

  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.finance-distribution-alert-copy {
  min-width: 0;
}

.finance-distribution-alert-copy h3 {
  margin: 0 0 5px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

.finance-distribution-alert-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  line-height: 1.45;
}

.finance-distribution-alert-copy p strong {
  color: #ffffff;
}

.finance-distribution-alert-total {
  min-width: 145px;
  padding: 10px 12px;
  border-radius: 16px;

  background: rgba(80, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.10);

  text-align: right;
}

.finance-distribution-alert-total span {
  display: block;
  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 800;
}

.finance-distribution-alert-total strong {
  display: block;
  color: #ffffff;
  font-size: 16px;
  font-weight: 950;
}

@media (max-width: 720px) {
  .finance-distribution-alert {
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
  }

  .finance-distribution-alert-icon {
    width: 38px;
    height: 38px;
    border-radius: 13px;
  }

  .finance-distribution-alert-total {
    grid-column: 2;
    width: fit-content;
    min-width: 0;
    text-align: left;
  }
}

.finance-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.finance-row {
  width: 100%;
  padding: 18px 20px;
  border-radius: 24px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  transition: 0.2s ease;
}

.finance-row:hover {
  background: rgba(255, 255, 255, 0.105);
}

.finance-row.open {
  border-color: rgba(31, 111, 255, 0.45);
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.09);
}

.finance-row-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    150px
    150px
    minmax(220px, 260px);
  align-items: center;
  gap: 16px;
}

.finance-row h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.finance-row p {
  color: rgba(255, 255, 255, 0.58);
  font-size: 14px;
}

.finance-row-numbers span {
  display: block;
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.finance-row-numbers strong {
  font-size: 22px;
  color: white;
}

.finance-row-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

@media (max-width: 720px) {
  .finance-row-main {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .finance-row-actions {
    flex-wrap: wrap;
  }
}

.finance-account-detail {
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
}

.finance-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.finance-detail-header h2 {
  font-size: 28px;
}

.finance-detail-header p {
  color: rgba(255, 255, 255, 0.58);
}

.finance-detail-actions-top,
.finance-detail-actions-bottom {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.finance-movement-list {
  display: grid;
  gap: 12px;
}

.finance-movement-row {
  min-height: 72px;
  padding: 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.finance-movement-row strong {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.finance-movement-row p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
}

.finance-movement-row b {
  font-size: 20px;
}

.finance-movement-income b {
  color: #72e3aa;
}

.finance-movement-expense b {
  color: #ff6b63;
}

.finance-detail-actions-bottom {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* FINANZAS HEADER SIMPLE */

.finance-mobile-header {
  height: 64px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
}

.finance-mobile-header .delivery-header-title {
  font-size: 18px;
  font-weight: 900;
}

.finance-mobile-header .delivery-header-count {
  font-size: 24px;
  font-weight: 900;
}

#financeView.analytics-layout {
  padding-top: 14px;
}

#financeView .finance-mobile-header {
  margin-top: 0;
}

/* MENÚ FINANZAS */

.finance-mobile-header {
  position: relative;
  z-index: 20;
}

#financeMenuDropdown {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 9999;
  width: 220px;
}

#financeView .delivery-menu-dropdown {
  background: rgba(10, 12, 18, 0.98);
}

#inventoryView.analytics-layout {
  padding-top: 14px;
}

#inventoryView .finance-mobile-header {
  margin-top: 0;
  position: relative;
  z-index: 20;
}

#inventoryMenuDropdown {
  position: absolute;
  top: 58px;
  left: 0;
  z-index: 9999;
  width: 220px;
}

.inventory-camera-btn {
  width: 100%;
  max-width: none;
  height: 58px;
  border-radius: 20px;
  color: white;
  font-size: 16px;
  font-weight: 900;
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.35), transparent 45%),
    rgba(31, 111, 255, 0.18);
  border: 1px solid rgba(31, 111, 255, 0.35);
}

.inventory-ticket-preview {
  display: grid;
  gap: 18px;
}

.inventory-ticket-image {
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 22px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.inventory-ticket-preview .primary-btn {
  width: 100%;
  max-width: none;
}

.inventory-ticket-review {
  display: grid;
  gap: 18px;
}

.inventory-ticket-review-list {
  display: grid;
  gap: 10px;
}

.inventory-ticket-review-row {
  display: grid;
  grid-template-columns: 1fr 90px 50px 90px;
  gap: 10px;
  align-items: center;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.08);
}

.inventory-ticket-review-row input {
  width: 100%;
  height: 42px;
  border-radius: 14px;
  padding: 0 10px;
  color: white;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
}

.inventory-ticket-review .primary-btn {
  width: 100%;
  max-width: none;
}

.inventory-ticket-warning {
  padding: 14px;
  border-radius: 18px;
  color: #ffc766;
  background: rgba(245, 158, 11, 0.16);
  border: 1px solid rgba(245, 158, 11, 0.28);
  font-size: 14px;
  font-weight: 800;
}

/* FIX: scroll en categorías de Delivery */
.delivery-mode .products-area.delivery-show-categories {
  height: calc(100dvh - 140px);
  overflow: hidden;
}

.delivery-mode .products-area.delivery-show-categories #categoriesList {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 120px;
  touch-action: pan-y;
}

.delivery-mode .products-area.delivery-show-categories #productsGrid,
.delivery-mode .products-area.delivery-show-categories #deliveryProductsTopActions {
  display: none;
}

.analytics-layout {
  min-height: 100vh;
  padding: 14px;
}

.analytics-hero {
  margin-top: 0;
}

.finance-mobile-header {
  height: 64px;
  margin-bottom: 12px;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: 12px;
  position: relative;
}

.mia-layout {
  min-height: 0;
  padding: 14px;
}

#miaView .finance-mobile-header {
  flex: 0 0 64px;
  margin-bottom: 0;
  z-index: 20;
  background: #05060a;
}

#miaView .delivery-menu-dropdown {
  z-index: 30;
}

@media (max-height: 600px) {
  .mia-layout {
    gap: 12px;
  }

  .mia-chat-card {
    padding: 14px;
  }
}

.products-admin-layout {
  min-height: 100vh;
  padding: 14px;
}

.products-hero {
  margin-top: 0;
}

.startup-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: all;
}

.startup-loader.hidden {
  display: none;
}

.startup-loader-card {
  width: min(280px, 85vw);
  padding: 28px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.25);
  text-align: center;
}

.startup-spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 4px solid #3b1d81;
  border-top-color: #111827;
  border-radius: 50%;
  animation: startupSpin 0.8s linear infinite;
}

@keyframes startupSpin {
  to {
    transform: rotate(360deg);
  }
}

.startup-loader-card h3 {
  margin: 0 0 6px;
}

.startup-loader-card p {
  margin: 0;
  color: #4c4a4a;
}

.brand-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.mora-logo {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 54px;
    font-weight: 800;
    letter-spacing: 8px;
    color: #ffffff;
    line-height: 1;
}

/*==================================================
CONFIGURACIÓN
==================================================*/

.configuration-layout {
  min-height: 100vh;
  padding: 14px;
}

.configuration-content {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding-bottom: 40px;
}

.configuration-heading {
  min-height: 160px;
  margin-bottom: 18px;
  padding: 28px;
  border-radius: 30px;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(
      circle at top left,
      rgba(31, 111, 255, 0.22),
      transparent 38%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(168, 85, 247, 0.15),
      transparent 38%
    ),
    rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
}

.configuration-heading h1 {
  margin-bottom: 8px;
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: -1.5px;
}

.configuration-heading > div > p:last-child {
  color: rgba(255, 255, 255, 0.58);
  line-height: 1.5;
}

.configuration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.configuration-card {
  min-width: 0;
  padding: 22px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.105);
  backdrop-filter: blur(26px);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.configuration-card-editing {
  border-color: rgba(10, 132, 255, 0.48);
  box-shadow:
    0 18px 48px rgba(10, 132, 255, 0.12),
    inset 0 0 0 1px rgba(10, 132, 255, 0.10);
}

.configuration-appearance-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(47, 111, 255, 0.18), transparent 42%),
    rgba(255, 255, 255, 0.075);
}

.configuration-card-wide {
  grid-column: 1 / -1;
}

.configuration-card-heading {
  margin-bottom: 20px;
}

.configuration-team-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.configuration-card-label {
  display: block;
  margin-bottom: 7px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.configuration-card h2 {
  margin-bottom: 7px;
  font-size: 24px;
  letter-spacing: -0.6px;
}

.configuration-card-heading p,
.configuration-option-row p {
  color: rgba(255, 255, 255, 0.54);
  font-size: 13px;
  line-height: 1.45;
}

.configuration-option-row {
  min-height: 76px;
  padding: 15px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.configuration-option-row strong {
  display: block;
  margin-bottom: 5px;
}

.configuration-theme-preview {
  height: 74px;
  margin-bottom: 12px;
  padding: 12px 16px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  gap: 12px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.20));
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.configuration-theme-preview-icon {
  display: grid;
  place-items: center;
  font-size: 21px;
}

.configuration-theme-preview-sun {
  color: #ffc766;
}

.configuration-theme-preview-moon {
  color: #8eb9ff;
}

.configuration-theme-preview-window {
  height: 42px;
  padding: 9px;
  border-radius: 13px;
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  background: rgba(5, 6, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
}

.configuration-theme-preview-window i {
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}

.configuration-theme-preview-window i:first-child {
  grid-row: 1 / -1;
  border-radius: 7px;
  background: linear-gradient(145deg, #1f6fff, #5d9bff);
}

.configuration-theme-status {
  width: fit-content;
  margin-top: 9px;
  padding: 5px 9px;
  border-radius: 999px;
  display: block;
  color: #9bc1ff;
  background: rgba(31, 111, 255, 0.14);
  border: 1px solid rgba(31, 111, 255, 0.22);
  font-size: 11px;
  font-weight: 900;
}

.configuration-switch {
  position: relative;
  width: 54px;
  height: 32px;
  flex: 0 0 auto;
}

.configuration-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.configuration-switch input:focus-visible +
.configuration-switch-slider {
  outline: 3px solid rgba(93, 155, 255, 0.42);
  outline-offset: 3px;
}

.configuration-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: 0.22s ease;
}

.configuration-switch-slider::before {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32);
  transition: 0.22s ease;
}

.configuration-switch input:checked +
.configuration-switch-slider {
  background: #2f6fff;
  border-color: #2f6fff;
}

.configuration-switch input:checked +
.configuration-switch-slider::before {
  transform: translateX(22px);
}

.configuration-data-list {
  display: grid;
  gap: 10px;
}

.configuration-data-list > div {
  min-height: 54px;
  padding: 12px 14px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.configuration-data-list span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 13px;
}

.configuration-data-list strong {
  max-width: 65%;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  text-align: right;
  overflow-wrap: anywhere;
}

.configuration-status-active {
  width: fit-content;
  padding: 6px 9px;
  border-radius: 999px;
  color: #72e3aa !important;
  background: rgba(23, 178, 106, 0.15);
  border: 1px solid rgba(23, 178, 106, 0.24);
}

.configuration-secondary-button {
  width: 100%;
  max-width: none;
  min-height: 46px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.configuration-secondary-button:disabled,
.configuration-field-edit-button:disabled {
  cursor: wait;
  opacity: 0.58;
  transform: none;
}

.configuration-button-loading {
  pointer-events: none;
}

.configuration-password-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.configuration-password-form.hidden {
  display: none;
}

.configuration-password-form label {
  display: grid;
  gap: 7px;
}

.configuration-password-form label span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.configuration-password-form input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.configuration-password-form input:focus {
  outline: none;
  border-color: rgba(47, 111, 255, 0.72);
}

.configuration-password-message {
  margin: 0;
  color: #ff9a9a;
  font-size: 13px;
}

.configuration-password-form .configuration-secondary-button {
  margin-top: 0;
}

.configuration-users-list {
  display: grid;
  gap: 10px;
}

.configuration-user-row {
  min-height: 76px;
  padding: 12px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 46px minmax(140px, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
}

.configuration-user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  color: white;
  background:
    linear-gradient(
      145deg,
      rgba(31, 111, 255, 0.9),
      rgba(93, 155, 255, 0.65)
    );
  font-size: 13px;
  font-weight: 900;
}

.configuration-user-main strong {
  display: block;
  margin-bottom: 4px;
}

.configuration-user-main p {
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
}

.configuration-user-access {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
}

.configuration-user-row button {
  padding: 10px 13px;
  border-radius: 13px;
  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.13);
  border: 1px solid rgba(31, 111, 255, 0.22);
}

.mora-user-permissions-form {
  display: grid;
  gap: 18px;
}

.mora-managed-user-summary {
  padding: 15px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.mora-managed-user-summary > div:nth-child(2) > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
}

.mora-managed-user-summary p,
.mora-permission-section > p,
.mora-permission-storage-note {
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  line-height: 1.45;
}

.mora-user-active,
.mora-user-inactive {
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.mora-user-active {
  color: #72e3aa;
  background: rgba(23, 178, 106, 0.15);
  border: 1px solid rgba(23, 178, 106, 0.24);
}

.mora-user-inactive {
  color: #ff8a84;
  background: rgba(255, 59, 48, 0.13);
  border: 1px solid rgba(255, 59, 48, 0.22);
}

.mora-permission-section {
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.16);
}

.mora-permission-section legend {
  padding: 0 7px;
  font-size: 18px;
  font-weight: 900;
}

.mora-role-options {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.mora-role-option,
.mora-page-permission-option {
  position: relative;
  cursor: pointer;
}

.mora-role-option input,
.mora-page-permission-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.mora-role-option > span {
  min-height: 86px;
  padding: 14px;
  border-radius: 18px;
  display: grid;
  align-content: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.065);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: 0.18s ease;
}

.mora-role-option small,
.mora-page-permission-option small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  line-height: 1.35;
}

.mora-role-option input:checked + span {
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.24), transparent 48%),
    rgba(31, 111, 255, 0.13);
  border-color: rgba(31, 111, 255, 0.48);
  box-shadow: inset 0 0 0 1px rgba(31, 111, 255, 0.10);
}

.mora-role-option input:focus-visible + span,
.mora-page-permission-option input:focus-visible ~ span {
  outline: 3px solid rgba(93, 155, 255, 0.42);
  outline-offset: 2px;
}

.mora-page-permission-grid {
  margin-top: 13px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mora-page-permission-option {
  min-height: 66px;
  padding: 12px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: 0.18s ease;
}

.mora-page-permission-option:has(input:checked) {
  background: rgba(23, 178, 106, 0.11);
  border-color: rgba(23, 178, 106, 0.30);
}

.mora-permission-check {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: transparent;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  font-weight: 1000;
}

.mora-page-permission-option input:checked + .mora-permission-check {
  color: #ffffff;
  background: #17b26a;
  border-color: #17b26a;
}

.mora-permission-storage-note {
  padding: 11px 13px;
  border-radius: 14px;
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.18);
}

.mora-permission-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.configuration-permission-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.configuration-permission-grid label {
  min-height: 54px;
  padding: 13px;
  border-radius: 17px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
  cursor: pointer;
}

.configuration-permission-grid input {
  width: 18px;
  height: 18px;
  accent-color: #2f6fff;
}

.configuration-permission-grid span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 800;
}

/*==================================================
MODO CLARO
==================================================*/

body.light-theme {
  background:
    radial-gradient(
      circle at top left,
      rgba(54, 120, 255, 0.14),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(255, 167, 38, 0.10),
      transparent 35%
    ),
    #edf1f7;
  color: #131722;
}

body.light-theme .configuration-card,
body.light-theme .configuration-heading,
body.light-theme .delivery-header-btn,
body.light-theme .delivery-header-title,
body.light-theme .delivery-header-count {
  color: #131722;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(17, 24, 39, 0.09);
  box-shadow: 0 18px 45px rgba(31, 45, 72, 0.08);
}

body.light-theme .configuration-appearance-card {
  background:
    radial-gradient(circle at 100% 0, rgba(47, 111, 255, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.84);
}

body.light-theme .configuration-theme-preview {
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.90), rgba(31, 45, 72, 0.07));
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .configuration-theme-preview-window {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(17, 24, 39, 0.10);
  box-shadow: 0 8px 22px rgba(31, 45, 72, 0.12);
}

body.light-theme .configuration-theme-preview-window i {
  background: rgba(19, 23, 34, 0.18);
}

body.light-theme .configuration-theme-preview-window i:first-child {
  background: linear-gradient(145deg, #1f6fff, #5d9bff);
}

body.light-theme .configuration-theme-status {
  color: #1757bd;
  background: rgba(31, 111, 255, 0.10);
  border-color: rgba(31, 111, 255, 0.18);
}

body.light-theme .mora-managed-user-summary,
body.light-theme .mora-permission-section,
body.light-theme .mora-role-option > span,
body.light-theme .mora-page-permission-option {
  color: #131722;
  background-color: rgba(17, 24, 39, 0.045);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .mora-managed-user-summary p,
body.light-theme .mora-permission-section > p,
body.light-theme .mora-role-option small,
body.light-theme .mora-page-permission-option small,
body.light-theme .mora-permission-storage-note {
  color: #5d6677;
}

body.light-theme .mora-role-option input:checked + span {
  background:
    radial-gradient(circle at top right, rgba(31, 111, 255, 0.18), transparent 48%),
    rgba(31, 111, 255, 0.08);
  border-color: rgba(31, 111, 255, 0.38);
}

body.light-theme .mora-page-permission-option:has(input:checked) {
  background: rgba(23, 178, 106, 0.08);
  border-color: rgba(23, 178, 106, 0.28);
}

body.light-theme .mora-permission-check {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.16);
}

body.light-theme .configuration-heading > div > p:last-child,
body.light-theme .configuration-card-heading p,
body.light-theme .configuration-option-row p,
body.light-theme .configuration-card-label,
body.light-theme .configuration-data-list span,
body.light-theme .configuration-user-main p,
body.light-theme .configuration-user-access {
  color: rgba(19, 23, 34, 0.57);
}

body.light-theme .configuration-option-row,
body.light-theme .configuration-data-list > div,
body.light-theme .configuration-user-row,
body.light-theme .configuration-permission-grid label {
  background: rgba(17, 24, 39, 0.04);
  border-color: rgba(17, 24, 39, 0.08);
}

body.light-theme .configuration-data-list strong,
body.light-theme .configuration-permission-grid span,
body.light-theme .configuration-secondary-button {
  color: #131722;
}

body.light-theme .configuration-secondary-button {
  background: rgba(17, 24, 39, 0.045);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .configuration-password-form label span {
  color: rgba(19, 23, 34, 0.57);
}

body.light-theme .configuration-password-form input {
  color: #131722;
  background: rgba(17, 24, 39, 0.04);
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme .configuration-card-editing {
  border-color: rgba(10, 132, 255, 0.42);
  box-shadow:
    0 18px 48px rgba(10, 132, 255, 0.12),
    inset 0 0 0 1px rgba(10, 132, 255, 0.08);
}

body.light-theme .delivery-menu-dropdown {
  background: rgba(245, 247, 251, 0.97);
  border-color: rgba(17, 24, 39, 0.1);
}

body.light-theme .delivery-menu-dropdown button {
  color: #131722;
  background: rgba(17, 24, 39, 0.055);
}

body.light-theme .delivery-back-category-btn {
  padding: 9px 12px;
  border-radius: 13px;
  color: #1757bd;
  background: rgba(31, 111, 255, 0.09);
  border: 1px solid rgba(31, 111, 255, 0.18);
}

body.light-theme .delivery-back-category-btn:hover {
  color: #0d4298;
  background: rgba(31, 111, 255, 0.14);
  border-color: rgba(31, 111, 255, 0.28);
}

body.light-theme .delivery-back-category-btn:focus-visible {
  outline: 3px solid rgba(31, 111, 255, 0.28);
  outline-offset: 2px;
}

body.light-theme
.delivery-menu-dropdown
.danger-menu-item {
  color: #d5352e;
  background: rgba(255, 59, 48, 0.10);
}

/* El tema claro se aplica a toda la interfaz, no solo a Configuración. */
body.light-theme .topbar p,
body.light-theme .brand p,
body.light-theme .login-form label,
body.light-theme .demo-hint,
body.light-theme .studio-label,
body.light-theme .panel-header p,
body.light-theme .empty-state p,
body.light-theme .order-header p,
body.light-theme .ticket-header span,
body.light-theme .ticket-item p,
body.light-theme .kitchen-hero p,
body.light-theme .kitchen-summary span,
body.light-theme .kitchen-column-header p,
body.light-theme .kitchen-card small,
body.light-theme .kitchen-empty p,
body.light-theme .products-admin-hero p,
body.light-theme .products-admin-summary span,
body.light-theme .admin-product-card p,
body.light-theme .admin-product-card small,
body.light-theme .product-editor-section label,
body.light-theme .editor-section-header p,
body.light-theme .product-editor-header p,
body.light-theme .admin-form-grid label,
body.light-theme .admin-empty-card p,
body.light-theme .dashboard-kicker,
body.light-theme .dashboard-widget span,
body.light-theme .dashboard-widget p,
body.light-theme .sale-meta span,
body.light-theme .sale-item-row,
body.light-theme .empty-dashboard p,
body.light-theme .payment-option p,
body.light-theme .cash-state-box span,
body.light-theme .cash-status-card p,
body.light-theme .analytics-hero p,
body.light-theme .analytics-kpi-card span,
body.light-theme .analytics-kpi-card p,
body.light-theme .analytics-card-header p,
body.light-theme .analytics-bar-row span,
body.light-theme .analytics-breakdown-row span,
body.light-theme .analytics-breakdown-row p,
body.light-theme .analytics-table-row p,
body.light-theme .analytics-empty-mini p,
body.light-theme .finance-row p,
body.light-theme .finance-row-numbers span,
body.light-theme .finance-detail-header p,
body.light-theme .finance-movement-row p,
body.light-theme .mia-message.mia-assistant,
body.light-theme .inventory-movement-subtitle,
body.light-theme .inventory-material-option span,
body.light-theme .inventory-selected-card span,
body.light-theme .inventory-field-label,
body.light-theme .inventory-selected-card p {
  color: #5d6677;
}

body.light-theme .mora-logo {
  color: #131722;
}

body.light-theme .mia-message.mia-assistant {
  background: #e7edf7;
  border: 1px solid #d5deec;
}

body.light-theme .mia-layout,
body.light-theme #miaView .finance-mobile-header {
  background: #f3f6fb;
}

body.light-theme .mia-input-row {
  background: #ffffff;
}

body.light-theme .mia-chat-card {
  background: #ffffff;
}

body.light-theme .login-card,
body.light-theme .tables-panel,
body.light-theme .order-panel,
body.light-theme .delivery-order-panel,
body.light-theme .kitchen-hero,
body.light-theme .kitchen-column,
body.light-theme .products-admin-hero,
body.light-theme .admin-categories-panel,
body.light-theme .admin-products-panel,
body.light-theme .product-editor-panel,
body.light-theme .analytics-hero,
body.light-theme .analytics-kpi-card,
body.light-theme .analytics-card,
body.light-theme .mia-chat-card,
body.light-theme .finance-row,
body.light-theme .finance-account-detail {
  color: #131722;
  background-color: rgba(255, 255, 255, 0.78);
  border-color: rgba(17, 24, 39, 0.09);
  box-shadow: 0 18px 45px rgba(31, 45, 72, 0.07);
}

body.light-theme .table-card,
body.light-theme .category-chip,
body.light-theme .product-card,
body.light-theme .ticket-item,
body.light-theme .kitchen-summary div,
body.light-theme .kitchen-card,
body.light-theme .kitchen-empty,
body.light-theme .products-admin-summary div,
body.light-theme .admin-category-chip,
body.light-theme .admin-category-card,
body.light-theme .admin-product-card,
body.light-theme .product-editor-section,
body.light-theme .editor-section,
body.light-theme .editor-empty,
body.light-theme .size-card,
body.light-theme .recipe-editor,
body.light-theme .size-mini-card,
body.light-theme .recipe-mini-card,
body.light-theme .admin-empty-card,
body.light-theme .dashboard-widget,
body.light-theme .sale-card,
body.light-theme .empty-dashboard,
body.light-theme .payment-option,
body.light-theme .cash-state-box,
body.light-theme .cash-status-card,
body.light-theme .analytics-breakdown-row,
body.light-theme .analytics-table-row,
body.light-theme .analytics-empty-mini,
body.light-theme .finance-movement-row,
body.light-theme .inventory-material-option,
body.light-theme .inventory-selected-card,
body.light-theme .inventory-quantity-row strong,
body.light-theme .inventory-ticket-review-row {
  color: #131722;
  background-color: rgba(17, 24, 39, 0.045);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .ticket-area {
  color: #131722;
  background: rgba(17, 24, 39, 0.045);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme .table-card h4,
body.light-theme .table-total,
body.light-theme .status-libre,
body.light-theme .ticket-summary strong,
body.light-theme .total-row,
body.light-theme .kitchen-item-row strong,
body.light-theme .finance-row-numbers strong,
body.light-theme .cash-state-box strong,
body.light-theme .inventory-selected-card strong,
body.light-theme .inventory-quantity-row strong {
  color: #131722 !important;
}

body.light-theme .table-card p,
body.light-theme .ticket-summary div,
body.light-theme .kitchen-item-row {
  color: #5d6677;
}

body.light-theme .kitchen-order-details {
  background: #f6f8fc;
  border-color: #dce3ee;
}

body.light-theme .kitchen-order-detail > span {
  color: #6b7484;
}

body.light-theme .kitchen-order-detail > strong {
  color: #131722;
}

body.light-theme .ghost-btn,
body.light-theme .small-btn,
body.light-theme .analytics-range-btn,
body.light-theme .qty-actions button,
body.light-theme .delivery-product-options-header button,
body.light-theme .inventory-quick-actions button {
  color: #273142;
  background: rgba(17, 24, 39, 0.055);
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme .search-box input,
body.light-theme .login-form input,
body.light-theme .inventory-page-search input,
body.light-theme .product-editor-section input,
body.light-theme .product-editor-section select,
body.light-theme .editor-row input,
body.light-theme .editor-row select,
body.light-theme .admin-form-grid input,
body.light-theme .admin-form-grid select,
body.light-theme .mia-input-row input,
body.light-theme .inventory-search-box input,
body.light-theme .inventory-field-label input,
body.light-theme .inventory-ticket-review-row input,
body.light-theme .delivery-product-note-input {
  color: #131722;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(17, 24, 39, 0.13);
}

body.light-theme .inventory-page-search > span,
body.light-theme .inventory-search-result-count {
  color: #667085;
}

body.light-theme .inventory-page-search button {
  color: #344054;
  background: rgba(17, 24, 39, 0.06);
}

body.light-theme .inventory-page-search button:hover {
  color: #131722;
  background: rgba(17, 24, 39, 0.10);
}

body.light-theme #financeView .delivery-menu-dropdown {
  background: rgba(245, 247, 251, 0.98);
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme .product-editor-section select option,
body.light-theme .editor-row select option,
body.light-theme .admin-form-grid select option {
  color: #131722;
  background: #ffffff;
}

body.light-theme .ticket-summary,
body.light-theme .finance-row-actions,
body.light-theme .finance-detail-actions-bottom {
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme .dashboard-modal,
body.light-theme .delivery-product-options-card {
  color: #131722;
  background: rgba(248, 250, 253, 0.98);
  border-color: rgba(17, 24, 39, 0.12);
  box-shadow: 0 35px 90px rgba(31, 45, 72, 0.24);
}

/* Las tarjetas con fotografía conservan texto blanco sobre su overlay oscuro. */
body.light-theme .delivery-order-panel .product-card,
body.light-theme .category-chip:has(.category-chip-visual) {
  color: #ffffff;
}

body.light-theme .primary-btn,
body.light-theme .success-btn,
body.light-theme .inventory-camera-btn,
body.light-theme .mia-user,
body.light-theme .configuration-field-edit-button {
  color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
  .configuration-switch-slider,
  .configuration-switch-slider::before,
  .mia-typing-indicator span {
    transition: none;
    animation: none;
  }
}

/* Mantener accesible la navegación móvil aunque la vista tenga scroll. */
.delivery-mobile-header,
.kitchen-mobile-header,
.finance-mobile-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #05060a;
}

.delivery-menu-dropdown {
  max-height: calc(100dvh - 76px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

body.light-theme .delivery-mobile-header,
body.light-theme .kitchen-mobile-header,
body.light-theme .finance-mobile-header {
  background: #f3f6fb;
}

/*==================================================
RESPONSIVE CONFIGURACIÓN
==================================================*/

@media (max-width: 820px) {
  .configuration-grid {
    grid-template-columns: 1fr;
  }

  .configuration-card-wide {
    grid-column: auto;
  }

  .configuration-permission-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .configuration-user-row {
    grid-template-columns: 46px 1fr auto;
  }

  .configuration-user-access {
    grid-column: 2 / -1;
  }
}

@media (max-width: 560px) {
  .configuration-layout {
    padding: 12px;
  }

  .configuration-heading {
    min-height: 140px;
    padding: 22px;
  }

  .configuration-card {
    padding: 18px;
    border-radius: 24px;
  }

  .configuration-team-heading {
    display: grid;
  }

  .configuration-team-heading .primary-btn {
    width: 100%;
    max-width: none;
  }

  .configuration-data-list > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .configuration-data-list strong {
    max-width: 100%;
    text-align: left;
  }

  .configuration-user-row {
    grid-template-columns: 42px 1fr;
  }

  .configuration-user-row button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .configuration-user-access {
    grid-column: 1 / -1;
  }

  .configuration-permission-grid {
    grid-template-columns: 1fr;
  }

  .mora-managed-user-summary {
    grid-template-columns: 44px 1fr;
  }

  .mora-managed-user-summary > span {
    grid-column: 1 / -1;
    width: fit-content;
  }

  .mora-role-options,
  .mora-page-permission-grid {
    grid-template-columns: 1fr;
  }

  .mora-permission-actions {
    display: grid;
  }

  .mora-permission-actions button {
    width: 100%;
    max-width: none;
  }
}

/*==================================================
MODO EDICIÓN CONFIGURACIÓN
==================================================*/

.configuration-data-list > div {
  position: relative;
  padding-right: 58px;
}

.configuration-field-edit-button {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #0a84ff;
  box-shadow:
    0 5px 14px rgba(10, 132, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}

.configuration-field-edit-button:hover {
  background: #2997ff;
  transform:
    translateY(-50%)
    scale(1.06);
}

.configuration-field-edit-button:active {
  transform:
    translateY(-50%)
    scale(0.94);
}

.configuration-field-edit-button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.configuration-editing-button {
  color: #ffffff !important;
  background: #0a84ff !important;
  border-color: #0a84ff !important;
  box-shadow:
    0 7px 20px rgba(10, 132, 255, 0.25);
}

/*==================================================
LÁPICES DE CONFIGURACIÓN MORA
==================================================*/

.configuration-data-list > div {
  position: relative;
}

.configuration-field-edit-button {
  position: absolute;
  top: 50%;
  right: 12px;

  width: 34px;
  height: 34px;
  min-width: 34px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;

  color: #ffffff;
  background: #0a84ff;

  box-shadow:
    0 5px 14px rgba(10, 132, 255, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);

  cursor: pointer;

  transform: translateY(-50%);

  z-index: 20;
}

.configuration-field-edit-button:hover {
  background: #2997ff;

  transform:
    translateY(-50%)
    scale(1.06);
}

.configuration-field-edit-button:active {
  transform:
    translateY(-50%)
    scale(0.94);
}

.configuration-field-edit-button svg {
  display: block;

  width: 16px;
  height: 16px;

  fill: #ffffff;
}

.configuration-data-list > div:has(
  .configuration-field-edit-button
) {
  padding-right: 58px;
}

.configuration-editing-button {
  color: #ffffff !important;
  background: #0a84ff !important;
  border-color: #0a84ff !important;

  box-shadow:
    0 7px 20px rgba(10, 132, 255, 0.26);
}

/* ========================================
   SWITCH DE REPARTO FINANCIERO
======================================== */

.finance-automatic-distribution {
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.finance-automatic-distribution-copy {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.finance-automatic-distribution-copy > span {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
}

/* ENCENDIDO: TEXTO VERDE */

.finance-automatic-distribution-state.is-on {
  color: #34c759;
  font-size: 14px;
  font-weight: 900;
}

/* APAGADO: TEXTO ROJO */

.finance-automatic-distribution-state.is-off {
  color: #ff453a;
  font-size: 14px;
  font-weight: 900;
}

/* CONTENEDOR DEL SWITCH */

.finance-automatic-distribution .configuration-switch {
  position: relative;

  width: 52px;
  min-width: 52px;
  height: 32px;

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

  flex: 0 0 52px;
  cursor: pointer;
}

/* OCULTAR CHECKBOX NATIVO */

.finance-automatic-distribution
.configuration-switch
input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
  pointer-events: none;
}

/* FONDO GRIS CUANDO ESTÁ APAGADO */

.finance-automatic-distribution
.configuration-switch-slider {
  position: absolute;
  inset: 0;

  width: 52px;
  height: 32px;

  border-radius: 999px;

  background: #636366;
  border: none;

  cursor: pointer;

  transition:
    background-color 0.22s ease,
    box-shadow 0.22s ease,
    opacity 0.22s ease;
}

/* CÍRCULO BLANCO */

.finance-automatic-distribution
.configuration-switch-slider::before {
  content: "";

  position: absolute;
  top: 2px;
  left: 2px;

  width: 28px;
  height: 28px;

  border-radius: 50%;

  background: #ffffff;

  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

/* FONDO AZUL CUANDO ESTÁ ENCENDIDO */

.finance-automatic-distribution
.configuration-switch
input:checked
+
.configuration-switch-slider {
  background: #0a84ff;
}

/* MOVER EL CÍRCULO A LA DERECHA */

.finance-automatic-distribution
.configuration-switch
input:checked
+
.configuration-switch-slider::before {
  transform: translateX(20px);
}

/* EFECTO AL PRESIONAR */

.finance-automatic-distribution
.configuration-switch:active
.configuration-switch-slider::before {
  width: 30px;
}

.finance-automatic-distribution
.configuration-switch:active
input:checked
+
.configuration-switch-slider::before {
  transform: translateX(18px);
}

/* ENFOQUE CON TECLADO */

.finance-automatic-distribution
.configuration-switch
input:focus-visible
+
.configuration-switch-slider {
  box-shadow:
    0 0 0 4px rgba(10, 132, 255, 0.25);
}

/* SWITCH DESHABILITADO MIENTRAS GUARDA */

.finance-automatic-distribution
.configuration-switch
input:disabled
+
.configuration-switch-slider {
  opacity: 0.55;
  cursor: wait;
}

/* TEMA CLARO */

body.light-theme
.finance-automatic-distribution {
  background: rgba(17, 24, 39, 0.04);
  border-color: rgba(17, 24, 39, 0.09);
}

body.light-theme
.finance-automatic-distribution-copy > span {
  color: #20242d;
}

body.light-theme
.finance-automatic-distribution-state.is-on {
  color: #28a745;
}

body.light-theme
.finance-automatic-distribution-state.is-off {
  color: #dc3545;
}

body.light-theme
.finance-automatic-distribution
.configuration-switch-slider {
  background: #aeaeb2;
}

body.light-theme
.finance-automatic-distribution
.configuration-switch
input:checked
+
.configuration-switch-slider {
  background: #007aff;
}

/* ==========================================
   CANTIDADES DE PRODUCTOS EN COMBOS
========================================== */

.delivery-combo-category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.delivery-combo-category-header > div {
  min-width: 0;
  flex: 1;
}

.delivery-combo-category-header > div > strong {
  display: block;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.delivery-combo-category-header p {
  margin-top: 5px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  line-height: 1.4;
}

.delivery-combo-category-counter {
  min-width: 56px;
  padding: 7px 10px;
  border-radius: 999px;

  color: #8eb9ff;
  background: rgba(31, 111, 255, 0.14);
  border: 1px solid rgba(31, 111, 255, 0.25);

  font-size: 12px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.delivery-combo-options-list {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.delivery-combo-option-row {
  min-height: 68px;
  padding: 11px 12px;
  border-radius: 18px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.delivery-combo-option-row.active {
  background:
    radial-gradient(
      circle at top right,
      rgba(23, 178, 106, 0.24),
      transparent 48%
    ),
    rgba(23, 178, 106, 0.14);

  border-color: rgba(23, 178, 106, 0.42);
}

.delivery-combo-option-copy {
  min-width: 0;
  flex: 1;
}

.delivery-combo-option-copy span {
  display: block;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
}

.delivery-combo-option-copy small {
  display: block;
  margin-top: 4px;

  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 700;
}

.delivery-combo-option-row.active
.delivery-combo-option-copy small {
  color: #b7f7d4;
}

.delivery-combo-quantity-control {
  display: grid;
  grid-template-columns: 38px 34px 38px;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}

.delivery-combo-quantity-button {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 13px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.10);

  font-size: 21px;
  font-weight: 900;
  line-height: 1;

  transition:
    opacity 0.2s ease,
    background 0.2s ease,
    transform 0.15s ease;
}

.delivery-combo-quantity-button:hover:not(:disabled) {
  background: rgba(31, 111, 255, 0.24);
  border-color: rgba(31, 111, 255, 0.32);
}

.delivery-combo-quantity-button:active:not(:disabled) {
  transform: scale(0.94);
}

.delivery-combo-quantity-button:disabled {
  opacity: 0.28;
  cursor: default;
  transform: none;
}

.delivery-combo-quantity-value {
  min-width: 34px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
  text-align: center;
}

/* Categoría incompleta */

.delivery-combo-category.active {
  border-color: rgba(255, 69, 58, 0.58);
  box-shadow:
    0 0 0 3px rgba(255, 69, 58, 0.10);
}

/* Tema claro */

body.light-theme
.delivery-combo-option-row {
  background: rgba(17, 24, 39, 0.045);
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme
.delivery-combo-option-row.active {
  background: rgba(23, 178, 106, 0.10);
  border-color: rgba(23, 178, 106, 0.35);
}

body.light-theme
.delivery-combo-option-copy span,
body.light-theme
.delivery-combo-quantity-value {
  color: #131722;
}

body.light-theme
.delivery-combo-option-copy small {
  color: #667085;
}

body.light-theme
.delivery-combo-quantity-button {
  color: #273142;
  background: rgba(17, 24, 39, 0.07);
  border-color: rgba(17, 24, 39, 0.10);
}

body.light-theme
.delivery-combo-category-header > div > strong {
  color: #131722;
}

/* Pantallas pequeñas */

@media (max-width: 430px) {
  .delivery-combo-option-row {
    gap: 8px;
    padding: 10px;
  }

  .delivery-combo-quantity-control {
    grid-template-columns: 34px 28px 34px;
    gap: 3px;
  }

  .delivery-combo-quantity-button {
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    height: 34px;
  }

  .delivery-combo-quantity-value {
    min-width: 28px;
    font-size: 15px;
  }
}

/* Categorías de combo con máximo de una selección */

.delivery-combo-single-option {
  cursor: pointer;
  user-select: none;
}

.delivery-combo-single-option:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.16);
}

.delivery-combo-single-option:focus-visible {
  outline: none;
  border-color: rgba(31, 111, 255, 0.58);
  box-shadow:
    0 0 0 3px rgba(31, 111, 255, 0.16);
}

.delivery-combo-single-indicator {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  color: transparent;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);

  font-size: 15px;
  font-weight: 900;

  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}

.delivery-combo-single-option.active
.delivery-combo-single-indicator {
  color: #ffffff;
  background: #17b26a;
  border-color: #17b26a;
}

body.light-theme
.delivery-combo-single-option:hover {
  background: rgba(17, 24, 39, 0.07);
}

body.light-theme
.delivery-combo-single-indicator {
  background: rgba(17, 24, 39, 0.06);
  border-color: rgba(17, 24, 39, 0.12);
}

body.light-theme
.delivery-combo-single-option.active
.delivery-combo-single-indicator {
  color: #ffffff;
  background: #17b26a;
  border-color: #17b26a;
}

/* =========================================
   ÁREA SEGURA PARA IPHONE
   ========================================= */

@media (max-width: 768px) {
  .delivery-mobile-header,
  .kitchen-mobile-header,
  .finance-mobile-header {
    box-sizing: border-box;

    /* Permite que el encabezado crezca sin comprimir sus elementos */
    height: auto !important;
    min-height: calc(64px + env(safe-area-inset-top));

    /* Solo agrega el espacio necesario para la cámara */
    padding-top: env(safe-area-inset-top);

    flex-shrink: 0;
  }

  /* El menú comienza debajo del encabezado completo */
  .delivery-menu-dropdown {
    top: calc(64px + env(safe-area-inset-top));
  }

  /* Evita que el botón inferior choque con la barra del iPhone */
  .delivery-floating-ticket-btn {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  body,
  .app {
    min-height: 100dvh;
  }
}


/* =========================================
   ÁREA SEGURA DEL IPHONE
   ========================================= */

@media (max-width: 768px) {
  html,
  body {
    margin: 0;
    width: 100%;
    min-height: 100%;
  }

  body {
    min-height: 100dvh;

    /* Deja visible el fondo azul en la zona
       de la cámara y la barra inferior */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);

    box-sizing: border-box;
  }

  .app {
    width: 100%;

    /* Importante: elimina el espacio negro interno */
    padding: 0 !important;

    min-height: calc(
      100dvh
      - env(safe-area-inset-top)
      - env(safe-area-inset-bottom)
    );

    box-sizing: border-box;
  }

  .delivery-mobile-header,
  .kitchen-mobile-header,
  .finance-mobile-header {
    margin-top: 0 !important;
  }

  .delivery-floating-ticket-btn {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* =========================================
   MÉTODOS DE PAGO CONFIGURABLES
   ========================================= */

.payment-method-option-form {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.payment-method-option-form label {
  display: grid;
  gap: 7px;
}

.payment-method-option-form label > span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

.payment-method-option-form input,
.payment-method-option-form select,
.payment-method-option-form textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.16);
  border:
    1px solid
    rgba(255, 255, 255, 0.10);
  box-sizing: border-box;
}

.payment-method-option-form textarea {
  min-height: 92px;
  resize: vertical;
}

.payment-method-option-form input:focus,
.payment-method-option-form select:focus,
.payment-method-option-form textarea:focus {
  outline: none;
  border-color:
    rgba(47, 111, 255, 0.72);
}

.payment-method-option-wide,
.payment-method-option-actions {
  grid-column: 1 / -1;
}

.payment-method-option-check {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 10px !important;
  min-height: 46px;
}

.payment-method-option-check input {
  width: 18px;
  min-height: 18px;
  margin: 0;
}

.payment-method-option-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.payment-method-option-actions
.configuration-secondary-button {
  margin-top: 0;
}

body.light-theme
.payment-method-option-form
label > span {
  color: rgba(22, 28, 40, 0.62);
}

body.light-theme
.payment-method-option-form input,
body.light-theme
.payment-method-option-form select,
body.light-theme
.payment-method-option-form textarea {
  color: rgba(18, 24, 36, 0.92);
  background:
    rgba(17, 24, 39, 0.04);
  border-color:
    rgba(17, 24, 39, 0.12);
}

@media (max-width: 700px) {
  .payment-method-option-form {
    grid-template-columns: 1fr;
  }

  .payment-method-option-wide,
  .payment-method-option-actions {
    grid-column: auto;
  }
}

.finance-distribution-mode-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(220px, 300px);
  gap: 22px;
  margin-bottom: 20px;
  padding: 22px;
  border: 1px solid
    rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background:
    rgba(255, 255, 255, 0.04);
}

.finance-distribution-mode-copy > span,
.finance-distribution-mode-control span {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  opacity: 0.65;
}

.finance-distribution-mode-copy h3 {
  margin: 0 0 8px;
}

.finance-distribution-mode-copy p {
  margin: 0;
  line-height: 1.5;
  opacity: 0.75;
}

.finance-distribution-mode-control select {
  width: 100%;
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid
    rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  color: inherit;
}

.finance-distribution-source-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.finance-distribution-source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 13px;
  border-radius: 12px;
  background:
    rgba(255, 255, 255, 0.04);
}

.finance-distribution-source-row strong {
  white-space: nowrap;
}

.finance-distribution-source-row
.is-complete {
  color: #64d98b;
}

.finance-distribution-source-row
.is-incomplete {
  color: #ff776f;
}

.light-theme
.finance-distribution-mode-card {
  border-color:
    rgba(17, 24, 39, 0.1);
  background:
    rgba(17, 24, 39, 0.035);
}

.light-theme
.finance-distribution-mode-control
select {
  border-color:
    rgba(17, 24, 39, 0.12);
  background: #ffffff;
}

.light-theme
.finance-distribution-source-row {
  background:
    rgba(17, 24, 39, 0.04);
}

@media (max-width: 700px) {
  .finance-distribution-mode-card {
    grid-template-columns: 1fr;
  }

  .finance-distribution-source-list {
    grid-column: auto;
  }
}

.kitchen-combo-contents {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid
    rgba(31, 111, 255, 0.24);
  border-radius: 14px;
  background:
    rgba(31, 111, 255, 0.1);
}

.kitchen-combo-title {
  display: block;
  margin-bottom: 7px;
  color: #73a7ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kitchen-combo-list {
  display: grid;
  gap: 7px;
}

.kitchen-combo-line {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.kitchen-combo-line strong {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.3;
}

.kitchen-combo-line small {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  line-height: 1.3;
  text-align: right;
}

body.light-theme
.kitchen-combo-contents {
  border-color:
    rgba(31, 111, 255, 0.2);
  background:
    rgba(31, 111, 255, 0.08);
}

body.light-theme
.kitchen-combo-line strong {
  color: #111827;
}

body.light-theme
.kitchen-combo-line small {
  color: rgba(17, 24, 39, 0.62);
}

/* =========================================
   CARGA DE IMÁGENES DEL CATÁLOGO
   ========================================= */

.catalog-image-editor {
  display: grid;
  grid-template-columns:
    minmax(180px, 240px)
    minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}

.catalog-image-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 160px;
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(
      circle at top right,
      rgba(31, 111, 255, 0.16),
      transparent 45%
    ),
    rgba(255, 255, 255, 0.055);
  border:
    1px solid
    rgba(255, 255, 255, 0.10);
}

.catalog-image-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.catalog-image-placeholder {
  padding: 22px;
  display: grid;
  gap: 7px;
  text-align: center;
}

.catalog-image-placeholder strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
}

.catalog-image-placeholder span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 12px;
  line-height: 1.4;
}

.catalog-image-controls {
  min-width: 0;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.catalog-image-controls > p {
  max-width: 520px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  line-height: 1.5;
}

.catalog-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.catalog-image-actions button {
  width: auto;
  max-width: none;
}

.catalog-image-actions button:disabled,
.admin-category-image-button:disabled {
  cursor: wait;
  opacity: 0.56;
  transform: none;
}

.catalog-image-status,
.category-image-status {
  display: none;
  color: #8eb9ff;
  font-size: 12px;
  font-weight: 800;
}

.catalog-image-status.is-visible,
.category-image-status.is-visible {
  display: block;
}


/* =========================================
   CATEGORÍAS EN ADMINISTRACIÓN
   ========================================= */

.admin-category-row {
  width: 100%;

  display: grid;
  grid-template-columns:
    42px
    minmax(0, 1fr)
    42px;

  align-items: center;
  gap: 8px;
}

/*
 * La categoría "Todo" no tiene imagen.
 * Durante el modo quitar, desaparecen también
 * la vista previa y el botón de fotografía.
 */
.admin-category-row.is-system .admin-category-chip,
.admin-category-row.is-remove-mode .admin-category-chip {
  grid-column: 1 / -1;
}


/* VISTA PREVIA DE LA IMAGEN */

.admin-category-image-preview {
  width: 42px;
  min-width: 42px;
  height: 42px;

  border-radius: 14px;
  overflow: hidden;

  display: grid;
  place-items: center;

  color: rgba(255, 255, 255, 0.62);

  background:
    rgba(255, 255, 255, 0.07);

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  font-size: 18px;
}

.admin-category-image-preview img {
  width: 100%;
  height: 100%;

  display: block;
  object-fit: cover;
}

.admin-category-image-preview span {
  display: grid;
  place-items: center;

  line-height: 1;
}


/* BOTÓN PRINCIPAL CON EL NOMBRE */

.admin-category-row .admin-category-chip {
  width: 100%;
  min-width: 0;
  min-height: 58px;

  padding: 12px 14px;

  justify-content: flex-start;

  overflow: hidden;
}

.admin-category-row .admin-category-chip > span {
  min-width: 0;

  overflow: hidden;
  text-overflow: ellipsis;

  white-space: normal;
  overflow-wrap: anywhere;

  line-height: 1.2;
}


/* BOTÓN ÚNICO PARA SUBIR O CAMBIAR FOTO */

.admin-category-photo-emoji-btn {
  width: 42px;
  min-width: 42px;
  max-width: 42px;
  height: 42px;

  padding: 0;

  border-radius: 14px;

  display: grid;
  place-items: center;

  color: #8eb9ff;

  background:
    rgba(31, 111, 255, 0.14);

  border:
    1px solid
    rgba(31, 111, 255, 0.24);

  font-size: 18px;
  line-height: 1;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}

.admin-category-photo-emoji-btn:hover {
  background:
    rgba(31, 111, 255, 0.22);

  border-color:
    rgba(31, 111, 255, 0.34);
}

.admin-category-photo-emoji-btn:active {
  transform: scale(0.94);
}

.admin-category-photo-emoji-btn:focus-visible {
  outline:
    3px solid
    rgba(31, 111, 255, 0.26);

  outline-offset: 2px;
}

.admin-category-photo-emoji-btn:disabled {
  cursor: wait;

  opacity: 0.56;
  transform: none;
}


/* MENSAJE DE ESTADO: SUBIENDO, PROCESANDO, ETC. */

.category-image-status {
  display: none;

  grid-column: 2 / -1;

  padding: 0 2px;

  color: #8eb9ff;

  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.category-image-status.is-visible {
  display: block;
}


/* =========================================
   CATEGORÍAS ADMINISTRACIÓN — TEMA CLARO
   ========================================= */

body.light-theme
.admin-category-image-preview {
  color: #667085;

  background:
    rgba(17, 24, 39, 0.045);

  border-color:
    rgba(17, 24, 39, 0.10);
}

body.light-theme
.admin-category-photo-emoji-btn {
  color: #1757bd;

  background:
    rgba(31, 111, 255, 0.09);

  border-color:
    rgba(31, 111, 255, 0.18);
}

body.light-theme
.admin-category-photo-emoji-btn:hover {
  color: #0d4298;

  background:
    rgba(31, 111, 255, 0.15);

  border-color:
    rgba(31, 111, 255, 0.28);
}

body.light-theme
.category-image-status {
  color: #1757bd;
}


/* =========================================
   CATEGORÍAS ADMINISTRACIÓN — RESPONSIVE
   ========================================= */

@media (max-width: 430px) {
  .admin-category-row {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      38px;

    gap: 7px;
  }

  .admin-category-image-preview,
  .admin-category-photo-emoji-btn {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    height: 38px;

    border-radius: 12px;
  }

  .admin-category-photo-emoji-btn {
    font-size: 16px;
  }

  .admin-category-row .admin-category-chip {
    min-height: 54px;
    padding: 10px 12px;
  }
}

.tables-header-title {
  position: relative;
}

.tables-header-title-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.tables-header-status-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.tables-selector-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 84px;
  right: 84px;
  z-index: 40;
  background: rgba(13, 17, 27, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(18px);
}

.tables-selector-list {
  display: grid;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.tables-selector-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.tables-selector-item:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.tables-selector-item.active {
  border-color: rgba(96, 165, 250, 0.75);
  background: rgba(59, 130, 246, 0.12);
}

.tables-selector-item-color {
  width: 12px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.tables-selector-item-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tables-selector-item-main strong {
  font-size: 16px;
  line-height: 1.1;
  color: #fff;
}

.tables-selector-item-main small {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.72);
}

.tables-selector-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tables-selector-action {
  border: none;
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 700;
  cursor: pointer;
}

.tables-selector-action.add {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.35);
}

.tables-selector-action.remove {
  background: rgba(239, 68, 68, 0.14);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

@media (max-width: 900px) {
  .tables-selector-dropdown {
    left: 16px;
    right: 16px;
  }
}

/* ==================================================
   MESAS · LAYOUT COMPLETO TIPO DELIVERY
   ================================================== */

/*
 * La selección de mesas ahora se realiza
 * únicamente desde el encabezado superior.
 */
#posLayout > #tablesPanel {
  display: none !important;
}

/*
 * El layout ya no reserva espacio para
 * el panel izquierdo.
 */
#posLayout {
  display: block;
  width: 100%;
  height: calc(100vh - 76px);
  min-width: 0;
  min-height: 0;
  padding: 0 14px 14px;
  box-sizing: border-box;
}

/*
 * El panel principal ocupa todo el ancho.
 */
#posLayout > #posOrderPanel {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 30px;
  overflow: hidden;
}

/*
 * Estado vacío / orden activa
 */
#posLayout > #posOrderPanel .order-content {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

/*
 * El encabezado interno de la orden ya no se usa
 * porque la mesa está arriba.
 */
#posLayout > #posOrderPanel .order-header {
  display: none;
}

/*
 * La zona principal ahora es de una sola columna.
 */
#posLayout > #posOrderPanel .order-body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 14px;
  box-sizing: border-box;
}

/*
 * Área de productos
 */
#posLayout > #posOrderPanel .products-area {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * Área de ticket
 */
#posLayout > #posOrderPanel .ticket-area {
  width: 100%;
  min-width: 0;
}

/* ==================================================
   MESAS · CATEGORÍAS
   ================================================== */

#posLayout .products-area.delivery-show-categories .search-box {
  display: none;
}

#posLayout .products-area.delivery-show-categories .products-grid {
  display: none;
}

#posLayout .products-area.delivery-show-categories .categories-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  overflow-y: auto;
  padding-bottom: 8px;
}

#posLayout .products-area.delivery-show-categories .category-chip {
  width: 100%;
  max-width: none;
  height: 150px;
  min-height: 150px;
  border-radius: 24px;
}

/* ==================================================
   MESAS · PRODUCTOS
   ================================================== */

#posLayout .products-area.delivery-show-products .categories-list {
  display: none;
}

#posLayout .products-area.delivery-show-products .search-box {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}

#posLayout .products-area.delivery-show-products .products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  align-content: start;
  min-width: 0;
  overflow-y: auto;
  padding-bottom: 14px;
}

/*
 * Aquí está la corrección principal:
 * las tarjetas de productos en Mesas
 * deben verse como las de Delivery.
 */
#posLayout .products-area.delivery-show-products .product-card {
  width: 100%;
  min-height: 160px;
  height: 160px;
  border-radius: 26px;
  padding: 18px 18px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  overflow: hidden;
  position: relative;
}

/*
 * Evita que aparezcan “barras raras”
 * o elementos desalineados en la parte superior.
 */
#posLayout .products-area.delivery-show-products .product-card > * {
  position: relative;
  z-index: 1;
}

/*
 * En Mesas queremos el look limpio
 * de Delivery.
 */
#posLayout .products-area.delivery-show-products .product-card h4,
#posLayout .products-area.delivery-show-products .product-card .product-name {
  font-size: 18px;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 8px;
}

/*
 * Precio más claro y grande.
 */
#posLayout .products-area.delivery-show-products .product-card .product-price,
#posLayout .products-area.delivery-show-products .product-card strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  margin: 0;
}

/*
 * Ocultamos descripciones secundarias
 * que en Mesas ensucian el diseño.
 */
#posLayout .products-area.delivery-show-products .product-card p,
#posLayout .products-area.delivery-show-products .product-card small {
  margin: 0;
}

/*
 * Si tu card imprime textos como
 * “Producto disponible / Sin extras”,
 * los ocultamos en Mesas para igualarlo a Delivery.
 */
#posLayout .products-area.delivery-show-products .product-card p:nth-of-type(n + 2),
#posLayout .products-area.delivery-show-products .product-card small:nth-of-type(n + 2) {
  display: none;
}

/*
 * Algunas tarjetas están mostrando una franja
 * horizontal arriba. Esto normalmente viene de
 * un badge/strip interno. Lo escondemos solo en Mesas.
 */
#posLayout .products-area.delivery-show-products .product-card .product-size-strip,
#posLayout .products-area.delivery-show-products .product-card .product-strip,
#posLayout .products-area.delivery-show-products .product-card .product-top-strip,
#posLayout .products-area.delivery-show-products .product-card .size-strip,
#posLayout .products-area.delivery-show-products .product-card .product-badge-top {
  display: none !important;
}

/* ==================================================
   MESAS · BOTÓN VER TICKET
   ================================================== */

/*
 * Este era el problema del borde derecho.
 * Le damos margen interno real y no lo hacemos
 * pegarse al borde del panel.
 */
#posLayout #deliveryFloatingTicketButton {
  display: block;
  width: calc(100% - 12px);
  max-width: none;
  margin: 14px 6px 0;
  border-radius: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

/*
 * Si el botón usa otra clase además del ID,
 * reforzamos el redondeo.
 */
#posLayout .delivery-floating-ticket-button,
#posLayout .floating-ticket-button {
  border-radius: 24px !important;
  overflow: hidden;
}

/* ==================================================
   MESAS · RESPONSIVE
   ================================================== */

@media (max-width: 720px) {
  #posLayout {
    height: calc(100vh - 76px);
    padding: 0 10px 10px;
  }

  #posLayout > #posOrderPanel .order-body {
    padding: 10px;
  }

  #posLayout .products-area.delivery-show-categories .categories-list,
  #posLayout .products-area.delivery-show-products .products-grid {
    gap: 10px;
  }

  #posLayout .products-area.delivery-show-categories .category-chip,
  #posLayout .products-area.delivery-show-products .product-card {
    min-height: 138px;
    height: 138px;
    border-radius: 20px;
  }

  #posLayout #deliveryFloatingTicketButton {
    width: calc(100% - 8px);
    margin: 12px 4px 0;
    border-radius: 20px;
  }
}

/* ==================================================
   MORA — VISTA MÓVIL DE MESAS
   Productos y ticket
================================================== */

#posScreen.table-order-mode #posOrderPanel {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#posScreen.table-order-mode #posOrderPanel .order-header {
  display: none !important;
}

#posScreen.table-order-mode #posOrderPanel .order-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

#posScreen.table-order-mode #posOrderPanel .order-body {
  width: 100%;
  height: 100%;
  min-height: 0;

  display: flex !important;
  flex-direction: column;

  padding: 14px;
  gap: 12px;

  overflow: hidden;
}

/* ------------------------------
   Mostrar productos
------------------------------ */

#posScreen.table-order-mode
#posOrderPanel
.products-area:not(.hidden) {
  display: flex !important;
  flex: 1;
  min-height: 0;
  width: 100%;

  flex-direction: column;
  overflow: hidden;
}

#posScreen.table-order-mode
#posOrderPanel
.products-area.hidden {
  display: none !important;
}

/* ------------------------------
   Banco de productos
------------------------------ */

#posScreen.table-order-mode
#posOrderPanel
.products-grid {
  flex: 1;
  min-height: 0;

  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  grid-auto-rows: 158px;

  align-content: start;

  gap: 14px;
  padding: 2px;

  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------
   Tarjeta de producto estilo Delivery
------------------------------ */

#posScreen.table-order-mode
#posOrderPanel
.product-card {
  position: relative;
  isolation: isolate;

  width: 100%;
  min-width: 0;

  height: 158px !important;
  min-height: 158px !important;

  display: block !important;

  padding: 0 !important;

  border-radius: 26px !important;
  overflow: hidden;

  text-align: left;
  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      rgba(36, 41, 52, 0.92) 0%,
      rgba(28, 31, 40, 0.96) 100%
    );

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  box-shadow:
    0 10px 26px
    rgba(0, 0, 0, 0.14);
}

#posScreen.table-order-mode
#posOrderPanel
.product-card:active {
  transform: scale(0.985);
}

/* La parte visual ahora ocupa TODA la card */

#posScreen.table-order-mode
#posOrderPanel
.product-card-visual {
  position: absolute;
  inset: 0;

  width: 100% !important;
  height: 100% !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: inherit;
  overflow: hidden;

  z-index: 0;

  font-size: 72px;
  font-weight: 900;
  line-height: 1;

  color: rgba(255, 255, 255, 0.90);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06) 0%,
      rgba(255, 255, 255, 0.02) 100%
    );
}

#posScreen.table-order-mode
#posOrderPanel
.product-card-visual img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

/* Overlay oscuro como Delivery
   para que el texto se lea bien */

#posScreen.table-order-mode
#posOrderPanel
.product-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.06) 0%,
      rgba(0, 0, 0, 0.18) 42%,
      rgba(0, 0, 0, 0.62) 100%
    );

  z-index: 1;
  pointer-events: none;
}

/* Nombre del producto */

#posScreen.table-order-mode
#posOrderPanel
.product-card h4 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 50px;

  z-index: 2;

  margin: 0;

  font-size: 17px;
  font-weight: 850;
  line-height: 1.18;

  color: #ffffff;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Precio */

#posScreen.table-order-mode
#posOrderPanel
.product-card strong {
  position: absolute;
  left: 18px;
  bottom: 16px;

  z-index: 2;

  margin: 0;

  font-size: 22px;
  font-weight: 900;
  line-height: 1;

  color: #ffffff;
}

/* Ocultamos texto secundario en Mesas
   para que quede como Delivery */

#posScreen.table-order-mode
#posOrderPanel
.product-card p,
#posScreen.table-order-mode
#posOrderPanel
.product-card small {
  display: none !important;
}

/* ------------------------------
   Botón flotante de ticket
------------------------------ */

#posScreen.table-order-mode
#posOrderPanel
#deliveryFloatingTicketButton {
  width: auto !important;

  flex: 0 0 auto;

  margin:
    2px 0 0 !important;

  padding:
    17px 20px !important;

  border: none !important;
  border-radius: 999px !important;

  background: #ffffff;
  color: #111827;

  font-size: 17px;
  font-weight: 900;

  box-shadow:
    0 14px 34px
    rgba(0, 0, 0, 0.28);
}

#posScreen.table-order-mode
#posOrderPanel
#deliveryFloatingTicketButton.hidden {
  display: none !important;
}

/* ------------------------------
   Ticket completo
------------------------------ */

#posScreen.table-order-mode
#posOrderPanel
.ticket-area:not(.hidden) {
  display: flex !important;
  flex: 1;

  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none !important;

  flex-direction: column;

  padding: 18px;

  border-radius: 26px;

  background:
    rgba(255, 255, 255, 0.055);

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  overflow: hidden;
}

#posScreen.table-order-mode
#posOrderPanel
.ticket-area.hidden {
  display: none !important;
}

#posScreen.table-order-mode
#posOrderPanel
.ticket-header {
  flex: 0 0 auto;
}

#posScreen.table-order-mode
#posOrderPanel
.ticket-items {
  flex: 1;

  min-height: 0;
  max-height: none !important;

  overflow-y: auto;
}

#posScreen.table-order-mode
#posOrderPanel
.ticket-summary {
  display: grid !important;
  flex: 0 0 auto;
}

#posScreen.table-order-mode
#posOrderPanel
.ticket-actions {
  display: grid !important;

  grid-template-columns: 1fr;
  gap: 10px;

  flex: 0 0 auto;
}

/*
 * El CSS de Delivery los ocultaba también
 * cuando el panel pertenecía a una Mesa.
 */

#posScreen.table-order-mode
#posOrderPanel
#sendKitchenButton:not(.hidden),

#posScreen.table-order-mode
#posOrderPanel
#requestBillButton:not(.hidden),

#posScreen.table-order-mode
#posOrderPanel
#payButton:not(.hidden),

#posScreen.table-order-mode
#posOrderPanel
#releaseTableButton:not(.hidden),

#posScreen.table-order-mode
#posOrderPanel
#deliveryToggleButton:not(.hidden) {
  display: block !important;

  width: 100%;
  max-width: none;

  min-height: 52px;

  border-radius: 18px;
}

/* ------------------------------
   Teléfonos angostos
------------------------------ */

@media (max-width: 680px) {
  #posScreen.table-order-mode
  #posOrderPanel
  .products-grid {
    grid-template-columns: 1fr;
  }

 #posScreen.table-order-mode
#posOrderPanel
.product-card {
  min-height: 132px !important;
  height: 132px !important;
}

  #posScreen.table-order-mode
#posOrderPanel
.product-card-visual {
  width: 100% !important;
  height: 100% !important;
}
} 

/* =========================================
   MODIFICACIONES DE COMANDAS EN COCINA
   ========================================= */

.kitchen-card-modified {
  border-color:
    rgba(245, 158, 11, 0.65) !important;

  box-shadow:
    0 0 0 2px
    rgba(245, 158, 11, 0.18);
}

.kitchen-modified-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin:
    12px 0;

  padding:
    12px 14px;

  border:
    1px solid
    rgba(245, 158, 11, 0.5);

  border-radius:
    14px;

  background:
    rgba(245, 158, 11, 0.16);

  color:
    #fbbf24;
}

.kitchen-modified-alert strong {
  flex-shrink: 0;

  font-size:
    0.88rem;

  text-transform:
    uppercase;

  letter-spacing:
    0.04em;
}

.kitchen-modified-alert span {
  color:
    inherit;

  font-size:
    0.88rem;

  text-align:
    right;
}

.kitchen-card-removed {
  border-color:
    rgba(239, 68, 68, 0.7) !important;
}

.kitchen-removed-product {
  text-decoration:
    line-through;

  opacity:
    0.75;
}

.kitchen-removed-label {
  display:
    block;

  margin-top:
    6px;

  color:
    #f87171;

  font-weight:
    800;

  letter-spacing:
    0.04em;
}

@media (max-width: 700px) {
  .kitchen-modified-alert {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .kitchen-modified-alert span {
    text-align:
      left;
  }
}