:root {
  --red: #d90068;
  --cream: #fff2f7;
  --ink: #29262b;
  --line: #d9d9de;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font:
    16px system-ui,
    sans-serif;
}
header {
  background: var(--red);
  color: white;
  padding: 25px max(20px, calc((100% - 1180px) / 2));
}
header h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 32px;
}
header p {
  margin: 8px 0;
  font-size: 14px;
}
a {
  color: inherit;
}
main {
  max-width: 1220px;
  margin: auto;
  padding: 20px;
}
.layout {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 22px;
}
.panel {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px #29262b05;
}
h2 {
  font:
    26px Georgia,
    serif;
  margin: 0 0 16px;
}
h3 {
  margin: 0 0 8px;
  font-size: 17px;
}
button,
input,
select,
textarea {
  font: inherit;
  border-radius: 8px;
  border: 1px solid #aaa5af;
  padding: 10px;
}
input,
select,
textarea {
  width: 100%;
  background: #fff;
}
textarea {
  min-height: 70px;
  resize: vertical;
}
button {
  background: var(--red);
  color: white;
  border: 0;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
button.secondary {
  background: #f0eef2;
  color: var(--ink);
}
label {
  display: block;
  font-size: 14px;
  margin: 10px 0 5px;
}
label.check {
  display: flex;
  align-items: center;
  gap: 8px;
}
input[type="checkbox"] {
  width: auto;
}
.row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.row > * {
  flex: 1;
}
.muted,
small {
  color: #6b6470;
  font-size: 13px;
}
.banner {
  background: #fae8c9;
  padding: 12px;
  border-radius: 9px;
  margin-bottom: 15px;
}
.product {
  border-top: 1px solid var(--line);
  padding: 15px 0;
}
.product:first-child {
  border-top: 0;
}
.product summary {
  cursor: pointer;
  font-weight: 600;
  padding: 5px 0;
}
.price {
  float: right;
  color: var(--red);
}
.product button {
  margin-top: 12px;
}
.cartline {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cartline button {
  float: right;
  padding: 4px 8px;
}
.total {
  font-size: 24px;
  font-weight: bold;
  margin: 15px 0;
}
.messages {
  height: 275px;
  overflow: auto;
  background: #fff7fa;
  border-radius: 10px;
  padding: 12px;
}
.bubble {
  white-space: pre-wrap;
  border-radius: 10px;
  background: white;
  margin: 8px 0;
  padding: 12px;
  overflow-wrap: anywhere;
}
.bubble.user {
  background: #f9dce9;
  margin-left: 25px;
}
.error {
  color: #a02424;
  white-space: pre-wrap;
}
.notice {
  white-space: pre-wrap;
}
#configJson {
  font:
    13px ui-monospace,
    monospace;
  height: 350px;
}
.badge {
  display: inline-block;
  background: #f4eaf0;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}
.order {
  border-left: 5px solid var(--red);
}
.order pre {
  white-space: pre-wrap;
  font: inherit;
  font-size: 14px;
}
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #29262b;
  color: white;
  padding: 14px;
  border-radius: 10px;
  max-width: 90%;
  z-index: 10;
}
[hidden] {
  display: none !important;
}
footer {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: #6b6470;
}
@media (max-width: 820px) {
  .layout {
    grid-template-columns: 1fr;
  }
  main {
    padding: 12px;
  }
  .panel {
    padding: 16px;
  }
  header {
    padding: 20px;
  }
  .row {
    flex-wrap: wrap;
  }
  .row > * {
    min-width: 100px;
  }
}

/* Panel de administración para teléfono y tablet */

.admin-app {
  background: #fff2f7;
}

.admin-app .panel {
  border-radius: 20px;
}

.admin-app button,
.admin-app input,
.admin-app select {
  min-height: 50px;
  font-size: 16px;
}

.admin-app textarea {
  font-size: 16px;
  min-height: 100px;
}

.admin-app input[type="checkbox"] {
  width: 24px;
  height: 24px;
  min-height: 24px;
  flex-shrink: 0;
}

.admin-app label.check {
  min-height: 48px;
}

/* Tarjetas de pedidos */

.admin-app .order {
  background: #ffffff;
  border: 1px solid #d9d9de;
  border-left: 6px solid #d90068;
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(73, 20, 47, 0.07);
  overflow-wrap: anywhere;
}

.admin-app .order h3 {
  font-size: 20px;
  line-height: 1.4;
  color: #a90050;
}

.admin-app .order pre {
  background: #fff7fa;
  border-radius: 12px;
  padding: 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.admin-app .order label {
  font-weight: 600;
  margin-top: 16px;
}

.admin-app .order select,
.admin-app .order input {
  margin-top: 6px;
}

.admin-app .order button,
.admin-app #refresh {
  width: 100%;
  min-height: 54px;
  border-radius: 12px;
  font-weight: 600;
}

.admin-app .order button {
  margin-top: 16px;
}

@media (max-width: 600px) {
  .admin-app main {
    padding: 12px;
  }

  .admin-app header h1 {
    font-size: 25px;
  }

  .admin-app .panel,
  .admin-app .order {
    padding: 16px;
  }

  .admin-app #login button {
    width: 100%;
    margin-top: 10px;
  }
}
.admin-app .quick-actions-title {
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 15px;
    font-weight: 700;
}

.admin-app .quick-order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-app .quick-order-actions .quick-state-button {
    margin: 0;
    padding: 12px 8px;
    min-height: 54px;
    background: #fce3ee;
    color: #8f0044;
    border: 1px solid #ecc4d7;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
}

.admin-app .quick-order-actions .quick-state-button:active {
    background: #d90068;
    color: white;
}

/* =========================================
   DASHBOARD DE ADMINISTRACIÓN
   ========================================= */

.admin-app {
    background: #fff2f7;
    color: #29262b;
}

/* Encabezado */

.admin-app .admin-header {
    background: #ffffff;
    color: #29262b;
    border-bottom: 1px solid #d9d9de;
    padding: 24px;
}

.admin-app .admin-brand {
    max-width: 1360px;
    margin: 0 auto;
}

.admin-app .admin-brand-label {
    color: #d90068;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.admin-app .admin-header h1 {
    margin: 8px 0;
    font-family: inherit;
    font-size: 30px;
    font-weight: 750;
}

.admin-app .admin-header p {
    margin: 0;
    color: #6b6470;
    font-size: 14px;
}

/* Contenedor principal */

.admin-app .admin-container {
    width: 100%;
    max-width: 1408px;
    margin: 0 auto;
    padding: 24px;
    min-width: 0;
}

/* Inicio de sesión */

.admin-app .login-panel {
    max-width: 440px;
    margin: 40px auto;
}

.admin-app .login-panel button {
    width: 100%;
    margin-top: 18px;
}

/* Ocultar el inicio de sesión cuando se abre el panel */

.admin-app:has(#work:not([hidden])) .login-panel {
    display: none;
}

/* Mensajes del sistema */

.admin-app .admin-message {
    margin: 0;
    color: #a90050;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.admin-app .admin-message:not(:empty) {
    background: #ffffff;
    border: 1px solid #d9d9de;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

/* Navegación */

.admin-app .admin-navigation {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #d9d9de;
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 24px;
}

.admin-app .admin-nav-button {
    background: transparent;
    color: #6b6470;
    border-radius: 12px;
    min-height: 50px;
    padding: 12px 24px;
    font-weight: 650;
}

.admin-app .admin-nav-button.is-active {
    background: #d90068;
    color: #ffffff;
}

.admin-app .admin-nav-button:hover {
    background: #fff0f6;
    color: #a90050;
}

.admin-app .admin-nav-button.is-active:hover {
    background: #b30056;
    color: #ffffff;
}

.admin-app .admin-logout-button {
    margin-left: auto;
    background: #f0eef2;
    color: #605867;
    border-radius: 12px;
    padding: 12px 20px;
}

/* Título de cada sección */

.admin-app .admin-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 22px;
}

.admin-app .admin-section-heading h2 {
    margin: 0 0 8px;
    font-family: inherit;
    font-size: 27px;
    font-weight: 750;
}

.admin-app .admin-section-heading p {
    margin: 0;
}

.admin-app .orders-refresh-controls {
    width: 260px;
    max-width: 100%;
}

.admin-app .orders-refresh-controls #refresh {
    width: 100%;
    border-radius: 12px;
}

/* Tarjetas del resumen */

.admin-app .admin-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.admin-app .admin-stat-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #d9d9de;
    border-radius: 18px;
    padding: 20px;
    min-width: 0;
}

.admin-app .admin-stat-card span {
    color: #6b6470;
    font-size: 14px;
    font-weight: 600;
}

.admin-app .admin-stat-card strong {
    font-size: 36px;
    line-height: 1;
    font-weight: 750;
}

.admin-app #statTotal {
    color: #29262b;
}

.admin-app #statPending {
    color: #d90068;
}

.admin-app #statPreparing {
    color: #94620d;
}

.admin-app #statReady {
    color: #23734a;
}

/* Lista de pedidos */

.admin-app .admin-orders-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.admin-app .admin-orders-list > p {
    grid-column: 1 / -1;
}

.admin-app .admin-orders-list .order {
    margin: 0;
    min-width: 0;
}

/* Configuración */

.admin-app .admin-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
}

.admin-app .admin-settings-grid > .panel {
    margin: 0;
    min-width: 0;
}

.admin-app .admin-settings-grid h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.admin-app .admin-settings-grid button {
    width: 100%;
    margin-top: 16px;
    border-radius: 12px;
}

.admin-app .admin-settings-grid textarea {
    min-height: 110px;
}

.admin-app #soundSettings button {
    width: 100%;
    margin-top: 12px;
}

.admin-app #availability {
    max-height: 440px;
    overflow-y: auto;
    padding-right: 8px;
}

.admin-app #availability label {
    padding: 10px 0;
    border-bottom: 1px solid #ece8ee;
}

/* Editor del catálogo */

.admin-app .admin-catalog-details {
    margin-top: 18px;
}

.admin-app .admin-catalog-details summary {
    cursor: pointer;
    color: #b30056;
    font-weight: 650;
    padding: 12px 0;
}

.admin-app #configJson {
    width: 100%;
    min-height: 360px;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Accesibilidad del teclado */

.admin-app button:focus-visible,
.admin-app input:focus-visible,
.admin-app select:focus-visible,
.admin-app textarea:focus-visible,
.admin-app summary:focus-visible {
    outline: 3px solid #d90068;
    outline-offset: 3px;
}

/* Tablet */

@media (max-width: 1000px) {
    .admin-app .admin-orders-list,
    .admin-app .admin-settings-grid {
        grid-template-columns: 1fr;
    }
}

/* Teléfono */

@media (max-width: 600px) {
    .admin-app .admin-header {
        padding: 20px 16px;
    }

    .admin-app .admin-header h1 {
        font-size: 26px;
    }

    .admin-app .admin-container {
        padding: 14px;
    }

    .admin-app .admin-navigation {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        padding: 8px;
        border-radius: 16px;
    }

    .admin-app .admin-nav-button {
        padding: 12px 8px;
        font-size: 15px;
    }

    .admin-app .admin-logout-button {
        grid-column: 1 / -1;
        width: 100%;
        margin-left: 0;
        min-height: 42px;
        padding: 8px;
        font-size: 14px;
    }

    .admin-app .admin-section-heading {
        align-items: stretch;
    }

    .admin-app .admin-section-heading h2 {
        font-size: 25px;
    }

    .admin-app .orders-refresh-controls {
        width: 100%;
    }

    .admin-app .admin-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .admin-app .admin-stat-card {
        padding: 16px;
        border-radius: 15px;
    }

    .admin-app .admin-stat-card span {
        font-size: 12px;
    }

    .admin-app .admin-stat-card strong {
        font-size: 30px;
    }

    .admin-app .login-panel {
        margin-top: 24px;
    }
}

/* Filtros de pedidos */

.admin-app .order-filters {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 14px;
    margin-bottom: 16px;
}

.admin-app .order-filter {
    flex-shrink: 0;
    min-height: 46px;
    padding: 10px 18px;
    background: #ffffff;
    color: #6b6470;
    border: 1px solid #d9d9de;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 650;
}

.admin-app .order-filter.is-active {
    background: #d90068;
    color: #ffffff;
    border-color: #d90068;
}

.admin-app .orders-filter-empty {
    padding: 32px 20px;
    margin: 0;
    text-align: center;
    background: #ffffff;
    border: 1px dashed #c9c3cf;
    border-radius: 18px;
    color: #6b6470;
}

/* Enviar un pedido al registro */

.admin-app .archive-order-area {
    border-top: 1px solid #d9d9de;
    padding-top: 16px;
    margin-top: 20px;
}

.admin-app .archive-order-button {
    width: 100%;
    background: #23734a;
    color: #ffffff;
    min-height: 52px;
    border-radius: 12px;
}

.admin-app .archive-order-message {
    margin-bottom: 0;
    font-size: 14px;
    color: #a90050;
}

/* Registro diario */

.admin-app .records-date-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-app .records-date-controls input {
    flex: 1;
    min-width: 0;
}

.admin-app .records-date-controls button {
    flex-shrink: 0;
}

.admin-app #recordsView .admin-stat-card strong {
    font-size: clamp(20px, 3vw, 30px);
    overflow-wrap: anywhere;
}

.admin-app .records-payment-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
}

.admin-app .record-card {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.admin-app .record-card pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    background: #fff7fa;
    border-radius: 12px;
    padding: 14px;
}

.admin-app .record-total {
    font-size: 22px;
    font-weight: 750;
}

.admin-app .record-payment-status {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 650;
}

.admin-app .record-payment-status.is-paid {
    background: #e6f3eb;
    color: #23734a;
}

.admin-app .record-payment-status.is-pending {
    background: #fff1d8;
    color: #94620d;
}

.admin-app .record-payment-button {
    width: 100%;
    margin-top: 14px;
}

@media (max-width: 600px) {
    .admin-app .records-date-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-app .records-payment-summary {
        flex-direction: column;
        gap: 0;
    }
}

/* =========================================
   NAVEGACIÓN COMPACTA DEL ADMIN
   ========================================= */

.admin-app .admin-navigation {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    border-radius: 16px;
}

.admin-app .admin-navigation > button {
    flex: 0 0 auto;
    width: auto;
    min-height: 46px;
    margin: 0;
    padding: 10px 18px;
    white-space: nowrap;
}

.admin-app .admin-navigation > .admin-logout-button {
    grid-column: auto;
    width: auto;
    margin-left: auto;
}

/* =========================================
   PANTALLA DE COCINA
   ========================================= */

.admin-app .kitchen-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.admin-app .kitchen-column {
    min-width: 0;
    min-height: 230px;
    background: #ffffff;
    border: 1px solid #d9d9de;
    border-radius: 18px;
    overflow: hidden;
}

.admin-app .kitchen-column-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    background: #f9e7ef;
    border-bottom: 1px solid #d9d9de;
}

.admin-app .kitchen-column-heading h3 {
    margin: 0;
    font-size: 18px;
}

.admin-app .kitchen-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 10px;
    background: #ffffff;
    color: #605867;
    font-weight: 750;
}

.admin-app .kitchen-column:nth-child(2) .kitchen-column-heading {
    background: #fff0d8;
    color: #885b13;
}

.admin-app .kitchen-column:nth-child(3) .kitchen-column-heading {
    background: #e4f2e9;
    color: #23734a;
}

