/* Modo claro / oscuro (dueño 2026-09-30). El claro es el de siempre; el oscuro redefine las superficies y el texto con la misma paleta (tinta y coral). */
.tema-btn { border: 0; cursor: pointer; width: 40px; height: 40px; margin-left: 8px; border-radius: 50%; display: inline-grid; place-items: center; color: inherit; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); flex: none; }
.nav.solida .tema-btn { background: rgba(31, 26, 46, .06); box-shadow: inset 0 0 0 1px rgba(31, 26, 46, .12); }
.tema-btn .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema-btn .i-sol { display: none; }
:root[data-tema="oscuro"] .tema-btn .i-sol { display: block; }
:root[data-tema="oscuro"] .tema-btn .i-luna { display: none; }

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --crema: #14101f;
  --crema-2: #1a1526;
  --papel: #211b31;
  --texto: #f2ecfa;
  --texto-suave: #b9b0cc;
  --sombra: 0 18px 50px -20px rgba(0, 0, 0, .7);
  --linea-f: rgba(255, 255, 255, .12);
}
:root[data-tema="oscuro"] body { background: var(--crema); color: var(--texto); }
:root[data-tema="oscuro"] .nav.solida { background: rgba(20, 16, 31, .92); }
:root[data-tema="oscuro"] .nav.solida .idioma, :root[data-tema="oscuro"] .nav.solida .tema-btn { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
:root[data-tema="oscuro"] .mas-rubros span { background: var(--papel); color: var(--texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
:root[data-tema="oscuro"] .burbuja.asi { background: var(--papel); color: var(--texto); }
:root[data-tema="oscuro"] .estado { background: #2c2440; color: #e6def5; }
:root[data-tema="oscuro"] .foto .marco { background: #2a2338; }
:root[data-tema="oscuro"] .red-lineas line { stroke: #6b6478; }
:root[data-tema="oscuro"] .red-lineas .onda-base { stroke: #4d4560; }
:root[data-tema="oscuro"] .red-lineas .onda-senal { stroke: #f2ecfa; }
:root[data-tema="oscuro"] .red-nodo span, :root[data-tema="oscuro"] .red-centro b { color: var(--texto); }
:root[data-tema="oscuro"] .red-nodo .ico { background: var(--papel); color: var(--texto); }
:root[data-tema="oscuro"] .chat-form input { background: var(--papel); color: var(--texto); border-color: rgba(255, 255, 255, .18); }
:root[data-tema="oscuro"] .chat-form input:focus { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(207, 67, 41, .25); }
:root[data-tema="oscuro"] :focus-visible { outline-color: #fff; }
:root[data-tema="oscuro"] details, :root[data-tema="oscuro"] .plan, :root[data-tema="oscuro"] .paso, :root[data-tema="oscuro"] .calcu { color: var(--texto); }
:root[data-tema="oscuro"] .plan { background: var(--papel); }
:root[data-tema="oscuro"] details { border-color: rgba(255, 255, 255, .14); }
:root[data-tema="oscuro"] .ticket { background: var(--papel); color: var(--texto); }
:root[data-tema="oscuro"] img.negocio-img { background: #fff; }
:root[data-tema="oscuro"] table, :root[data-tema="oscuro"] th, :root[data-tema="oscuro"] td { color: var(--texto); border-color: rgba(255, 255, 255, .14); }
:root[data-tema="oscuro"] .nav { background: rgba(20, 16, 31, .9); color: var(--texto); }
:root[data-tema="oscuro"] .nav a { color: var(--texto); }
:root[data-tema="oscuro"] .rubros, :root[data-tema="oscuro"] .chat-seccion, :root[data-tema="oscuro"] .precios { background: #191424; }
:root[data-tema="oscuro"] .sugerencias button { background: var(--papel); color: var(--texto); border-color: rgba(255, 255, 255, .2); }
:root[data-tema="oscuro"] .chat-caja, :root[data-tema="oscuro"] .chat { color: var(--texto); }
:root[data-tema="oscuro"] .btn-oscuro { --bg: #3a3350; --fg: #fff; }
/* Pantallas de los teléfonos animados en oscuro: fondo oscuro, encabezado claro y globos legibles (dueño 2026-09-30) */
:root[data-tema="oscuro"] .escena-chat, :root[data-tema="oscuro"] .escena-pedidos { background: #17121f; color: var(--texto); }
:root[data-tema="oscuro"] .movil-cab { color: var(--texto); border-bottom-color: rgba(255, 255, 255, .14); }
:root[data-tema="oscuro"] .movil-cab .ico { color: var(--mango); }
:root[data-tema="oscuro"] .escena-chat .burbuja.cli { background: #352b50; color: #fff; }
:root[data-tema="oscuro"] .escena-chat .burbuja.asi { background: #efece7; color: #14101f; }
:root[data-tema="oscuro"] .pedidos header { color: var(--texto-suave); }
:root[data-tema="oscuro"] .ticket b { color: var(--texto); }
:root[data-tema="oscuro"] .ticket span:not(.estado) { color: var(--texto-suave); }
:root[data-tema="oscuro"] .ticket .ico { background: #352b50; color: #ff9a80; }
/* Acentos (palabra que cambia del título, «Usted», etc.) más claros para que se lean sobre oscuro */
:root[data-tema="oscuro"] .acento, :root[data-tema="oscuro"] .rotador, :root[data-tema="oscuro"] .rotador span, :root[data-tema="oscuro"] h1 em, :root[data-tema="oscuro"] h2 em { color: #ff8a6b; }
/* La hora y «am/pm» no se separan en los pedidos (desktop y celular) */
.ticket div > span { white-space: nowrap; display: inline-block; }
.pedidos .ticket div > span { white-space: normal; text-wrap: balance; }
:root[data-tema="oscuro"] .historia .escena { border-color: #2c2542; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 18px 50px -20px rgba(0, 0, 0, .8); }
:root[data-tema="oscuro"] .historia .escena::before { background: #2c2542; }

/* Contacto: el teléfono y el correo son el mismo botón, del mismo tamaño en celular y computadora (dueño 2026-09-30) */
.datos-contacto { flex-direction: column; gap: 14px; }
.datos-contacto .btn { width: min(100%, 340px); min-width: 0; justify-content: center; text-decoration: none; font-weight: 700; }
.datos-contacto .correo-contacto { color: inherit; text-decoration: none; }
.datos-contacto .correo-contacto:hover { color: inherit; }
@media (min-width: 720px) { .datos-contacto { flex-direction: row; justify-content: center; } .datos-contacto .btn { width: 340px; } }
.escena-chat .chat-escena { justify-content: flex-start; }
/* Modo oscuro: el idioma elegido se distingue (píldora clara con letra oscura) y el negocio señalado lleva su borde naranja (dueño 2026-09-30) */
:root[data-tema="oscuro"] .idioma button { color: var(--texto-suave); background: transparent; }
:root[data-tema="oscuro"] .idioma button[aria-pressed="true"], :root[data-tema="oscuro"] .nav.solida .idioma button[aria-pressed="true"] { background: #f2ecfa; color: #14101f; }
:root[data-tema="oscuro"] .red-nodo.activo .negocio-img { box-shadow: 0 0 0 1.5px #ff7a59, 0 0 16px -2px rgba(255, 122, 89, .45); }
:root[data-tema="oscuro"] .red-nodo.activo .ico { background: #ff7a59; color: #14101f; }

/* Palabra de acento siempre naranja, en modo claro y oscuro (dueño 2026-09-30): naranja fuerte sobre fondo claro y naranja vivo sobre fondo oscuro */
.acento, .rotador span { color: #cf4329; }
.calcu .acento, .escucha .acento, .contacto .acento, .oscuro .acento, .pie .acento { color: #ff7a59; }
:root[data-tema="oscuro"] .acento, :root[data-tema="oscuro"] .rotador, :root[data-tema="oscuro"] .rotador span, :root[data-tema="oscuro"] h1 em, :root[data-tema="oscuro"] h2 em { color: #ff7a59; }
/* Sugerencias del chat: más separadas y delimitadas (celular y computadora) */
.sugerencias { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 16px 18px; margin-top: 4px; border-top: 1px solid rgba(31, 26, 46, .12); background: rgba(31, 26, 46, .03); }
.sugerencias button { padding: 10px 18px; min-height: 44px; line-height: 1.3; text-align: left; box-shadow: 0 1px 0 rgba(31, 26, 46, .08); }
:root[data-tema="oscuro"] .sugerencias { border-top-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); }
@media (max-width: 600px) { .sugerencias { flex-direction: column; align-items: stretch; } .sugerencias button { width: 100%; } }
.chat-mensajes { scroll-behavior: smooth; }

/* Legales, alta, cuenta, cliente y mostrador en oscuro (dueño 2026-09-30, pendiente 3). Los colores fijos de cada hoja se reemplazan por los del tema. */
.cabeza .tema-btn { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); color: #fff; margin-left: 0; }
:root[data-tema="oscuro"] { --suave: #b9b0cc; }
:root[data-tema="oscuro"] .cabeza { background: #0d0a15; }
:root[data-tema="oscuro"] .contenido { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
:root[data-tema="oscuro"] .borrador { background: #3a2f14; color: #f6e7c1; }
:root[data-tema="oscuro"] th, :root[data-tema="oscuro"] blockquote, :root[data-tema="oscuro"] code { background: #2c2440; color: var(--texto); }
:root[data-tema="oscuro"] .contenido a { color: #ff9a80; }
:root[data-tema="oscuro"] .contenido h3 { color: #ff9a80; }
@media print { :root[data-tema="oscuro"] body { background: #fff; color: #1f1a2e; } :root[data-tema="oscuro"] .contenido { background: #fff; color: #1f1a2e; } :root[data-tema="oscuro"] .contenido a, :root[data-tema="oscuro"] .contenido h3 { color: #1f1a2e; } }
/* Alta, cuenta, cliente y mostrador: fondos claros fijos → superficies del tema; bordes translúcidos claros; botón principal visible */
:root[data-tema="oscuro"] .alta-field input, :root[data-tema="oscuro"] .alta-field select, :root[data-tema="oscuro"] .alta-field textarea, :root[data-tema="oscuro"] #help-message,
:root[data-tema="oscuro"] .alta-item-row input, :root[data-tema="oscuro"] .alta-plan-label select { background: #2a2338; color: var(--texto); border-color: rgba(255, 255, 255, .22); }
:root[data-tema="oscuro"] .alta-days label, :root[data-tema="oscuro"] .alta-check-box, :root[data-tema="oscuro"] .alta-choice, :root[data-tema="oscuro"] .alta-buyer-card,
:root[data-tema="oscuro"] .alta-order-card, :root[data-tema="oscuro"] .alta-reservation-test, :root[data-tema="oscuro"] .alta-request, :root[data-tema="oscuro"] .alta-stat,
:root[data-tema="oscuro"] .alta-business-stats, :root[data-tema="oscuro"] .alta-client-link, :root[data-tema="oscuro"] .alta-week-row, :root[data-tema="oscuro"] .alta-exceptions,
:root[data-tema="oscuro"] .correo-lista article { background: var(--papel); color: var(--texto); border-color: rgba(255, 255, 255, .14); }
:root[data-tema="oscuro"] .alta-tip, :root[data-tema="oscuro"] .alta-preview { background: #2a2338; color: var(--texto); }
:root[data-tema="oscuro"] .alta-item-row button { color: var(--texto); border-color: rgba(255, 255, 255, .22); }
:root[data-tema="oscuro"] .alta-item-row button:hover { background: #4a2a2a; }
:root[data-tema="oscuro"] .alta-icon-coral { background: #3a2530; color: #ff9a80; }
:root[data-tema="oscuro"] .alta-request:hover, :root[data-tema="oscuro"] .alta-request.seleccionado { background: #3a2530; }
:root[data-tema="oscuro"] .operacion-aviso, :root[data-tema="oscuro"] .cliente-banner { background: #3a2f14; color: #f6e7c1; border-color: rgba(255, 255, 255, .16); }
:root[data-tema="oscuro"] .alta-local, :root[data-tema="oscuro"] .alta-workspace, :root[data-tema="oscuro"] .alta-help, :root[data-tema="oscuro"] .alta-order-empty, :root[data-tema="oscuro"] .alta-admin-login,
:root[data-tema="oscuro"] .alta-admin-list, :root[data-tema="oscuro"] .alta-admin-detail, :root[data-tema="oscuro"] .alta-admin-empty, :root[data-tema="oscuro"] .alta-stats-block,
:root[data-tema="oscuro"] .operacion-card, :root[data-tema="oscuro"] .operacion-item, :root[data-tema="oscuro"] .cliente-card, :root[data-tema="oscuro"] .cliente-menu-empty, :root[data-tema="oscuro"] .cliente-empty { border-color: rgba(255, 255, 255, .14); }
:root[data-tema="oscuro"] .alta-primary { --bg: #ff6b4a; --fg: #14101f; }
:root[data-tema="oscuro"] .alta-back-button { --fg: var(--texto); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
:root[data-tema="oscuro"] .alta-step-nav [aria-current="step"] .alta-step-num { border-color: #ff6b4a; background: #ff6b4a; color: #14101f; }
:root[data-tema="oscuro"] .nav .alta-idioma a[aria-current="page"] { background: var(--mango); color: #14101f; }
:root[data-tema="oscuro"] .nav .alta-idioma a:not([aria-current="page"]) { color: var(--texto-suave); }
:root[data-tema="oscuro"] .alta-local { background: rgba(255, 255, 255, .08); color: var(--texto); border-color: rgba(255, 255, 255, .18); }
/* Pendientes detectados en la revisión (Luna, 2026-09-30): textos y fondos claros fijos de alta, cuenta y cliente */
:root[data-tema="oscuro"] .alta-step-nav button { color: #b9b0cc; }
:root[data-tema="oscuro"] .alta-field input::placeholder, :root[data-tema="oscuro"] .alta-field textarea::placeholder, :root[data-tema="oscuro"] #help-message::placeholder { color: #9d94b3; }
:root[data-tema="oscuro"] .alta-days label:has(input:checked), :root[data-tema="oscuro"] .alta-status-pill, :root[data-tema="oscuro"] .cliente-reservation-confirmed { background: #1d3a34; color: #d7f2ea; }
:root[data-tema="oscuro"] .alta-step-readout { color: #b9b0cc; }
:root[data-tema="oscuro"] .cuenta-mensaje.error, :root[data-tema="oscuro"] .cliente-reservation-conflict { color: #ff9a8f; }
:root[data-tema="oscuro"] .cuenta-mensaje.bien { color: #7fd99b; }

/* Contraste en el modo oscuro (revisión 2026-10-01, WCAG AA 4,5:1): el rótulo coral oscuro sobre el fondo de tinta daba 3,1:1 y el «en línea» gris 3,3:1. */
:root[data-tema="oscuro"] .eyebrow { color: #ff9a85; }
/* Óvalo (isla) del teléfono animado: en oscuro se perdía contra la pantalla (dueño 2026-10-01). Borde claro para que se vea. */
:root[data-tema="oscuro"] .movil-isla { background: #000; box-shadow: 0 0 0 1.5px #6a6190, 0 0 0 4px #1b1628; }
:root[data-tema="oscuro"] .movil { background: #0a0810; box-shadow: 0 0 0 2px #6a6190, 0 40px 70px -30px rgba(0, 0, 0, .9); }
/* El resplandor blanco del fondo de la conversación se veía como una mancha en el modo oscuro (dueño 2026-10-01) */
:root[data-tema="oscuro"] .chat-mensajes { background: var(--papel); }