.admin-app .kitchen-order-list {
    display: grid;
    gap: 14px;
    padding: 14px;
}

.admin-app .kitchen-order-list:empty::before {
    content: "Sin pedidos en esta etapa";
    display: block;
    padding: 26px 12px;
    text-align: center;
    color: #77707c;
    font-size: 14px;
}

/* Tarjetas que conectaremos con los pedidos */

.admin-app .kitchen-card {
    min-width: 0;
    padding: 16px;
    background: #fffbfd;
    border: 1px solid #d9d9de;
    border-radius: 14px;
    overflow-wrap: anywhere;
}

.admin-app .kitchen-card h4 {
    margin: 0 0 8px;
    font-size: 18px;
}

.admin-app .kitchen-card p {
    line-height: 1.5;
}

.admin-app .kitchen-card ul {
    padding-left: 20px;
    margin: 14px 0;
}

.admin-app .kitchen-card li {
    margin-bottom: 12px;
    line-height: 1.5;
}

.admin-app .kitchen-card button {
    width: 100%;
    min-height: 52px;
    margin-top: 12px;
    border-radius: 12px;
    font-weight: 650;
}

.admin-app .kitchen-notes {
    padding: 12px;
    background: #fff0d8;
    border-radius: 10px;
    color: #78521b;
    white-space: pre-wrap;
}

.admin-app #refreshKitchen {
    min-height: 48px;
    border-radius: 12px;
}

/* Teléfono y tablet pequeña */

@media (max-width: 800px) {
    .admin-app .kitchen-board {
        grid-template-columns: 1fr;
    }

    .admin-app .kitchen-column {
        min-height: 160px;
    }

    .admin-app #kitchenView .admin-section-heading {
        display: block;
    }

    .admin-app #refreshKitchen {
        width: 100%;
        margin-top: 16px;
    }
}

/* ========================================
   ESTADO DE CONEXIÓN
   ======================================== */

.admin-app .admin-connection {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;

    margin-bottom: 18px;
    padding: 14px 18px;

    border: 1px solid #e5dfd4;
    border-radius: 14px;

    background: #fffaf0;
    color: #795915;
}

.admin-app .admin-connection strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-size: 14px;
}

.admin-app .admin-connection strong::before {
    content: "";

    width: 9px;
    height: 9px;
    flex-shrink: 0;

    border-radius: 50%;
    background: currentColor;
}

.admin-app .admin-connection span {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.admin-app .admin-connection[data-state="online"] {
    background: #edf7ef;
    border-color: #c9e5d0;
    color: #236b3b;
}

.admin-app .admin-connection[data-state="waiting"] {
    background: #fff7e5;
    border-color: #eedba7;
    color: #805d16;
}

.admin-app .admin-connection[data-state="offline"] {
    background: #fff0ed;
    border-color: #edc1b9;
    color: #a12f25;
}

/* ========================================
   BUSCADOR
   ======================================== */

.admin-app .admin-search {
    display: grid;
    gap: 10px;

    margin: 20px 0;
    padding: 18px;

    background: #ffffff;
    border: 1px solid #d9d9de;
    border-radius: 16px;
}

.admin-app .admin-search label {
    margin: 0;
    font-weight: 700;
}

.admin-app .admin-search input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 12px 14px;

    border: 1px solid #c9c3cf;
    border-radius: 10px;

    background: #fffbfd;
    color: #29262b;

    font: inherit;
    font-size: 16px;
}

.admin-app .admin-search input:focus {
    border-color: #d90068;
    outline: 2px solid #d9006826;
    outline-offset: 2px;
}

.admin-app .admin-search p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   TIEMPO DE ESPERA
   ======================================== */

.admin-app .order-wait-time {
    display: inline-flex;
    align-items: center;

    max-width: 100%;
    margin: 4px 0 12px;
    padding: 8px 12px;

    border: 1px solid #d8e6dc;
    border-radius: 10px;

    background: #edf5ef;
    color: #315c3c;

    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

.admin-app .order-wait-time[data-level="warning"] {
    background: #fff2d4;
    border-color: #ebd293;
    color: #80530c;
}

.admin-app .order-wait-time[data-level="late"] {
    background: #fde8e5;
    border-color: #e8b4ad;
    color: #a02922;
}

/* ========================================
   TELÉFONO
   ======================================== */

@media (max-width: 600px) {
    .admin-app .admin-connection {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

    .admin-app .admin-connection span {
        margin-left: 18px;
    }

    .admin-app .admin-search {
        padding: 14px;
    }

    .admin-app .order-wait-time {
        font-size: 13px;
    }
}

/* ========================================
   MOSTRADOR Y AGOTADOS
   ======================================== */

.admin-app .counter-form fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.admin-app .counter-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 16px 0;
}

.admin-app .counter-grid label {
    min-width: 0;
}

.admin-app .counter-grid input,
.admin-app .counter-grid select {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
}

.admin-app .counter-grid input[type="checkbox"] {
    width: auto;
    min-height: auto;
}

.admin-app .counter-line {
    margin: 12px 0;
    padding: 16px;

    border: 1px solid #d9d9de;
    border-radius: 12px;

    background: #fffbfd;
    overflow-wrap: anywhere;
}

.admin-app .counter-total {
    font-size: 22px;
    font-weight: 750;
}

.admin-app .stock-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.admin-app .stock-option {
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 12px;

    background: #eaf4ed;
    color: #28633b;

    border: 1px solid #c8dfce;
    border-radius: 12px;

    white-space: normal;
}

.admin-app .stock-option[data-out="true"] {
    background: #fbe8e5;
    color: #9c2d24;
    border-color: #e9bdb5;
}

.admin-app #saleMessage,
.admin-app #stockMessage {
    white-space: pre-wrap;
}

@media (max-width: 650px) {
    .admin-app .counter-grid,
    .admin-app .stock-grid {
        grid-template-columns: 1fr;
    }
}

/* Menú organizado por categorías */

.menu-category {
    margin: 22px 0;
    padding: 16px;

    background: #fffbfd;
    border: 1px solid #d9d9de;
    border-radius: 14px;
}

.menu-category > h3 {
    margin: 0 0 14px;

    color: #d90068;
    font-size: 23px;
    font-weight: 750;
}

.menu-category > .product {
    padding: 14px 0;
}

.menu-category > .product > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    font-weight: 650;
}

.menu-category .price {
    float: none;
    flex-shrink: 0;

    font-weight: 750;
}

.menu-category > .muted {
    margin-bottom: 0;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .menu-category {
        padding: 12px;
    }

    .menu-category > h3 {
        font-size: 21px;
    }
}

/* Panel de cliente de Cocina Juanita */

body.cliente-v4 {
  padding-bottom: 110px;
}

.cliente-v4 [hidden] {
  display: none !important;
}

.cliente-v4 .cliente-contacto,
.cliente-v4 .cliente-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cliente-v4 .cliente-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #d90068;
  color: #fff;
  text-decoration: none;
  font-weight: 650;
}

.cliente-v4 header .cliente-link {
  background: #fff2f7;
  color: #a90050;
}

.cliente-v4 .cliente-categorias {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  background: #fff;
  border-bottom: 1px solid #d9d9de;
  margin-bottom: 18px;
}

.cliente-v4 .cliente-categorias a {
  flex: 0 0 auto;
  background: #f9e7ef;
  color: #50253b;
}

.cliente-v4 .menu-category,
.cliente-v4 #pedido-cliente,
.cliente-v4 #tracking {
  scroll-margin-top: 90px;
}

.cliente-v4 .menu-category {
  margin-bottom: 28px;
}

.cliente-v4 .menu-category h3 {
  font-size: 23px;
  color: #a90050;
}

.cliente-v4 .cliente-horario {
  padding: 14px;
  border-radius: 12px;
  background: #f9e7ef;
  font-weight: 600;
}

.cliente-v4 .cliente-agotado {
  display: inline-block;
  padding: 4px 8px;
  margin: 6px;
  border-radius: 7px;
  background: #fce5e2;
  color: #8f211c;
  font-size: 13px;
}

.cliente-v4 .cliente-carrito-fijo {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  padding: 14px max(
    16px,
    calc((100vw - 1180px) / 2)
  );

  padding-bottom: max(
    14px,
    env(safe-area-inset-bottom)
  );

  background: #fff;
  border-top: 1px solid #d9d9de;
  box-shadow: 0 -5px 24px #29262b12;
}

.cliente-v4 .cliente-carrito-fijo strong {
  font-size: 15px;
}

.cliente-v4 .cliente-carrito-fijo a {
  flex-shrink: 0;
}

.cliente-v4 .toast {
  bottom: 105px;
  z-index: 40;
}

.cliente-v4 .cliente-resumen {
  width: min(620px, 94vw);
  max-height: 85dvh;
  overflow-y: auto;
  padding: 24px;
  color: #29262b;
  border: 1px solid #d9d9de;
  border-radius: 20px;
}

.cliente-v4 .cliente-resumen::backdrop {
  background: #231622aa;
}

.cliente-v4 .cliente-resumen-linea {
  padding: 12px 0;
  border-bottom: 1px solid #d9d9de;
}

.cliente-v4 .cliente-resumen p {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.cliente-v4 .cliente-acciones {
  position: sticky;
  bottom: -24px;
  background: white;
  padding: 16px 0;
}

.cliente-v4 .cliente-acciones button {
  flex: 1;
  min-height: 48px;
}

.cliente-v4 .cliente-etapas {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 8px;
}

.cliente-v4 .cliente-etapas li {
  padding: 12px;
  border-left: 4px solid #d9d9de;
  background: #fff7fa;
  border-radius: 6px;
}

.cliente-v4 .cliente-etapas .completo {
  border-color: #347044;
  background: #eaf4ed;
}

.cliente-v4 .cliente-etapas [aria-current="step"] {
  font-weight: 750;
  outline: 2px solid #347044;
}

@media (max-width: 760px) {
  .cliente-v4 .layout {
    display: block;
  }

  .cliente-v4 main {
    padding: 12px;
  }

  .cliente-v4 .panel {
    padding: 16px;
  }

  .cliente-v4 input,
  .cliente-v4 select,
  .cliente-v4 textarea {
    font-size: 16px;
  }
}

/* Mesas del administrador */

#tablesView .tables-grid {
  display: grid;

  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 310px), 1fr)
  );

  gap: 16px;
}

#tablesView .tables-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 12px;
}

#tablesView .table-card {
  min-width: 0;
}

#tablesView .table-card h3 {
  font-size: 23px;
}

#tablesView .table-card details {
  margin: 18px 0;
}

#tablesView .table-card summary {
  cursor: pointer;
  padding: 12px 0;
}

#tablesView .table-batch {
  border-top: 1px solid #d9d9de;
  padding: 12px 0;
}

#tablesView .table-batch p {
  overflow-wrap: anywhere;
}

#tablesView .table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

#tablesView .table-actions button {
  flex: 1;
  min-height: 46px;
}

#tablesView .table-dialog {
  width: min(540px, 94vw);
  max-height: 85dvh;
  overflow-y: auto;
  padding: 24px;
  border: 1px solid #d9d9de;
  border-radius: 18px;
  color: #29262b;
}

#tablesView .table-dialog::backdrop {
  background: #231622aa;
}

#tablesView [hidden] {
  display: none !important;
}

/* Logo del encabezado */
.juanita-logo {
    display: block;
    width: 128px;
    height: 128px;
    object-fit: contain;
    margin: 0 auto 16px;
    padding: 6px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
}

@media (max-width: 600px) {
    .juanita-logo {
        width: 104px;
        height: 104px;
        border-radius: 20px;
    }
}
/* Controles del tema Cocina Juanita */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
    accent-color: #d90068;
}
:where(button, a, input, select, textarea):focus-visible {
    outline: 3px solid #a90050;
    outline-offset: 3px;
}
::selection {
    background: #f7c6dd;
    color: #50253b;
}

/* Cocina Juanita · Diseño adaptable para cliente y administración */
:root {
    --red: #ce0062;
    --cream: #faf8fa;
    --ink: #29232d;
    --line: #e8e2e8;
    --brand-soft: #fff0f6;
    --muted: #746b77;
    --card-shadow: 0 8px 28px rgb(49 25 41 / 4%);
}
[hidden] { display: none !important; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.5; }
h1, h2, h3 { font-family: inherit; letter-spacing: -.035em; }
h2 { font-size: 26px; font-weight: 750; }
button, input, select, textarea { font: inherit; }
button { min-height: 46px; padding: 11px 17px; border-radius: 13px; font-weight: 650; transition: background-color .15s, box-shadow .15s; }
button.secondary { background: #f3eff3; color: #504451; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    width: 100%; min-width: 0; min-height: 48px; border-radius: 12px;
    border: 1px solid #dcd4de; background: #fff; padding: 12px 14px; color: var(--ink);
}
textarea { min-height: 100px; }
label { font-size: 14px; font-weight: 550; color: #514753; }
label.check { font-weight: 450; }
input::placeholder, textarea::placeholder { color: #8b818e; opacity: 1; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid #a90050; outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--red); }
button:disabled { opacity: .55; cursor: not-allowed; }
.panel { border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--card-shadow); }
.muted { color: var(--muted); font-size: 14px; line-height: 1.6; }
.section-eyebrow, .brand-eyebrow {
    display: block; color: #a90050; font-size: 11px; font-weight: 750;
    letter-spacing: .14em; margin-bottom: 8px;
}
.notice { border-radius: 13px; padding: 14px 16px; line-height: 1.6; white-space: pre-line; }
.toast { border-radius: 14px; box-shadow: 0 12px 35px rgb(24 12 21 / 20%); }
footer { color: var(--muted); font-size: 12px; text-align: center; padding: 28px 18px; }

/* Cliente: marca, menú, pedido y revisión */
.premium-client .client-header {
    background: #fff; color: var(--ink); border-bottom: 1px solid var(--line);
    padding: 32px max(24px, calc((100% - 1220px) / 2));
    display: flex; align-items: center; justify-content: space-between; gap: 28px;
}
.client-brand { display: flex; align-items: center; gap: 24px; min-width: 0; }
.premium-client .juanita-logo {
    width: 112px; height: 112px; flex: 0 0 auto; margin: 0; padding: 4px;
    border-radius: 24px; border: 1px solid #f0e8ee; box-shadow: none;
}
.premium-client header h1 { font-family: inherit; font-size: clamp(28px, 3.8vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -.055em; }
.premium-client header .brand-eyebrow { font-size: 10px; margin: 0 0 9px; }
.premium-client header .brand-description { color: #625467; font-size: 15px; }
.premium-client header .brand-address { color: var(--muted); font-size: 12px; }
.premium-client header .cliente-contacto { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; max-width: 285px; }
.premium-client header .cliente-link { background: #fff0f6; color: #a90050; border: 1px solid #f5d6e4; font-size: 13px; padding: 11px 14px; }
.premium-client main { max-width: 1268px; padding: 26px 24px 110px; }
.premium-client main > .muted { margin: 12px 0 24px; font-size: 12px; }
.premium-client .layout { grid-template-columns: minmax(0, 1.5fr) minmax(310px, 1fr); gap: 24px; align-items: start; }
.client-menu-column, .client-order-column { min-width: 0; }
.premium-client .client-menu-panel { padding: 28px; }
.premium-client #service { background: #fcf9fc; font-weight: 650; margin-bottom: 4px; }
.premium-client .cliente-categorias { top: 0; padding: 12px 0; gap: 8px; margin: 6px 0 20px; scrollbar-width: thin; }
.premium-client .cliente-categorias a { border: 1px solid #eadde5; border-radius: 999px; padding: 9px 15px; font-size: 13px; background: #fff6fa; color: #913052; }
.premium-client .menu-category { margin: 28px 0; }
.premium-client .menu-category h3 { display: flex; align-items: center; gap: 12px; color: #352836; font-size: 21px; margin-bottom: 14px; }
.premium-client .menu-category h3::after { content: ""; height: 1px; flex: 1; background: #eee4eb; }
.premium-client details.product { background: #fff; border: 1px solid #e9e0e7; border-radius: 16px; margin: 10px 0; padding: 0; overflow: hidden; }
.premium-client details.product > summary {
    padding: 17px 18px; min-height: 62px; font-weight: 650; font-size: 15px;
    display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: pointer;
}
.premium-client details.product > summary::-webkit-details-marker { display: none; }
.premium-client details.product > summary::after { content: "+"; color: #a90050; font-size: 22px; font-weight: 400; }
.premium-client details.product[open] > summary::after { content: "−"; }
.premium-client details.product > summary .price { color: #a90050; font-weight: 750; margin-left: auto; white-space: nowrap; font-size: 14px; }
.premium-client details.product[open] { padding: 0 18px 18px; border-color: #e9a6c5; box-shadow: 0 3px 14px rgb(206 0 98 / 4%); }
.premium-client details.product[open] > summary { margin: 0 -18px 14px; background: #fff7fb; border-bottom: 1px solid #f3deea; }
.premium-client details.product > button { width: 100%; margin-top: 10px; }
.premium-client .client-cart-panel { border-top: 3px solid var(--red); }
.premium-client .total { font-size: 28px; letter-spacing: -.035em; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.premium-client #cart:empty::before { content: "Tu próxima comida empieza aquí. Elige algo del menú para agregarlo."; display: block; padding: 22px 16px; border: 1px dashed #dfcfda; border-radius: 14px; background: #fdfafd; font-size: 14px; color: var(--muted); margin-top: 16px; }
.premium-client #confirmOrder { width: 100%; margin-top: 12px; }
.premium-client .cliente-carrito-fijo { background: #fff; border-top: 1px solid #eadde5; box-shadow: 0 -8px 30px rgb(54 15 37 / 6%); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
.premium-client dialog { border: 1px solid #eadde5; border-radius: 24px; padding: 24px; box-shadow: 0 25px 90px rgb(37 16 29 / 22%); max-height: 88dvh; overflow: auto; }
.premium-client dialog::backdrop { background: rgb(34 18 29 / 48%); }

/* Administración: navegación, trabajo diario y configuración */
.admin-app { background: #f8f6f8; }
.admin-app .admin-header { padding: 20px 28px; background: #fff; }
.admin-app .admin-brand { display: flex; gap: 16px; align-items: center; max-width: 1500px; }
.admin-logo { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: 17px; }
.admin-app .admin-brand-label { font-size: 10px; letter-spacing: .17em; }
.admin-app .admin-header h1 { font-size: 25px; margin: 3px 0; }
.admin-app .admin-header p { font-size: 12px; }
.admin-app .admin-container { max-width: 1556px; padding: 24px 28px; }
.admin-app .login-panel { max-width: 440px; padding: 34px; margin: 40px auto; border-radius: 26px; }
.admin-app .login-panel h2 { font-size: 32px; margin-bottom: 12px; }
.admin-app .login-panel button { margin-top: 14px; }
.admin-app .admin-connection { margin-bottom: 18px; padding: 12px 17px; border-radius: 14px; gap: 6px 14px; font-size: 13px; }
.admin-app .admin-connection span { font-size: 12px; }
.admin-app .admin-navigation { gap: 6px; padding: 7px; border-radius: 16px; box-shadow: var(--card-shadow); }
.admin-app .admin-nav-button { min-height: 46px; font-size: 14px; padding: 12px 16px; border-radius: 11px; }
.admin-app .admin-nav-button.is-active { background: #ce0062; box-shadow: 0 4px 12px rgb(206 0 98 / 16%); }
.admin-app .admin-logout-button { font-size: 13px; min-height: 44px; }
.admin-app .admin-section-heading h2, .admin-app .admin-view > h2 { font-size: 29px; letter-spacing: -.045em; }
.admin-app .admin-section-heading p { font-size: 13px; }
.admin-app .admin-stats { gap: 12px; }
.admin-app .admin-stat-card { border-radius: 17px; padding: 20px; gap: 8px; box-shadow: var(--card-shadow); }
.admin-app .admin-stat-card span { font-size: 12px; font-weight: 550; }
.admin-app .admin-stat-card strong { font-size: 32px; font-variant-numeric: tabular-nums; }
.admin-app .order-filters { gap: 8px; margin-bottom: 12px; padding-bottom: 10px; scrollbar-width: thin; }
.admin-app .order-filter { font-size: 13px; min-height: 42px; padding: 9px 16px; }
.admin-app .order { border-radius: 20px; border-left-width: 4px; padding: 22px; box-shadow: var(--card-shadow); }
.admin-app .order h3 { font-size: 19px; }
.admin-app .order small { line-height: 1.6; }
.admin-app .quick-state-button { border-radius: 11px; font-size: 13px; }
.admin-app .admin-settings-grid { gap: 20px; align-items: start; }
.admin-app .admin-settings-grid .panel { margin: 0; }
.admin-app .admin-settings-grid .panel > h3 { font-size: 20px; margin-bottom: 10px; }
.admin-app .admin-search { border-radius: 16px; padding: 16px; }
.admin-app .kitchen-board { gap: 16px; }
.admin-app .kitchen-column { background: #f1edf2; border: 1px solid #e6dee8; border-radius: 18px; padding: 12px; }
.admin-app .kitchen-column-heading { padding: 8px 4px 14px; background: transparent; }
.admin-app .kitchen-card { border-radius: 15px; padding: 17px; box-shadow: var(--card-shadow); }
.admin-app .counter-line { border-radius: 13px; }
.admin-app .table-card { border-top: 3px solid #ce0062; }
.admin-app .table-batch { padding: 14px; border: 1px solid #ebe2e9; border-radius: 12px; margin-top: 12px; background: #fcfafc; }
.admin-app .table-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-app .table-actions button { flex: 1 1 140px; }
.admin-app .tables-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 18px; }
.admin-app .table-dialog { border: 1px solid var(--line); border-radius: 24px; max-height: 88dvh; overflow: auto; padding: 24px; box-shadow: 0 25px 90px rgb(37 16 29 / 22%); }
.admin-app .table-dialog::backdrop { background: rgb(34 18 29 / 48%); }
.admin-app .stock-option { min-height: 44px; border-radius: 11px; }
.native-admin .admin-header { display: none; }
@media (hover: hover) {
    button:not(:disabled):hover { box-shadow: 0 4px 12px rgb(49 25 41 / 10%); }
    .premium-client details.product > summary:hover { background: #fff8fb; }
}
@media (min-width: 1100px) {
    .admin-app #work { display: grid; grid-template-columns: 196px minmax(0, 1fr); column-gap: 26px; align-items: start; }
    .admin-app .admin-connection { grid-column: 1 / -1; }
    .admin-app .admin-navigation { grid-column: 1; grid-row: 2; position: sticky; top: 20px; flex-direction: column; align-items: stretch; padding: 10px; }
    .admin-app .admin-nav-button { text-align: left; width: 100%; }
    .admin-app .admin-logout-button { margin: 14px 0 0; width: 100%; border-top: 1px solid var(--line); }
    .admin-app .admin-view { grid-column: 2; grid-row: 2; min-width: 0; }
}
@media (max-width: 1099px) {
    .admin-app .admin-navigation { display: flex; flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 0; z-index: 12; scrollbar-width: thin; }
    .admin-app .admin-nav-button, .admin-app .admin-logout-button { flex: 0 0 auto; width: auto; white-space: nowrap; margin: 0; }
}
@media (max-width: 800px) {
    .premium-client .layout { grid-template-columns: minmax(0, 1fr); }
    .premium-client .client-header { flex-wrap: wrap; gap: 18px; padding: 24px; }
    .premium-client header .cliente-contacto { max-width: none; }
    .premium-client main { padding: 20px 16px 110px; }
    .admin-app .admin-container { padding: 18px 16px; }
    .admin-app .kitchen-board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 540px) {
    .panel, .premium-client .client-menu-panel { padding: 20px; border-radius: 19px; }
    .client-brand { gap: 15px; }
    .premium-client .juanita-logo { width: 80px; height: 80px; border-radius: 18px; }
    .premium-client header h1 { font-size: 29px; }
    .premium-client header .brand-eyebrow { font-size: 8px; letter-spacing: .09em; }
    .premium-client header .brand-description { font-size: 12px; }
    .premium-client header .brand-address { font-size: 11px; }
    .premium-client .client-header { padding: 22px 18px; }
    .premium-client header .cliente-contacto { width: 100%; }
    .premium-client header .cliente-link { flex: 1; padding: 10px; font-size: 12px; }
    .admin-app .admin-header { padding: 18px; }
    .admin-app .admin-container { padding: 14px 12px; }
    .admin-app .admin-navigation { margin-bottom: 20px; }
    .admin-app .admin-nav-button { font-size: 13px; min-height: 44px; padding: 10px 14px; }
    .admin-app .admin-section-heading h2 { font-size: 27px; }
    .admin-app .admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-app .admin-stat-card { padding: 16px; }
    .admin-app .admin-stat-card strong { font-size: 28px; }
    .admin-app .admin-section-heading { gap: 12px; }
    .admin-app .orders-refresh-controls { width: auto; }
    .admin-app .orders-refresh-controls #refresh { min-height: 42px; font-size: 12px; padding: 9px 12px; }
    .admin-app .order { padding: 18px; }
    .admin-app .admin-settings-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-app .login-panel { padding: 26px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* JUANITA · Firma visual, movimiento y acabado editorial */
:root {
  --red: #c9005c;
  --cream: #faf7f9;
  --ink: #302332;
  --line: #eee5eb;
  --muted: #796d79;
  --ease-juanita: cubic-bezier(.2,.7,.2,1);
}
body { background: var(--cream); }
button, .cliente-link, .signature-action, .cliente-categorias a {
  transition: background-color .2s, color .2s, box-shadow .2s, transform .2s var(--ease-juanita);
  -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled), .signature-action:active { transform: scale(.975); }
input:not([type="checkbox"]):not([type="radio"]), textarea, select {
  background: #fffdfe; border-color: #e9dfe6;
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus, select:focus { border-color: #c9005c; box-shadow: 0 0 0 4px #c9005c0a; }
.panel { border-color: #eee5eb; box-shadow: 0 4px 7px #36142d02, 0 16px 50px #36142d04; border-radius: 24px; }
.section-eyebrow { font-size: 10px; letter-spacing: .17em; }
h2, h3 { text-wrap: balance; }
.premium-client .client-header { padding-top: 18px; padding-bottom: 18px; }
.premium-client .juanita-logo { width: 72px; height: 72px; border: 0; border-radius: 18px; padding: 0; }
.premium-client .client-brand { gap: 16px; }
.premium-client header h1 { font-size: 25px; letter-spacing: -.04em; }
.premium-client header .brand-description { margin: 5px 0 0; font-size: 12px; }
.premium-client header .brand-address { margin-top: 3px; font-size: 11px; }
.premium-client header .brand-eyebrow { display: none; }
.premium-client header .cliente-link { border: 1px solid #eee0e8; background: #fff; border-radius: 999px; }
.premium-client header .cliente-link:first-child { color: #a7004c; background: #fff3f8; }
.premium-client main { padding-top: 24px; }
.juanita-signature {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 1.15fr 1fr;
  align-items: center; overflow: hidden; min-height: 310px; margin-bottom: 24px;
  padding: 32px 44px; color: #fff8fc; background: #301c30;
  background-image: radial-gradient(ellipse at 82% 30%, #742644 0, transparent 55%), linear-gradient(125deg, #251b2b, #451d38);
  border: 1px solid #ffffff14; border-radius: 28px; box-shadow: 0 16px 40px #32152c12;
}
.signature-copy { position: relative; z-index: 1; }
.signature-eyebrow { display: block; color: #dfafc3; font-size: 10px; font-weight: 650; letter-spacing: .19em; margin-bottom: 18px; }
.signature-copy h2 { font-size: clamp(36px, 4.5vw, 56px); font-weight: 650; line-height: 1.04; letter-spacing: -.055em; margin: 0 0 18px; }
.signature-copy h2 em { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.04em; color: #ffb4cf; }
.signature-copy p { max-width: 320px; margin: 0 0 24px; font-size: 13px; line-height: 1.65; color: #e4cbd9; }
.signature-action { display: inline-flex; align-items: center; gap: 24px; text-decoration: none; color: #392232; background: #fff6fa; border: 1px solid #fff6fa; border-radius: 999px; padding: 11px 20px; font-size: 13px; font-weight: 700; }
.signature-action span { font-size: 21px; line-height: 1; }
.signature-art { position: relative; min-width: 0; display: grid; place-items: center; color: #efb2c7; }
.juanita-skillet { position: relative; z-index: 1; width: 100%; max-width: 370px; height: auto; overflow: visible; }
.signature-orbit { position: absolute; width: 260px; height: 260px; border-radius: 50%; border: 1px solid #e5abc422; }
.orbit-two { width: 310px; height: 310px; border-style: dashed; border-color: #e5abc414; }
.signature-seal { position: absolute; bottom: -4px; font-size: 9px; letter-spacing: .2em; color: #d5a6be; }
.skillet-toss { transform-origin: 230px 195px; animation: juanita-pan 3.2s var(--ease-juanita) infinite; }
.skillet-food { transform-origin: 185px 180px; animation: juanita-food 3.2s var(--ease-juanita) infinite; }
.steam { animation: juanita-steam 2.8s ease-in-out infinite; }
.steam-two { animation-delay: -.9s; }
.steam-three { animation-delay: -1.7s; }
.skillet-shadow { transform-origin: 190px 258px; animation: juanita-shadow 3.2s ease-in-out infinite; }
.skillet-spark { animation: juanita-spark 3.2s ease-in-out infinite; }
@keyframes juanita-pan {
  0%, 25%, 74%, 100% { transform: translateY(0) rotate(0); }
  38% { transform: translateY(4px) rotate(5deg); }
  48% { transform: translateY(-9px) rotate(-9deg); }
  60% { transform: translateY(1px) rotate(2deg); }
}
@keyframes juanita-food {
  0%, 38%, 78%, 100% { transform: translate(0, 0) rotate(0); }
  51% { transform: translate(-5px, -48px) rotate(-12deg); }
  63% { transform: translate(-2px, -24px) rotate(5deg); }
}
@keyframes juanita-steam {
  0% { transform: translateY(7px); opacity: 0; }
  35% { opacity: .7; }
  100% { transform: translateY(-20px); opacity: 0; }
}
@keyframes juanita-shadow { 0%, 35%, 70%, 100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.88); opacity: .08; } }
@keyframes juanita-spark { 0%, 35%, 75%, 100% { opacity: .2; } 50% { opacity: .85; } }
@keyframes juanita-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes juanita-dot { 0%, 75%, 100% { opacity: .3; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.juanita-signature .signature-copy { animation: juanita-enter .6s var(--ease-juanita) both; }
.premium-client .cliente-categorias { background: #ffffffed; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #f2e9ef; }
.premium-client .cliente-categorias a { background: #fff; font-size: 12px; padding: 10px 16px; color: #655361; border-color: #e9dfe5; }
.premium-client .menu-category h3 { font-size: 22px; font-weight: 650; letter-spacing: -.04em; }
.premium-client details.product { border-color: #eee5eb; border-radius: 17px; box-shadow: 0 2px 4px #3b193002; }
.premium-client details.product > summary { min-height: 68px; font-size: 15px; }
.premium-client details.product > summary::after { display: grid; place-items: center; flex: 0 0 25px; width: 25px; height: 25px; background: #faf1f6; border-radius: 50%; font-size: 18px; }
.premium-client details.product[open] { border-color: #e2b3ca; }
.premium-client .client-cart-panel { border-top: 1px solid #eee5eb; background: linear-gradient(#fff7fb, #fff 110px); }
.premium-client .total { color: #a6004b; font-size: 32px; font-weight: 750; }
.premium-client .cliente-carrito-fijo { background: #fffffff2; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.premium-client .cliente-carrito-fijo a { border-radius: 999px; box-shadow: 0 5px 16px #c9005c20; }
.premium-client dialog[open] { animation: juanita-enter .24s var(--ease-juanita); }
.juanita-preparation { display: flex; align-items: center; gap: 14px; padding: 20px; margin: 12px 0 20px; border: 1px solid #f0dce7; border-radius: 20px; background: #fff5fa; }
.preparation-art { flex: 0 0 135px; color: #b54c7a; }
.preparation-copy { min-width: 0; }
.preparation-copy h3 { font-size: 18px; line-height: 1.2; margin-bottom: 8px; }
.preparation-copy p { font-size: 12px; color: #7d6173; margin: 0; line-height: 1.6; }
.preparation-copy .section-eyebrow { font-size: 8px; letter-spacing: .12em; }
.preparation-dots { display: flex; gap: 5px; margin-top: 13px; }
.preparation-dots i { width: 5px; height: 5px; border-radius: 50%; background: #c9005c; animation: juanita-dot 1.6s ease-in-out infinite; }
.preparation-dots i:nth-child(2) { animation-delay: .15s; }
.preparation-dots i:nth-child(3) { animation-delay: .3s; }
.premium-client .cliente-etapas li { border-radius: 10px; font-size: 11px; }
.premium-client .cliente-etapas [aria-current="step"] { box-shadow: 0 0 0 3px #c9005c0d; border-color: #c9005c; }
/* Administración: iconos, superficies claras y navegación estable. */
.admin-app { background: #f8f5f8; }
.admin-app .admin-header { border-bottom: 1px solid #eee5eb; }
.admin-app .admin-navigation { background: #fff; border-color: #eee5eb; box-shadow: 0 8px 28px #36142d05; }
.admin-app .admin-nav-button { display: flex; align-items: center; justify-content: flex-start; gap: 11px; font-weight: 600; color: #766375; }
.juanita-nav-icon { display: inline-flex; flex: 0 0 20px; width: 20px; height: 20px; }
.juanita-nav-icon svg { width: 100%; height: 100%; }
.admin-app .admin-nav-button.is-active { color: #fff; background: #b90056; box-shadow: 0 4px 12px #b9005624; }
.admin-app .admin-stat-card { position: relative; border: 1px solid #eee5eb; background: #fff; box-shadow: 0 5px 25px #36142d04; }
.admin-app .admin-stat-card::before { content: ""; display: block; width: 22px; height: 3px; background: #d88cae; border-radius: 4px; margin-bottom: 12px; }
.admin-app .admin-stat-card strong { color: #4a2b42; font-size: 34px; letter-spacing: -.05em; }
.admin-app .admin-section-heading h2 { font-weight: 700; }
.admin-app .admin-connection { border-radius: 12px; box-shadow: none; font-size: 12px; }
.admin-app .kitchen-column { background: #f1ecf1; border-color: #eae1e8; }
.admin-app .kitchen-card, .admin-app .order { background: #fff; box-shadow: 0 4px 16px #36142d05; }
.admin-app .login-panel { border-top: 3px solid #bb0056; }
.admin-app .table-card { border-top-width: 2px; }
.admin-app button.primary, .admin-app #login button { box-shadow: 0 4px 12px #c9005c14; }
@media (hover: hover) {
  .signature-action:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 8px 20px #160b2629; }
  .premium-client .cliente-categorias a:hover { color: #a6004b; border-color: #dca2bd; background: #fff5fa; }
  .admin-app .admin-nav-button:not(.is-active):hover { background: #fbf1f6; color: #a6004b; }
}
@media (min-width: 1100px) {
  .admin-app .admin-navigation { padding: 12px; gap: 7px; }
  .admin-app .admin-nav-button { padding: 14px 12px; }
}
@media (max-width: 800px) {
  .juanita-signature { min-height: 275px; padding: 28px; grid-template-columns: 1.15fr 1fr; }
  .signature-copy h2 { font-size: 38px; }
  .signature-orbit { width: 180px; height: 180px; }
  .orbit-two { width: 225px; height: 225px; }
  .signature-seal { font-size: 7px; }
}
@media (max-width: 540px) {
  .premium-client .client-header { padding: 16px; gap: 12px; }
  .premium-client .juanita-logo { width: 55px; height: 55px; }
  .premium-client header h1 { font-size: 23px; }
  .premium-client header .brand-address { font-size: 10px; }
  .premium-client header .cliente-contacto { gap: 8px; }
  .premium-client header .cliente-link { padding: 9px 12px; font-size: 11px; }
  .premium-client main { padding-top: 16px; }
  .juanita-signature { grid-template-columns: 1fr; min-height: 0; padding: 28px 24px 20px; border-radius: 23px; }
  .signature-eyebrow { font-size: 8px; margin-bottom: 16px; }
  .signature-copy h2 { font-size: 42px; }
  .signature-copy p { max-width: 230px; font-size: 12px; margin-bottom: 18px; }
  .signature-art { position: absolute; width: 170px; right: -25px; bottom: 7px; opacity: .95; pointer-events: none; }
  .signature-art .signature-orbit { width: 135px; height: 135px; }
  .signature-art .orbit-two { width: 165px; height: 165px; }
  .signature-seal { display: none; }
  .signature-action { position: relative; z-index: 2; font-size: 12px; padding: 11px 16px; gap: 14px; }
  .signature-copy { padding-bottom: 6px; }
  .juanita-preparation { padding: 14px; gap: 8px; }
  .preparation-art { flex-basis: 95px; }
  .preparation-copy h3 { font-size: 16px; }
  .preparation-copy p { font-size: 11px; }
  .admin-app .admin-nav-button { gap: 7px; padding: 11px 12px; font-size: 12px; }
  .juanita-nav-icon { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (max-width: 360px) {
  .signature-art { width: 135px; right: -24px; }
  .signature-copy h2 { font-size: 36px; }
}
.motion-offscreen *, .motion-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Mantener la geometría de navegación frente a las reglas heredadas. */
.admin-app .admin-navigation > [data-admin-view] {
  display: flex; align-items: center; justify-content: flex-start;
  gap: 11px; padding: 12px 14px;
}
@media (min-width: 1100px) {
  .admin-app .admin-navigation > [data-admin-view] { width: 100%; padding: 14px 12px; }
  .admin-app .admin-navigation > .admin-logout-button { width: 100%; margin: 14px 0 0; }
}
@media (max-width: 540px) {
  .admin-app .admin-navigation > [data-admin-view] { gap: 7px; padding: 11px 12px; }
  .signature-art { position: relative; width: 100%; height: 140px; right: auto; bottom: auto; margin-top: 6px; }
  .signature-art .juanita-skillet { width: 200px; }
  .signature-art .signature-orbit { width: 135px; height: 135px; }
  .signature-art .orbit-two { width: 165px; height: 165px; }
  .signature-copy p { max-width: 100%; }
}
.premium-client .cliente-etapas [aria-current="step"] { outline-color: #c9005c; }

/* Seguimiento reducido: una escena por estado real del pedido. */
.order-scene { display: block; width: 100%; height: auto; max-height: 160px; }
.juanita-preparation[data-state="entregado"] { background: #f2faf5; border-color: #d6eadc; }
.juanita-preparation[data-state="rechazado"] { background: #faf5f5; border-color: #eadcdc; color: #976064; }
.scene-receipt { transform-origin: 100px 85px; animation: receipt-arrives 3s ease-in-out infinite; }
.scene-print { stroke-dasharray: 40; animation: receipt-print 3s ease-in-out infinite; }
.scene-cloche { transform-origin: 100px 110px; animation: cloche-ready 3.6s ease-in-out infinite; }
.scene-twinkle { animation: scene-glow 2.8s ease-in-out infinite; }
.scene-bike { animation: delivery-ride 1.4s ease-in-out infinite; }
.scene-road { animation: delivery-road .9s linear infinite; }
.scene-check { stroke-dasharray: 80; animation: order-check 3.5s ease-in-out infinite; }
.scene-halo { transform-origin: 100px 80px; animation: order-halo 3.2s ease-in-out infinite; }
@keyframes receipt-arrives { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes receipt-print { 0%, 10% { stroke-dashoffset: 40; opacity: .4; } 45%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes cloche-ready { 0%, 25%, 90%, 100% { transform: translateY(0); } 48%, 65% { transform: translateY(-9px) rotate(-4deg); } }
@keyframes scene-glow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes delivery-ride { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-2px); } 60% { transform: translateY(1px); } }
@keyframes delivery-road { from { transform: translateX(10px); } to { transform: translateX(-10px); } }
@keyframes order-check { 0%, 8% { stroke-dashoffset: 80; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes order-halo { 0%, 100% { transform: scale(.94); opacity: .12; } 50% { transform: scale(1.05); opacity: .3; } }
.juanita-order-badge { display: inline-flex; gap: 8px; align-items: center; padding: 7px 11px; margin: 8px 0 12px; border-radius: 10px; background: #fff0f6; color: #a6004b; font-size: 12px; font-weight: 650; }
.juanita-order-badge svg { display: block; width: 25px; height: 25px; overflow: visible; }
.juanita-order-badge[data-state="entregado"], .juanita-order-badge[data-state="listo"] { color: #347352; background: #eff8f1; }
.juanita-order-badge[data-state="rechazado"] { color: #865b60; background: #f7eded; }
.badge-print { stroke-dasharray: 10; animation: receipt-print 3s ease-in-out infinite; }
.badge-pan { transform-origin: 12px 14px; animation: badge-skillet 3s ease-in-out infinite; }
.badge-steam { animation: scene-glow 2s ease-in-out infinite; }
.badge-cloche { animation: badge-cover 3s ease-in-out infinite; }
.badge-bike { animation: delivery-ride 1.4s ease-in-out infinite; }
.badge-check { stroke-dasharray: 20; animation: badge-done 3.5s ease-in-out infinite; }
@keyframes badge-skillet { 0%, 30%, 80%, 100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }
@keyframes badge-cover { 0%, 30%, 100% { transform: translateY(0); } 60% { transform: translateY(-2px); } }
@keyframes badge-done { 0%, 10% { stroke-dashoffset: 20; } 50%, 100% { stroke-dashoffset: 0; } }
.motion-paused *, .motion-offscreen * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Gestión: configuración accesible y motivos de cancelación. */
.management-switch { display:flex; gap:12px; align-items:center; position:relative; padding:16px 0; cursor:pointer; }
.management-switch input { position:absolute; width:1px; height:1px; opacity:0; }
.management-switch .switch-track { width:48px; height:28px; flex:0 0 48px; border-radius:999px; background:#c4bac3; transition:background .2s; }
.management-switch .switch-track::before { content:""; display:block; width:22px; height:22px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 2px 5px #0002; transition:transform .2s; }
.management-switch input:checked + .switch-track { background:#bb0056; }
.management-switch input:checked + .switch-track::before { transform:translateX(20px); }
.management-switch input:focus-visible + .switch-track { outline:3px solid #a90050; outline-offset:3px; }
.management-switch input:disabled + .switch-track { opacity:.5; }
#managementSettings hr { border:0; border-top:1px solid #eee5eb; margin:24px 0; }
#backupFile, .cancellation-detail { overflow-wrap:anywhere; }
.cancellation-detail { padding:14px; margin:12px 0; background:#fff3f3; color:#85484e; border:1px solid #efd8da; border-radius:13px; white-space:pre-wrap; }
.cancellation-detail p { margin:8px 0; }
.cancel-order-dialog { width:min(520px,94vw); max-height:85dvh; overflow:auto; border:1px solid #eadde5; border-radius:22px; padding:26px; color:#302332; }
.cancel-order-dialog::backdrop { background:#26142199; }
.cancel-order-dialog label { display:block; margin:16px 0; }
.cancel-dialog-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.cancel-dialog-actions button { flex:1 1 150px; }
@media (prefers-reduced-motion:reduce) { .management-switch .switch-track, .management-switch .switch-track::before { transition:none; } }

/* Cantidades del carrito y filtro por servicio */
.cart-quantity {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0;
}
.cart-quantity button {
  width: 44px;
  min-height: 44px;
  padding: 6px;
  font-size: 1.35rem;
  line-height: 1;
}
.cart-quantity span { min-width: 24px; text-align: center; font-weight: 700; }
.cart-quantity button:disabled { opacity: .4; cursor: not-allowed; }
.service-filter { margin: 0 0 16px; }
.service-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
}
.service-filter-options[hidden] { display: none !important; }
.service-filter-options button {
  min-height: 44px;
  background: var(--cream);
  color: var(--ink);
  border: 1px solid var(--line);
}
.service-filter-options button.is-active {
  background: var(--red);
  color: white;
  border-color: var(--red);
}

/* Separar cantidad, nombre y acción de quitar. */
.cartline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px 18px;
  align-items: center;
  padding: 18px 0;
}
.cartline > button {
  grid-column: 3; grid-row: 1; float: none;
  justify-self: end; min-height: 44px;
}
.cartline > .cart-quantity { grid-column: 1; grid-row: 1; margin: 0; }
.cartline > strong { grid-column: 2; grid-row: 1; min-width: 0; overflow-wrap: anywhere; }
.cartline > div:not(.cart-quantity), .cartline > small { grid-column: 1 / -1; }
.cartline .cart-quantity button { float: none; }
@media (max-width: 480px) {
  .cartline { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; }
  .cartline > strong { grid-column: 1; grid-row: 1; }
  .cartline > button { grid-column: 2; grid-row: 1; }
  .cartline > .cart-quantity { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
}
/* Pedidos plegables sin colores adicionales por estado. */
.admin-app .collapsible-order > h3,
.admin-app .collapsible-order > h4 { display: none; }
.admin-app .order-fold-summary {
  display: flex; align-items: center; gap: 12px;
  list-style: none; cursor: pointer; min-height: 48px;
  color: var(--ink); text-align: left;
}
.admin-app .order-fold-summary::-webkit-details-marker { display: none; }
.order-fold-name {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-weight: 700; font-size: 1.05rem;
}
.order-fold-folio {
  flex: 0 0 auto; font-size: .72rem; color: #6b6470; white-space: nowrap;
}
.order-fold-chevron {
  flex: 0 0 auto; font-size: 1.25rem; transition: transform 160ms ease;
}
.collapsible-order[open] > .order-fold-summary {
  margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
.collapsible-order[open] > .order-fold-summary .order-fold-chevron { transform: rotate(180deg); }
.collapsible-order > .order-fold-summary:focus-visible {
  outline: 2px solid var(--red); outline-offset: 4px; border-radius: 6px;
}
.collapsible-order:not([open]) > :not(summary) { display: none !important; }
.collapsible-order[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .order-fold-chevron { transition: none; }
}

/* Horarios y estado del negocio en una sola tarjeta. */
.service-overview {
  margin: 0 0 28px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #eedee7;
  border-radius: 24px;
  background: linear-gradient(130deg, #fff 65%, #fff5fa);
  box-shadow: 0 8px 28px rgb(92 26 60 / 5%);
}
.service-overview-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.service-eyebrow { display: block; color: #a5004d; font-size: 10px; font-weight: 750; letter-spacing: .18em; margin-bottom: 9px; }
.service-overview-heading h2 { margin: 0; font-size: clamp(21px, 2.5vw, 29px); line-height: 1.2; letter-spacing: -.035em; color: #32232d; }
.service-state-pill {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 9px 13px; border-radius: 999px; background: #f1edf0; color: #66525f;
  font-size: 12px; font-weight: 700;
}
.service-state-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.service-overview[data-state="open"] .service-state-pill { background: #edf7f0; color: #27633d; }
.service-overview[data-state="demo"] .service-state-pill { background: #fff2dc; color: #80591e; }
.service-overview .cliente-horario {
  margin: 12px 0 24px; padding: 0; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; color: #6d5e67;
  font-size: 14px; font-weight: 400; line-height: 1.6;
}
.service-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.service-slot {
  position: relative; min-width: 0; padding: 20px; border: 1px solid #eee5eb;
  border-radius: 17px; background: #fff;
}
.service-slot-days { display: block; font-size: 10px; font-weight: 750; letter-spacing: .11em; color: #8a7581; }
.service-slot h3 { margin: 10px 0 15px; color: #3a2933; font-size: 17px; line-height: 1.3; }
.service-slot-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 650; color: #44343e; }
.service-slot-time svg { width: 18px; height: 18px; flex-shrink: 0; color: #aa6c8a; }
.service-slot-description { margin: 9px 0 0; color: #81717b; font-size: 12px; line-height: 1.5; }
.service-slot.is-current { background: #fff5fa; border-color: #e9abc8; }
.service-slot.is-current h3 { color: #a5004d; }
.service-slot-now { display: inline-block; margin-top: 13px; color: #a5004d; font-size: 11px; font-weight: 700; }
.service-overview #banner { margin: 0 0 18px; font-size: 13px; line-height: 1.5; }
@media (max-width: 700px) {
  .service-overview { padding: 20px; border-radius: 20px; }
  .service-overview-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
  .service-schedule { grid-template-columns: 1fr; gap: 10px; }
  .service-slot { padding: 17px 18px; }
  .service-slot h3 { margin: 7px 0 10px; }
}

/* Carrito editable, preparación y pedidos del mesero. */
.cartline > .cart-item-actions { grid-column:3; grid-row:1; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.cart-item-actions button { float:none; margin:0; padding:10px 14px; }
.cart-edit-dialog { width:min(560px,calc(100% - 28px)); max-height:88dvh; overflow:auto; padding:24px; border:1px solid #eadce4; border-radius:24px; background:#fff; color:#30282d; box-shadow:0 24px 80px #35142640; }
.cart-edit-dialog::backdrop { background:#28101d80; backdrop-filter:blur(4px); }
.cart-edit-dialog label { display:block; margin:16px 0 6px; }
.cart-edit-dialog .check { display:flex; align-items:center; gap:12px; }
.cart-edit-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:22px; }
.related-order-note { padding:12px 16px; border-left:3px solid var(--primary,#c80065); background:#fff3f8; border-radius:10px; font-size:.9rem; }
.preparation-summary-row { padding:16px 0; border-top:1px solid #eadfe5; }
.preparation-summary-row p { margin:6px 0; overflow-wrap:anywhere; }
.preparation-summary-row small { color:#6d6168; }
#tablesView .table-account-orders { margin-top:20px; }
#tablesView .table-batch { margin:16px 0; padding:16px; border:1px solid #e2dce0; border-left:5px solid #91868d; border-radius:16px; background:#faf8f9; }
#tablesView .table-batch[data-table-state="recibido"] { border-color:#e9aeb7; border-left-color:#b42336; background:#fff2f3; }
#tablesView .table-batch[data-table-state="preparando"] { border-color:#edca8e; border-left-color:#a66400; background:#fff7e9; }
#tablesView .table-batch[data-table-state="listo"] { border-color:#a3cdb2; border-left-color:#237449; background:#eefaf2; }
#tablesView .table-batch > summary { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:6px 0; }
#tablesView .table-batch > h4 { display:none; }
.table-order-state { font-size:.8rem; font-weight:700; padding:4px 10px; border-radius:999px; background:#ffffffc9; }
@media(max-width:480px) {
  .cartline > .cart-item-actions { grid-column:2; grid-row:1; flex-direction:column; }
  .cart-edit-dialog { padding:18px; }
  .cart-edit-actions { flex-wrap:wrap; }
}

/* Reglas específicas para que editar/quitar nunca ocupen la cantidad. */
#cart .cartline { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; }
#cart .cartline > strong { grid-column:1 / -1; grid-row:1; width:auto; }
#cart .cartline > div.cart-quantity { grid-column:1; grid-row:2; justify-self:start; flex-wrap:nowrap; }
#cart .cartline > div.cart-item-actions { grid-column:2; grid-row:2; display:flex; flex-direction:row; gap:8px; justify-self:end; }
#cart .cartline .cart-item-actions button { float:none; min-width:0; margin:0; padding:10px 12px; }
#cart .cartline > div:not(.cart-quantity):not(.cart-item-actions),
#cart .cartline > small { grid-column:1 / -1; grid-row:auto; min-width:0; overflow-wrap:anywhere; }
.advanced-settings { grid-column:1 / -1; }
.advanced-settings > summary { cursor:pointer; font-weight:700; font-size:1.1rem; padding:8px 0; }
.advanced-settings .server-address { overflow-wrap:anywhere; margin:20px 0; }
.advanced-settings .advanced-actions { display:flex; gap:12px; flex-wrap:wrap; }
.advanced-settings .advanced-actions button { flex:1 1 100px; }
@media(max-width:380px) {
 #cart .cartline > div.cart-item-actions { grid-column:1 / -1; grid-row:3; justify-self:stretch; }
 #cart .cartline .cart-item-actions button { flex:1; }
}

/* Acciones de seguimiento: filas separadas y cómodas para tocar. */
#tracking > button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  float: none;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 50px;
  height: auto;
  margin: 12px 0 0;
  padding: 14px 18px;
  border-radius: 16px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}
#tracking > #refreshStatus { margin-top: 20px; }
#tracking > button:focus-visible {
  outline: 3px solid #a90051;
  outline-offset: 3px;
}

/* Filtros por servicio separados de los estados del pedido. */
.service-tabs,
#serviceFilterPanel.service-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px;
    margin: 12px 0 24px;
    background: #faf5f8;
    border: 1px solid #ecdde6;
    border-radius: 20px;
    position: static;
    width: auto;
}
.service-tabs button {
    flex: 1 1 135px;
    min-height: 46px;
    margin: 0;
    width: auto;
    background: white;
    color: #773453;
    border: 1px solid #e7d7e0;
    border-radius: 14px;
}
.service-tabs button.is-active {
    background: #c90061;
    border-color: #c90061;
    color: white;
}
.filter-caption { margin: 20px 0 6px; font-weight: 700; }
.connection-recovery {
    margin: 16px 0;
    padding: 20px;
    border: 1px solid #e4cddd;
    border-radius: 20px;
    background: #fff8fc;
}
.connection-recovery[hidden] { display: none; }
.connection-recovery button {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    white-space: normal;
}
.free-tables { padding: 16px; border: 1px solid #e7d7e0; border-radius: 20px; }
.free-tables button { margin: 8px; min-height: 48px; }

/* Encabezado compacto de Administración. */
.admin-app .admin-header {
    padding: 16px 20px;
    background: linear-gradient(110deg, #fff 65%, #fff8fc);
    border-bottom: 1px solid #eee3e9;
}
.admin-app .admin-brand {
    max-width: 1500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.admin-app .admin-logo {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    object-fit: contain;
    padding: 3px;
    border: 1px solid #eee2e9;
    border-radius: 17px;
    background: #fff;
    box-sizing: border-box;
}
.admin-app .admin-brand-copy { flex: 1; min-width: 0; }
.admin-app .admin-brand-label {
    display: block;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: .13em;
    color: #a52b62;
    font-weight: 700;
}
.admin-app .admin-header h1 {
    margin: 3px 0 0;
    color: #29212a;
    font-size: clamp(18px, 3vw, 24px);
    line-height: 1.2;
    letter-spacing: -.035em;
}
.admin-app .admin-header p {
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.4;
    color: #817481;
}
.header-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}
.admin-app .header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 11px;
    box-sizing: border-box;
    border: 1px solid #eadce5;
    border-radius: 14px;
    background: #fff;
    color: #ae1559;
    box-shadow: 0 2px 5px #50203908;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.admin-app .header-reload { background: #fff0f7; border-color: #f3d5e4; }
.header-icon svg { width: 22px; height: 22px; fill: currentColor; }
.header-reload svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.admin-app .header-icon:active { transform: scale(.95); background: #f9dce9; }
.header-icon:focus-visible, .header-connection-menu a:focus-visible {
    outline: 3px solid #d877a6;
    outline-offset: 3px;
}
.header-connection-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 100;
    min-width: 170px;
    padding: 6px;
    border: 1px solid #eadce5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 12px 32px #4b183226;
}
.header-connection-menu[hidden] { display: none; }
.header-connection-menu a {
    display: block;
    padding: 14px 16px;
    border-radius: 10px;
    color: #622540;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.header-connection-menu a:hover { background: #fff0f7; }
@media (max-width: 420px) {
    .admin-app .admin-header { padding: 14px 12px; }
    .admin-app .admin-brand { gap: 9px; }
    .admin-app .admin-logo { width: 42px; height: 42px; flex-basis: 42px; border-radius: 13px; }
    .admin-app .admin-brand-label { font-size: 8px; letter-spacing: .08em; }
    .admin-app .admin-header h1 { font-size: 18px; }
    .compact-app-header .admin-brand-copy p { display: none; }
    .header-actions { gap: 4px; }
}
@media (max-width: 350px) {
    .admin-app .admin-header { padding-inline: 8px; }
    .admin-app .admin-brand { gap: 6px; }
    .admin-app .admin-header h1 { font-size: 16px; }
    .admin-app .admin-logo { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .admin-app .header-icon { transition: none; }
}

/* Mesas QR: código de visita, acceso y hoja imprimible. */
.table-visit-code {
    display: grid;
    gap: 6px;
    margin: 16px 0;
    padding: 16px 18px;
    background: #fff1f7;
    border: 1px solid #efd5e2;
    border-radius: 16px;
}
.table-visit-code strong { font-size: 26px; letter-spacing: .2em; color: #a90051; }
.table-visit-code small { color: #785b6b; }
.qr-order-label { font-weight: 700; color: #a90051; }
.qr-access { border: 1px solid #e6b4ca; }
.qr-access form { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.qr-access label { flex: 1 1 200px; }
.qr-access button { min-height: 48px; margin: 0; }
.qr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; }
.qr-print-card { padding: 20px; background: white; color: #272027; border: 1px solid #e6dce2; border-radius: 20px; text-align: center; }
.qr-print-card h3 { margin: 4px 0 8px; font-size: 26px; }
.qr-print-card img { display: block; width: min(100%, 220px); height: auto; margin: 0 auto 12px; }
.qr-brand { color: #a90051; font-size: 11px; font-weight: 800; letter-spacing: .15em; }
.qr-print-card small { display: block; margin-top: 10px; overflow-wrap: anywhere; color: #685764; }
.qr-print-sheet { display: none; }
@media print {
    @page { size: A4 portrait; margin: 10mm; }
    body:has(.qr-print-sheet) > * { display: none !important; }
    body > .qr-print-sheet { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6mm; }
    .qr-print-sheet .qr-print-card { break-inside: avoid; border-radius: 4mm; padding: 4mm; }
    .qr-print-sheet .qr-print-card img { width: 43mm; height: 43mm; }
    .qr-print-sheet h3 { font-size: 18pt; }
    .qr-print-sheet p { font-size: 9pt; margin: 2mm 0; }
    .qr-print-sheet strong { font-size: 10pt; }
    .qr-print-sheet small { font-size: 7pt; }
}

/* Datos del cliente: espacio, lectura y controles cómodos en celular. */
#orderForm.customer-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#orderForm.customer-details > label {
  display: block;
  margin: 0;
  color: #45333e;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.5;
}
#orderForm.customer-details input:not([type="checkbox"]),
#orderForm.customer-details textarea,
#orderForm.customer-details select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  margin: 7px 0 0;
  padding: 13px 15px;
  border: 1px solid #dfd3db;
  border-radius: 14px;
  background: #fff;
  color: #30242c;
  font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  text-indent: 0;
  letter-spacing: normal;
  box-shadow: 0 2px 5px rgb(69 24 46 / 3%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
#orderForm.customer-details textarea {
  min-height: 100px;
  resize: vertical;
  white-space: pre-wrap;
}
#orderForm.customer-details :is(input, textarea)::placeholder {
  color: #7e707b;
  opacity: 1;
}
#orderForm.customer-details :is(input:not([type="checkbox"]), textarea, select):focus {
  outline: 2px solid #bc0055;
  outline-offset: 2px;
  border-color: #bc0055;
  box-shadow: 0 0 0 5px rgb(188 0 85 / 7%);
}
#orderForm.customer-details > p {
  margin: -6px 0 0;
  font-size: 13px;
  line-height: 1.65;
}
#orderForm.customer-details > .check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: #fff4f8;
  font-weight: 450;
}
#orderForm.customer-details .check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}
#orderForm.customer-details > button {
  min-height: 52px;
  margin: 0;
}
#orderForm.customer-details [hidden] { display: none !important; }
#orderForm.customer-details > p:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  #orderForm.customer-details :is(input, textarea, select) { transition: none; }
}

/* Configuración plegable y catálogo de refrescos. */
#settingsView .settings-fold-panel { padding: 0; overflow: hidden; }
#settingsView .settings-fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 20px 24px; cursor: pointer; list-style: none;
  color: #49333f; font-weight: 700; font-size: 17px;
}
#settingsView .settings-fold > summary::-webkit-details-marker { display: none; }
#settingsView .settings-fold > summary::after {
  content: "+"; flex: 0 0 auto; font-size: 24px; color: #bc0055;
}
#settingsView .settings-fold[open] > summary::after { content: "−"; }
#settingsView .settings-fold[open] > summary { background: #fff5f9; }
#settingsView .settings-fold > summary :is(h2,h3) { margin: 0; font-size: 17px; }
#settingsView .settings-fold > summary:focus-visible {
  outline: 3px solid #bc0055; outline-offset: -4px; border-radius: 12px;
}
#settingsView .settings-fold-content { padding: 20px 24px 24px; }
#settingsView .soft-drink-entry { display: flex; gap: 10px; align-items: stretch; }
#settingsView .soft-drink-entry input { flex: 1; min-width: 0; margin: 0; }
#settingsView .soft-drink-entry button { margin: 0; }
#settingsView .soft-drink-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
}
#settingsView .soft-drink-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #eadfe6;
  border-radius: 14px;
  background: #fff;
}
#settingsView .soft-drink-list li > span {
  display: block;
  min-width: 0;
  width: auto;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
  color: #49333f;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}
#settingsView .soft-drink-list li > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: auto;
  min-width: 76px;
  max-width: none;
  min-height: 44px;
  padding: 10px 14px;
  margin: 0;
  border: 1px solid #efd3df;
  border-radius: 10px;
  background: #fff3f8;
  color: #a90050;
  box-shadow: none;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
#settingsView .soft-drink-list li > button:hover { background: #fce3ee; }
#settingsView .soft-drink-list li > button:focus-visible {
  outline: 2px solid #a90050;
  outline-offset: 3px;
}
#settingsView .soft-drink-list li > button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 480px) {
  #settingsView .settings-fold > summary { padding: 16px; }
  #settingsView .settings-fold-content { padding: 16px; }
  #settingsView .soft-drink-entry { flex-direction: column; }
}

/* Botones compactos premium del seguimiento */
#tracking {
  --cj-action-size: 48px;
}

#tracking #refreshStatus,
#tracking #cjNewOrder,
#tracking #cjHideTracking {
  width: var(--cj-action-size);
  height: var(--cj-action-size);
  min-height: 0;
  padding: 0;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
  transition: transform .2s ease, box-shadow .2s ease;
}

#tracking #refreshStatus:hover,
#tracking #cjNewOrder:hover,
#tracking #cjHideTracking:hover {
  transform: translateY(-2px);
}

#tracking .cj-mini-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}

#tracking .cj-mini-actions button svg {
  width: 21px;
  height: 21px;
}


/* Acciones compactas premium */
#tracking .cj-mini-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 8px;
}

#tracking .cj-mini-actions .cj-mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  padding: 0;
  margin: 0;
  border-radius: 15px;
  background: #f1edf2;
  color: #473b48;
  border: 1px solid rgba(90, 60, 80, .08);
  box-shadow: 0 3px 9px rgba(30, 10, 25, .06);
  transition: transform .2s ease, box-shadow .2s ease;
}

#tracking .cj-mini-actions #cjNewOrder {
  background: linear-gradient(145deg, #f00076, #c90060);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 5px 15px rgba(210, 0, 95, .23);
}

#tracking .cj-mini-actions .cj-mini-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(30, 10, 25, .13);
}

#tracking .cj-mini-actions .cj-mini-action:active {
  transform: scale(.95);
}

#tracking .cj-mini-actions .cj-mini-action:focus-visible {
  outline: 3px solid #df4b96;
  outline-offset: 3px;
}

#tracking .cj-mini-actions svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}


/* Cocina Juanita: seguimiento premium v1 */
#tracking .cliente-etapas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  padding: 16px 0 20px;
  margin: 18px 0;
  list-style: none;
  overflow: visible;
}

#tracking .cliente-etapas .cj-progress-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 0 2px;
  margin: 0;
  border: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  text-align: center;
  font-size: 11px;
  color: #978595;
  font-weight: 500;
}

#tracking .cliente-etapas .cj-progress-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5edf2;
  color: #a38d9b;
  border: 1px solid #eadde5;
  transition:
    background .35s ease,
    color .35s ease,
    transform .35s ease,
    box-shadow .35s ease;
}

#tracking .cliente-etapas svg {
  width: 21px;
  height: 21px;
}

#tracking .cliente-etapas .cj-progress-step::after {
  content: "";
  position: absolute;
  top: 21px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 3px;
  border-radius: 5px;
  background: #eadde5;
}

#tracking .cliente-etapas .cj-progress-step:last-child::after {
  display: none;
}

#tracking .cliente-etapas .cj-progress-step.completo {
  background: transparent;
  border: 0;
  color: #8e315d;
}

#tracking .cliente-etapas .completo .cj-progress-icon {
  background: linear-gradient(145deg, #ec287d, #b90055);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px #c9005c24;
}

#tracking .cliente-etapas .completo::after {
  background: #d92b7d;
}

#tracking .cliente-etapas [aria-current="step"] {
  outline: none;
  box-shadow: none;
  font-weight: 750;
  color: #b90055;
}

#tracking .cliente-etapas [aria-current="step"] .cj-progress-icon {
  box-shadow:
    0 0 0 5px #c9005c16,
    0 5px 16px #c9005c35;
  animation: cj-progress-pulse 2.2s ease-in-out infinite;
}

#tracking .cliente-etapas .cj-progress-caption {
  display: block;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@keyframes cj-progress-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 5px #c9005c16;
  }
  50% {
    transform: scale(1.07);
    box-shadow: 0 0 0 9px #c9005c09;
  }
}

@media (max-width: 480px) {
  #tracking .cliente-etapas .cj-progress-icon {
    width: 38px;
    height: 38px;
  }

  #tracking .cliente-etapas svg {
    width: 19px;
    height: 19px;
  }

  #tracking .cliente-etapas .cj-progress-step::after {
    top: 18px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
  }

  #tracking .cliente-etapas .cj-progress-caption {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tracking .cliente-etapas .cj-progress-icon {
    animation: none !important;
    transition: none;
  }
}


/* CJ TRACKING PREMIUM LAYOUT V2 */

#tracking {
  --cj-accent: #c9005c;
  --cj-ink: #352034;
  --cj-muted: #887584;
  --cj-border: #f0e4eb;
  --cj-soft: #fff7fa;
  border-radius: 22px;
}

#tracking h2,
#tracking > h3 {
  color: var(--cj-ink);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.2;
  margin-bottom: 15px;
}

#tracking label[for="trackedOrderPicker"] {
  display: block;
  margin-bottom: 7px;
  color: var(--cj-muted);
  font-size: 11px;
  font-weight: 650;
}

#tracking #trackedOrderPicker {
  width: 100%;
  min-height: 45px;
  padding: 10px 14px;
  border-radius: 13px;
  border: 1px solid var(--cj-border);
  background: #fff;
  color: var(--cj-ink);
  font-size: 12px;
  box-shadow: 0 2px 9px #35102b05;
}

/* Tarjeta animada de preparación */
#tracking .juanita-preparation {
  margin: 14px 0 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid #f1dce7;
  background: linear-gradient(135deg, #fff7fa, #fdf0f6);
  box-shadow: 0 5px 18px #b9005508;
}

#tracking .juanita-preparation .preparation-copy h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
}

#tracking .juanita-preparation .preparation-copy p {
  font-size: 11px;
  line-height: 1.5;
}

/* Información del pedido */
#tracking #status {
  margin: 9px 0 5px;
  padding: 12px 14px;
  border: 1px solid var(--cj-border);
  border-radius: 13px;
  background: #fff;
  color: #685469;
  font-size: 11px;
  line-height: 1.8;
  white-space: pre-line;
  overflow-wrap: anywhere;
  box-shadow: none;
}

/* Línea de progreso */
#tracking .cliente-etapas {
  margin: 9px 0 12px;
  padding: 15px 0 13px;
}

#tracking .cliente-etapas .cj-progress-step {
  gap: 8px;
}

#tracking .cliente-etapas .cj-progress-caption {
  font-weight: 650;
}

/* Ticket de compra */
#tracking #cjOrderReceipt {
  margin: 15px 0 12px;
  padding: 19px 17px;
  border: 1px solid var(--cj-border);
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 7px 24px #35102b08;
  overflow: hidden;
}

#tracking #cjOrderReceipt h3 {
  color: var(--cj-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.025em;
}

#tracking #cjOrderReceipt hr {
  border: 0;
  border-top: 1px solid var(--cj-border);
  margin: 15px 0;
}

/* Botones pequeños */
#tracking .cj-mini-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  margin: 12px auto 5px;
  padding: 4px 0;
}

#tracking .cj-mini-actions .cj-mini-action {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
  min-width: 43px;
  min-height: 43px;
  max-width: 43px;
  border-radius: 14px;
}

#tracking .cj-mini-actions svg {
  width: 19px;
  height: 19px;
}

/* Texto de actualización */
#tracking .cliente-etapas + p {
  color: var(--cj-muted);
  font-size: 10px;
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 540px) {
  #tracking {
    padding: 17px 15px;
  }

  #tracking #cjOrderReceipt {
    padding: 17px 15px;
  }

  #tracking .juanita-preparation {
    padding: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #tracking *,
  #tracking *::before,
  #tracking *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}
/* =====================================================================
   COCINA JUANITA · REDISEÑO PREMIUM DEL CLIENTE (v2026-10-30)
   ---------------------------------------------------------------------
   - Todo está limitado a body.premium-client: la administración
     (body.admin-app) no cambia.
   - Va al final para ganar a las capas anteriores sin usar !important.
   - No depende de fuentes ni imágenes externas.
   ===================================================================== */

.premium-client {
  --cj-pink: #c9005c;
  --cj-pink-strong: #a8004c;
  --cj-pink-bright: #e6157a;
  --cj-pink-50: #fff5f9;
  --cj-pink-100: #fde8f1;
  --cj-pink-200: #f6cfe0;
  --cj-plum: #2b1a2a;
  --cj-plum-2: #43203a;
  --cj-ink: #2a1e29;
  --cj-ink-2: #4d3c4a;
  --cj-muted: #776675;
  --cj-line: #efe4ea;
  --cj-line-2: #e6d8e0;
  --cj-surface: #ffffff;
  --cj-bg: #fbf7f9;
  --cj-ok: #23714a;
  --cj-ok-bg: #ebf7f0;
  --cj-r-sm: 12px;
  --cj-r: 16px;
  --cj-r-lg: 22px;
  --cj-r-xl: 28px;
  --cj-shadow-1: 0 1px 2px rgb(43 26 42 / 4%), 0 2px 8px rgb(43 26 42 / 3%);
  --cj-shadow-2: 0 2px 4px rgb(43 26 42 / 3%), 0 12px 32px rgb(43 26 42 / 6%);
  --cj-shadow-pink: 0 6px 18px rgb(201 0 92 / 24%);
  --cj-ease: cubic-bezier(.2, .7, .2, 1);
  --cj-font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cj-font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, sans-serif;
  --cj-font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  background:
    radial-gradient(1200px 520px at 100% -10%, #ffe6f1 0, transparent 60%),
    var(--cj-bg);
  color: var(--cj-ink);
  font-family: var(--cj-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.premium-client h1,
.premium-client h2,
.premium-client h3 {
  font-family: var(--cj-font-display);
  color: var(--cj-ink);
  text-wrap: balance;
}

.premium-client ::selection { background: #f9cfe2; color: var(--cj-plum); }

/* Enlace para saltar al contenido (solo visible con teclado). */
.premium-client .skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--cj-plum);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.premium-client .skip-link:focus { top: 12px; }

/* ---------- Controles base ---------- */

.premium-client button {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--cj-pink);
  color: #fff;
  font-family: var(--cj-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.005em;
  box-shadow: none;
  transition: background-color .2s, color .2s, box-shadow .2s, transform .18s var(--cj-ease);
}
.premium-client button.secondary {
  background: #f4eef2;
  color: var(--cj-ink-2);
}
.premium-client button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.premium-client button:active:not(:disabled) { transform: scale(.97); }

.premium-client label {
  color: var(--cj-ink-2);
  font-size: 13.5px;
  font-weight: 650;
}

.premium-client input:not([type="checkbox"]):not([type="radio"]),
.premium-client select,
.premium-client textarea {
  min-height: 50px;
  margin-top: 6px;
  padding: 12px 15px;
  border: 1px solid var(--cj-line-2);
  border-radius: 14px;
  background-color: #fff;
  color: var(--cj-ink);
  font: 400 16px/1.45 var(--cj-font);
  box-shadow: 0 1px 2px rgb(43 26 42 / 3%);
  transition: border-color .18s, box-shadow .18s, background-color .18s;
}
.premium-client textarea { min-height: 96px; }

/* Flecha propia para los selectores (sin imágenes externas). */
.premium-client select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cj-pink) 50%),
    linear-gradient(135deg, var(--cj-pink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.premium-client select:disabled { opacity: .6; cursor: not-allowed; }

.premium-client input:focus,
.premium-client select:focus,
.premium-client textarea:focus {
  border-color: var(--cj-pink);
  box-shadow: 0 0 0 4px rgb(201 0 92 / 10%);
}
.premium-client :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cj-pink-strong);
  outline-offset: 3px;
}
.premium-client input::placeholder,
.premium-client textarea::placeholder { color: #8e7f8b; opacity: 1; }
.premium-client input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--cj-pink); }

.premium-client .muted { color: var(--cj-muted); font-size: 13.5px; line-height: 1.6; }
.premium-client .error:not(:empty) {
  padding: 12px 14px;
  border-radius: var(--cj-r-sm);
  background: #fff1f0;
  border: 1px solid #f3cfcb;
  color: #9d2a22;
  font-size: 14px;
}

.premium-client .section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--cj-pink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.premium-client .section-eyebrow::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------- Paneles ---------- */

.premium-client .panel {
  margin-bottom: 20px;
  padding: 28px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-xl);
  background: var(--cj-surface);
  box-shadow: var(--cj-shadow-2);
}
.premium-client .panel > h2 {
  margin: 0 0 18px;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.04em;
}

/* ---------- Encabezado ---------- */

.premium-client .client-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px max(20px, calc((100% - 1220px) / 2));
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgb(255 255 255 / 82%);
  border-bottom: 1px solid var(--cj-line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.premium-client .client-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.premium-client .juanita-logo {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cj-line);
  border-radius: 18px;
  background: #fff;
  object-fit: cover;
  box-shadow: var(--cj-shadow-1);
}
.premium-client .client-brand-copy { min-width: 0; }
.premium-client .client-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.035em;
}
.premium-client .client-header .brand-eyebrow { display: none; }
.premium-client .client-header .brand-description {
  margin: 2px 0 0;
  color: var(--cj-ink-2);
  font-size: 13px;
}
.premium-client .client-header .brand-address {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--cj-muted);
  font-size: 12px;
}
.premium-client .client-header .brand-address::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--cj-pink);
}
.premium-client .client-header .cliente-contacto {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  max-width: none;
  margin: 0;
}
.premium-client .client-header .cliente-link {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--cj-line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--cj-ink-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none;
}
.premium-client .client-header .cliente-link:first-child {
  border-color: transparent;
  background: var(--cj-pink);
  color: #fff;
  box-shadow: var(--cj-shadow-pink);
}

/* ---------- Contenedor ---------- */

.premium-client main {
  max-width: 1268px;
  margin: 0 auto;
  padding: 24px 24px calc(120px + env(safe-area-inset-bottom));
}
.premium-client .layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 24px;
  align-items: start;
}

/* ---------- Portada ---------- */

.premium-client .juanita-signature {
  grid-template-columns: 1.1fr 1fr;
  min-height: 300px;
  margin-bottom: 20px;
  padding: 40px 48px;
  border: 0;
  border-radius: var(--cj-r-xl);
  color: #fff;
  background:
    radial-gradient(520px 320px at 85% 25%, rgb(230 21 122 / 42%) 0, transparent 70%),
    radial-gradient(380px 260px at 0% 110%, rgb(201 0 92 / 28%) 0, transparent 70%),
    linear-gradient(135deg, #2a1828 0%, #3d1934 55%, #561a43 100%);
  box-shadow: 0 24px 60px rgb(61 25 52 / 22%);
}
.premium-client .signature-eyebrow {
  margin-bottom: 14px;
  color: #ffb6d4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
}
.premium-client .signature-copy h2 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
}
.premium-client .signature-copy h2 em {
  font-family: var(--cj-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  color: #ffadcf;
}
.premium-client .signature-copy p {
  max-width: 340px;
  margin: 0 0 24px;
  color: #f1d6e3;
  font-size: 15px;
  line-height: 1.55;
}
.premium-client .signature-action {
  gap: 12px;
  min-height: 48px;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--cj-plum);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 26px rgb(0 0 0 / 22%);
}
.premium-client .signature-action span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cj-pink);
  color: #fff;
  font-size: 14px;
}
.premium-client .signature-art { color: #ffadcf; }
.premium-client .signature-orbit { border-color: rgb(255 173 207 / 18%); }
.premium-client .orbit-two { border-color: rgb(255 173 207 / 10%); }
.premium-client .signature-seal { color: #e6b2c9; font-weight: 700; }

/* ---------- Horarios ---------- */

.premium-client .service-overview {
  margin: 0 0 24px;
  padding: 24px 28px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r-xl);
  background: #fff;
  box-shadow: var(--cj-shadow-2);
}
.premium-client .service-overview-heading { align-items: center; }
.premium-client .service-eyebrow { color: var(--cj-pink); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.premium-client .service-overview-heading h2 {
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
  letter-spacing: -.035em;
}
.premium-client .service-state-pill { padding: 8px 14px; font-size: 13px; font-weight: 750; }
.premium-client .service-overview .cliente-horario { margin: 8px 0 18px; color: var(--cj-muted); font-size: 14px; }
.premium-client .service-schedule { gap: 12px; }
.premium-client .service-slot {
  padding: 16px 18px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r);
  background: #fdfafc;
}
.premium-client .service-slot h3 { margin: 6px 0 10px; font-size: 16px; font-weight: 750; letter-spacing: -.02em; }
.premium-client .service-slot-time { font-size: 14px; font-weight: 700; color: var(--cj-ink); }
.premium-client .service-slot-time svg { color: var(--cj-pink); }
.premium-client .service-slot.is-current {
  border-color: var(--cj-pink-200);
  background: linear-gradient(160deg, #fff 0%, var(--cj-pink-50) 100%);
  box-shadow: 0 0 0 3px rgb(201 0 92 / 6%);
}
.premium-client .service-slot-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--cj-pink);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.premium-client .service-overview #banner {
  padding: 12px 14px;
  border-radius: var(--cj-r-sm);
  background: #fff6e6;
  color: #7a5414;
}

/* ---------- Menú ---------- */

.premium-client .client-menu-panel { padding: 28px; }
.premium-client .client-menu-panel > label[for="service"] {
  display: block;
  margin: 4px 0 0;
  color: var(--cj-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.premium-client #service {
  margin: 8px 0 4px;
  min-height: 54px;
  border-color: var(--cj-pink-200);
  border-radius: 16px;
  background-color: var(--cj-pink-50);
  color: var(--cj-pink-strong);
  font-size: 17px;
  font-weight: 750;
}

.premium-client #daily:not(:empty) {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 18px 16px 22px;
  border: 1px solid var(--cj-pink-200);
  border-radius: var(--cj-r);
  background: linear-gradient(135deg, var(--cj-pink-50), #fff);
  color: var(--cj-ink-2);
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  overflow: hidden;
}
.premium-client #daily:not(:empty)::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cj-pink);
}
.premium-client #daily:first-line { font-weight: 800; color: var(--cj-pink-strong); }

/* Categorías: barra fija tipo app. */
.premium-client .cliente-categorias {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 8px;
  margin: 12px -28px 8px;
  padding: 12px 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  background: rgb(255 255 255 / 88%);
  border-bottom: 1px solid var(--cj-line);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
}
.premium-client .cliente-categorias::-webkit-scrollbar { display: none; }
.premium-client .cliente-categorias a {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--cj-line-2);
  border-radius: 999px;
  background: #fff;
  color: var(--cj-ink-2);
  font-size: 13.5px;
  font-weight: 700;
  scroll-snap-align: start;
  box-shadow: none;
}

/* Secciones de categoría: planas, sin cajas dentro de cajas. */
.premium-client .menu-category {
  margin: 0;
  padding: 22px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  scroll-margin-top: 80px;
}
.premium-client .menu-category + .menu-category { border-top: 1px dashed var(--cj-line-2); }
.premium-client .menu-category > h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--cj-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
}
.premium-client .menu-category > h3::after { display: none; }
.premium-client .menu-category > .muted,
.premium-client .menu-category > p {
  margin: 4px 2px 10px;
  color: var(--cj-muted);
  font-size: 13px;
}

/* Tarjetas de producto. */
.premium-client details.product {
  margin: 0 0 10px;
  padding: 0;
  border: 1px solid var(--cj-line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--cj-shadow-1);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.premium-client details.product > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  min-height: 72px;
  margin: 0;
  padding: 14px 16px 14px 18px;
  color: var(--cj-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
  background: transparent;
  border: 0;
}
.premium-client details.product > summary::-webkit-details-marker { display: none; }
.premium-client details.product > summary .price {
  order: 2;
  margin-left: auto;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--cj-pink-50);
  color: var(--cj-pink-strong);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.premium-client details.product > summary::after {
  content: "+";
  order: 3;
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cj-pink);
  color: #fff;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 4px 10px rgb(201 0 92 / 25%);
  transition: transform .25s var(--cj-ease), background-color .2s;
}
.premium-client details.product[open] > summary::after {
  content: "+";
  transform: rotate(45deg);
  background: var(--cj-ink);
  box-shadow: none;
}
.premium-client details.product > summary .cliente-agotado {
  order: 1;
  flex: 0 0 auto;
  margin: 0;
}
.premium-client details.product:has(.cliente-agotado) > summary { color: var(--cj-muted); }
.premium-client details.product:has(.cliente-agotado) > summary::after {
  background: #ece5ea;
  color: #8f8090;
  box-shadow: none;
}
.premium-client details.product:has(.cliente-agotado) > summary .price {
  background: #f4f0f3;
  color: #8f8090;
  text-decoration: line-through;
}
.premium-client .cliente-agotado {
  display: inline-flex;
  align-items: center;
  margin: 6px 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fdecea;
  color: #92281f;
  font-size: 12px;
  font-weight: 750;
}

.premium-client details.product[open] {
  padding: 0 18px 18px;
  border-color: var(--cj-pink-200);
  box-shadow: 0 10px 30px rgb(201 0 92 / 8%);
}
.premium-client details.product[open] > summary {
  margin: 0 -18px 4px;
  padding-left: 18px;
  background: linear-gradient(180deg, var(--cj-pink-50), #fff);
  border-bottom: 1px solid var(--cj-line);
}
.premium-client details.product > label { display: block; margin: 14px 0 0; }
.premium-client details.product > label.check {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cj-line);
  border-radius: 14px;
  background: #fdfafc;
  font-weight: 600;
  cursor: pointer;
}
.premium-client details.product > p { margin: 12px 0 0; font-size: 13.5px; color: var(--cj-muted); }
.premium-client details.product > button {
  width: 100%;
  min-height: 52px;
  margin-top: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cj-pink-bright), var(--cj-pink));
  box-shadow: var(--cj-shadow-pink);
  font-size: 16px;
}
.premium-client details.product[open] > *:not(summary) { animation: cj-rise .28s var(--cj-ease) both; }

/* ---------- Carrito ---------- */

.premium-client .client-cart-panel {
  border-top: 1px solid var(--cj-line);
  background: linear-gradient(180deg, var(--cj-pink-50) 0, #fff 140px);
}
.premium-client .client-cart-panel > label[for="mode"] {
  display: block;
  margin: 0;
  color: var(--cj-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.premium-client #mode { font-weight: 700; }

.premium-client #cart { display: grid; gap: 10px; margin-top: 16px; }
.premium-client #cart:empty::before {
  content: "Tu carrito está vacío. Toca + en cualquier platillo para agregarlo.";
  display: block;
  margin: 0;
  padding: 26px 18px;
  border: 1.5px dashed var(--cj-pink-200);
  border-radius: var(--cj-r);
  background: #fff;
  color: var(--cj-muted);
  font-size: 14px;
  text-align: center;
}
.premium-client #cart .cartline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r);
  background: #fff;
  box-shadow: var(--cj-shadow-1);
}
.premium-client #cart .cartline > strong {
  grid-column: 1 / -1;
  grid-row: 1;
  font-size: 15.5px;
  font-weight: 750;
  letter-spacing: -.015em;
}
.premium-client #cart .cartline > div:not(.cart-quantity):not(.cart-item-actions),
.premium-client #cart .cartline > small {
  grid-column: 1 / -1;
  color: var(--cj-muted);
  font-size: 13px;
  line-height: 1.45;
}
.premium-client #cart .cartline > :is(div, small):empty { display: none; }
.premium-client #cart .cartline > * { order: 2; }
.premium-client #cart .cartline > strong { order: 0; }
.premium-client #cart .cartline > div.cart-quantity {
  order: 9;
  grid-column: 1;
  grid-row: auto;
  justify-self: start;
  margin-top: 8px;
}
.premium-client #cart .cartline > div.cart-item-actions {
  order: 10;
  grid-column: 2;
  grid-row: auto;
  justify-self: end;
  margin-top: 8px;
  gap: 4px;
}
/* Subtotal: último div, aparece cuando el servidor calcula el total. */
.premium-client #cart .cartline > div:last-child:not(.cart-quantity):not(.cart-item-actions) {
  order: 1;
  color: var(--cj-pink-strong);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.premium-client .cart-quantity {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--cj-line-2);
  border-radius: 999px;
  background: #fff;
}
.premium-client .cart-quantity button {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
  background: var(--cj-pink-50);
  color: var(--cj-pink-strong);
  font-size: 20px;
  font-weight: 600;
}
.premium-client .cart-quantity button:disabled { opacity: .35; }
.premium-client .cart-quantity span {
  min-width: 30px;
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.premium-client #cart .cart-item-actions button {
  min-height: 44px;
  padding: 8px 12px;
  border-radius: 12px;
  background: transparent;
  color: var(--cj-ink-2);
  font-size: 13.5px;
  font-weight: 700;
}
.premium-client #cart .cart-item-actions button:last-child { color: #a3302a; }

.premium-client .total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 18px 0 6px;
  padding-top: 16px;
  border-top: 1px solid var(--cj-line);
  color: var(--cj-ink);
  font-family: var(--cj-font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.premium-client #total::before {
  content: "Total";
  color: var(--cj-muted);
  font-family: var(--cj-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
}
.premium-client #disposableNotice {
  margin: 0 0 8px;
  text-align: right;
  font-size: 12.5px;
}
.premium-client #clear {
  min-height: 44px;
  margin-top: 8px;
  padding: 8px 14px;
  background: transparent;
  color: var(--cj-muted);
  font-size: 13.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Datos del pedido ---------- */

.premium-client #orderForm.customer-details { gap: 16px; font-family: var(--cj-font); }
.premium-client #orderForm.customer-details > label {
  color: var(--cj-ink-2);
  font-size: 13.5px;
  font-weight: 700;
}
.premium-client #orderForm.customer-details input:not([type="checkbox"]),
.premium-client #orderForm.customer-details textarea,
.premium-client #orderForm.customer-details select {
  margin-top: 7px;
  border-color: var(--cj-line-2);
  border-radius: 14px;
  font: 400 16px/1.45 var(--cj-font);
  box-shadow: 0 1px 2px rgb(43 26 42 / 3%);
}
.premium-client #orderForm.customer-details select { padding-right: 44px; font-weight: 600; }
.premium-client #orderForm.customer-details textarea { min-height: 92px; }
.premium-client #orderForm.customer-details :is(input:not([type="checkbox"]), textarea, select):focus {
  outline: none;
  border-color: var(--cj-pink);
  box-shadow: 0 0 0 4px rgb(201 0 92 / 12%);
}
.premium-client #orderForm.customer-details :is(input:not([type="checkbox"]), textarea, select):focus-visible {
  outline: 2px solid var(--cj-pink-strong);
  outline-offset: 2px;
}
.premium-client #orderForm.customer-details > p {
  margin: -6px 0 0;
  color: var(--cj-muted);
  font-size: 12.5px;
  line-height: 1.6;
}
.premium-client #orderForm.customer-details > p.notice:not(:empty) {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--cj-pink-200);
  border-radius: var(--cj-r);
  background: var(--cj-pink-50);
  color: var(--cj-ink-2);
  font-size: 13.5px;
}
.premium-client #orderForm.customer-details > #confirmOrder {
  min-height: 56px;
  margin-top: 4px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--cj-pink-bright), var(--cj-pink));
  box-shadow: var(--cj-shadow-pink);
  font-size: 17px;
  font-weight: 800;
}
.premium-client #orderForm.customer-details > #confirmOrder:disabled {
  background: #ead8e1;
  color: #8f7888;
  box-shadow: none;
  opacity: 1;
}

/* Flecha de selectores: se vuelve a aplicar sobre reglas antiguas que usan
   el atajo `background:` y la borraban. */
.premium-client select,
.premium-client #service,
.premium-client #orderForm.customer-details select,
.premium-client #tracking #trackedOrderPicker {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--cj-pink) 50%),
    linear-gradient(135deg, var(--cj-pink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

/* ---------- Seguimiento ----------
   Orden visual: animación → línea de progreso → detalles → botones.
   Se usa `order` porque app.js inserta estas piezas dinámicamente.
   Solo el selector de pedidos y los botones reciben foco, y siguen
   el mismo orden visual y de teclado. */

.premium-client #tracking {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 24px;
  border-radius: var(--cj-r-xl);
  scroll-margin-top: 16px;
}
.premium-client #tracking[hidden] { display: none; }
.premium-client #tracking > * { order: 6; }
.premium-client #tracking > h2 { order: 0; margin: 0 0 14px; font-size: 24px; }
.premium-client #tracking > .juanita-preparation { order: 1; }
.premium-client #tracking > .cliente-etapas { order: 2; }
.premium-client #tracking > label[for="trackedOrderPicker"] { order: 3; }
.premium-client #tracking > #trackedOrderPicker { order: 4; }
.premium-client #tracking > #status { order: 5; }
.premium-client #tracking > #cjOrderReceipt { order: 6; }
.premium-client #tracking > p[role="status"] { order: 7; }
.premium-client #tracking > .cj-mini-actions { order: 8; }

/* 1 · Animación de preparación (tarjeta protagonista). */
.premium-client #tracking .juanita-preparation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--cj-pink-200);
  border-radius: 24px;
  background:
    radial-gradient(260px 160px at 50% 0%, #ffe0ee 0, transparent 70%),
    linear-gradient(180deg, var(--cj-pink-50), #fff);
  text-align: center;
  box-shadow: none;
}
.premium-client #tracking .juanita-preparation[hidden] { display: none; }
.premium-client #tracking .preparation-art {
  flex: none;
  width: min(220px, 70%);
  color: #b54c7a;
}
.premium-client #tracking .preparation-art .juanita-skillet { max-width: 220px; }
.premium-client #tracking .preparation-copy { display: flex; flex-direction: column; align-items: center; }
.premium-client #tracking .preparation-copy .section-eyebrow { font-size: 10.5px; letter-spacing: .16em; }
.premium-client #tracking .preparation-copy .section-eyebrow::before { display: none; }
.premium-client #tracking .preparation-copy h3 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.2;
}
.premium-client #tracking .preparation-copy p {
  max-width: 300px;
  margin: 0;
  color: var(--cj-muted);
  font-size: 14px;
  line-height: 1.5;
}
.premium-client #tracking .preparation-dots { justify-content: center; margin-top: 12px; }
.premium-client #tracking .preparation-dots i { width: 6px; height: 6px; background: var(--cj-pink); }
.premium-client #tracking .juanita-preparation[data-state="entregado"] {
  border-color: #cfe8d9;
  background: linear-gradient(180deg, var(--cj-ok-bg), #fff);
}
.premium-client #tracking .juanita-preparation[data-state="rechazado"] {
  border-color: #ecd9db;
  background: linear-gradient(180deg, #fbf3f3, #fff);
}

/* 2 · Línea de progreso, justo debajo de la animación. */
.premium-client #tracking .cliente-etapas {
  margin: 0;
  padding: 20px 0 18px;
}
.premium-client #tracking .cliente-etapas:empty { display: none; }
.premium-client #tracking .cliente-etapas .cj-progress-caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* 3 · Detalles del pedido. */
.premium-client #tracking label[for="trackedOrderPicker"] {
  margin: 4px 0 0;
  color: var(--cj-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.premium-client #tracking #trackedOrderPicker {
  min-height: 48px;
  margin: 6px 0 12px;
  padding: 10px 44px 10px 14px;
  border-color: var(--cj-line-2);
  border-radius: 14px;
  font-size: 15px;
  font-weight: 700;
}
.premium-client #tracking #status {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r);
  background: #fdfafc;
  color: var(--cj-ink-2);
  font-size: 14px;
  line-height: 1.75;
  text-align: left;
  white-space: pre-line;
}
.premium-client #tracking #status::first-line { color: var(--cj-ink); font-weight: 800; }
.premium-client #tracking #cjOrderReceipt {
  margin: 0 0 12px;
  padding: 18px;
  border: 1px solid var(--cj-line);
  border-radius: var(--cj-r);
  background: #fff;
  box-shadow: none;
}
.premium-client #tracking #cjOrderReceipt h3 {
  margin: 0 0 6px;
  color: var(--cj-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.premium-client #tracking #cjOrderReceipt .cliente-resumen-linea {
  padding: 12px 0;
  border-bottom: 1px dashed var(--cj-line-2);
}
.premium-client #tracking #cjOrderReceipt .cliente-resumen-linea strong {
  display: block;
  font-size: 15px;
  font-weight: 750;
}
.premium-client #tracking #cjOrderReceipt .cliente-resumen-linea p {
  margin: 4px 0 0;
  color: var(--cj-muted);
  font-size: 13px;
  line-height: 1.5;
}
.premium-client #tracking #cjOrderReceipt .total {
  margin: 12px 0 4px;
  padding-top: 0;
  border: 0;
  color: var(--cj-pink-strong);
  font-size: 24px;
}
.premium-client #tracking #cjOrderReceipt > p:last-child {
  display: inline-flex;
  margin: 4px 0 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cj-pink-50);
  color: var(--cj-pink-strong);
  font-size: 13px;
  font-weight: 700;
}
.premium-client #tracking > p[role="status"] {
  margin: 2px 0 0;
  color: var(--cj-muted);
  font-size: 12px;
  text-align: center;
}

/* 4 · Botones al final. */
.premium-client #tracking .cj-mini-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--cj-line);
}
.premium-client #tracking .cj-mini-actions .cj-mini-action {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  min-width: 52px;
  min-height: 52px;
  max-width: 52px;
  padding: 0;
  border: 1px solid var(--cj-line-2);
  border-radius: 16px;
  background: #fff;
  color: var(--cj-ink-2);
  box-shadow: var(--cj-shadow-1);
}
.premium-client #tracking .cj-mini-actions #cjNewOrder {
  border-color: transparent;
  background: linear-gradient(145deg, var(--cj-pink-bright), var(--cj-pink));
  color: #fff;
  box-shadow: var(--cj-shadow-pink);
}
.premium-client #tracking .cj-mini-actions svg { width: 21px; height: 21px; }

/* ---------- Barra inferior del carrito (flotante) ---------- */

.premium-client .cliente-carrito-fijo {
  left: 50%;
  right: auto;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: min(640px, calc(100% - 24px));
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 22px;
  background: rgb(43 26 42 / 94%);
  color: #fff;
  box-shadow: 0 16px 40px rgb(43 26 42 / 30%);
  transform: translateX(-50%);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
}
.premium-client .cliente-carrito-fijo strong {
  min-width: 0;
  line-height: 1.25;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.premium-client .cliente-carrito-fijo a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 10px 20px;
  border-radius: 16px;
  background: var(--cj-pink);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: none;
}
.premium-client .cliente-carrito-fijo a::after { content: "→"; margin-left: 8px; }
.premium-client .toast {
  bottom: calc(92px + env(safe-area-inset-bottom));
  padding: 14px 18px;
  border-radius: 16px;
  background: var(--cj-ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 16px 40px rgb(43 26 42 / 28%);
  animation: cj-rise .3s var(--cj-ease) both;
}

/* ---------- Ventanas: revisión y edición ---------- */

.premium-client :is(.cliente-resumen, .cart-edit-dialog) {
  width: min(560px, calc(100% - 28px));
  max-height: 88dvh;
  padding: 26px 24px 0;
  border: 0;
  border-radius: 28px;
  background: #fff;
  color: var(--cj-ink);
  box-shadow: 0 30px 90px rgb(43 26 42 / 30%);
}
.premium-client :is(.cliente-resumen, .cart-edit-dialog)::backdrop {
  background: rgb(43 26 42 / 52%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.premium-client :is(.cliente-resumen, .cart-edit-dialog) h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.035em;
}
.premium-client .cliente-resumen .cliente-resumen-linea {
  padding: 14px 0;
  border-bottom: 1px dashed var(--cj-line-2);
}
.premium-client .cliente-resumen .cliente-resumen-linea p { margin: 4px 0 0; color: var(--cj-muted); font-size: 13.5px; }
.premium-client .cliente-resumen > div > p { margin: 8px 0; font-size: 14px; color: var(--cj-ink-2); }
.premium-client .cliente-resumen .total { justify-content: flex-start; margin: 14px 0; padding-top: 0; border-top: 0; font-size: 26px; color: var(--cj-pink-strong); }
.premium-client .cliente-resumen .cliente-acciones,
.premium-client .cart-edit-dialog .cart-edit-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin: 16px -24px 0;
  padding: 14px 24px calc(18px + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--cj-line);
}
.premium-client .cliente-acciones button,
.premium-client .cart-edit-actions button { flex: 1; min-height: 52px; border-radius: 16px; }
.premium-client .cliente-acciones button:not(.secondary),
.premium-client .cart-edit-actions button:not(.secondary) {
  background: linear-gradient(135deg, var(--cj-pink-bright), var(--cj-pink));
  box-shadow: var(--cj-shadow-pink);
}
.premium-client .cart-edit-dialog form > label { display: block; margin: 14px 0 0; }
.premium-client dialog[open] { animation: cj-pop .28s var(--cj-ease); }

/* ---------- Avisos de conexión, mesa QR y pie ---------- */

.premium-client .connection-recovery {
  margin: 0 0 16px;
  padding: 18px 20px;
  border: 1px solid #f0d6a8;
  border-radius: var(--cj-r-lg);
  background: #fff8ea;
  color: #6c4a10;
}
.premium-client .connection-recovery button { border-radius: 14px; }
.premium-client .connection-recovery button.secondary { background: #fff; }
.premium-client .qr-access {
  border: 1px solid var(--cj-pink-200);
  background: linear-gradient(135deg, var(--cj-pink-50), #fff);
}
.premium-client #mesaOrderReceipt:not([hidden]) {
  padding: 14px 16px;
  border-radius: var(--cj-r);
  background: var(--cj-ok-bg);
  color: var(--cj-ok);
  font-weight: 650;
}
.premium-client #menuSyncState:not(:empty) {
  padding: 10px 14px;
  border-radius: var(--cj-r-sm);
  background: #fff8ea;
  color: #6c4a10;
}
.premium-client footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 20px calc(120px + env(safe-area-inset-bottom));
  margin-top: -100px;
  color: var(--cj-muted);
  font-size: 12.5px;
  text-align: center;
}
.premium-client footer strong { color: var(--cj-ink); font-size: 14px; }

/* ---------- Animaciones ---------- */

@keyframes cj-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes cj-pop {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes cj-sheet {
  from { transform: translateY(100%); }
  to { transform: none; }
}
.premium-client .toast { left: 50%; transform: translateX(-50%); }
.premium-client .toast { animation-name: cj-toast; }
@keyframes cj-toast {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* ---------- Interacciones con puntero ---------- */

@media (hover: hover) {
  .premium-client button:not(:disabled):hover { box-shadow: 0 6px 16px rgb(43 26 42 / 12%); }
  .premium-client button.secondary:not(:disabled):hover { background: #ede4ea; }
  .premium-client details.product:not([open]):hover {
    border-color: var(--cj-pink-200);
    box-shadow: 0 8px 22px rgb(201 0 92 / 8%);
  }
  .premium-client details.product > summary:hover { background: transparent; }
  .premium-client details.product:not([open]) > summary:hover::after { transform: scale(1.08); }
  .premium-client .cliente-categorias a:hover {
    border-color: var(--cj-pink-200);
    background: var(--cj-pink-50);
    color: var(--cj-pink-strong);
  }
  .premium-client .client-header .cliente-link:not(:first-child):hover { border-color: var(--cj-pink-200); color: var(--cj-pink-strong); }
  .premium-client .signature-action:hover { transform: translateY(-2px); background: #fff; }
  .premium-client #cart .cart-item-actions button:hover { background: #f6f0f4; box-shadow: none; }
  .premium-client #clear:hover { color: var(--cj-pink-strong); box-shadow: none; }
  .premium-client .cliente-carrito-fijo a:hover { background: var(--cj-pink-bright); }
  .premium-client #tracking .cj-mini-actions .cj-mini-action:hover { transform: translateY(-2px); }
}

/* ---------- Tableta y teléfono ---------- */

@media (max-width: 800px) {
  .premium-client .layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .premium-client main { padding: 16px 16px calc(116px + env(safe-area-inset-bottom)); }
  .premium-client .client-header { flex-wrap: wrap; gap: 12px; padding-left: 16px; padding-right: 16px; }
  .premium-client .client-header .cliente-contacto { width: 100%; }
  .premium-client .client-header .cliente-link { flex: 1; }
  .premium-client .panel { margin-bottom: 16px; padding: 22px 20px; border-radius: 24px; }
  .premium-client .client-menu-panel { padding: 22px 20px; }
  .premium-client .cliente-categorias { margin: 10px -20px 6px; padding: 10px 20px; }
  .premium-client .juanita-signature { padding: 30px 28px; min-height: 0; }

  /* Horarios: carrusel horizontal compacto en lugar de tres tarjetas apiladas. */
  .premium-client .service-overview { padding: 20px; border-radius: 24px; }
  .premium-client .service-overview-heading { flex-direction: row; align-items: center; gap: 12px; }
  .premium-client .service-schedule {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    margin: 0 -20px;
    padding: 2px 20px 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
  }
  .premium-client .service-schedule::-webkit-scrollbar { display: none; }
  .premium-client .service-slot {
    flex: 0 0 min(240px, 74%);
    padding: 14px 16px;
    scroll-snap-align: start;
  }
  .premium-client .service-slot h3 { margin: 4px 0 6px; font-size: 15px; }
  .premium-client .service-slot-description { display: none; }
  .premium-client .service-slot-now { margin-top: 8px; }
}

@media (max-width: 540px) {
  .premium-client .client-header { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
  .premium-client .juanita-logo { width: 48px; height: 48px; flex-basis: 48px; border-radius: 15px; }
  .premium-client .client-header h1 { font-size: 20px; }
  .premium-client .client-header .brand-description { font-size: 12.5px; }
  .premium-client .client-header .brand-address { font-size: 11.5px; }
  .premium-client .client-header .cliente-link { min-height: 42px; padding: 9px 12px; font-size: 13px; }

  .premium-client .juanita-signature {
    grid-template-columns: 1fr;
    padding: 26px 22px 8px;
    border-radius: 24px;
  }
  .premium-client .signature-eyebrow { font-size: 10px; margin-bottom: 12px; }
  .premium-client .signature-copy h2 { font-size: 40px; }
  .premium-client .signature-copy p { max-width: 100%; margin-bottom: 18px; font-size: 14px; }
  .premium-client .signature-action { min-height: 46px; font-size: 14px; padding: 10px 18px; }
  .premium-client .signature-art { height: 150px; margin-top: 4px; }
  .premium-client .signature-art .juanita-skillet { width: 210px; }

  .premium-client .service-overview-heading h2 { font-size: 19px; }
  .premium-client .service-state-pill { padding: 6px 11px; font-size: 12px; }

  .premium-client details.product > summary { min-height: 66px; padding: 12px 12px 12px 16px; font-size: 15.5px; }
  .premium-client details.product > summary .price { font-size: 13.5px; padding: 5px 10px; }
  .premium-client details.product[open] { padding: 0 16px 16px; }
  .premium-client details.product[open] > summary { margin: 0 -16px 4px; padding-left: 16px; }

  .premium-client #tracking { padding: 20px 16px; }
  .premium-client #tracking .preparation-art { width: min(190px, 64%); }
  .premium-client #tracking .cliente-etapas .cj-progress-caption { font-size: 10px; }

  .premium-client .total { font-size: 28px; }

  /* Ventanas como hoja inferior, igual que en apps de comida. */
  .premium-client :is(.cliente-resumen, .cart-edit-dialog) {
    width: 100%;
    max-width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 12px 20px 0;
    border-radius: 26px 26px 0 0;
  }
  .premium-client :is(.cliente-resumen, .cart-edit-dialog)::before {
    content: "";
    display: block;
    width: 40px;
    height: 5px;
    margin: 0 auto 14px;
    border-radius: 99px;
    background: #e3d6de;
  }
  .premium-client dialog[open]:is(.cliente-resumen, .cart-edit-dialog) { animation: cj-sheet .32s var(--cj-ease); }
  .premium-client .cliente-resumen .cliente-acciones,
  .premium-client .cart-edit-dialog .cart-edit-actions { margin: 16px -20px 0; padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 360px) {
  .premium-client .signature-copy h2 { font-size: 34px; }
  .premium-client .client-header .cliente-link { font-size: 12px; padding: 8px 10px; }
  .premium-client .cliente-carrito-fijo { padding-left: 14px; }
  .premium-client .cliente-carrito-fijo strong { font-size: 13.5px; }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  .premium-client *,
  .premium-client *::before,
  .premium-client *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .premium-client button:active:not(:disabled) { transform: none; }
}

/* Cocina Juanita: nota del agua del día */
.cj-water-note {
    margin: 5px 14px 9px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: #a12661;
    background: #fff3f8;
    border: 1px solid #f9dce9;
    border-radius: 9px;
}