/* ============================================================
   BRILLAT — M1 — style.css
   Diseño refinado: dark admin + light público
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Sora:wght@400;600;700;800&display=swap');

:root {
    --bg: #eceee9;
    --bg-2: #e4e6e1;
    --card: rgba(255, 255, 255, 0.55);
    --card-border: rgba(255, 255, 255, 0.9);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    --sidebar-bg: rgba(255, 255, 255, 0.4);
    --sidebar-border: rgba(0, 0, 0, 0.06);

    --text: #111111;
    --text-2: rgba(0, 0, 0, 0.45);
    --text-3: rgba(0, 0, 0, 0.25);
    --border: rgba(0, 0, 0, 0.08);
    --border-2: rgba(0, 0, 0, 0.16);

    --accent: #111111;
    --accent-bg: rgba(0, 0, 0, 0.07);
    --accent-soft: rgba(0, 0, 0, 0.04);

    --gold: #111111;
    --gold-light: rgba(0, 0, 0, 0.05);

    --green: #111111;
    --green-mid: #333333;
    --green-light: rgba(0, 0, 0, 0.06);

    --nav-active-bg: rgba(0, 0, 0, 0.08);
    --nav-active-color: #111;
    --nav-color: rgba(0, 0, 0, 0.45);

    --badge-bg: rgba(0, 0, 0, 0.06);
    --badge-color: rgba(0, 0, 0, 0.35);

    --avatar-bg: #111;
    --avatar-color: #fff;

    --btn-bg: #111;
    --btn-color: #fff;

    --tag-est-bg: rgba(0, 0, 0, 0.06);
    --tag-est-color: #333;
    --tag-prod-bg: rgba(46, 125, 50, 0.1);
    --tag-prod-color: #2e7d32;
    --tag-desp-bg: rgba(230, 81, 0, 0.1);
    --tag-desp-color: #e65100;

    --red: #c0392b;
    --red-light: rgba(192, 57, 43, 0.1);

    --orange: #e67e22;
    --orange-light: rgba(230, 126, 34, 0.12);

    --radius: 12px;
    --radius-lg: 18px;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.10);

    --glass-blur: none;
    --orb-1: rgba(200, 200, 195, 0.6);
    --orb-2: rgba(190, 192, 186, 0.5);

    /* CTA de + Cargar (y sus hermanos .carga-cta). Los valores son EXACTAMENTE los que
       estaban escritos a mano en la regla, así que esto no cambia nada por sí solo. */
    --cta-bg: #e9e4d8;
    --cta-ink: #161616;

    /* Superficie glass del menú inmersivo (opacidad alta para que el texto se lea) */
    --mi-glass: rgba(255, 255, 255, 0.85);

    /* Barra de navegación mobile: panel SIEMPRE oscuro (no se sobreescribe en dark),
       la burbuja reusa el crema/hueso de los botones "Empecé" (.prod-pbtn.cream). */
    --mbar-bg: #16171b;
    --mbar-border: rgba(255, 255, 255, 0.08);
    --mbar-ink: rgba(255, 255, 255, 0.5);
    --mbar-bubble: #e9e2d4;
    --mbar-bubble-ink: #1a1a1a;
}

[data-theme="dark"] {
    --bg: #111111;
    --bg-2: #0e0e0e;
    --card: #262626;
    --card-border: rgba(255, 255, 255, 0.1);
    --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);

    --sidebar-bg: #222222;
    --sidebar-border: rgba(255, 255, 255, 0.07);

    --text: #f0f0f0;
    --text-2: rgba(255, 255, 255, 0.45);
    --text-3: rgba(255, 255, 255, 0.25);
    --border: rgba(255, 255, 255, 0.08);
    --border-2: rgba(255, 255, 255, 0.16);

    --accent: #f0f0f0;
    --accent-bg: rgba(255, 255, 255, 0.1);
    --accent-soft: rgba(255, 255, 255, 0.05);

    --gold: #f0f0f0;
    --gold-light: rgba(255, 255, 255, 0.06);

    --green: #f0f0f0;
    --green-mid: #cccccc;
    --green-light: rgba(255, 255, 255, 0.08);

    --nav-active-bg: rgba(255, 255, 255, 0.1);
    --nav-active-color: #fff;
    --nav-color: rgba(255, 255, 255, 0.4);

    --badge-bg: rgba(255, 255, 255, 0.08);
    --badge-color: rgba(255, 255, 255, 0.35);

    --avatar-bg: #e9e6dd;
    --avatar-color: #111;

    --btn-bg: #e9e6dd;
    --btn-color: #111;

    --tag-est-bg: rgba(255, 255, 255, 0.08);
    --tag-est-color: rgba(255, 255, 255, 0.7);
    --tag-prod-bg: rgba(76, 175, 80, 0.15);
    --tag-prod-color: #81c784;
    --tag-desp-bg: rgba(255, 152, 0, 0.15);
    --tag-desp-color: #ffb74d;

    --red: #ef5350;
    --red-light: rgba(239, 83, 80, 0.12);

    --orange: #f39c12;
    --orange-light: rgba(243, 156, 18, 0.15);

    --shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);

    --orb-1: rgba(40, 40, 40, 0.8);
    --orb-2: rgba(30, 30, 30, 0.6);

    --mi-glass: #1A1A1A;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

/* TANDA DE CAMPO 1 · P1 — EL TEXTO NO SE INFLA SOLO EN iPhone.
   Causa raiz medida del "por que se ve solo en el iPhone": iOS Safari aplica su
   *idempotent text autosizing* y agranda los font-size de los bloques anchos y de
   las TABLAS por su cuenta, incluso con width=device-width. El diseno de la app se
   hizo midiendo cada tamano, asi que ese inflado pisa el diseno: los glifos salen
   mas anchos que la caja que el layout ya resolvio y la comanda desborda (la columna
   de cantidades quedaba cortada contra el borde, sin scroll que la alcance).
   MEDIDO: con el texto de la comanda inflado un 12% la tabla pide 288px en una caja
   de 278 (a 360px de ancho); con 25%, 302 contra 278. Los dos motores igual — el bug
   es de la app, iOS solo lo dispara.
   El valor 100% NO cambia nada en Chromium ni en Android (ahi el autosizing no
   existe): apaga el inflado y deja el tamano que el CSS pide. */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    color: var(--text);
    transition: background 0.4s ease, color 0.4s ease;
}

#app {
    height: 100%;
    overflow: hidden;
}

.view {
    width: 100%;
}

/* ============================================================
   FLUJO DE ENTRADA — EL SCROLL VIVE EN LA VISTA
   Causa raiz del boton inalcanzable en celular: #app es height:100% con
   overflow:hidden, asi que cuando un paso del onboarding es mas alto que la
   pantalla el pie (y su boton) quedan abajo del fold SIN NINGUN scroll que
   los alcance. Medido: hasta 224px de contenido inalcanzable en un iPhone SE
   con la barra de Safari desplegada. #app sigue cerrado para el resto de la
   app; el scroll se abre SOLO en las vistas del flujo de entrada.
============================================================ */
#view-login,
#view-onboarding,
#view-invitacion,
#view-perfil-setup,
#view-sin-acceso {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
}

.hidden {
    display: none !important;
}

/* ============================================================
   SPLASH
============================================================ */
#view-splash {
    display: none;
}

.splash-logo-img {
    width: 280px;
    opacity: 0;
    animation: logoIn 0.8s ease forwards;
    animation-delay: 0.3s;
}

@keyframes logoIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   LOGIN
============================================================ */
#view-login {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    background: var(--bg);
    overflow-x: hidden;
    z-index: 1;
}

.login-bg-pattern {
    display: none;
}

.login-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    padding: 40px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.login-brand {
    text-align: center;
}

.login-logo-img {
    width: 160px;
    margin-bottom: 12px;
}

.login-heading {
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    color: var(--text);
    font-weight: 400;
    margin-bottom: 6px;
}

.login-sub {
    font-size: 14px;
    color: var(--text-2);
    letter-spacing: 0.3px;
}

.login-box {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    box-shadow: none;
}

.login-box-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 16px;
}

.btn-google-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #fff;
    color: #333;
    border: none;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
    box-shadow: none;
}

.btn-google-login:hover {
    background: #f5f5f5;
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-google-login:active {
    transform: scale(0.98);
}

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    font-size: 12px;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.login-divider span {
    color: var(--text-3);
    white-space: nowrap;
}

.btn-crear-cuenta {
    background: var(--accent-soft) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: none !important;
}

.btn-crear-cuenta:hover {
    background: var(--accent-bg) !important;
    border-color: var(--text-2) !important;
}

.login-disclaimer {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    margin-top: 14px;
}

/* ============================================================
   ADMIN LAYOUT
============================================================ */
#view-admin {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* ---- Sidebar ---- */
.sidebar {
    width: 240px;
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    left: -240px;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: 150;
    transition: left 0.3s ease;
}

.sidebar.open {
    left: 0;
}

.sidebar-top {
    padding: 24px 20px 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.sidebar-logo-mark {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
}

.sidebar-logo-img {
    width: 90px;
    display: block;
}

.sidebar-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.sidebar-tenant {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: 0.5px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 16px;
}

.sidebar-nav {
    flex: 1;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-color);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    position: relative;
}

.nav-link:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.nav-link.active {
    background: var(--nav-active-bg);
    color: var(--nav-active-color);
}

.nav-link.disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.sidebar-bottom {
    padding: 16px 12px 24px;
    border-top: 1px solid var(--border);
}

.sidebar-user-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.sidebar-user-btn:hover {
    background: var(--accent-bg);
}

.sidebar-user-btn svg {
    color: var(--text-3);
    flex-shrink: 0;
}

.sidebar-user-info-inner {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.sidebar-user-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.sidebar-tenant-small {
    font-size: 10px;
    color: var(--accent);
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-avatar-initials {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--avatar-bg);
    color: var(--avatar-color);
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

.user-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---- Main ---- */
.admin-main {
    flex: 1;
    padding: 32px;
    padding-top: 88px;
    overflow-y: auto;
    background: transparent;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.admin-tab {
    display: block;
}

.admin-tab.hidden {
    display: none;
}

.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.admin-page-title {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    font-weight: 400;
    color: var(--text);
    margin-bottom: 4px;
}

.admin-page-sub {
    font-size: 14px;
    color: var(--text-2);
}

/* ---- Botones ---- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    border-radius: 10px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.btn-primary:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-ghost {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.btn-ghost:hover {
    background: var(--accent-bg);
    border-color: var(--text-3);
    color: var(--text);
}

.btn-danger {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.btn-danger:hover {
    opacity: 0.85;
}

/* ---- Filter bar ---- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 42px;
    flex: 1;
    min-width: 200px;
    box-shadow: var(--shadow);
}

.search-wrap svg {
    color: var(--text-3);
    flex-shrink: 0;
}

.search-wrap input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text);
    width: 100%;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.search-wrap input::placeholder {
    color: var(--text-3);
}

.filter-toggles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.filter-pill.active {
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-bg);
}

.filter-pill:hover:not(.active) {
    border-color: var(--text-2);
    color: var(--text);
}

/* Chip "Menús" del recetario (toggle independiente) */
.filter-menu-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.filter-menu-pill:hover:not(.active) {
    border-color: var(--text-2);
    color: var(--text);
}

.filter-menu-pill.active {
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-bg);
}

/* Badge "MENÚ" (neutro) en recetario y ficha */
.tag-menu {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 6px;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
    background: rgba(125, 125, 125, .18);
    color: var(--text-2);
    border: 1px solid var(--border);
}

.rec-hero-tt .tag-menu {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    border-color: rgba(255, 255, 255, .25);
}

/* Toggle "Es un menú" (paso 1 del modal de receta) */
.es-menu-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.es-menu-toggle input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.es-menu-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.es-menu-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

.es-menu-sub {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.35;
}

/* Estación de cocina en la receta: chips de una sola elección (mismo aire que los de tareas). */
/* Bloque "Estación de cocina" (paso 1): sección propia con aire arriba y abajo y
   un separador sutil, para que no quede pegado al selector R.G.E/S.R.E ni al checkbox. */
#f-estacion-cocina-wrap {
    margin-top: 18px;
    margin-bottom: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    gap: 10px;   /* separación label ↔ fila de chips (form-group es flex column) */
}

.est-coc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;   /* horizontal y vertical (para el wrap en varias filas) */
}

.est-coc-chip {
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 99px;
    padding: 5px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
}

.est-coc-chip:hover {
    color: var(--text);
}

.est-coc-chip.active {
    background: var(--orange);
    border-color: var(--orange);
    color: #1a1a1a;
}

/* S.R.E "se vende suelta": interruptor + formato de venta (cantidad + precio) + cartelito de food cost. */
.sre-vende-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin-top: 4px;
}

.sre-vende-toggle input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.sre-vende-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sre-vende-title {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

.sre-vende-sub {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.35;
}

/* Caja del formato de venta: solo agrupa (borde suave). El fondo queda transparente para que
   los inputs (accent-soft, iguales a f-precio-venta) resalten como campos, no se fundan. */
#sre-venta-campos {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
}

.sre-fmt-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}

.sre-fmt-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-2);
}

.sre-fmt-lbl {
    color: var(--text-2);
}

.sre-fmt-uni {
    font-weight: 600;
    color: var(--text);
}

/* Inputs del formato: heredan el look de .input-app (fondo/borde/radio/tipografía de Brillat);
   acá solo se les fija el ancho. */
.sre-fmt-cant {
    width: 92px;
    text-align: center;
}

.sre-fmt-precio {
    width: 130px;
}

.sre-fc-cartel {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
}

.sre-fc-cartel:empty {
    display: none;
}

/* Checkbox "Platos de menú del día" (Guardar como receta · Presupuestos).
   El selector con [type=checkbox] gana a ".presu-ficha input { width:100% }". */
.pgr-menu-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 0;
}

.pgr-menu-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    min-width: 16px;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
    cursor: pointer;
}

.pgr-menu-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.pgr-menu-txt label {
    font-size: 13.5px;
    color: var(--text);
    cursor: pointer;
}

.pgr-menu-help {
    font-size: 11.5px;
    color: var(--text-3);
    line-height: 1.35;
}

/* ---- Stats ---- */
.stats-row {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 100px;
    box-shadow: none;
}

.stat-num {
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* BENTO 13 · P5.1 — la celda de AVISO del panel de ingredientes (completitud por
   debajo del 100% y precios desactualizados). Es el mismo naranja que usaba la
   linea de resumen con .warn: cambia el envase, no el color. */
.stat-card.stat-warn .stat-num {
    color: var(--orange);
}

/* ---- Tabla ---- */
.recipes-table-wrap {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
}

.recipes-table {
    width: 100%;
    border-collapse: collapse;
}

.recipes-table thead {
    background: var(--accent-soft);
}

.recipes-table th {
    padding: 13px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
}

.recipes-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    vertical-align: middle;
    color: var(--text);
}

.recipes-table tbody tr:last-child td {
    border-bottom: none;
}

/* TANDA EQUIPO EN TARJETAS — el hover solo donde hay un MOUSE.
   En una pantalla táctil el navegador deja el :hover pegado después del toque:
   tocabas una fila y la iluminación se quedaba hasta tocar otra cosa. Con la
   consulta puesta, en el celu no se ilumina nada; en PC queda igual que siempre. */
@media (hover: hover) {
    .recipes-table tbody tr:hover td {
        background: var(--accent-soft);
    }
}

.td-nombre {
    font-weight: 600;
    color: var(--text) !important;
}

.td-rend {
    color: var(--text-2);
    font-size: 13px;
}

/* ── COMPLETITUD ── */

/* ── VARIACIÓN DE PRECIO ── */
.costo-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.variacion-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
}

.var-sube {
    background: rgba(192, 57, 43, 0.10);
    color: #c0392b;
}

.var-baja {
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
}

.var-nuevo {
    background: var(--accent-bg);
    color: var(--text-3);
}

/* ── ALERTA DESACTUALIZADO ── */

/* ── TABLA INGREDIENTES — scroll horizontal ── */
#tab-ingredientes .recipes-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#tab-ingredientes .recipes-table {
    width: 100%;
    min-width: 600px;
}

#tab-ingredientes .recipes-table th,
#tab-ingredientes .recipes-table td {
    white-space: nowrap;
}

#tab-ingredientes .td-actions {
    min-width: 160px;
    vertical-align: middle;
}

#tab-ingredientes .td-actions .btn-action {
    vertical-align: middle;
}

/* ── TABS CATÁLOGO INGREDIENTES ── */
.catalogo-tabs {
    display: flex;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 4px;
    width: fit-content;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

.catalogo-tab {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    background: transparent;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    gap: 7px;
}

.catalogo-tab.active {
    background: var(--btn-bg);
    color: var(--btn-color);
}

.tab-count {
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
}

.catalogo-tab.active .tab-count {
    background: rgba(255, 255, 255, 0.2);
}

.catalogo-tab:not(.active) .tab-count {
    background: var(--accent-bg);
    color: var(--text-2);
}

.tag-estacion {
    background: var(--tag-est-bg);
    color: var(--tag-est-color);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.tag-tipo {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

.tag-tipo-production {
    background: var(--tag-prod-bg);
    color: var(--tag-prod-color);
}

.tag-tipo-dispatch {
    background: var(--tag-desp-bg);
    color: var(--tag-desp-color);
}

.td-actions {
    vertical-align: middle;
    white-space: nowrap;
}

.td-actions .btn-action+.btn-action {
    margin-left: 8px;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 7px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
    background: transparent;
    color: var(--text-2);
}

.btn-edit:hover {
    background: var(--accent-bg);
    color: var(--text);
    border-color: var(--text-2);
}

.btn-delete:hover {
    background: var(--red-light);
    color: var(--red);
    border-color: var(--red);
}

/* ---- Empty & Loading ---- */
.empty-state {
    padding: 60px 20px;
    text-align: center;
}

.empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.empty-title {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    color: var(--text);
    margin-bottom: 6px;
}

.empty-sub {
    font-size: 14px;
    color: var(--text-2);
    margin-bottom: 20px;
}

.loading-state {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-2);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--text);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

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

/* ── VISTA DETALLE INGREDIENTE ── */
.detalle-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.back-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-2);
    flex-shrink: 0;
    transition: all 0.15s;
}

.back-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.detalle-header-text {
    flex: 1;
}

.detalle-title {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.1;
}

.detalle-sub {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.detalle-actions {
    display: flex;
    gap: 8px;
}

.btn-editar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
}

.btn-editar:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.btn-eliminar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid transparent;
    background: var(--red-light);
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

/* COSTO HERO */
.costo-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.costo-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.costo-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--text-2);
    letter-spacing: 0.5px;
}

.costo-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 10px;
}

.costo-valor {
    font-family: 'DM Serif Display', serif;
    font-size: 42px;
    font-weight: 400;
    color: var(--text);
    line-height: 1;
    margin-bottom: 6px;
}

.costo-unit {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 5px;
    font-weight: 500;
}

.costo-card.neto {
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text);
}

.costo-card.neto .costo-badge {
    background: var(--btn-bg);
    color: var(--btn-color);
}

.costo-card.neto .costo-label {
    color: var(--text-3) !important;
}

.costo-card.neto .costo-valor {
    color: var(--text) !important;
}

.costo-card.neto .costo-unit {
    color: var(--text-2) !important;
}

/* SECCIÓN GENÉRICA DETALLE */
.det-section {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin-bottom: 12px;
}

.det-section-header {
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}

.det-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-2);
}

.det-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
}

.det-info-row:last-child {
    border-bottom: none;
}

.det-info-label {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 500;
}

.det-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

/* FORMATO COMPRA */
.formato-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.formato-item {
    padding: 18px 20px;
    border-right: 1px solid var(--border);
    text-align: center;
}

.formato-item:last-child {
    border-right: none;
}

.formato-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
}

.formato-valor {
    font-family: 'DM Serif Display', serif;
    font-size: 24px;
    color: var(--text);
    line-height: 1;
}

.formato-unit {
    font-size: 11px;
    color: var(--text-2);
    margin-top: 4px;
    font-weight: 500;
}

/* MERMA BAR DETALLE */
.merma-bar-wrap-det {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.merma-bar-labels-det {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 8px;
    font-weight: 600;
}

.merma-bar-det {
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}

.merma-bar-fill-det {
    height: 100%;
    background: var(--btn-bg);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.merma-bar-sub-det {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
}

/* HISTORIAL */
.historial-header-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 80px;
    align-items: center;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
}

.historial-row-det {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 80px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    gap: 8px;
}

.historial-row-det:last-child {
    border-bottom: none;
}

.historial-fecha {
    color: var(--text-2);
    font-weight: 500;
}

.historial-precio {
    font-weight: 600;
    color: var(--text);
}

.historial-costo-det {
    color: var(--text-2);
}

.ver-mas-btn {
    width: 100%;
    padding: 12px;
    background: transparent;
    border: none;
    border-top: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
}

.ver-mas-btn:hover {
    background: var(--accent-soft);
    color: var(--text);
}

/* NOTAS DETALLE */
.notas-body-det {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.7;
    font-style: italic;
}

@media (max-width: 600px) {
    .costo-hero {
        grid-template-columns: 1fr;
    }

    .formato-grid {
        grid-template-columns: 1fr;
    }

    .formato-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Mobile: NO se ocultan (antes display:none dejaba sin editar desde el celu).
       Se muestran compactos: solo el ícono (texto oculto con font-size:0), redondos,
       área táctil 40px, pegados a la derecha del header. */
    .detalle-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .detalle-actions .btn-editar,
    .detalle-actions .btn-eliminar {
        font-size: 0;
        gap: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        justify-content: center;
    }

    .detalle-actions .btn-editar svg,
    .detalle-actions .btn-eliminar svg {
        width: 16px;
        height: 16px;
    }

    .historial-row-det {
        grid-template-columns: 1fr 1fr 60px;
    }

    .historial-row-det .historial-costo-det {
        display: none;
    }

    .historial-header-row {
        grid-template-columns: 1fr 1fr 60px;
    }

    .historial-header-row span:nth-child(3) {
        display: none;
    }
}

/* ============================================================
   MODALES
============================================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.modal-box {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 680px;
    box-shadow: var(--shadow-md);
    margin: auto;
    animation: modalIn 0.2s ease;
}

.modal-box-sm {
    max-width: 400px;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
}

.modal-title {
    font-family: 'DM Serif Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--text);
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-2);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}

.modal-close:hover {
    color: var(--text);
}

.modal-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
}

/* ---- Forms ---- */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.form-row-3 {
    display: grid;
    grid-template-columns: 80px 1fr 1fr;
    gap: 12px;
}

@media (max-width: 500px) {
    .form-row-3 {
        grid-template-columns: 1fr;
    }

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

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.form-group input,
.form-group select,
.form-group textarea {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--text-2);
    background: var(--card);
}

/* Input suelto (fuera de .form-group) con el mismo diseño que el resto de la app. */
.input-app {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

.input-app:focus {
    border-color: var(--text-2);
    background: var(--card);
}

.prodform-search .input-app {
    width: 100%;
}

/* ---- Tiempo real de cocina (junto al campo de tiempo y en la ficha) ---- */
.tiempo-real {
    min-height: 42px;
    display: flex;
    align-items: center;
    font-size: 12.5px;
    line-height: 1.35;
}

/* Campo "Tiempo total (min)" 100% empírico, solo lectura */
.te-tag {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-3);
    text-transform: none;
    letter-spacing: 0;
}

.te-field {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--accent-soft);
}

.te-field.te-empty {
    border-style: dashed;
}

.te-val {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.te-ph {
    color: var(--text-3);
    font-size: 12.5px;
    line-height: 1.35;
}

.te-count {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 5px;
}

.te-count:empty {
    display: none;
}

.tr-muted {
    color: var(--text-3);
}

.tr-muted strong {
    color: var(--text-2);
    font-weight: 600;
}

.tr-info {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 13px;
    padding: 0 2px;
    line-height: 1;
}

.tr-info:hover {
    color: var(--text);
}

.fr-tiempo-real {
    font-size: 12.5px;
    color: var(--text-3);
    margin: 2px 0 4px;
}

.fr-tiempo-real:empty {
    display: none;
}

.tiempo-tip {
    position: fixed;
    z-index: 1600;
    background: var(--bg-2, #1c1c1c);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-2);
    animation: modalIn .15s ease;
}

[data-theme="dark"] .tiempo-tip {
    background: #232323;
}

.presu-ficha input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    color-scheme: light;
    transition: border-color 0.15s, background 0.15s;
}

.presu-ficha input:focus {
    border-color: var(--text-2);
    background: var(--card);
}

[data-theme="dark"] .presu-ficha input {
    color-scheme: dark;
}

#fam-nueva {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
}

#fam-nueva:focus {
    border-color: var(--text-2);
    background: var(--card);
}

/* Opciones de selects legibles en tema oscuro */
.form-group select option,
.ing-nuevo-row select option,
select option {
    background: var(--bg);
    color: var(--text);
}

.form-group textarea {
    resize: vertical;
    line-height: 1.5;
}

.form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.btn-add-row {
    background: var(--accent-bg);
    color: var(--text);
    border: none;
    border-radius: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.btn-add-row:hover {
    background: var(--btn-bg);
    color: var(--btn-color);
}

.btn-remove-row {
    width: 26px;
    height: 26px;
    background: var(--red-light);
    color: var(--red);
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-top: 2px;
}

.btn-remove-row:hover {
    background: var(--red);
    color: #fff;
}

/* ============================================================
   MÓDULO INGREDIENTES — CALCULADORA DE MERMA
============================================================ */
.merma-card {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.merma-card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.merma-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.merma-card-sub {
    font-size: 11px;
    color: var(--text-2);
}

.merma-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.merma-inputs .form-group {
    flex: 1;
    min-width: 100px;
}

.merma-arrow {
    font-size: 20px;
    color: var(--text-3);
    padding-bottom: 10px;
    flex-shrink: 0;
}

.merma-resultado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    padding: 10px 16px;
    min-width: 80px;
    flex-shrink: 0;
}

.merma-pct {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
}

.merma-label {
    font-size: 10px;
    color: var(--text-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ── PREVIEW COSTOS MODAL ── */
#costos-preview {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 18px;
}

.preview-costo-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 10px 14px;
}

.preview-costo-label {
    font-size: 10px;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.preview-costo-valor {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    color: var(--text);
    line-height: 1;
}

.preview-costo-unit {
    font-size: 10px;
    color: var(--text-3);
    margin-top: 3px;
}

/* ============================================================
   VISTA PÚBLICA
============================================================ */
#view-public {
    background: var(--bg);
    overflow-y: auto;
    height: 100%;
}

.pub-screen {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 24px 20px 80px;
    min-height: 100vh;
}

/* El hub se adapta y ocupa todo el ancho disponible del dispositivo; las demás
   pantallas quedan angostas. El bento va A PANTALLA COMPLETA: sin tope de ancho,
   con los márgenes laterales que la página ya usa (el padding de .pub-screen). */
#pub-home {
    max-width: none;
}

/* EL HUB YA NO SE ENCIERRA EN UNA PANTALLA. Acá vivía el candado de alto fijo del
   desktop (.admin-main a 100dvh con overflow:hidden y la grilla en filas de 1fr) que
   hacía entrar el collage sin scroll global. El bento tiene filas de 150px POR
   ESPECIFICACIÓN —cinco filas + la barra del turno + el panel no entran en 900px de
   alto— y con overflow:hidden las últimas filas quedaban CORTADAS. Así que el HUB
   scrollea como cualquier otra pantalla, igual que ya lo hacía en mobile y en el
   rango intermedio. */
.pub-hero {
    text-align: center;
    padding: 60px 0 40px;
}

.pub-logo-mark {
    font-family: 'DM Serif Display', serif;
    font-size: 64px;
    color: var(--text);
    line-height: 1;
    margin-bottom: 8px;
}

.pub-brand {
    font-size: 14px;
    letter-spacing: 6px;
    color: var(--text-2);
    font-weight: 700;
    margin-bottom: 8px;
}

.pub-tagline {
    font-size: 16px;
    color: var(--text);
    font-weight: 500;
}

.pub-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pub-secondary-row {
    display: flex;
    gap: 10px;
}

.pub-version {
    text-align: center;
    font-size: 11px;
    color: var(--text-3);
    letter-spacing: 1px;
    margin-top: 8px;
}

.pub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    margin-bottom: 20px;
    position: relative;
}

.pub-back-btn {
    width: 44px;
    height: 44px;
    background: var(--card);
    border: 1px solid var(--card-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    border-radius: 50%;
    transition: all 0.15s;
}

.pub-back-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.pub-header-title {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.pub-search-wrap {
    position: relative;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 0 14px;
    height: 50px;
    margin-bottom: 18px;
    box-shadow: none;
}

.pub-search-wrap input {
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    outline: none;
    flex: 1;
    font-family: 'DM Sans', sans-serif;
}

.pub-search-wrap input::placeholder {
    color: var(--text-3);
    font-weight: 400;
}

.pub-search-clear {
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--text-3);
    cursor: pointer;
    padding: 0 4px;
}

.pub-search-dropdown {
    position: absolute;
    top: 58px;
    left: 0;
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    max-height: 55vh;
    overflow-y: auto;
    z-index: 3000;
}

.pub-result-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s;
}

.pub-result-item:last-child {
    border-bottom: none;
}

.pub-result-item:hover {
    background: var(--accent-soft);
}

.pub-res-nombre {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
}

.pub-res-estacion {
    font-size: 12px;
    color: var(--text-2);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.pub-no-results {
    padding: 20px;
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
}

.pub-toggle {
    display: flex;
    position: relative;
    background: var(--bg);
    border: 1px solid var(--card-border);
    border-radius: 50px;
    padding: 4px;
    height: 48px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.pub-toggle-indicator {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: var(--btn-bg);
    border-radius: 40px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
    z-index: 1;
}

.pub-toggle-indicator.right {
    transform: translateX(100%);
}

.pub-toggle-btn {
    flex: 1;
    z-index: 2;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-2);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s;
    font-family: 'DM Sans', sans-serif;
}

.pub-toggle-btn.active {
    color: var(--btn-color);
}

.pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.pub-station-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 46%),
        rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: none;
    border-radius: var(--radius-lg);
    padding: 20px;
    cursor: pointer;
    transition: transform 0.18s, border-color 0.18s;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pub-station-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.22);
}

.pub-station-card:active {
    transform: scale(0.98);
}

.pub-station-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.pub-station-ico {
    font-size: 30px;
    color: var(--text);
    line-height: 1;
}

.pub-station-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    margin-top: 16px;
    line-height: 1.2;
}

.pub-station-count {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-2);
    white-space: nowrap;
}

.pub-estacion-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 0 14px;
    height: 44px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.pub-estacion-search-wrap input {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text);
    outline: none;
    flex: 1;
    font-family: 'DM Sans', sans-serif;
}

.pub-recipe-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    transition: all 0.15s;
    box-shadow: var(--shadow);
}

.pub-recipe-item:hover {
    border-color: var(--text-2);
    background: var(--accent-bg);
}

.pub-recipe-item svg {
    color: var(--text-2);
    flex-shrink: 0;
}

.pub-main-foto {
    width: 100%;
    aspect-ratio: 4/3;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
    cursor: pointer;
    box-shadow: none;
}

.pub-main-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pub-receta-body {
    padding-bottom: 40px;
}

.pub-scale-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    gap: 12px;
}

.pub-section-title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}

.pub-scale-box {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pub-scale-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    text-align: right;
    line-height: 1.2;
}

.pub-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    height: 36px;
    background: var(--card);
}

.pub-step-btn {
    width: 34px;
    height: 100%;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 2px;
    transition: opacity 0.15s;
}

.pub-step-btn:active {
    opacity: 0.7;
}

#pub-scale-input {
    width: 48px;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 15px;
    color: var(--text);
    font-weight: 600;
    outline: none;
    -moz-appearance: textfield;
    font-family: 'DM Sans', sans-serif;
}

#pub-scale-input::-webkit-outer-spin-button,
#pub-scale-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.pub-unit {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-2);
    white-space: nowrap;
}

.pub-reset-btn {
    background: transparent;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px;
}

.pub-reset-btn:hover {
    color: var(--text);
}

.pub-badge {
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
}

.pub-ing-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
    margin-bottom: 20px;
}

.pub-ing-table td {
    padding: 12px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
}

.pub-ing-table td:first-child {
    font-weight: 600;
    border-left: 3px solid transparent;
    border-radius: 8px 0 0 8px;
}

.pub-ing-table tr:hover td:first-child {
    border-left-color: var(--text-2);
}

.pub-ing-table td:last-child {
    text-align: right;
    color: var(--text-2);
    font-weight: 700;
    border-radius: 0 8px 8px 0;
}

.pub-yield-banner {
    background: var(--btn-bg);
    color: var(--btn-color);
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.pub-yield-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    opacity: 0.7;
    text-transform: uppercase;
}

.pub-yield-val {
    font-size: 14px;
    font-weight: 700;
    opacity: 0.9;
}

.pub-pasos-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pub-paso-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px;
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow);
}

.pub-paso-num {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   TOAST
============================================================ */
#toast-container {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9998;
    pointer-events: none;
}

.toast {
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow-md);
    animation: toastIn 0.3s ease;
    transition: opacity 0.4s;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
}

/* OFFLINE N1 — el cartel de la señal: fijo arriba, sólido y plano (doctrina), por encima de todo
   menos los toasts. Sin señal lleva un puntito gris; reconectando, el lima de lo vivo. */
.red-cartel {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9997;
    max-width: calc(100vw - 32px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 99px;
    background: #171A1F;
    border: 1px solid #2E3540;
    color: #F0F2F5;
    font: 700 12.5px/1.3 'DM Sans', sans-serif;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
    pointer-events: none;
    text-align: center;
}
.red-cartel.hidden { display: none; }
.red-cartel::before {
    content: '';
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #8C94A0;
}
.red-cartel[data-estado="reconectando"]::before { background: #C9C05A; }

.toast-ok {
    background: rgba(30, 30, 30, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.toast-error {
    background: rgba(192, 57, 43, 0.85);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   SELECT ROL EQUIPO
============================================================ */
.select-rol {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: var(--accent-bg);
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    outline: none;
    appearance: auto;
}

.select-rol:focus {
    border-color: var(--text-2);
    background: var(--card);
}

.select-rol:disabled {
    opacity: 0.5;
    cursor: default;
    background: transparent;
    border-color: transparent;
}

/* ---- Modal link invitación ---- */
.link-inv-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
}

.link-inv-texto {
    font-size: 13px;
    color: var(--text);
    word-break: break-all;
    flex: 1;
    font-weight: 500;
}

.btn-copy {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    border-radius: 7px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'DM Sans', sans-serif;
    flex-shrink: 0;
}

.btn-copy:hover {
    opacity: 0.85;
}

.link-copiado-msg {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    margin-top: 8px;
    text-align: center;
}

/* ============================================================
   ONBOARDING
============================================================ */
.onb-wrap {
    min-height: 100dvh;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.onb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
}

.onb-logo {
    font-family: 'DM Serif Display', serif;
    font-size: 32px;
    color: var(--text);
}

.onb-progress {
    display: flex;
    gap: 8px;
}

.onb-step {
    width: 32px;
    height: 4px;
    background: var(--border);
    border-radius: 2px;
    transition: background 0.3s;
}

.onb-step.active {
    background: var(--text);
}

.onb-screen {
    display: none;
    flex: 1;
}

.onb-screen.active {
    display: flex;
    flex-direction: column;
}

.onb-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 32px calc(24px + env(safe-area-inset-bottom)) 32px;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.onb-step-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--text-2);
    margin-bottom: 16px;
}

.onb-title {
    font-family: 'DM Serif Display', serif;
    font-size: 36px;
    color: var(--text);
    font-weight: 400;
    margin-bottom: 12px;
    line-height: 1.2;
}

.onb-sub {
    font-size: 16px;
    color: var(--text-2);
    margin-bottom: 40px;
    line-height: 1.5;
}

.onb-input {
    width: 100%;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    outline: none;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s;
    position: relative;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
}

.onb-input:focus {
    border-color: var(--text-2);
}

.onb-input::placeholder {
    color: var(--text-3);
    font-weight: 400;
}

.onb-preview {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 10px;
    font-weight: 600;
    min-height: 20px;
}

.onb-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
}

.onb-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 28px;
}

.onb-card span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
}

.onb-card:hover {
    border-color: var(--text-2);
    background: var(--accent-bg);
}

.onb-card.selected {
    border-color: var(--text);
    background: var(--accent-bg);
}

.onb-card.selected span {
    color: var(--text);
}

.onb-stepper-box {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 24px 32px;
    width: fit-content;
}

.onb-step-btn {
    width: 48px;
    height: 48px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    border-radius: 12px;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}

.onb-step-btn:active {
    opacity: 0.7;
}

.onb-stepper-val {
    font-size: 48px;
    font-weight: 700;
    color: var(--text);
    min-width: 60px;
    text-align: center;
    font-family: 'DM Serif Display', serif;
}

.onb-logo-upload {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    background: var(--card);
    border: 2px dashed var(--border);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.onb-logo-upload:hover {
    border-color: var(--text-2);
    background: var(--accent-bg);
}

.onb-logo-placeholder {
    text-align: center;
    font-size: 40px;
}

.onb-logo-placeholder p {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 8px;
    font-weight: 500;
}

.onb-logo-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 16px;
    padding: 16px;
}

.onb-final {
    align-items: center;
    text-align: center;
}

.onb-confetti {
    font-size: 64px;
    margin-bottom: 16px;
}

.onb-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

.onb-check-item {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    text-align: left;
}

.onb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px calc(24px + env(safe-area-inset-bottom)) 32px;
    border-top: 1px solid var(--border);
}

.onb-btn-back {
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    padding: 12px 0;
}

.onb-btn-back:hover {
    color: var(--text);
}

.onb-btn-next {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    border-radius: 12px;
    padding: 16px 32px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.2s;
}

.onb-btn-next:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

.onb-btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 768px) {
    .onb-title {
        font-size: 28px;
    }

    .onb-content {
        padding: 32px 20px calc(24px + env(safe-area-inset-bottom)) 20px;
    }

    .onb-header {
        padding: 20px;
    }

    .onb-footer {
        padding: 20px 20px calc(24px + env(safe-area-inset-bottom)) 20px;
    }

    .onb-cards {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
}

/* ============================================================
   PERFIL SETUP
============================================================ */
.perfil-avatar-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}

.perfil-avatar-preview {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    z-index: 1;
    overflow: hidden;
    font-size: 32px;
    font-weight: 700;
    color: var(--gold);
}

.perfil-avatar-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    opacity: 0;
    transition: opacity 0.2s;
}

.perfil-avatar-preview:hover .perfil-avatar-overlay {
    opacity: 1;
}

/* ============================================================
   MENÚ PERFIL FLOTANTE
============================================================ */
.menu-perfil {
    position: fixed;
    bottom: 16px;
    left: 12px;
    width: 260px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    z-index: 200;
    overflow: hidden;
    animation: modalIn 0.15s ease;
}

.menu-perfil-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.menu-perfil-avatar-img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.menu-perfil-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.menu-perfil-nombre {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-perfil-email {
    font-size: 11px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-perfil-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.menu-perfil-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
}

.menu-perfil-item:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.menu-perfil-item svg {
    flex-shrink: 0;
}

.menu-perfil-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.menu-perfil-tenant {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.menu-perfil-tenant-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--avatar-bg);
    color: var(--avatar-color);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-perfil-tenant-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.menu-perfil-tenant-nombre {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-perfil-tenant-plan {
    font-size: 10px;
    color: var(--text-2);
    font-weight: 600;
    letter-spacing: 0.3px;
}

.menu-perfil-danger-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--red-light);
    border: 1px solid rgba(192, 57, 43, 0.2);
    color: var(--red);
    border-radius: 7px;
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
}

.menu-perfil-danger-btn:hover {
    background: var(--red);
    color: #fff;
}

/* ============================================================
   CONFIGURACIÓN — TARJETAS
============================================================ */
#tab-configuracion .admin-topbar {
    max-width: 860px;
    margin: 0 auto 28px;
}

.config-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

.config-card-new {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
}

.config-card-header-new {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--accent-soft);
}

.config-card-icon-new {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.config-card-icon-new.green {
    background: var(--accent-bg);
}

.config-card-icon-new.gold {
    background: var(--accent-bg);
}

.config-card-icon-new.blue {
    background: var(--accent-bg);
}

.config-card-icon-new.gray {
    background: var(--accent-soft);
}

.config-card-title-new {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

.config-card-sub-new {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}

.config-card-body-new {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.config-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.config-avatar-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--text);
    font-size: 22px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
}

/* Aca vivian las reglas del PIN de acceso rapido (.config-pin-*): el PIN se fue
   entero. Los estilos .pin-modal-* y .pin-key se QUEDAN: los usan los teclados
   del codigo de borrado. */

/* Aca vivian las tarjetas Claro / Oscuro / Sistema de la tarjeta "Apariencia"
   (.config-appearance-row, .config-appearance-opt, .ap-icon, .ap-label). Con un
   solo tema no hay nada que elegir: se fueron del html y se van de aca. */

.config-logo-preview {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    overflow: hidden;
    flex-shrink: 0;
}

.config-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.config-plan-badge {
    background: var(--accent-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================
   TECLADO NUMÉRICO — UNO SOLO PARA TODA LA APP
   Lo usan los dos teclados del código de borrado: el que se le pide al cocinero
   y el que el admin configura en Ajustes de cocina (el del PIN personal se fue).
   Comparten estas mismas clases a propósito: se toca acá y cambian los dos.
   Teclas redondas grandes (dedo de cocina), puntitos pegados arriba que se pintan
   naranja al tipear, y el ⌫ discreto (gris, no rojo: borrar un dígito no es un peligro).
============================================================ */
.pin-modal-dots {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 14px;
}

.pin-modal-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--border-2);
    background: transparent;
    transition: all .18s ease;
}

.pin-modal-dot.filled {
    background: var(--orange);
    border-color: var(--orange);
    transform: scale(1.12);
}

.pin-modal-teclado {
    display: grid;
    grid-template-columns: repeat(3, 68px);
    gap: 12px;
    justify-content: center;
    margin: 0 auto 14px;
}

.pin-key {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: background .12s ease, transform .12s ease;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.pin-key:active {
    background: var(--accent-bg);
    transform: scale(0.94);
}

.pin-key-empty {
    background: transparent;
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* ⌫ — misma tecla que las otras, sin fondo ni color de alarma. */
.pin-key-del {
    font-size: 19px;
    background: transparent;
    border-color: transparent;
    color: var(--text-2);
}

.pin-key-del:active {
    background: var(--accent-bg);
    color: var(--text);
}

/* Pie del modal del código: "Quitar el código" es un texto chico a la izquierda
   (no compite con Cerrar, que es la salida normal). */
.pin-foot {
    justify-content: space-between;
    align-items: center;
}

.pin-quitar {
    background: none;
    border: 0;
    padding: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    color: var(--text-3);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .15s;
}

.pin-quitar:hover {
    color: var(--red);
}

/* ============================================================
   BANNER DE ACTUALIZACIÓN
============================================================ */
.update-banner {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: 16px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: var(--shadow-md);
    z-index: 9997;
    animation: toastIn 0.3s ease;
    white-space: nowrap;
    max-width: 90vw;
}

.update-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.update-banner-text span:first-child {
    font-size: 14px;
    font-weight: 700;
}

.update-banner-sub {
    font-size: 12px;
    opacity: 0.7;
}

.update-banner-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--btn-color);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
    flex-shrink: 0;
}

.update-banner-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ── Selector nivel RGE / SRE ── */
.nivel-selector-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    margin-top: 14px;
}

.nivel-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 14px 18px;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--accent-soft);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
    text-align: left;
}

.nivel-btn:hover {
    border-color: var(--text-2);
    background: var(--accent-bg);
}

.nivel-btn-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-3);
}

.nivel-btn-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.nivel-btn-sub {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 400;
}

/* RGE activo */
.nivel-btn-rge.active {
    border-color: var(--text);
    background: var(--accent-bg);
}

.nivel-btn-rge.active .nivel-btn-tag {
    color: var(--text);
}

/* SRE activo */
.nivel-btn-sre.active {
    border-color: var(--orange);
    background: var(--orange-light);
}

.nivel-btn-sre.active .nivel-btn-tag {
    color: var(--orange);
}

.nivel-btn-sre.active .nivel-btn-label {
    color: var(--text);
}

/* ============================================================
   MODAL RECETA — NUEVO
============================================================ */
.modal-receta-box {
    max-width: 960px;
}

.modal-receta-box .form-row-3 select {
    min-width: 0;
    width: 100%;
}

/* Fila tipo: Tipo más ancho, Rendimiento y Unidad más angostos */

/* ── Tabla ingredientes nuevo modal ── */
.ing-nuevo-header {
    display: grid;
    grid-template-columns: 1.6fr 1fr 60px 55px 100px 65px 85px 85px 24px;
    gap: 8px;
    padding: 6px 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}

.ing-nuevo-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 60px 55px 100px 65px 85px 85px 24px;
    gap: 8px;
    margin-bottom: 6px;
    align-items: start;
    position: relative;
}

@media (max-width: 600px) {
    .ing-nuevo-header {
        display: none;
    }

    /* Cada fila = tarjeta; los campos fluyen con wrap */
    .ing-nuevo-row {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 10px;
        margin-bottom: 10px;
    }

    /* Nombre del ingrediente y forma/corte: cada uno en su propia línea
       (ambos están envueltos en .ing-autocomplete-wrap) */
    .ing-nuevo-row .ing-autocomplete-wrap {
        flex: 1 1 100%;
    }

    .ing-nuevo-row .ing-corte-input {
        flex: 1 1 100%;
    }

    /* Última línea: cantidad (crece) + unidad + merma + borrar */
    .ing-nuevo-row .ing-cant-neta-input {
        flex: 1 1 auto;
        min-width: 70px;
    }

    .ing-nuevo-row .ing-col-unidad {
        flex: 0 0 auto;
        display: block;
        width: 56px;
    }

    .ing-nuevo-row .merma-col-wrap {
        flex: 0 0 auto;
    }

    .ing-nuevo-row .btn-remove-row {
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* En móvil no mostramos estas tres mientras se carga */
    .ing-nuevo-row .ing-col-cant-neta,
    .ing-nuevo-row .ing-col-costo,
    .ing-nuevo-row .ing-col-importe {
        display: none;
    }

    /* Las subrecetas/recetas no llevan forma ni merma: colapsamos esos
       campos (sirve tanto al elegirlas como al editar una receta guardada)
       para que queden como nombre + cantidad + unidad + x, sin huecos. */
    .ing-nuevo-row:has(.ing-search-input[data-tipo="subreceta"]) .ing-autocomplete-wrap:has(> .ing-corte-input),
    .ing-nuevo-row:has(.ing-search-input[data-tipo="receta"]) .ing-autocomplete-wrap:has(> .ing-corte-input),
    .ing-nuevo-row:has(.ing-search-input[data-tipo="subreceta"]) .merma-col-wrap,
    .ing-nuevo-row:has(.ing-search-input[data-tipo="receta"]) .merma-col-wrap {
        display: none;
    }
}

.ing-nuevo-row input,
.ing-nuevo-row select {
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 13px;
    background: var(--accent-soft);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    outline: none;
    width: 100%;
}

/* "Vas a comprar: X kg (merma Y%)" — aclaración calculada, en gris, bajo la fila.
   Ocupa toda la fila del grid (wrapea a una 2ª línea). Vacía = no molesta. */
.ing-compra-hint {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--text-3);
    margin: -2px 0 2px;
    line-height: 1.3;
}
.ing-compra-hint:empty { display: none; }
@media (max-width: 600px) {
    .ing-compra-hint { flex: 1 1 100%; margin: 0; }
}

.ing-nuevo-row input:focus,
.ing-nuevo-row select:focus {
    border-color: var(--text-2);
    background: var(--card);
}

.ing-nuevo-row input[type=number] {
    -moz-appearance: textfield;
}

.ing-nuevo-row input[type=number]::-webkit-outer-spin-button,
.ing-nuevo-row input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* Autocomplete ingrediente */
.ing-autocomplete-wrap {
    position: relative;
    width: 100%;
}

/* Procesamiento (corte) por ingrediente: columna propia, mismo look que el resto de la fila.
   El borde/alto/tema lo hereda de `.ing-nuevo-row input`. */
.ing-corte-input {
    align-self: start;
}

.ing-autocomplete-dropdown {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 1500;
    max-height: 260px;
    overflow-y: auto;
    min-width: 220px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.ing-autocomplete-dropdown::-webkit-scrollbar {
    width: 4px;
}

.ing-autocomplete-dropdown::-webkit-scrollbar-track {
    background: transparent;
}

.ing-autocomplete-dropdown::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

.ing-autocomplete-item {
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ing-autocomplete-item:last-child {
    border-bottom: none;
}

.ing-autocomplete-item:hover {
    background: var(--accent-soft);
}

.ing-autocomplete-nombre {
    font-weight: 600;
    color: var(--text);
}

.ing-autocomplete-meta {
    font-size: 11px;
    color: var(--text-3);
}

.ing-autocomplete-costo {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
}

.ing-autocomplete-empty {
    padding: 12px;
    font-size: 13px;
    color: var(--text-3);
    text-align: center;
    font-style: italic;
}

.presu-crear-acciones {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
}

.presu-crear-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 14px;
    cursor: pointer;
    transition: background 0.12s;
}

.presu-crear-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.presu-crear-btn:hover {
    background: var(--accent-soft);
}

/* Badge tipo ingrediente/subreceta */
.ing-tipo-badge {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    margin-left: 6px;
}

.ing-tipo-ing {
    background: var(--accent-bg);
    color: var(--text-2);
}

.ing-tipo-sre {
    background: rgba(230, 126, 34, 0.12);
    color: var(--orange);
}

/* Costo e importe calculados */
.ing-col-cant-neta {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-3);
    text-align: right;
    padding-right: 4px;
}

.ing-col-costo,
.ing-col-importe {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    text-align: right;
    padding-right: 4px;
}

.ing-col-importe {
    color: var(--text);
}

/* ── Bloque de costos (nuevo) ── */
.costo-block {
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin: 12px 0;
}

.costo-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.costo-kpi {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.costo-kpi-mid {
    opacity: 0.92;
}

.costo-kpi-fc {
    background: rgba(29, 158, 117, 0.08);
    border-color: rgba(29, 158, 117, 0.25);
}

.costo-kpi-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--text-3);
    text-transform: uppercase;
}

.costo-kpi-fc .costo-kpi-label {
    color: #0F6E56;
}

.costo-kpi-valor {
    font-family: 'DM Serif Display', serif;
    font-size: 24px;
    color: var(--text);
    line-height: 1;
}

.costo-kpi-mid .costo-kpi-valor {
    color: var(--text-2);
}

.costo-kpi-fc .costo-kpi-valor {
    color: #1D9E75;
}

.costo-kpi-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 2px;
}

.costo-kpi-fc .costo-kpi-sub {
    color: #0F6E56;
    opacity: 0.85;
}

.costo-breakdown-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

.costo-breakdown-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}

.costo-breakdown-hint {
    font-size: 11px;
    color: var(--text-3);
}

.costo-breakdown-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.costo-breakdown-vacio {
    font-size: 12px;
    color: var(--text-3);
    text-align: center;
    margin: 6px 0 4px;
}

.costo-bar-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.costo-bar-row-head {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.costo-bar-row-nombre {
    color: var(--text);
}

.costo-bar-row-monto {
    color: var(--text-2);
}

.costo-bar-track {
    background: var(--card);
    border: 1px solid var(--border);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
}

.costo-bar-fill {
    height: 100%;
    border-radius: 4px 0 0 4px;
    transition: width 0.25s ease;
}

.costo-bar-c1 {
    background: #534AB7;
}

.costo-bar-c2 {
    background: #7F77DD;
}

.costo-bar-c3 {
    background: #AFA9EC;
}

.costo-bar-c4 {
    background: #CECBF6;
}

.costo-bar-c5 {
    background: #B4B2A9;
}

.presu-comp {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.presu-comp-h {
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 14px;
}

.presu-comp-sub {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
}

.presu-comp-sec {
    cursor: pointer;
    padding: 4px 0;
    border-radius: 8px;
}

.presu-comp-sec:hover .costo-bar-row-nombre {
    color: var(--text);
}

.presu-comp-chev {
    display: inline-block;
    transition: transform .15s;
    color: var(--text-3);
    margin-right: 6px;
    font-size: 11px;
}

.presu-comp-sec.abierto .presu-comp-chev {
    transform: rotate(90deg);
}

.presu-comp-items {
    padding: 6px 0 6px 14px;
    border-left: 2px solid var(--border);
    margin: 2px 0 10px 5px;
}

.presu-comp-items .costo-bar-row {
    margin-bottom: 8px;
}

.costo-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 12px;
    color: var(--text-2);
    flex-wrap: wrap;
}

.costo-footer strong {
    color: var(--text);
    font-weight: 600;
}

.food-cost-ok {
    color: #27ae60 !important;
}

.food-cost-warning {
    color: var(--orange) !important;
}

.food-cost-danger {
    color: var(--red) !important;
}

@media (max-width: 600px) {
    .costo-kpis {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   MOBILE NAVIGATION
============================================================ */
.mobile-header {
    display: flex;
    background: var(--sidebar-bg);
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 56px;
}

.mobile-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
}

.mobile-hamburger span {
    width: 20px;
    height: 2px;
    background: var(--text);
    border-radius: 1px;
    display: block;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-logo-mark {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    color: var(--accent);
    line-height: 1;
}

.sidebar-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.mobile-tenant-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--avatar-bg);
    color: var(--avatar-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    flex-shrink: 0;
}

.mobile-tenant-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    z-index: 149;
}

.sidebar-backdrop.show {
    display: block;
}

/* ===== Barra de navegación mobile: fija abajo, con burbuja animada ===== */
/* Solo mobile (≤640px): en desktop la barra no existe (display:none). */
.mbar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;                /* sobre los apartados de cocina (120), debajo del sidebar (150) y los modales de edición (1000+) */
    height: calc(56px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--mbar-bg);
    border-top: 1px solid var(--mbar-border);
    align-items: stretch;
}

.mbar-tab {
    flex: 1 1 0;                 /* reparte el espacio entre los tabs visibles */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--mbar-ink);
    font-family: 'DM Sans', sans-serif;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.mbar-ico { display: flex; }
.mbar-ico svg { width: 20px; height: 20px; display: block; }
.mbar-lbl { font-size: 10px; line-height: 1; letter-spacing: .2px; }

/* Barra por rol: los tabs-índice del cocinero (data-mbrole="coc") están ocultos por
   defecto; en el rol cocinero se muestran y se apagan los tabs de sección ("normal"). */
.mbar-tab[data-mbrole="coc"] { display: none; }
body.rol-cocinero .mbar-tab[data-mbrole="normal"] { display: none; }
body.rol-cocinero .mbar-tab[data-mbrole="coc"] { display: flex; }

/* Al tocar un tab-índice, el bloque se alinea arriba SIN quedar bajo el header fijo
   (56px) ni pegado a la barra: scroll-margin resuelve el offset sin medir a mano. */
body.rol-cocinero .hub-wcard,
body.rol-cocinero .hub-bt {
    scroll-margin-top: 68px;
    scroll-margin-bottom: 76px;
}

/* El Pase de turno es solo admin/chef: su bloque del HUB no existe para el cocinero. */
body.rol-cocinero .hub-wcard[data-w="pase"],
body.rol-cocinero .hub-bt[data-w="pase"] {
    display: none;
}

/* Configuración recortada para el cocinero: solo lo personal (Tours, Mi perfil, Apariencia,
   Idioma). Se esconden las tarjetas del negocio. !important porque cargarConfiguracion les
   fija el display inline; el desktop y los otros roles no cambian (scoped a rol-cocinero). */
body.rol-cocinero #config-card-restaurante-readonly,
body.rol-cocinero #config-card-restaurante-edit,
body.rol-cocinero #config-card-ajustes {
    display: none !important;
}

/* El tab que queda BAJO la burbuja esconde solo su ícono (la burbuja lo representa),
   pero la ETIQUETA sigue visible debajo, reforzando dónde estás. */
.mbar-tab.mbar-tab-under .mbar-ico { opacity: 0; }

/* --- La burbuja: UN solo elemento, posicionado por transform:translateX (lo setea el JS). --- */
.mbar-bubble {
    position: absolute;
    top: -14px;                 /* sobresale 14px por encima de la barra */
    left: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--mbar-bubble);
    color: var(--mbar-bubble-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    /* Física de resorte: pasa apenas de largo y asienta ("bolita pesada que flota"). */
    transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.mbar-bubble--on { opacity: 1; }
/* Deep-link/refresh y resize: posicionar sin animación de entrada. */
.mbar-bubble.mbar-instant { transition: none; }

.mbar-bubble-ico { display: flex; transition: opacity 150ms ease; }
.mbar-bubble-ico svg { width: 22px; height: 22px; display: block; }

/* ============================================================
   RESPONSIVE MOBILE
============================================================ */
@media (max-width: 640px) {
    .mbar {
        display: flex;
    }

    /* El contenido gana espacio abajo para no quedar tapado por la barra.
       `body` sube la especificidad para ganarle al shorthand `padding` del bloque ≤768px. */
    body .admin-main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    /* Cocinero: el menú de perfil cuelga del botón FF/avatar del HUB (no del sidebar de
       escritorio). La posición exacta la ancla el JS (toggleMenuPerfilAnclado) al abrir;
       acá solo neutralizamos el anclaje de escritorio (abajo-izquierda) por si acaso. */
    body.rol-cocinero .menu-perfil {
        bottom: auto;
        left: auto;
    }
}

@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }

    .admin-layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 150;
        transition: left 0.3s ease;
        width: 240px;
        height: 100vh;
    }

    .sidebar.open {
        left: 0;
    }

    .sidebar-bottom {
        padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .admin-main {
        padding: 80px 16px 80px;
        width: 100%;
    }

    .admin-topbar {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .admin-topbar .btn-primary {
        width: 100%;
        justify-content: center;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrap {
        min-width: unset;
    }

    #recipes-table th:nth-child(4),
    #recipes-table td:nth-child(4) {
        display: none;
    }

    .td-actions {
        flex-direction: column;
        gap: 4px;
    }

    .stats-row {
        gap: 8px;
    }

    .stat-card {
        min-width: 70px;
        padding: 12px 14px;
    }

    /* (Las 6 reglas de #equipo-table murieron con la tabla: ver TANDA EQUIPO EN
       TARJETAS. La grilla de tarjetas ya es de una columna en el celu.) */

    .costo-hero {
        grid-template-columns: 1fr;
    }

    .formato-grid {
        grid-template-columns: 1fr;
    }

    .formato-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    /* Mobile/tablet: NO se ocultan (antes display:none dejaba sin editar desde el celu).
       Se muestran compactos: solo el ícono (texto oculto con font-size:0), redondos,
       área táctil 40px, pegados a la derecha del header. */
    .detalle-actions {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .detalle-actions .btn-editar,
    .detalle-actions .btn-eliminar {
        font-size: 0;
        gap: 0;
        padding: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        justify-content: center;
    }

    .detalle-actions .btn-editar svg,
    .detalle-actions .btn-eliminar svg {
        width: 16px;
        height: 16px;
    }
}

/* ── SELECTOR DE MERMA (B / P / M) ── */
.merma-selector {
    display: flex;
    gap: 4px;
    align-items: center;
}

.merma-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.merma-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.merma-btn-base.active {
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-bg);
}

.merma-btn-promedio.active {
    background: #2980b9;
    color: #fff;
    border-color: #2980b9;
}

.merma-btn-manual.active {
    background: var(--orange);
    color: #fff;
    border-color: var(--orange);
}

/* ── POPOVER MERMA MANUAL ── */
.merma-popover {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--shadow-md);
    z-index: 300;
    flex-direction: column;
    gap: 8px;
    min-width: 200px;
}

.merma-popover.visible {
    display: flex;
}

.merma-popover-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.merma-popover-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.merma-pop-input {
    width: 54px;
    font-size: 13px;
    text-align: center;
    padding: 5px 6px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    outline: none;
}

.merma-pop-result {
    font-size: 12px;
    font-weight: 700;
    color: var(--orange);
    background: var(--orange-light);
    padding: 3px 8px;
    border-radius: 5px;
    min-width: 44px;
    text-align: center;
}

.merma-pop-confirm {
    width: 100%;
    padding: 7px;
    border-radius: 6px;
    border: none;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.merma-pop-confirm:hover {
    opacity: 0.85;
}

.merma-col-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.ing-col-cant-neta {
    text-align: right;
    padding-top: 5px;
}

.ing-col-costo {
    text-align: right;
    padding-top: 5px;
}

.ing-col-importe {
    text-align: right;
    padding-top: 5px;
}

.merma-col-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.merma-badge-m {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    background: var(--orange-light);
    color: var(--orange);
    text-align: right;
}

/* ── HISTORIAL DE MERMA ── */
.merma-hist-summary {
    padding: 14px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
}

.merma-hist-promedio {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.merma-hist-pct {
    font-family: 'DM Serif Display', serif;
    font-size: 28px;
    color: var(--orange);
    line-height: 1;
}

.merma-hist-label {
    font-size: 11px;
    color: var(--text-2);
    font-weight: 500;
}

.merma-hist-count {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 600;
}

.merma-hist-header {
    display: grid;
    grid-template-columns: 100px 1fr 90px 70px 130px 44px;
    gap: 8px;
    padding: 9px 20px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.merma-hist-row {
    display: grid;
    grid-template-columns: 100px 1fr 90px 70px 130px 44px;
    gap: 8px;
    padding: 11px 20px;
    border-bottom: 1px solid var(--border);
    align-items: center;
    font-size: 13px;
}

.merma-hist-row:last-child {
    border-bottom: none;
}

.merma-toggle {
    width: 34px;
    height: 20px;
    border-radius: 11px;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    background: rgba(128, 128, 128, 0.35);
    transition: background 0.2s ease;
    justify-self: end;
}

.merma-toggle .knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: none;
    transition: left 0.2s ease;
}

.merma-toggle.on {
    background: #2ea36b;
}

.merma-toggle.on .knob {
    left: 16px;
}

/* ====== FICHA RÁPIDA DE RECETA ====== */
#recipes-table tbody tr {
    cursor: pointer;
}

.fr-costos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
    align-items: stretch;
}

.fr-costo {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 12px 14px;
}

/* Mini-medidor de food cost vs objetivo */
.fc-meter {
    margin-top: 9px;
}

.fc-meter-bar {
    position: relative;
    display: flex;
    height: 7px;
    border-radius: 999px;
    overflow: visible;
    background: var(--accent-soft);
}

.fc-meter-seg {
    height: 100%;
    display: block;
}

.fc-meter-seg:first-of-type {
    border-radius: 999px 0 0 999px;
}

.fc-meter-seg:last-of-type {
    border-radius: 0 999px 999px 0;
}

/* Marca vertical del objetivo */
.fc-meter-obj {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    margin-left: -1px;
    background: var(--text);
    border-radius: 1px;
}

/* Triángulo que indica dónde cae el food cost */
.fc-meter-ind {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
    font-size: 15px;
    line-height: 1;
}

.fc-meter-lbl {
    display: block;
    margin-top: 11px;
    font-size: 10.5px;
    font-weight: 600;
}

.fr-costo-lbl {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    margin-bottom: 5px;
}

.fr-costo-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.fr-sub-tag {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 5px;
    margin-left: 6px;
}

.fr-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.fr-act-btn {
    flex: 1 1 28%;
    min-width: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--card-border);
    background: var(--card);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}

.fr-act-edit {
    background: var(--orange);
    color: #fff;
    border-color: transparent;
}

.fr-act-edit:hover {
    filter: brightness(1.08);
}

.fr-act-arch:hover {
    color: #e74c3c;
    border-color: #e74c3c;
}

.fr-comp {
    margin-bottom: 22px;
}

.fr-comp-tt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
    margin-bottom: 12px;
}

.fr-comp-row {
    margin-bottom: 11px;
}

.fr-comp-head {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 5px;
}

.fr-comp-head strong {
    color: var(--text);
    font-weight: 700;
}

.fr-comp-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--card);
    overflow: hidden;
}

.fr-comp-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--orange);
}

.presu-secfoot-carta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding: 12px 14px 4px;
    align-items: end;
}

.presu-plato-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.presu-plato-stat>span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-3);
}

.presu-plato-stat>b {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.presu-plato-stat b.presu-ok {
    color: #27ae60;
}

.presu-plato-stat b.presu-warn {
    color: #e67e22;
}

.presu-plato-stat b.presu-bad {
    color: #e74c3c;
}

.presu-plato-precio,
.presu-plato-fc {
    width: 100%;
    background: var(--bg-2);
    border: 1px solid var(--border-2);
    border-radius: 8px;
    padding: 6px 9px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
}

.presu-plato-precio:focus,
.presu-plato-fc:focus {
    outline: none;
    border-color: var(--orange);
}

.presu-plato-fc.presu-ok {
    color: #27ae60;
}

.presu-plato-fc.presu-warn {
    color: #e67e22;
}

.presu-plato-fc.presu-bad {
    color: #e74c3c;
}

/* ====== Guardar como receta (selector R.G.E / S.R.E) ====== */
#pgr-list .pgr-group {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    padding: 10px 12px;
    margin-bottom: 10px;
}

#pgr-list .pgr-group.off {
    opacity: .45;
}

#pgr-list .pgr-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

#pgr-list .pgr-cbx {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--bg);
    flex: none;
    cursor: pointer;
}

#pgr-list .pgr-cbx svg {
    width: 12px;
    height: 12px;
}

#pgr-list .pgr-cbx.off {
    background: transparent;
    border: 1px solid var(--border-2);
}

#pgr-list .pgr-cbx.sm {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

#pgr-list .pgr-cbx.sm svg {
    width: 11px;
    height: 11px;
}

#pgr-list .pgr-meta {
    flex: 1;
    min-width: 0;
}

#pgr-list .pgr-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#pgr-list .pgr-tag {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 1px;
}

#pgr-list .pgr-seg {
    display: flex;
    background: var(--accent-soft);
    border-radius: 8px;
    padding: 2px;
    flex: none;
}

#pgr-list .pgr-seg button {
    font-size: 11.5px;
    padding: 5px 11px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    white-space: nowrap;
}

#pgr-list .pgr-seg button.on {
    background: var(--bg);
    color: var(--text);
    font-weight: 600;
    border: 1px solid var(--border-2);
}

#pgr-list .pgr-rend {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--text-2);
}

#pgr-list .pgr-rend input,
#pgr-list .pgr-rend select {
    height: 32px;
    background: var(--accent-soft);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 8px;
    font-size: 12.5px;
    font-family: 'DM Sans', sans-serif;
    color-scheme: light;
}

#pgr-list .pgr-rend input {
    width: 62px;
}

#pgr-list .pgr-rend select {
    cursor: pointer;
}

[data-theme="dark"] #pgr-list .pgr-rend input,
[data-theme="dark"] #pgr-list .pgr-rend select {
    color-scheme: dark;
}

#pgr-list .pgr-subs {
    margin-top: 10px;
    padding-left: 14px;
    border-left: 2px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#pgr-list .pgr-subrow {
    display: flex;
    align-items: center;
    gap: 9px;
}

#pgr-list .pgr-subrow .pgr-name {
    font-size: 12.5px;
    font-weight: 500;
}

.merma-hist-fecha {
    color: var(--text-2);
    font-weight: 500;
}

.merma-hist-receta {
    color: var(--text);
    font-weight: 500;
}

.merma-hist-proceso {
    font-size: 12px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merma-hist-valor {
    font-weight: 700;
    color: var(--orange);
    text-align: right;
}

.estado-activa,
.estado-archivada,
.estado-huerfana {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
}

.estado-activa {
    background: rgba(39, 174, 96, 0.12);
    color: #27ae60;
}

.estado-archivada {
    background: var(--orange-light);
    color: var(--orange);
}

.estado-huerfana {
    background: var(--accent-bg);
    color: var(--text-3);
}

.merma-hist-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
    font-style: italic;
}

/* ============================================================
   UPLOADER FOTO INGREDIENTE
============================================================ */

/* Thumbnail foto ingrediente en tabla */

/* Foto grande en vista detalle ingrediente */
.det-foto {
    display: none !important;
    width: 80px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .det-foto {
        width: 56px;
        height: 56px;
    }
}

/* ============================================================
   GALERÍA DE FOTOS RECETA
============================================================ */
.receta-galeria-wrap {
    padding: 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
}

.receta-galeria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.receta-galeria-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 1px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.receta-galeria-count {
    background: var(--accent-bg);
    color: var(--text-2);
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.receta-galeria-hint {
    font-size: 11px;
    color: var(--text-3);
    font-style: italic;
}

/* ===== Popover de ayuda (glass) — componente reusable (ⓘ del editor) ===== */
.help-i {
    background: none;
    border: none;
    padding: 0;
    margin: 0 0 0 4px;
    cursor: pointer;
    color: inherit;
    opacity: .55;
    line-height: 0;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .15s;
}

.help-i:hover,
.help-i.is-active {
    opacity: 1;
}

.help-i .ti {
    font-size: 15px;
}

.help-pop {
    position: fixed;
    z-index: 3500;
    width: min(300px, calc(100vw - 28px));
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    padding: 14px 16px 16px;
    display: none;
    color: var(--text);
}

.help-pop.open {
    display: block;
}

.help-pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.help-pop-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.help-pop-close {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--text-3);
    line-height: 0;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
}

.help-pop-close:hover {
    color: var(--text);
}

.help-pop-close .ti {
    font-size: 17px;
}

.help-pop-body {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
}

.help-pop-body p {
    margin: 0 0 6px;
}

.help-pop-body p:last-child {
    margin-bottom: 0;
}

.help-pop-ej {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-2);
    line-height: 1.6;
}

.help-pop-ej b {
    font-weight: 500;
}

.receta-galeria-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    transition: background 0.15s, border-color 0.15s;
    border-radius: 8px;
    padding: 4px;
    margin: -4px;
}

.galeria-add.drop-target {
    background: rgba(243, 156, 18, 0.08);
    color: #f39c12;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.6), 0 0 24px rgba(243, 156, 18, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

@media (max-width: 600px) {
    .receta-galeria-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.galeria-item {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    transition: all 0.2s;
    border: 1px solid var(--border);
    background: var(--card);
}

.galeria-item:hover {
    transform: translateY(-2px);
    border-color: var(--border-2);
    box-shadow: none;
}

.galeria-item:active {
    cursor: grabbing;
}

.galeria-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
}

.galeria-item.drag-over {
    background: rgba(243, 156, 18, 0.08);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(243, 156, 18, 0.6), 0 0 24px rgba(243, 156, 18, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.galeria-item-principal {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(230, 126, 34, 0.95);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
}

.galeria-item-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}

.galeria-item:hover .galeria-item-remove {
    opacity: 1;
}

.galeria-add {
    aspect-ratio: 1;
    border-radius: 8px;
    background: var(--accent-soft);
    border: 1px dashed var(--border-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-3);
    cursor: pointer;
    transition: all 0.15s;
    font-size: 10px;
    font-weight: 600;
}

.galeria-add:hover {
    background: var(--accent-bg);
    color: var(--text-2);
    border-color: var(--text-3);
}

/* ============================================================
   VIDEO RECETA
============================================================ */
.receta-video-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 12px;
    position: relative;
}

.receta-video-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(230, 126, 34, 0.1);
    border: 1px solid rgba(230, 126, 34, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--orange);
    flex-shrink: 0;
}

.receta-video-info {
    flex: 1;
    min-width: 0;
}

.receta-video-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text);
}

.receta-video-sub {
    font-size: 11px;
    color: var(--text-3);
}

.receta-video-btn {
    padding: 8px 14px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
    flex-shrink: 0;
}

.receta-video-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
    border-color: var(--border-2);
}

.receta-video-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.receta-video-btn-quitar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--red);
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    align-self: center;
}

.receta-video-btn-quitar:hover {
    background: rgba(231, 76, 60, 0.15);
    border-color: var(--red);
}

/* Estado con video cargado */
.receta-video-wrap.con-video .receta-video-icon {
    background: rgba(39, 174, 96, 0.15);
    border-color: rgba(39, 174, 96, 0.3);
    color: var(--green);
}

/* Barra de progreso de compresión */
.receta-video-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: var(--orange);
    border-radius: 0 0 var(--radius) var(--radius);
    transition: width 0.3s ease;
    width: 0;
}

/* ============================================================
   MODAL RECETA — ACORDEÓN 4 PASOS
============================================================ */

/* ── Barra de progreso (4 pills) ── */
.receta-progress-track {
    padding: 16px 24px;
    background: var(--accent-soft);
    border-bottom: 1px solid var(--border);
}

.receta-progress-pills {
    display: flex;
    gap: 10px;
}

.receta-pill-wrap {
    flex: 1;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 0.2s;
}

.receta-pill-wrap:hover {
    opacity: 0.85;
}

.receta-pill-bar {
    height: 3px;
    background: var(--border);
    border-radius: 100px;
    transition: all 0.3s;
}

.receta-pill-wrap.complete .receta-pill-bar {
    background: var(--green-check);
}

.receta-pill-wrap.active .receta-pill-bar {
    background: var(--orange);
}

.receta-pill-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    transition: color 0.2s;
}

.receta-pill-wrap.complete .receta-pill-meta {
    color: var(--green-check);
}

.receta-pill-wrap.active .receta-pill-meta {
    color: var(--orange);
}

.receta-pill-num {
    font-weight: 700;
}

.receta-pill-wrap.complete .receta-pill-num::before {
    content: '✓ ';
}

.receta-pill-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Verde para los pasos completos (consistente claro/oscuro) */
:root {
    --green-check: #27ae60;
}

[data-theme="dark"] {
    --green-check: #2ecc71;
}

/* ── Body del modal con scroll ── */
.receta-acordeon-body {
    padding: 18px 22px;
    max-height: 64vh;
    overflow-y: auto;
    display: block;
}

/* ── Paso del acordeón ── */
.accordion-step {
    margin-bottom: 11px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.25s, background 0.25s;
}

.accordion-step:hover {
    border-color: var(--text-3);
}

.accordion-step.active {
    background: var(--accent-soft);
    border-color: rgba(230, 126, 34, 0.3);
}

.accordion-step.complete {
    border-color: rgba(39, 174, 96, 0.25);
}

.accordion-step.complete.active {
    background: var(--accent-soft);
    border-color: rgba(39, 174, 96, 0.4);
}

.accordion-header {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    user-select: none;
}

.acc-step-num {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-3);
    flex-shrink: 0;
    transition: all 0.25s;
    position: relative;
}

.accordion-step.active .acc-step-num {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

.accordion-step.complete .acc-step-num {
    background: var(--green-soft-check);
    border-color: rgba(39, 174, 96, 0.35);
    color: transparent;
}

.accordion-step.complete .acc-step-num::after {
    content: '';
    position: absolute;
    width: 13px;
    height: 7px;
    border-left: 2.5px solid var(--green-check);
    border-bottom: 2.5px solid var(--green-check);
    transform: rotate(-45deg) translateY(-1.5px);
}

:root {
    --green-soft-check: rgba(39, 174, 96, 0.14);
}

.acc-step-info {
    flex: 1;
    min-width: 0;
}

.acc-step-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--text);
}

.acc-step-preview {
    font-size: 12.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.accordion-step.complete .acc-step-preview {
    color: var(--green-check);
    opacity: 0.85;
}

.acc-step-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--border);
    background: var(--accent-bg);
    color: var(--text-3);
    flex-shrink: 0;
    white-space: nowrap;
}

.accordion-step.active .acc-step-tag {
    color: var(--orange);
    border-color: rgba(230, 126, 34, 0.35);
    background: var(--orange-light);
}

.accordion-step.complete .acc-step-tag {
    color: var(--green-check);
    border-color: rgba(39, 174, 96, 0.3);
    background: var(--green-soft-check);
}

.acc-step-arrow {
    color: var(--text-3);
    transition: all 0.3s;
    flex-shrink: 0;
}

.accordion-step.active .acc-step-arrow {
    color: var(--text);
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-step.active .accordion-content {
    max-height: 4000px;
}

.acc-content-inner {
    padding: 4px 20px 22px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    padding-top: 20px;
}

/* ── Hint "siguiente paso" dentro de cada paso ── */
.next-step-hint {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.next-step-label {
    font-size: 12.5px;
    color: var(--text-3);
}

.btn-next-step {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
    flex-shrink: 0;
    font-family: 'DM Sans', sans-serif;
}

.btn-next-step:hover {
    opacity: 0.88;
}

/* ── Footer con navegación ── */
.receta-acordeon-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--accent-soft);
}

.footer-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

.btn-nav {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.btn-nav:hover:not(:disabled) {
    background: var(--accent-bg);
    color: var(--text);
}

.btn-nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.btn-nav-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    margin: 0 10px;
}

/* ── Montos: fuente del sistema, números alineados ── */
.receta-costo-valor,
.ing-col-importe,
.ing-col-costo,
.ing-col-cant-neta {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .receta-progress-track {
        padding: 14px 18px;
    }

    .receta-pill-label {
        font-size: 8.5px;
    }

    .receta-acordeon-body {
        padding: 14px;
    }

    .accordion-header {
        padding: 16px;
        gap: 14px;
    }

    .acc-step-num {
        width: 34px;
        height: 34px;
    }

    .acc-step-tag {
        display: none;
    }

    .acc-content-inner {
        padding: 4px 16px 18px;
        padding-top: 18px;
    }

    .next-step-hint {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-next-step {
        justify-content: center;
    }
}

/* ── Ocultar flechas (spinners) de TODOS los inputs numéricos ── */
input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Barra de scroll general: fina, redondeada y sin flechas ── */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* ============================================================
   SELECT CUSTOM — desplegable propio
============================================================ */
.cs-wrap {
    position: relative;
    width: 100%;
    font-family: 'DM Sans', sans-serif;
}

.cs-wrap select.cs-native {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

.cs-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.cs-trigger:hover {
    border-color: var(--text-3);
}

.cs-wrap.open .cs-trigger {
    border-color: var(--text-2);
    background: var(--card);
}

.cs-trigger.cs-placeholder {
    color: var(--text-3);
}

.cs-arrow {
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform 0.25s;
}

.cs-wrap.open .cs-arrow {
    transform: rotate(180deg);
    color: var(--text);
}

.cs-panel {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    z-index: 3000;
    max-height: 240px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4px;
    display: none;
}

.cs-panel.cs-panel-open {
    display: block;
}

.cs-search {
    width: calc(100% + 8px);
    box-sizing: border-box;
    margin: -4px -4px 4px -4px;
    padding: 10px 12px;
    background: var(--bg);
    border: none;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    position: sticky;
    top: -4px;
    z-index: 1;
}

.cs-option:hover {
    background: var(--accent-soft);
}

.cs-option.cs-selected {
    background: var(--accent-bg);
    color: var(--text);
    font-weight: 700;
}

.cs-option.cs-selected::after {
    content: '✓';
    float: right;
    color: var(--orange);
    font-weight: 700;
}

/* ── Scrollbars discretos (panel select + cuerpo del modal) ── */
.cs-panel::-webkit-scrollbar,
.receta-acordeon-body::-webkit-scrollbar {
    width: 6px;
}

.cs-panel::-webkit-scrollbar-track,
.receta-acordeon-body::-webkit-scrollbar-track {
    background: transparent;
}

.cs-panel::-webkit-scrollbar-thumb,
.receta-acordeon-body::-webkit-scrollbar-thumb {
    background: var(--text-3);
    border-radius: 100px;
}

.cs-panel::-webkit-scrollbar-thumb:hover,
.receta-acordeon-body::-webkit-scrollbar-thumb:hover {
    background: var(--text-2);
}

.cs-panel,
.receta-acordeon-body {
    scrollbar-width: thin;
    scrollbar-color: var(--text-3) transparent;
}

#fam-lista::-webkit-scrollbar {
    width: 6px;
}

#fam-lista::-webkit-scrollbar-track {
    background: transparent;
}

#fam-lista::-webkit-scrollbar-thumb {
    background: var(--text-3);
    border-radius: 100px;
}

#fam-lista::-webkit-scrollbar-thumb:hover {
    background: var(--text-2);
}

#fam-lista {
    scrollbar-width: thin;
    scrollbar-color: var(--text-3) transparent;
}

/* ============================================================
   IA PROCEDIMIENTO — botones de modo + cards de pasos
============================================================ */
.ia-proc-wrap {
    margin-top: 14px;
}

.ia-proc-modos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.ia-modo-btn {
    font-size: 13px;
    padding: 7px 15px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-2);
    cursor: pointer;
    transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
}

.ia-modo-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.ia-modo-btn.active {
    background: var(--orange-light);
    border-color: var(--orange);
    color: var(--orange);
    font-weight: 600;
}

.ia-modo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ia-proc-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 14px;
    font-style: italic;
}

.ia-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

#ia-cards {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ia-card {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 11px 13px;
}

.ia-card-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--orange-light);
    color: var(--orange);
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    font-family: 'DM Sans', sans-serif;
}

/* Más específica que ".form-group textarea" para que no le pisen resize/border/padding */
.ia-card textarea.ia-card-txt {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    overflow: hidden;
    resize: none;
    border: none;
    background: transparent;
    padding: 4px 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.5;
    font-family: 'DM Sans', sans-serif;
    outline: none;
    min-height: 24px;
}

.ia-card-acc {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-shrink: 0;
}

.ia-card-mini {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: all 0.15s;
}

.ia-card-mini:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.ia-card-mini.del:hover {
    background: var(--red-light);
    color: var(--red);
    border-color: var(--red);
}

.ia-add-manual {
    width: 100%;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-3);
    font-size: 13px;
    padding: 10px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
}

.ia-add-manual:hover {
    background: var(--accent-soft);
    color: var(--text-2);
}

/* ── Divisor y header de procedimiento ── */
.proc-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 0 4px;
}

.proc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 12px;
    flex-wrap: wrap;
}

.proc-titulo {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.proc-ia-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--card);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px 4px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.claude-logo {
    display: block;
    flex-shrink: 0;
}

.proc-ia-modos-top {
    margin-bottom: 10px;
}

/* Animación cuando la IA trabaja */
.proc-ia-pill.working {
    background: rgba(216, 119, 87, 0.12);
    border-color: rgba(216, 119, 87, 0.35);
    color: #D97757;
}

.claude-logo {
    transform-origin: center;
}

.proc-ia-pill.working .claude-logo {
    animation: claudeBreath 1.4s ease-in-out infinite;
}

@keyframes claudeBreath {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.18);
        opacity: 0.7;
    }
}

/* ============================================================
   HUB — COMMAND CENTER (vista pública / home)
============================================================ */

.hub-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 9px 12px 9px 18px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hub-strip-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
}

/* Middot entre datos de la barra ("turno … · 12 cubiertos hoy"). El de cubiertos
   se oculta solo cuando ese item está display:none (sin menú). */
.hub-strip-item+.hub-strip-item::before {
    content: '·';
    color: var(--text-3);
    margin-right: 4px;
}

/* La rosca se pega a la derecha de la barra informativa. */
.hub-strip .hub-gear-btn {
    margin-left: auto;
}

.hub-strip-item b {
    color: var(--text);
    font-weight: 600;
}

/* Pill del HUB sin turno vigente (sin turnos cargados o fuera de toda franja): apagado. */
.hub-strip-item b.hub-turno-off {
    color: var(--text-3);
    font-weight: 500;
}

.hub-strip-item svg {
    color: var(--text-3);
}

.hub-strip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-check);
    flex-shrink: 0;
}

/* Los items del grid pueden encogerse: evita que un hijo ancho fuerce scroll lateral. */

.hub-w {
    border-radius: 18px;
    padding: 18px;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 46%),
        rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px rgba(0, 0, 0, .26);
}

.hub-w:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.hub-w:active {
    transform: scale(.99);
}

.hub-w-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hub-w-tw {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.hub-w-ico {
    flex-shrink: 0;
    color: var(--text-2);
}

.hub-w-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.hub-soon {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    letter-spacing: .5px;
    background: rgba(125, 125, 125, .15);
    color: var(--text-3);
    text-transform: uppercase;
}

.hub-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .1);
    color: var(--text-2);
}

/* Widgets en glass neutro. Antes cada uno tenia su color (teal/red/amber...);
   ahora todos son vidrio. El color solo sobrevive en acentos funcionales
   (punto verde del turno, puntos rojos del 86, checks verdes). No tocar el HTML:
   las clases de color siguen existiendo, pero ya no pintan de color. */
.hub-teal,
.hub-purple,
.hub-amber,
.hub-coral,
.hub-red,
.hub-blue,
.hub-neutral {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 46%),
        rgba(255, 255, 255, 0.085);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px rgba(0, 0, 0, .26);
}

.hub-teal .hub-w-ico,
.hub-purple .hub-w-ico,
.hub-amber .hub-w-ico,
.hub-coral .hub-w-ico,
.hub-red .hub-w-ico,
.hub-blue .hub-w-ico,
.hub-neutral .hub-w-ico {
    color: var(--text-2);
}

.hub-teal .hub-w-title,
.hub-purple .hub-w-title,
.hub-amber .hub-w-title,
.hub-coral .hub-w-title,
.hub-red .hub-w-title,
.hub-blue .hub-w-title,
.hub-neutral .hub-w-title {
    color: var(--text);
}

.hub-teal .hub-badge,
.hub-purple .hub-badge,
.hub-amber .hub-badge,
.hub-coral .hub-badge,
.hub-red .hub-badge,
.hub-blue .hub-badge {
    background: rgba(255, 255, 255, .1);
    color: var(--text-2);
}

.hub-prod {
    grid-row: span 1;
    display: flex;
    flex-direction: column;
}

/* La fila del hero estira ambas tarjetas a la misma altura. */

.hub-ord {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
}

.hub-ord+.hub-ord {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.hub-ord-check {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 2px solid rgba(255, 255, 255, .25);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--text-2);
}

.hub-ord-check.hub-done {
    background: rgba(255, 255, 255, .08);
    border-color: transparent;
    color: #e9e6dd;
}

/* Nombre + tag de estado en la misma fila (el tag va junto al nombre, no a la derecha). */
.hub-ord-top {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.hub-ord-n {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hub-ord-done .hub-ord-n {
    text-decoration: line-through;
    color: var(--text-3);
}

.hub-ord-q {
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-ord-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Código de colores del HUB: neutro (pendiente) · verde (listo/ok) · dorado (consolidado).
   El naranja de "en curso" lo pone .prod-tag-curso. */

.hub-ord-tag.hub-ok {
    color: var(--green-check);
}

.hub-ord-tag.hub-gold {
    color: #f5c451;
}

/* ---- M4: Producción del día (tarjeta del cocinero) ---- */
.prod-add-btn {
    border: 1px solid rgba(255, 255, 255, .22);
    background: rgba(255, 255, 255, .1);
    color: var(--text);
    border-radius: 8px;
    padding: 4px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .15s;
}

.prod-add-btn:hover {
    background: rgba(255, 255, 255, .18);
}

.prod-progress {
    height: 10px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
    margin-bottom: 12px;
}

.prod-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: var(--orange);
    box-shadow: 0 0 8px var(--orange-light);
    transition: width .3s ease, background .3s ease;
}

/* Todo listo: la barra pasa a verde. */
.prod-progress-bar.full {
    background: var(--green-check);
    box-shadow: 0 0 8px rgba(39, 174, 96, .35);
}

.prod-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.prod-fil-btn {
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 99px;
    padding: 5px 13px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
    flex-shrink: 0;
    white-space: nowrap;
}

.prod-fil-btn:hover {
    color: var(--text);
}

/* PRODUCCIÓN 360 · ETAPA C — la tinta sobre el fondo de lo VIVO deja de estar
   hardcodeada. Un fondo claro (el lima de tierra en oscuro, el naranja de la
   clásica) pide tinta oscura; el lima ACEITUNA de tierra en claro es oscuro y
   pide tinta clara. Medido en los cuatro mundos: 6,11 · 7,94 · 5,46 · 9,26.
   Sin el atributo, --vivo-ink vale #1a1a1a y esto queda EXACTAMENTE como estaba. */
.prod-fil-btn.active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--vivo-ink, #1a1a1a);
}

/* Angosto (celu y tablet portrait, donde tambien aparece en el widget): los chips de
   estacion no se cortan ni empujan el layout. Una sola fila con scroll horizontal propio,
   sin barra visible; los chips no se encogen. En desktop (>820px) queda el wrap prolijo. */
@media (max-width: 820px) {
    .prod-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }

    .prod-filtros::-webkit-scrollbar {
        display: none;
    }
}

/* La lista de órdenes: altura fija y scroll SOLO vertical (el widget nunca crece). */
#prod-lista {
    flex: 1 1 auto;
    min-height: 180px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

#prod-lista::-webkit-scrollbar {
    width: 6px;
}

#prod-lista::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 99px;
}

#prod-lista::-webkit-scrollbar-track {
    background: transparent;
}

#prod-lista .hub-ord {
    max-width: 100%;
}

.prod-ord-main {
    margin-right: auto;
    cursor: pointer;
    min-width: 0;
}

.prod-ord-main:hover .hub-ord-n {
    text-decoration: underline;
}

.prod-encurso .hub-ord-check {
    border-color: var(--orange);
}

/* Puntito naranja de "en curso". Definición ÚNICA (antes estaba duplicada y sin
   margen → quedaba pegado al nombre: "●Apio"). Ahora separa del texto. */
.prod-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    display: inline-block;
    margin-right: 7px;
    flex-shrink: 0;
    animation: prodPulse 1.4s ease-in-out infinite;
}

@keyframes prodPulse {

    0%,
    100% {
        opacity: .4;
    }

    50% {
        opacity: 1;
    }
}

.prod-tag-curso,
.prod-cron {
    color: var(--orange);
}

.prod-cron {
    font-variant-numeric: tabular-nums;
}

/* Banderín de prioridad: ámbar */
.prod-flag {
    color: #f5c451;
    margin-right: 5px;
}

/* ---- Fila de fecha (widget) ---- */
.prod-datebar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

/* Apartado de Producción: el modal-body es flex columna y, con la lista larga, comprimía
   la barra de fecha y los chips (salían cortados a la mitad). No se dejan encoger. */
#modal-produccion .prod-datebar,
#modal-produccion .prod-filtros {
    flex-shrink: 0;
}

.prod-date-nav {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 8px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .15s, color .15s;
}

.prod-date-nav:hover:not(:disabled) {
    background: var(--accent-bg);
    color: var(--text);
}

.prod-date-nav:disabled {
    opacity: .35;
    cursor: default;
}

.prod-date-center {
    flex: 1;
    min-width: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    padding: 0 12px;
    transition: background .15s, border-color .15s;
}

.prod-date-center:hover {
    background: var(--accent-bg);
    border-color: var(--text-3);
}

.prod-date-center svg {
    color: var(--text-2);
    flex-shrink: 0;
}

.prod-date-center span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Calendario popover ---- */
.prod-cal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1400;
    width: 320px;
    background: var(--bg-2, #1a1a1a);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 14px;
    animation: modalIn .15s ease;
}

:root .prod-cal {
    background: #fff;
}

[data-theme="dark"] .prod-cal {
    background: #1c1c1c;
}

.cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cal-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--orange);
}

.cal-nav {
    display: flex;
    gap: 4px;
}

.cal-nav button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 8px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cal-nav button:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.cal-dows {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.cal-dows span {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
    padding: 4px 0;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-cell {
    aspect-ratio: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 13px;
    color: var(--text);
    border: none;
    background: none;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .12s;
}

.cal-day:hover {
    background: var(--accent-soft);
}

.cal-empty {
    cursor: default;
}

.cal-day.fut {
    color: var(--text-3);
}

.cal-day.dis {
    color: var(--text-3);
    opacity: .35;
    cursor: default;
}

.cal-day.sel {
    background: var(--orange);
    color: #1a1a1a;
    font-weight: 700;
}

.cal-day.sel:hover {
    background: var(--orange);
}

.cal-dot {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--orange);
}

.cal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.cal-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-3);
    position: relative;
    padding-left: 10px;
}

.cal-legend .cal-dot {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.cal-hoy {
    border: none;
    background: none;
    color: var(--orange);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    padding: 2px 4px;
}

.prod-act {
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, .92);
    color: #111;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    flex-shrink: 0;
    transition: opacity .15s;
}

.prod-act:hover {
    opacity: .85;
}

.prod-act.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .18);
    color: var(--text-2);
    font-size: 14px;
    padding: 5px 10px;
}

.prod-empty {
    color: var(--text-3);
    font-size: 13px;
    padding: 14px 4px;
    text-align: center;
}

/* Estado amigable cuando el día no tiene ninguna orden */
.prod-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    min-height: 180px;
    text-align: center;
    color: var(--text-3);
}

.prod-empty-state svg {
    color: var(--text-3);
    opacity: .7;
}

.prod-empty-state p {
    font-size: 13.5px;
    color: var(--text-2);
}

.prod-empty-btn {
    border: 1px solid var(--border-2);
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .15s, border-color .15s;
}

.prod-empty-btn:hover {
    background: var(--accent-bg);
    border-color: var(--text-3);
}

/* El modal de carga debe quedar SOBRE el apartado (ambos son .modal-overlay z:1000). */
#modal-cargar-prod {
    z-index: 1300;
}

/* Grupo de acciones del header del HUB (engranaje + Panel admin) */

/* Engranaje de Ajustes de cocina (barra informativa del HUB) */
.hub-gear-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.hub-gear-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--text);
}

/* Avatar del cocinero en la barra informativa del HUB (abre el menú de perfil).
   Ocupa el lugar del engranaje; solo mobile + rol cocinero (el desktop del cocinero
   queda igual: su perfil sigue en la sidebar). La visibilidad la maneja el CSS más abajo. */
.hub-avatar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    transition: background .15s;
}

.hub-avatar-btn:hover {
    background: rgba(255, 255, 255, .12);
}

.hub-avatar-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hub-strip .hub-avatar-btn {
    margin-left: auto;
}

/* El avatar del HUB solo existe en mobile para el cocinero (desktop: perfil en la sidebar). */
@media (max-width: 640px) {
    body.rol-cocinero .hub-avatar-btn {
        display: inline-flex;
    }
}

/* ---- M4: toggle de prioridad en el modal de carga ---- */

/* ---- M4: tarjeta de Ajustes de cocina ---- */
.ajc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.ajc-card:hover {
    border-color: var(--border-2);
    background: var(--accent-bg);
}

.ajc-ico {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
}

.ajc-ico svg {
    display: block;
}

.ajc-tt {
    flex: 1;
    min-width: 0;
}

.ajc-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.ajc-sub {
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: 2px;
}

.ajc-go {
    font-size: 18px;
    color: var(--text-3);
    flex-shrink: 0;
}

/* ---- M4: responsive del widget en celular ---- */
@media (max-width: 640px) {

    /* En celular la lista crece con su contenido y usa el scroll normal de la
       página (sin cajita de 240px con scroll interno). */
    #prod-lista {
        height: auto;
        max-height: none;
        overflow-y: visible;
        overflow-x: hidden;
    }

    #prod-lista .hub-ord {
        gap: 8px;
    }

    /* Chips: una sola fila con scroll horizontal propio, sin barra visible.
       Sin márgenes negativos (causaban un sobre-ancho de 4px → scroll lateral). */
    .prod-filtros {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin: 0 0 10px;
        padding: 0 0 2px;
    }

    .prod-filtros::-webkit-scrollbar {
        display: none;
    }

    .hub-ord-tag {
        font-size: 10.5px;
    }

    /* Strip de turno: gap más chico para que entre sin empujar el ancho */
    .hub-strip {
        gap: 12px 16px;
        padding: 11px 14px;
    }

    /* La fila de fecha no se desborda: el botón central absorbe el sobrante */
    .prod-datebar {
        min-width: 0;
    }

    .prod-date-center {
        min-width: 0;
    }

    /* ---- Modales de estación/ajustes/estaciones/receta: HOJA a pantalla completa ---- */
    #modal-estaciones-cocina.modal-overlay,
    #modal-ajustes-cocina.modal-overlay,
    #modal-estacion.modal-overlay,
    #modal-receta-cocina.modal-overlay {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
    }

    #modal-estaciones-cocina .modal-box-sm,
    #modal-ajustes-cocina .est-modal,
    #modal-estacion .est-modal,
    #modal-receta-cocina .rec-modal {
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 18px 18px 0 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #modal-estaciones-cocina .modal-body,
    #modal-ajustes-cocina .est-body,
    #modal-estacion .est-body,
    #modal-receta-cocina .rec-modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
    }

    /* ---- Modal "+ Cargar": TARJETA FLOTANTE (no hoja completa) ---- */
    #modal-cargar-prod.modal-overlay {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        align-items: center;
    }

    #modal-cargar-prod .modal-box.cargacard-modal {
        width: 100%;
        max-width: none;
        min-height: 70dvh;
        max-height: 85dvh;
        margin: auto;
        border-radius: 16px;
    }
}

/* ---- M4: modal "Estaciones de cocina" ---- */
.estcoc-row {
    border-bottom: 1px solid var(--border);
}

.estcoc-row-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 6px;
    cursor: pointer;
}

.estcoc-name {
    flex: 1;
    min-width: 0;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.estcoc-count {
    font-size: 12px;
    color: var(--text-2);
}

.estcoc-btn-arch {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 6px;
}

.estcoc-btn-rest {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
}

.estcoc-personas {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .28s ease, opacity .22s ease;
}

.estcoc-row.open .estcoc-personas {
    max-height: 400px;
    opacity: 1;
}

.estcoc-personas-inner {
    padding: 2px 6px 14px;
}

.estcoc-chev {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-3);
    transition: transform .25s ease, color .15s ease;
}

.estcoc-row.open .estcoc-chev {
    transform: rotate(90deg);
    color: var(--text-2);
}

.estcoc-row-head--arch {
    cursor: default;
}

.estcoc-ord {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.estcoc-ord-btn {
    width: 24px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    transition: background .15s, color .15s;
}

.estcoc-ord-btn:hover:not(:disabled) {
    background: var(--accent-soft);
    color: var(--text);
}

.estcoc-ord-btn:disabled {
    opacity: .3;
    cursor: default;
}

/* ---- ABM de TURNOS ---- */
.turno-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent-soft);
}

.turno-form-horas {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.turno-hlbl {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--text-2);
    flex: 1;
    min-width: 110px;
}

.turno-hora-in {
    width: 100%;
}

.turno-flecha {
    color: var(--text-3);
    padding-bottom: 8px;
    flex-shrink: 0;
}

.turno-form-acts {
    display: flex;
    align-items: center;
    gap: 10px;
}

.turno-form-acts .btn-primary {
    flex: 1;
}

.turno-cancelar {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 8px;
}

.turno-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 6px;
    border-bottom: 1px solid var(--border);
}

.turno-ord {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}

.turno-row-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.turno-name {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.turno-franja {
    font-size: 12px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
}

.turno-btn-edit {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    flex-shrink: 0;
}

.turno-btn-edit:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.turno-btn-del {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.turno-row--arch .turno-name {
    color: var(--text-2);
}

/* ---- Selector de hora propio del modal de Turnos (panel flotante, tema de la app) ---- */
.ttp-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.38);
}

.ttp-panel {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 280px;
    padding: 16px;
    animation: modalIn 0.18s ease;
}

.ttp-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    margin-bottom: 12px;
    text-align: center;
}

.ttp-cols {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
}

.ttp-col {
    flex: 1;
    min-width: 0;
}

.ttp-col-h {
    font-size: 11px;
    color: var(--text-3);
    text-align: center;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.ttp-sep {
    align-self: center;
    padding-top: 18px;
    color: var(--text-3);
    font-weight: 700;
}

.ttp-scroll {
    position: relative;
    height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-3) transparent;
}

.ttp-scroll::-webkit-scrollbar {
    width: 6px;
}

.ttp-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.ttp-scroll::-webkit-scrollbar-thumb {
    background: var(--text-3);
    border-radius: 100px;
}

.ttp-opt {
    flex: 0 0 auto;
    padding: 9px 0;
    border: none;
    background: none;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 15px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    text-align: center;
    transition: background .12s, color .12s;
}

.ttp-opt:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.ttp-opt.sel {
    background: var(--accent-bg);
    color: var(--orange);
    font-weight: 700;
}

.ttp-acts {
    display: flex;
    gap: 10px;
    margin-top: 14px;
}

.ttp-acts .ttp-ok {
    flex: 1;
}

.ttp-cancel {
    flex: 1;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    font-size: 14px;
    padding: 9px 14px;
    border-radius: 8px;
}

.ttp-cancel:hover {
    background: var(--accent-soft);
    color: var(--text);
}

/* ============================================================
   PASE DE TURNO (Capa 1) — modal + zonas + tarjetas
   ============================================================ */
.pase-modal-box {
    max-width: 560px;
}

.pase-head-tt {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pase-sub {
    font-size: 13px;
    color: var(--text-2);
}

.pase-zona {
    margin-bottom: 22px;
}

.pase-zona-h {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 10px;
}

.pase-vacio {
    color: var(--text-3);
    font-size: 13px;
    padding: 10px 2px;
}

/* Tarjeta de "Quedó del turno" (orden vieja o tarea vieja) */
.pase-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent-soft);
    margin-bottom: 8px;
}

.pase-card-main {
    flex: 1;
    min-width: 0;
}

.pase-card-nm {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.pase-card-meta {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 3px;
}

.pase-estado {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 5px;
}

.pase-estado.pend {
    background: var(--accent-bg);
    color: var(--text-2);
}

.pase-estado.curso {
    background: rgba(230, 126, 34, .15);
    color: var(--orange);
}

.pase-tag-tarea {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--accent-bg);
    color: var(--text-2);
}

.pase-card-acts {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.pase-btn-pasa {
    background: var(--orange);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pase-btn-pasa:hover {
    filter: brightness(1.05);
}

.pase-btn-desc {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 13px;
    cursor: pointer;
}

.pase-btn-desc:hover {
    background: var(--accent-bg);
    color: var(--text);
}

/* Ítem del "Plan del turno" (tarea con check / nota en cursiva) */
.pase-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
}

.pase-check {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: 1.5px solid var(--border-2, var(--border));
    border-radius: 6px;
    background: none;
    color: var(--orange);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pase-item.hecho .pase-check {
    background: var(--accent-bg);
    border-color: var(--orange);
}

.pase-item-tx {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text);
}

.pase-item.hecho .pase-item-tx {
    text-decoration: line-through;
    color: var(--text-3);
}

.pase-nota-tx {
    font-style: italic;
    color: var(--text-2);
}

.pase-item-x {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 6px;
    flex-shrink: 0;
}

.pase-item-x:hover {
    color: var(--text);
}

.pase-add-row {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pase-add-btn {
    background: none;
    border: 1px dashed var(--border-2, var(--border));
    color: var(--text-2);
    border-radius: 8px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.pase-add-btn:hover {
    background: var(--accent-soft);
    color: var(--text);
}

.pase-add-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
}

.pase-add-form .input-app {
    width: 100%;
}

.pase-add-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Toggle "Es una preparación" + campos (select de subreceta + cantidad) */
.pase-prep-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
}

.pase-prep-toggle input {
    width: 16px;
    height: 16px;
    accent-color: var(--orange);
    cursor: pointer;
}

#pase-prep-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pase-prep-cant {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pase-prep-cant .input-app {
    flex: 1;
    min-width: 0;
}

.pase-prep-unidad {
    font-size: 13px;
    color: var(--text-2);
    min-width: 22px;
}

/* Barra de chips de turno en la toolbar de Producción (reusa .prod-fil-btn) */
.prod-turno-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

/* TANDA "DUEÑOS" · CAMBIO 3 — Barra de chips de PERSONA, debajo de la de turno y con el MISMO molde
   (.prod-fil-btn). Lleva rótulo porque son dos filas seguidas de chips y sin él no se sabe cuál es
   cuál. Vacía —y entonces inexistente— si nadie tiene nada asignado ni en curso hoy. */
.prod-persona-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}
.prod-persona-lb {
    flex: none;
    margin-right: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-3);
}

/* Ítem "espejo" del pase: tarea producible enganchada a una orden viva */
.pase-item-prod {
    cursor: pointer;
    border-radius: 10px;
    padding-left: 8px;
}

.pase-item-prod:hover {
    background: var(--accent-soft);
}

.pase-prod-ico {
    flex-shrink: 0;
    font-size: 16px;
}

.pase-prod-est {
    display: block;
    font-size: 11px;
    color: var(--text-2);
    margin-top: 2px;
}

.pase-item-prod.hecho .pase-item-tx {
    text-decoration: line-through;
    color: var(--text-3);
}

.pase-item-prod.hecho .pase-prod-est {
    text-decoration: none;
}

.pase-prod-descartada {
    font-size: 11px;
    color: var(--text-3);
    font-style: italic;
}

.pase-add-cancel {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-2);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
}

/* Zona C — Bitácora IA (placeholder apagado) */
.pase-bitacora {
    border: 1px dashed var(--border-2, var(--border));
    border-radius: 12px;
    padding: 18px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    background: transparent;
}

.pase-hist-link {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 0;
}

.pase-back {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 0;
    margin-bottom: 14px;
}

.pase-hist-dia {
    margin-bottom: 18px;
}

.pase-hist-fecha {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 6px;
}

.pase-hist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--border);
}

.pase-hist-tx {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text);
}

.pase-hist-tx.tach {
    text-decoration: line-through;
    color: var(--text-3);
}

.pase-hist-est {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 5px;
    flex-shrink: 0;
}

.pase-hist-est.ok {
    background: rgba(230, 126, 34, .15);
    color: var(--orange);
}

.pase-hist-est.pend,
.pase-hist-est.nota,
.pase-hist-est.arch {
    background: var(--accent-bg);
    color: var(--text-3);
}

.estcoc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.estcoc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 99px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
}

.estcoc-chip button {
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.estcoc-sin {
    color: var(--text-3);
    font-size: 13px;
}

.estcoc-add-sel {
    width: 100%;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}

/* ---- M4: modal "Cargar producción del día" ---- */
.prodform-search {
    position: relative;
    margin-bottom: 12px;
}

/* Dropdown de resultados: fixed anclado al buscador (JS), por encima del modal,
   con su propio límite de alto (~5 filas) y scroll propio. */
.prodform-results {
    position: fixed;
    z-index: 1500;
    background: var(--bg-2, #1a1a1a);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    max-height: 336px;
    /* ~6 filas + headers */
    overflow-y: auto;
    overflow-x: hidden;
}

[data-theme="dark"] .prodform-results {
    background: #1f1f1f;
}

/* Panel de sugerencias "+ Cargar" — grupos colapsables + filas con foto */
.cargasug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 9px 14px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    background: var(--accent-soft);
    border-top: 1px solid var(--border);
}

.cargasug-head:first-child {
    border-top: none;
}

.cargasug-count {
    opacity: .65;
}

.cargasug-chev {
    font-size: 14px;
    display: inline-block;
    transition: transform .15s;
}

.cargasug-chev.open {
    transform: rotate(90deg);
}

.cargasug-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    min-height: 48px;
    cursor: pointer;
}

.cargasug-row:hover {
    background: var(--accent-soft);
}

.cargasug-th {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
}

.cargasug-th-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 16px;
}

.cargasug-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cargasug-n {
    font-size: 13.5px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cargasug-m {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cargasug-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
    padding: 3px 7px;
    border-radius: 6px;
    flex-shrink: 0;
}

.cargasug-empty {
    padding: 16px 14px;
    color: var(--text-3);
    font-size: 13px;
    text-align: center;
}

.prodform-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
}

.prodform-result:hover {
    background: var(--accent-soft);
}

.prodform-result span {
    color: var(--text);
    font-size: 14px;
}

.prodform-result small {
    color: var(--text-3);
    font-size: 12px;
}

/* ============================================================
   + CARGAR — carga múltiple (diseño del mockup aprobado)
   ============================================================ */
.cargacard-modal {
    max-width: 480px;
    /* Altura mínima de entrada (≈ una card expandida): no "salta" al agregar la primera. */
    min-height: 480px;
    max-height: 88vh;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

[data-theme="dark"] .cargacard-modal {
    background: #1b1b1b;
    border-color: rgba(255, 255, 255, 0.1);
}

.cargacard-modal .modal-header {
    padding: 16px 18px;
    flex-shrink: 0;
}

.cargacard-modal .modal-title {
    font-size: 18px;
}

.cargacard-modal .modal-body {
    padding: 16px 18px;
    display: block;
    gap: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

/* Buscador (mockup .search) */
.carga-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    border-radius: 9px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    padding: 0 12px;
    margin-bottom: 0;
}

:root .carga-search {
    border-color: var(--border);
    background: var(--accent-soft);
}

.carga-search-ico {
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    flex-shrink: 0;
}

:root .carga-search-ico {
    color: var(--text-3);
}

.carga-search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    outline: none;
}

.carga-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

:root .carga-search-input::placeholder {
    color: var(--text-3);
}

/* Sección "PARA AGREGAR · N" */
.carga-sect {
    margin: 16px 0 8px;
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, 0.4);
}

:root .carga-sect {
    color: var(--text-3);
}

/* Estado vacío del modal (0 recetas): solo un texto de ayuda, sin sección ni footer */
.carga-empty {
    margin: 22px 0 6px;
    text-align: center;
    font-size: 13px;
    color: var(--text-3);
}

/* Card de receta agregada */
.carga-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

:root .carga-card {
    border-color: var(--border);
}

.carga-card.open {
    display: block;
    border-color: rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.05);
    padding: 12px;
}

.cargacard-modal .flex1 {
    flex: 1;
    min-width: 0;
}

.carga-collapsed {
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.carga-rname {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}

.carga-rmeta {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.45);
}

:root .carga-rmeta {
    color: var(--text-2);
}

.carga-rowtop {
    display: flex;
    align-items: center;
    gap: 8px;
}

.carga-tag {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

:root .carga-tag {
    background: var(--accent-soft);
    color: var(--text-2);
}

.carga-i {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 2px;
    flex-shrink: 0;
    display: inline-flex;
}

:root .carga-i {
    color: var(--text-3);
}

.carga-i:hover {
    color: var(--text);
}

.carga-flag-inline {
    font-size: 12px;
}

/* Grilla de campos (expandida) */
.carga-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.carga-lbl {
    display: block;
    font-size: 10.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 4px;
}

:root .carga-lbl {
    color: var(--text-2);
}

.carga-field {
    width: 100%;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 12.5px;
    font-family: 'DM Sans', sans-serif;
    padding: 0 10px;
    outline: none;
}

:root .carga-field {
    border-color: var(--border);
    background: var(--accent-soft);
}

.carga-field:focus {
    border-color: var(--text-2);
}

.carga-selwrap {
    position: relative;
}

select.carga-field {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    cursor: pointer;
}

[data-theme="dark"] select.carga-field {
    color-scheme: dark;
}

.carga-sel-chev {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
}

:root .carga-sel-chev {
    color: var(--text-3);
}

/* Checkbox prioridad */
.carga-flag {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 11px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    user-select: none;
}

:root .carga-flag {
    color: var(--text-2);
}

.carga-chk {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    accent-color: #EF9F27;
    cursor: pointer;
    flex-shrink: 0;
}

.carga-amber {
    color: #EF9F27;
    font-size: 13px;
    flex-shrink: 0;
}

/* Footer fijo con el CTA */
.carga-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

:root .carga-foot {
    border-top-color: var(--border);
}

.carga-cta {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: 10px;
    /* TANDA "CARGA VESTIDA" — el crema escrito a mano pasa a variables. El DEFAULT es
       exactamente lo que había (#e9e4d8 sobre #161616), así que sin el switch el botón
       queda igual; bajo tierra el bloque del final lo da vuelta. Salda uno de los 5
       literales cálidos que la tanda PIZARRA había censado. */
    background: var(--cta-bg);
    color: var(--cta-ink);
    font-size: 14px;
    font-weight: 500;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: opacity .15s;
}

/* El CTA de + Cargar pasa a DOS renglones: el título y, abajo, el resumen con el dato
   que ya existía (cuántos ítems hay en la lista). Esto va para las DOS paletas —el JS
   escribe los dos spans siempre—, así que la caja tiene que saber apilarlos. */
#carga-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1.15;
}

.carga-cta-s {
    font-size: 11px;
    font-weight: 600;
    opacity: .72;
}

.carga-cta:hover:not(:disabled) {
    opacity: .9;
}

.carga-cta:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.prodform select {
    width: 100%;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
}

/* Biblioteca = tarjeta NORMAL (glass como el resto), buen contraste en claro y oscuro.
   (Antes era una card invertida con var(--text) → daba problemas de contraste.) */
.hub-biblio {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0) 46%),
        rgba(255, 255, 255, 0.085);
    border: 1px solid var(--card-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 10px 24px rgba(0, 0, 0, .26);
    color: var(--text);
    border-radius: 22px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
}

:root .hub-biblio {
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0) 46%),
        var(--card);
}

.hub-biblio:hover {
    border-color: var(--border-2);
}

.hub-biblio:active {
    transform: scale(.99);
}

/* Variante horizontal de ancho completo (debajo de Producción + Menú) — compacta */
.hub-biblio-wide {
    flex-direction: row;
    gap: 22px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: 16px 18px;
    border-radius: 18px;
}

.hub-biblio-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hub-biblio-recent-col {
    flex: 1;
    min-width: 0;
    border-left: 1px solid var(--border);
    padding-left: 24px;
    display: flex;
    flex-direction: column;
}

/* 3 recientes compactos, sin scroll, arrancando a la misma altura que las categorías */
#hub-recientes {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Encabezado de UNA línea, alto fijo para que ambas columnas arranquen a la misma altura */
.hub-biblio-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    height: 32px;
    margin-bottom: 12px;
}

.hub-biblio-head .hub-w-tw {
    min-width: 0;
}

.hub-biblio-head .hub-w-tw svg {
    flex-shrink: 0;
}

.hub-biblio-title {
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mismo alto que el encabezado izquierdo → recientes y categorías arrancan en la misma línea */
.hub-mini-label {
    display: flex;
    align-items: center;
    height: 32px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-3);
    opacity: 1;
    margin-bottom: 12px;
}

/* Accesos directos del widget Biblioteca: grilla 2×2 compacta (categorías más cargadas) */
.hub-accesos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-content: start;
    margin-bottom: 0;
}

.hub-acceso {
    min-width: 0;
    min-height: 46px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px solid;
    color: inherit;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    transition: background .15s, border-color .15s;
}

/* Card normal: tinte derivado de variables de tema, buen contraste en ambos. */
.hub-acceso {
    background: var(--accent-soft);
    border-color: var(--border);
    color: var(--text);
}

.hub-acceso:hover {
    background: var(--accent-bg);
    border-color: var(--text-3);
}

.hub-acceso-ico {
    font-size: 18px;
    color: var(--text-2);
}

.hub-acceso-n {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.hub-acceso-c {
    font-size: 11px;
    color: var(--text-3);
}

/* Link "Ver todas las recetas (N) →" debajo de la grilla 2×2 */
.hub-vertodas {
    align-self: flex-start;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--text-2);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s;
}

.hub-vertodas:hover {
    color: var(--orange);
}

.hub-vertodas .ti {
    font-size: 13px;
}

.hub-recent {
    display: flex;
    align-items: center;
    gap: 11px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 8px 10px;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.hub-recent:hover,
.hub-recent:active {
    background: var(--accent-bg);
    border-color: var(--text-3);
}

/* Cuadradito con el ícono de línea de la categoría (reemplaza la foto) */
.hub-recent-th {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-2);
}

.hub-recent-tx {
    flex: 1;
    min-width: 0;
}

.hub-recent-empty {
    font-size: 12.5px;
    color: var(--text-3);
    padding: 6px 2px;
}

.hub-recent-n {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-recent-m {
    font-size: 11.5px;
    color: var(--text-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-recent-t {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--accent-bg);
    color: var(--text-2);
}

/* Estado base (recuadro ANCHO normal): 4 categorías (2×2) + 3 recientes.
   Los extras se renderizan pero se ocultan; los container queries los revelan
   según el tamaño del recuadro (ver bloque "Adaptación al recuadro"). */
.hub-acceso--r3 {
    display: none;
}

.hub-recent--4,
.hub-recent--5 {
    display: none;
}

.hub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    font-size: 13px;
}

.hub-row+.hub-row {
    border-top: 1px solid rgba(125, 125, 125, .1);
}

.hub-rt {
    color: var(--text);
}

.hub-rm {
    color: var(--text-2);
    margin-left: auto;
    font-size: 12px;
}

.hub-dot-red {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    flex-shrink: 0;
}

.hub-dot-blue {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-3);
    flex-shrink: 0;
}

.hub-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
}

.hub-msg+.hub-msg {
    border-top: 1px solid rgba(125, 125, 125, .1);
}

.hub-msg-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .1);
    color: var(--text-2);
}

.hub-msg-n {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.hub-msg-t {
    font-size: 12px;
    color: var(--text-2);
}

.hub-msg-time {
    font-size: 11px;
    color: var(--text-3);
    margin-left: auto;
    flex-shrink: 0;
}

.hub-cal {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hub-cal-d {
    text-align: center;
    flex-shrink: 0;
}

.hub-cal-day {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.hub-cal-mon {
    font-size: 10px;
    color: var(--text-3);
    text-transform: uppercase;
}

.hub-cal-i {
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

.hub-cal-t {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.hub-cal-s {
    font-size: 12px;
    color: var(--text-2);
}

.hub-plato {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.hub-pizarra {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    font-style: italic;
}

/* ============================================================
   COCINERO — MODAL ESTACIÓN + MODAL RECETA (cuadrados)
============================================================ */
.est-modal {
    background: rgba(22, 22, 22, 0.92);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 680px;
    max-height: 86vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

:root .est-modal {
    background: rgba(248, 248, 246, 0.94);
}

[data-theme="dark"] .est-modal {
    background: rgba(22, 22, 22, 0.95);
}

:root .rec-modal {
    background: rgba(248, 248, 246, 0.96);
}

[data-theme="dark"] .rec-modal {
    background: rgba(20, 20, 20, 0.96);
}

.est-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.est-head-ico {
    font-size: 26px;
    line-height: 1;
    color: var(--text-2);
    display: inline-flex;
    align-items: center;
}

.est-head-ico svg {
    display: block;
}

.est-head-tt {
    flex: 1;
}

.est-head-tt h2 {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}

.est-head-tt p {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}

.x-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.15s;
    flex-shrink: 0;
}

.x-btn:hover {
    background: var(--accent-bg);
    color: var(--text);
    transform: rotate(90deg);
}

.est-body {
    padding: 18px 22px 24px;
    overflow-y: auto;
}

/* Separación entre las tarjetas de config (Editar dashboard / Estaciones…) */
#modal-ajustes-cocina .est-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---- TESTER TEMPORAL: Probar motor (descartable) ---- */
.pm-filas { display: flex; flex-direction: column; gap: 8px; }
.pm-fila { display: flex; gap: 8px; align-items: center; }
.pm-fila .pm-receta { flex: 1 1 auto; min-width: 0; }
.pm-fila .pm-cubiertos { width: 100px; flex: 0 0 auto; }

.pm-acciones { display: flex; gap: 10px; margin: 14px 0; }

.est-search {
    display: flex;
    align-items: center;
    gap: 9px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0 13px;
    height: 42px;
    margin-bottom: 16px;
}

.est-search input {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 14px;
    outline: none;
    flex: 1;
    font-family: 'DM Sans', sans-serif;
}

.est-search input::placeholder {
    color: var(--text-3);
}

/* ── Recetas como cuadrados ── */
.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 13px;
}

.rec-sq {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--card-border);
    transition: transform 0.16s, border-color 0.16s;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.rec-sq:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.28);
}

.rec-sq:active {
    transform: scale(0.97);
}

.rec-sq-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.rec-sq-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.82));
}

.rec-sq-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 8px;
    border-radius: 50px;
}

.tag-rge {
    background: rgba(129, 199, 132, 0.22);
    color: #81c784;
}

.tag-sre {
    background: rgba(255, 183, 77, 0.22);
    color: #ffb74d;
}

.tag-ing {
    background: rgba(100, 181, 246, 0.22);
    color: #64b5f6;
}

.rec-sq-info {
    position: relative;
    z-index: 2;
    padding: 12px 13px;
}

.rec-sq-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 3px;
    color: #fff;
}

.rec-sq-rend {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Modal receta expandida ── */
.rec-modal {
    border: 1px solid var(--card-border);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

.rec-hero {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

.rec-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(20, 20, 20, 0.95));
}

.rec-hero-back {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
}

.rec-hero-tt {
    position: absolute;
    left: 20px;
    bottom: 16px;
    right: 20px;
    z-index: 3;
}

.rec-hero-tt h2 {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.tag-cocina {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 50px;
}

.rec-modal-body {
    padding: 20px 22px 26px;
    overflow-y: auto;
}

.rec-scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.rec-sec-tt {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text);
}

.scale-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 5px 8px;
}

.scale-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-3);
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.step-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: var(--accent-bg);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scale-input {
    width: 54px;
    text-align: center;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.scale-input::-webkit-outer-spin-button,
.scale-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.scale-unit {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 700;
    text-transform: uppercase;
}

.scale-batch {
    font-size: 11px;
    font-weight: 800;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: 50px;
    padding: 4px 9px;
}

.rec-ing-table {
    width: 100%;
    border-collapse: collapse;
}

.rec-ing-table tr {
    border-bottom: 1px solid var(--border);
}

.rec-ing-table td {
    padding: 12px 4px;
    font-size: 14px;
    color: var(--text);
}

.rec-ing-table td:nth-child(2) {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rec-ing-table td:nth-child(3) {
    text-align: right;
    width: 48px;
    color: var(--text-3);
    font-size: 12px;
    text-transform: uppercase;
}

.rec-yield {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 16px;
    margin-top: 16px;
}

.rec-yield-l {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    letter-spacing: 0.5px;
}

.rec-yield-v {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
}

.rec-proc-tt {
    margin-top: 24px;
}

.rec-proc-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rec-proc-card {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
}

.rec-proc-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rec-proc-txt {
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    padding-top: 2px;
}

/* ===== Checklist de pasos (avance) — mismo naranja que "en curso"/cronómetro ===== */
.chk-prog { margin: 2px 0 12px; }
.chk-prog-head { display:flex; justify-content:space-between; font-size:13px; font-weight:600; margin-bottom:6px; }
.chk-prog-head span:last-child { color: var(--orange); }
.chk-track { height:7px; border-radius:20px; overflow:hidden; background: var(--border); }
.chk-bar { height:100%; background: var(--orange); border-radius:20px; transition:width .2s; }
.chk-row { display:flex !important; align-items:center; gap:10px; cursor:pointer; }
.chk-row .chk-cb { width:18px; height:18px; accent-color: var(--orange); flex:none; margin:0; }
.chk-row.done .rec-proc-txt { text-decoration:line-through; opacity:.6; }

/* ===== Popover "cómo se hace" del corte (Paso 3) — glass ===== */
.corte-pop-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0, 0, 0, .60);
}

.corte-pop-overlay.open {
    display: flex;
}

.corte-pop {
    width: min(440px, 100%);
    max-height: 82vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Fondo SÓLIDO: apila el tint del card sobre el color de fondo (en dark el card es casi transparente). */
    background-color: var(--bg);
    background-image: linear-gradient(var(--card), var(--card));
    border: 1px solid var(--card-border);
    border-radius: 18px;
    box-shadow: var(--card-shadow);
    padding: 18px;
    color: var(--text);
}

.corte-pop-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.corte-pop-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.25;
}

.corte-pop-sub {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 2px;
}

.corte-pop-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.corte-pop-ibtn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-3);
    line-height: 0;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s, background .15s;
}

.corte-pop-ibtn:hover {
    color: var(--text);
    background: var(--accent-soft);
}

.corte-pop-ibtn .ti {
    font-size: 18px;
}

.corte-pop-body {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.corte-pop-msg {
    color: var(--text-3);
    font-size: 13px;
    padding: 14px 2px;
    text-align: center;
}

.corte-pop-error {
    color: #e0564a;
}

.corte-pop-usado {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    line-height: 1.5;
}

.corte-pop-usado:empty {
    display: none;
}

.corte-pop-usado-lbl {
    font-weight: 700;
    color: var(--text-2);
}

.corte-pop-textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--accent-soft);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 12px 14px;
}

.corte-pop-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
}

/* ===== Detalle ingrediente — sección "Procesamientos" ===== */
#det-proc-body {
    padding: 4px 20px 18px;
}

.proc-ing-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.proc-ing-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.proc-ing-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 0;
    border-radius: 8px;
    padding: 4px 6px;
    margin-left: -6px;
    margin-right: -6px;
    transition: background .15s;
}

.proc-ing-head[onclick]:hover {
    background: var(--accent-soft);
}

/* Solo cuando el corte está abierto, separar el cabezal de los pasos */
.proc-ing-item.abierta .proc-ing-head {
    margin-bottom: 10px;
}

.proc-ing-head .ti-chevron-down {
    color: var(--text-3);
}

.proc-ing-forma {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    text-transform: none;
}

.proc-ing-forma::first-letter {
    text-transform: uppercase;
}

.proc-ing-item.abierta .proc-ing-forma {
    color: var(--accent);
}

.proc-ing-item.abierta .proc-ing-head .ti-chevron-down {
    color: var(--accent);
}

.proc-ing-pasos {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.proc-ing-gen {
    flex-shrink: 0;
    padding: 7px 16px;
    font-size: 13px;
}

.rec-empty {
    padding: 30px;
    text-align: center;
    color: var(--text-3);
    font-size: 14px;
}

@media (max-width: 520px) {
    .rec-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rec-hero {
        height: 170px;
    }
}

/* Receta cocinero por encima del modal de estacion */
#modal-receta-cocina {
    z-index: 1100;
}

/* Visor de fotos receta (cocinero) */
#mrec-hero {
    cursor: pointer;
}

.visor-fotos {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.visor-fotos img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: none;
}

.visor-x {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.15s;
}

.visor-x:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: scale(1.06);
}

.visor-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
    transition: background 0.15s, transform 0.15s;
}

.visor-nav:hover {
    background: rgba(255, 255, 255, 0.26);
    transform: translateY(-50%) scale(1.06);
}

.visor-prev {
    left: 18px;
}

.visor-next {
    right: 18px;
}

.visor-contador {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.4);
    padding: 6px 14px;
    border-radius: 50px;
}

.visor-fotos video {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 12px;
    background: #000;
    box-shadow: none;
}

/* Giro al pasar el mouse en todas las X de cerrar (mismo efecto que .x-btn) */
.modal-close,
.visor-x {
    transition: transform 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}

.modal-close:hover,
.visor-x:hover {
    transform: rotate(90deg);
}

/* ===== NUEVO ENCABEZADO DE INGREDIENTES (rediseño mobile/desktop) ===== */

/* fila buscador + botón filtros */
.ing-search-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.ing-search-row .search-wrap {
    flex: 1;
    margin: 0;
}

.ing-filter-btn {
    position: relative;
    width: 48px;
    flex-shrink: 0;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all .15s;
}

.ing-filter-btn:hover {
    border-color: var(--text-2);
}

.ing-filter-btn svg {
    width: 19px;
    height: 19px;
}

.ing-filter-btn .ing-fbadge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: 10px;
    font: 700 11px 'DM Sans';
    display: grid;
    place-items: center;
    border: 2px solid var(--bg);
}

.ing-filter-btn .ing-fbadge.hide {
    display: none;
}

/* chips de filtros activos */
.ing-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.ing-chips:empty {
    display: none;
}

.ing-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--accent-bg);
    border: 1px solid var(--border-2);
    color: var(--text);
    border-radius: 18px;
    padding: 6px 8px 6px 13px;
    font: 600 13px 'DM Sans';
    animation: ingPop .18s ease;
}

.ing-chip .x {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: .15s;
}

.ing-chip .x:hover {
    background: var(--btn-bg);
    color: var(--btn-color);
}

.ing-chip .x svg {
    width: 10px;
    height: 10px;
}

@keyframes ingPop {
    from {
        transform: scale(.85);
        opacity: 0
    }

    to {
        transform: scale(1);
        opacity: 1
    }
}

/* stats en una línea */
/* lista (cards en mobile, tabla en desktop) */
.ing-list-wrap {
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 6px 0;
    box-shadow: none;
}

.ing-thead {
    display: none;
}

.ing-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
}

.ing-row:last-child {
    border-bottom: 0;
}

.ing-row:hover {
    background: var(--accent-soft);
}

.ing-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ing-dot.ok {
    background: #27ae60;
}

.ing-dot.warn {
    background: #e67e22;
}

.ing-dot.bad {
    background: #c0392b;
}

.ing-cname {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.ing-csub {
    color: var(--text-2);
    font-size: 12.5px;
    margin-top: 2px;
}

.ing-cfam,
.ing-cmerma,
.ing-cbruto,
.ing-cunidad,
.ing-cvar {
    display: none;
    color: var(--text-2);
    font-size: 14px;
}

.ing-var-flat {
    color: var(--text-3);
}

.ing-cvar .variacion-badge,
.ing-cvar .ing-var-flat {
    font-size: 13px;
}

/* tooltips de títulos de columna */
.th-tip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--text-3);
}

.th-tip::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    top: 150%;
    width: max-content;
    max-width: 230px;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: 8px 10px;
    font: 400 12px 'DM Sans';
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .15s, transform .15s;
    z-index: 60;
}

.th-tip.tip-right::after {
    left: auto;
    right: 0;
}

.th-tip:hover::after,
.th-tip.show::after {
    opacity: 1;
    transform: translateY(0);
}

.ing-ccost {
    text-align: right;
    white-space: nowrap;
}

.ing-ccost b {
    color: var(--text);
    font-weight: 700;
    font-size: 15px;
}

.ing-ccost b.none {
    color: var(--text-3);
    font-weight: 600;
    font-size: 13px;
}

.ing-ccost span {
    display: block;
    color: var(--text-3);
    font-size: 12px;
    margin-top: 1px;
}

/* DESKTOP → tabla con columnas */
@media (min-width:760px) {
    .ing-thead {
        display: grid;
        grid-template-columns: 24px 1.8fr 1.2fr .7fr 1fr 1fr .5fr .8fr;
        gap: 14px;
        padding: 11px 16px 9px;
        color: var(--text-3);
        font: 700 11px 'DM Sans';
        letter-spacing: .5px;
        text-transform: uppercase;
        border-bottom: 1px solid var(--border);
    }

    .ing-row {
        grid-template-columns: 24px 1.8fr 1.2fr .7fr 1fr 1fr .5fr .8fr;
        gap: 14px;
        padding: 12px 16px;
    }

    .ing-csub {
        display: none;
    }

    .ing-cfam,
    .ing-cmerma,
    .ing-cbruto,
    .ing-cunidad,
    .ing-cvar {
        display: block;
    }

    .ing-ccost {
        text-align: left;
    }

    .ing-ccost .ing-cneto-u,
    .ing-ccost .ing-cneto-br {
        display: none;
    }

    .ing-cunidad {
        font-size: 12px;
        color: var(--text-3);
    }

    .ing-cname {
        font-size: 14.5px;
    }
}

/* panel de filtros: sheet en mobile, popover en desktop */
.ing-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: .25s;
    z-index: 1200;
}

.ing-panel-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.ing-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 560px;
    margin: 0 auto;
    background: var(--bg);
    border-top: 1px solid var(--border-2);
    border-radius: 22px 22px 0 0;
    padding: 8px 20px 26px;
    z-index: 1201;
    color: var(--text);
    transform: translateY(110%);
    transition: transform .32s cubic-bezier(.32, .72, 0, 1), visibility .32s;
    visibility: hidden;
    box-shadow: 0 -10px 24px rgba(0, 0, 0, .3);
}

.ing-panel.show {
    transform: translateY(0);
    visibility: visible;
}

.ing-panel-grip {
    width: 38px;
    height: 4px;
    background: var(--border-2);
    border-radius: 4px;
    margin: 8px auto 16px;
}

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

.ing-panel-head h3 {
    font-family: 'DM Serif Display', serif;
    font-size: 19px;
    font-weight: 400;
}

.ing-panel-close {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    color: var(--text-2);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.ing-panel-close svg {
    width: 15px;
    height: 15px;
}

.ing-fgroup {
    margin-bottom: 20px;
}

.ing-fgroup>label {
    display: block;
    color: var(--text-3);
    font: 700 11px 'DM Sans';
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ing-fopts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ing-fopt {
    background: var(--accent-bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 18px;
    padding: 9px 15px;
    font: 600 13px 'DM Sans';
    cursor: pointer;
    transition: .15s;
}

.ing-fopt:hover {
    border-color: var(--border-2);
}

.ing-fopt.on {
    background: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-bg);
}

.ing-apply {
    width: 100%;
    margin-top: 6px;
    background: var(--btn-bg);
    color: var(--btn-color);
    border: 0;
    border-radius: 13px;
    padding: 15px;
    font: 700 15px 'DM Sans';
    cursor: pointer;
    opacity: .95;
}

.ing-apply:hover {
    opacity: 1;
}

@media (min-width:760px) {
    .ing-panel-overlay {
        background: rgba(0, 0, 0, .2);
    }

    .ing-panel {
        left: auto;
        right: 40px;
        bottom: auto;
        top: 230px;
        width: 360px;
        max-width: none;
        margin: 0;
        border: 1px solid var(--border-2);
        border-radius: 16px;
        transform: scale(.96) translateY(-6px);
        transform-origin: top right;
        opacity: 0;
        transition: opacity .2s, transform .2s;
    }

    .ing-panel.show {
        transform: scale(1);
        opacity: 1;
    }

    .ing-panel-grip {
        display: none;
    }
}

/* ===== PRESUPUESTOS ===== */
.presu-wrap {
    padding: 4px 2px 40px
}

.presu-head {
    margin-bottom: 22px
}

.presu-h1 {
    font-family: 'DM Serif Display', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.05
}

.presu-sub {
    color: var(--text-2);
    font-size: 14px;
    margin-top: 6px
}

.presu-sectitle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 30px 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-2)
}

.presu-sectitle .presu-line {
    flex: 1;
    height: 1px;
    background: var(--border)
}

.presu-soon {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-3);
    background: var(--badge-bg);
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap
}

.presu-card {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg)
}

.presu-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px
}

.presu-tile {
    padding: 18px;
    cursor: pointer;
    transition: .18s;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative
}

.presu-tile:hover {
    transform: translateY(-3px);
    border-color: var(--border-2)
}

.presu-tile .presu-ti {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--accent-bg);
    display: grid;
    place-items: center;
    color: var(--text)
}

.presu-tile h3 {
    font-size: 15.5px
}

.presu-tile p {
    font-size: 12.5px;
    color: var(--text-2);
    line-height: 1.4
}

.presu-tile .presu-go {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-3);
    opacity: 0;
    transition: .18s
}

.presu-tile:hover .presu-go {
    opacity: 1;
    color: var(--text-2)
}

.presu-tile.presu-blank {
    align-items: center;
    justify-content: center;
    border-style: dashed;
    min-height: 120px
}

.presu-tile.presu-blank .presu-plus {
    font-size: 30px;
    line-height: 1;
    color: var(--text-2)
}

.presu-tile.presu-blank span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
    margin-top: 4px
}

.presu-saved {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.presu-saved .presu-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    cursor: pointer;
    transition: border-color .15s, background .15s
}

.presu-saved .presu-row:hover {
    border-color: var(--border-2)
}

.presu-saved .presu-thumb {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--accent-bg);
    display: grid;
    place-items: center;
    color: var(--text-2);
    flex-shrink: 0
}

.presu-saved .presu-meta {
    flex: 1;
    min-width: 0
}

.presu-saved .presu-meta b {
    font-size: 14px;
    font-weight: 600;
    display: block
}

.presu-saved .presu-meta span {
    font-size: 12px;
    color: var(--text-2)
}

.presu-proj {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px
}

.presu-proj .presu-p {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 15px;
    opacity: .7
}

.presu-proj .presu-pi {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--accent-soft);
    display: grid;
    place-items: center;
    color: var(--text-2);
    flex-shrink: 0
}

.presu-proj .presu-p b {
    font-size: 13.5px;
    font-weight: 600
}

.presu-proj .presu-p small {
    display: block;
    font-size: 11.5px;
    color: var(--text-3)
}

.presu-proj .presu-p .presu-soon {
    margin-left: auto
}

@media (min-width:700px) {
    .presu-tiles {
        grid-template-columns: 1fr 1fr
    }

    .presu-proj {
        grid-template-columns: 1fr 1fr
    }

    .presu-h1 {
        font-size: 36px
    }
}

@media (min-width:1000px) {
    .presu-tiles {
        grid-template-columns: repeat(3, 1fr)
    }

    .presu-proj {
        grid-template-columns: repeat(3, 1fr)
    }

    .presu-saved {
        grid-template-columns: 1fr 1fr
    }
}

/* ----- Presupuestos · Creador ----- */
.presu-subnav {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 22px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 5px;
    width: fit-content
}

.presu-subnav button {
    background: none;
    border: 0;
    color: var(--text-2);
    font-family: inherit;
    font-weight: 600;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 9px;
    cursor: pointer;
    transition: .15s
}

.presu-subnav button.presu-tab-on {
    background: var(--accent-bg);
    color: var(--text)
}

.presu-tabbar {
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 18px
}

.presu-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 11px 10px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    background: var(--card-2, rgba(255, 255, 255, 0.04));
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 210px;
    margin-bottom: -1px;
    transition: .15s
}

.presu-tab:hover {
    color: var(--text)
}

.presu-tab.presu-tab-active {
    background: var(--card);
    border-color: var(--border);
    color: var(--text)
}

.presu-tab .presu-tdot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0
}

.presu-tab .presu-tt {
    overflow: hidden;
    text-overflow: ellipsis
}

.presu-tab .presu-x {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: grid;
    place-items: center;
    color: var(--text-3);
    font-size: 15px;
    line-height: 1;
    flex-shrink: 0
}

.presu-blkhead .presu-x {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-3);
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    flex-shrink: 0;
    transition: transform .15s, color .15s
}

.presu-blkhead .presu-x:hover {
    color: var(--text);
    transform: rotate(90deg)
}

.presu-tab .presu-x:hover {
    background: var(--accent-bg);
    color: var(--text)
}

.presu-tabadd {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px dashed var(--border);
    background: none;
    color: var(--text-3);
    font-size: 18px;
    cursor: pointer;
    margin-left: 2px
}

.presu-tabadd:hover {
    color: var(--text-2);
    border-color: var(--border-2)
}

.presu-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px
}

.presu-cr-left {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.presu-crhead {
    padding: 18px
}

.presu-crname {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.presu-crname input {
    background: none;
    border: 0;
    color: var(--text);
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    flex: 1;
    min-width: 0;
    outline: none
}

.presu-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 5px 11px;
    border-radius: 20px;
    white-space: nowrap
}

.presu-chip-plato {
    background: var(--accent-bg);
    color: var(--text)
}

.presu-crsub {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 12px;
    color: var(--text-2);
    font-size: 13px
}

.presu-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px
}

.presu-field label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-3);
    font-weight: 700
}

.presu-field input {
    background: none;
    border: 0;
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    width: 54px;
    outline: none;
    text-align: right
}

.presu-block {
    padding: 6px 6px 14px;
    position: relative;
    transition: opacity .15s, box-shadow .15s
}

.presu-drag {
    display: inline-flex;
    align-items: center;
    color: var(--text-3);
    cursor: grab;
    touch-action: none;
    padding: 2px;
    margin-right: 2px;
    border-radius: 6px;
    transition: color .15s, background .15s
}

.presu-drag:hover {
    color: var(--text);
    background: var(--card-hover, rgba(127, 127, 127, .12))
}

.presu-block.presu-dragging {
    opacity: .45
}

.presu-block.presu-drop-before::before,
.presu-block.presu-drop-after::after {
    content: '';
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    border-radius: 3px;
    background: var(--orange)
}

.presu-block.presu-drop-before::before {
    top: -7px
}

.presu-block.presu-drop-after::after {
    bottom: -7px
}

.presu-blkhead {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px
}

.presu-blkhead .presu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange)
}

.presu-blkhead b {
    font-size: 14px;
    font-weight: 700
}

.presu-additem {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 14px;
    border-top: 1px dashed var(--border);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

.presu-additem:hover {
    color: var(--text-2)
}

.presu-addsec {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer
}

.presu-addsec:hover {
    color: var(--text-2);
    border-color: var(--border-2)
}

.presu-totals {
    padding: 20px 18px;
    align-self: start
}

.presu-totrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--border)
}

.presu-totrow .presu-k {
    font-size: 12.5px;
    color: var(--text-2)
}

.presu-totrow .presu-v {
    font-weight: 700
}

.presu-marginbox {
    margin: 16px 0 6px
}

.presu-marginbox .presu-lab {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--text-2);
    margin-bottom: 9px
}

.presu-marginbox .presu-lab b {
    color: var(--text);
    font-size: 14px
}

.presu-marginbox input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: var(--accent-bg);
    outline: none
}

.presu-marginbox input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--orange);
    cursor: pointer;
    box-shadow: 0 0 0 4px var(--orange-light)
}

.presu-pricecard {
    margin-top: 18px;
    padding: 18px;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--orange-light), transparent);
    border: 1px solid var(--orange-light)
}

.presu-pricecard .presu-pl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--orange);
    font-weight: 700
}

.presu-pricecard .presu-pbig {
    font-family: 'DM Serif Display', serif;
    font-size: 32px;
    line-height: 1.1;
    margin-top: 4px
}

.presu-pricecard .presu-pper {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 3px
}

.presu-pricecard .presu-pper b {
    color: var(--text)
}

.presu-fc {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 12.5px;
    color: var(--text-2)
}

.presu-fc b {
    padding: 3px 9px;
    border-radius: 7px;
    font-weight: 700
}

.presu-fc b.presu-ok {
    background: var(--prod-bg);
    color: var(--prod-color)
}

.presu-fc b.presu-warn {
    background: var(--orange-light);
    color: var(--orange)
}

.presu-fc b.presu-bad {
    background: var(--red-light);
    color: var(--red)
}

.presu-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 18px
}

.presu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px;
    border-radius: 11px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    border: 1px solid transparent
}

.presu-btn-primary {
    background: var(--btn-bg, #fff);
    color: var(--btn-color, #111)
}

.presu-btn-ghost {
    background: var(--accent-soft);
    border-color: var(--border);
    color: var(--text-2)
}

.presu-secfoot {
    text-align: right;
    font-size: 12px;
    color: var(--text-3);
    padding: 8px 4px 0;
    margin-top: 4px;
    border-top: 1px solid var(--border);
}

.presu-secfoot b {
    color: var(--text);
    font-size: 14px;
    margin-left: 6px;
}

@media (min-width:1000px) {
    .presu-grid {
        grid-template-columns: 1fr 340px;
        align-items: start
    }

    .presu-totals {
        position: sticky;
        top: 20px
    }
}

/* ====== FICHA FLOTANTE DE INGREDIENTE ====== */
#ing-detalle.modal-overlay {
    padding: 44px 18px;
}

.ing-ficha-box {
    background: rgba(248, 248, 246, 0.96);
    border: 1px solid var(--card-border);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 700px;
    max-height: 82vh;
    margin: auto;
    overflow-y: auto;
    padding: 20px 22px;
}

[data-theme="dark"] .ing-ficha-box {
    background: rgba(20, 20, 20, 0.96);
}

.ing-ficha-box .detalle-title {
    font-size: 24px;
}

.ing-ficha-box .detalle-header {
    margin-bottom: 14px;
}

@media (max-width: 640px) {
    #ing-detalle.modal-overlay {
        padding: 8px;
    }

    .ing-ficha-box {
        max-height: 94vh;
        padding: 14px;
    }
}

/* ====== RECETARIO EN CELULAR: solo Nombre + Food Cost ====== */
@media (max-width: 640px) {
    /* BENTO 13 · P5.3 — LA PAPELERA, QUE EN CELULAR QUEDABA CORTADA. Su tabla
       tiene 6 columnas y .recipes-table-wrap lleva overflow:hidden; a diferencia
       del recetario, que en este ancho esconde las columnas 2-4 (acá abajo), la
       papelera no tenía ninguna regla móvil: medido en 390px, la tabla pedía
       530px dentro de un hueco de 298 y la última celda ("Archivada") quedaba
       afuera, sin forma de llegar a ella. Acá NO se esconden columnas —en la
       papelera se elige qué restaurar y qué borrar, y para eso hacen falta
       todas—: la tabla scrollea a lo ancho. Bug de HEAD anotado en la t9. */
    #modal-papelera .recipes-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #modal-papelera .recipes-table {
        min-width: 520px;
    }

    #recipes-table {
        min-width: 0;
    }

    #recipes-table th:nth-child(2),
    #recipes-table td:nth-child(2),
    #recipes-table th:nth-child(3),
    #recipes-table td:nth-child(3),
    #recipes-table th:nth-child(4),
    #recipes-table td:nth-child(4) {
        display: none;
    }
}

/* ====== BARRA INFERIOR NUEVA + HOJA "MÁS" (mobile) ====== */

@media (max-width: 768px) {
    .mobile-hamburger {
        display: none;
    }
}

.hoja-mas {
    width: 100%;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 10px 14px calc(16px + env(safe-area-inset-bottom));
    animation: modalIn 0.15s ease;
}

.hoja-mas-user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    cursor: pointer;
}

.hoja-mas-user i.ti {
    color: var(--text-2);
    font-size: 16px;
}

/* Centrado de barra inferior y hoja Más */

/* ====== HOJA "RESUMEN" (mobile) — bottom-sheet premium con arrastre ====== */
/* Fondo oscurecido con fade (250ms). El sheet vive abajo (align-items:flex-end). */
.mi-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    transition: background 250ms ease;
}

.mi-overlay.mi-open {
    background: rgba(0, 0, 0, 0.5);
}

.mi-panel {
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    /* MEDIA: la hoja mide SU contenido con tope de 70dvh (sin altura fija → sin hueco negro).
       COMPLETA (.mi-full) sube el tope a 94dvh; si el contenido entra en 70dvh, no hay diferencia. */
    max-height: 70dvh;
    background: var(--mi-glass);
    border: 1px solid var(--card-border);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.40);
    display: flex;
    flex-direction: column;
    /* Cerrado: fuera de pantalla, abajo. El JS solo setea transform en px al arrastrar. */
    transform: translateY(100%);
    /* Entrada / asentamiento: sube, pasa apenas y asienta (mismo resorte que la burbuja).
       max-height anima el crecer/encoger al pasar entre MEDIA y COMPLETA. */
    transition: transform 500ms cubic-bezier(0.34, 1.4, 0.64, 1), max-height 300ms ease;
    will-change: transform;
}

/* MEDIA: descansa pegada abajo (translateY 0), alto = contenido (tope 70dvh).
   COMPLETA: solo sube el tope a 94dvh; el cuerpo scrollea únicamente si el contenido lo supera. */
.mi-overlay.mi-open .mi-panel {
    transform: translateY(0);
}

.mi-overlay.mi-open .mi-panel.mi-full {
    max-height: 94dvh;
}

/* Durante el arrastre la hoja sigue al dedo 1:1 (sin transición). */
.mi-panel.mi-dragging {
    transition: none;
}

/* Salida: baja con ease-in 250ms (más corta que la entrada). */
.mi-panel.mi-closing {
    transition: transform 250ms ease-in;
}

/* ---- Zona de arrastre: manija + header ---- */
.mi-drag {
    flex-shrink: 0;
    padding: 8px 16px 4px;
    touch-action: none;
    cursor: grab;
}

.mi-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-2);
    margin: 0 auto 12px;
}

.mi-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mi-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent-bg);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.mi-header-txt {
    flex: 1;
    min-width: 0;
}

.mi-hola {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.mi-header-sub {
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: 2px;
}

.mi-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.mi-iconbtn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mi-iconbtn i.ti {
    font-size: 20px;
}

/* ---- Cuerpo scrolleable ---- */
.mi-body {
    /* No crecer: la hoja mide el contenido. Encoge (scroll interno) solo cuando toca el tope. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 6px 16px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.mi-card {
    position: relative;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 14px;
    text-align: left;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 96px;
}

.mi-card-wide {
    grid-column: 1 / -1;
    min-height: 0;
}

.mi-card i.ti {
    font-size: 24px;
    color: var(--text);
    margin-bottom: 5px;
}

.mi-card-tt {
    font-size: 14px;
    font-weight: 700;
}

.mi-card-dato {
    font-size: 12px;
    color: var(--text-3);
}

/* Dato de alerta (incidencias): rojo suave */
.mi-card-alert {
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
}

.mi-card-alert[hidden],
.mi-card-dato[hidden],
.mi-prod-data[hidden] {
    display: none;
}

/* ---- Tarjeta grande: Producción del día + barra de progreso real ---- */
.mi-card-prod {
    gap: 8px;
}

.mi-prod-data {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 2px;
}

.mi-prod-count {
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 600;
}

.mi-prod-track {
    height: 6px;
    border-radius: 3px;
    background: var(--accent-soft);
    overflow: hidden;
}

.mi-prod-fill {
    height: 100%;
    border-radius: 3px;
    width: 0%;
    background: var(--orange);
    transition: width .3s ease;
}

.mi-prod-fill.full {
    background: var(--green-mid);
}

.mi-badge {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--accent);
    color: var(--bg);
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: 3px 7px;
    border-radius: 999px;
}

.mi-card.activa {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.mi-card.activa .mi-badge {
    display: inline-block;
}

.mi-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mi-accion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 14px;
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.mi-accion i.ti {
    font-size: 19px;
    color: var(--text-2);
}

.mi-prox-lbl {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    margin-bottom: 8px;
}

.mi-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.mi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-3);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 6px 11px;
    opacity: .6;
}

.mi-chip i.ti {
    font-size: 14px;
}

/* ---- Cascada de entrada: cada tarjeta opacity 0→1 + translateY, escalonada 40ms ---- */
@keyframes miCardIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

.mi-overlay.mi-open .mi-card-prod,
.mi-overlay.mi-open .mi-grid > .mi-card,
.mi-overlay.mi-open .mi-acciones,
.mi-overlay.mi-open .mi-prox {
    animation: miCardIn 250ms ease both;
}

.mi-overlay.mi-open .mi-card-prod { animation-delay: 40ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(1) { animation-delay: 80ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(2) { animation-delay: 120ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(3) { animation-delay: 160ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(4) { animation-delay: 200ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(5) { animation-delay: 240ms; }
.mi-overlay.mi-open .mi-grid > .mi-card:nth-child(6) { animation-delay: 280ms; }
.mi-overlay.mi-open .mi-acciones { animation-delay: 320ms; }
.mi-overlay.mi-open .mi-prox { animation-delay: 360ms; }

/* La hoja es solo mobile: en escritorio nunca se muestra */
@media (min-width: 769px) {
    #menu-inmersivo {
        display: none !important;
    }
}

/* ====== ASISTENTE DE INSTALACIÓN ====== */
.asist-inst {
    max-width: 400px;
    text-align: center;
    padding: 26px 22px;
}

.inst-icono {
    font-size: 40px;
    margin-bottom: 8px;
    color: var(--text);
}

.inst-icono i.ti {
    font-size: 44px;
}

.inst-titulo {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    color: var(--text);
    margin-bottom: 6px;
}

.inst-sub {
    font-size: 13.5px;
    color: var(--text-2);
    margin-bottom: 18px;
}

.inst-btn {
    width: 100%;
}

.inst-btn-sec {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.inst-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    font-size: 13.5px;
    color: var(--text);
    margin-bottom: 14px;
}

.inst-step i.ti {
    font-size: 16px;
    vertical-align: -3px;
}

.inst-num {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--accent-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.inst-nota {
    font-size: 11.5px;
    color: var(--text-2);
    margin: 4px 0 14px;
}

.banner-instalar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 900;
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    animation: modalIn 0.2s ease;
}

.banner-inst-btn {
    margin-left: auto;
    width: auto;
    padding: 7px 12px;
    font-size: 12.5px;
}

.banner-inst-x {
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 14px;
    cursor: pointer;
}

@media (min-width: 769px) {
    .banner-instalar {
        left: auto;
        right: 16px;
        bottom: 16px;
        max-width: 380px;
    }
}

/* ====== TOUR DE BIENVENIDA ====== */
#tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
}

#tour-foco {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.62), 0 0 0 3px rgba(232, 148, 106, 0.85), 0 0 24px rgba(232, 148, 106, 0.45);
    transition: all 0.25s ease;
    pointer-events: none;
}

#tour-globo {
    position: fixed;
    width: 300px;
    max-width: calc(100vw - 20px);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: var(--card-shadow);
    transition: top 0.25s ease, left 0.25s ease;
}

#tour-paso-num {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #e8946a;
}

#tour-titulo {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    margin-top: 4px;
}

#tour-texto {
    font-size: 12.5px;
    color: var(--text-2);
    margin-top: 4px;
    line-height: 1.45;
}

.tour-botones {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

#tour-saltar {
    color: var(--text-2);
    font-size: 11.5px;
    margin-right: auto;
    cursor: pointer;
}

#tour-prev {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--text);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

#tour-next {
    background: #e8946a;
    border: none;
    color: #161616;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.tour-config-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tour-config-botones button {
    background: var(--accent-bg);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 12.5px;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   PANEL — reportes de operación (diseño del mockup aprobado)
   ============================================================ */
.panel-head {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.panel-chips {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.panel-chip {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
}

.panel-chip:hover {
    color: var(--text);
}

.panel-chip.on {
    background: #F5A623;
    color: #161616;
    border-color: #F5A623;
    font-weight: 500;
}

.panel-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    min-width: 0;
}

:root .panel-card {
    background: var(--accent-soft);
}

.panel-klabel {
    font-size: 11px;
    letter-spacing: .05em;
    color: var(--text-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.panel-kval {
    font-family: 'DM Serif Display', serif;
    font-size: 30px;
    margin-top: 8px;
    color: var(--text);
    line-height: 1.1;
}

.panel-kunit {
    font-size: 18px;
}

.panel-ktrend {
    font-size: 11.5px;
    margin-top: 4px;
    color: var(--text-3);
}

.panel-up {
    color: #5fbf77;
}

.panel-down {
    color: #e06c5f;
}

.panel-amber {
    color: #F5A623;
}

.panel-muted {
    color: var(--text-3);
}

.panel-ctitle {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    flex-wrap: wrap;
}

.panel-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 110px;
    padding: 0 4px;
}

.panel-bcol {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

.panel-bar {
    width: 100%;
    max-width: 34px;
    background: rgba(245, 166, 35, 0.75);
    border-radius: 6px 6px 0 0;
}

.panel-bday {
    font-size: 10.5px;
    color: var(--text-3);
}

.panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--text);
}

.panel-row:last-child {
    border-bottom: none;
}

.panel-rmeta {
    font-size: 11.5px;
    color: var(--text-3);
}

.panel-flex1 {
    flex: 1;
    min-width: 0;
}

.panel-estname {
    width: 70px;
    flex-shrink: 0;
}

.panel-hbar {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    flex: 1;
}

:root .panel-hbar {
    background: rgba(0, 0, 0, 0.08);
}

.panel-hfill {
    height: 6px;
    border-radius: 3px;
    background: #F5A623;
}

.panel-hval {
    width: 64px;
    text-align: right;
    flex-shrink: 0;
}

.panel-insight {
    margin-top: 10px;
}

.panel-desvpct {
    font-size: 12.5px;
    flex-shrink: 0;
}

.panel-soon {
    opacity: .55;
}

.panel-stag {
    font-size: 9.5px;
    letter-spacing: .08em;
    padding: 3px 8px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-2);
}

:root .panel-stag {
    background: rgba(0, 0, 0, 0.06);
}

.panel-vacio,
.panel-loading {
    color: var(--text-3);
    font-size: 12.5px;
    padding: 18px 4px;
    text-align: center;
}

/* ============================================================
   BENTO 12 · P3 — LA GRILLA DEL PANEL (ESTRUCTURA: las DOS paletas)
   Los ocho apartados de siempre + el de variación de costos dejan de vivir en
   tres filas sueltas (panel-grid4 / panel-grid2) y pasan a UNA grilla bento de
   4 columnas con span fijo por bloque, como el HUB. Cada bloque conserva su
   clase `panel-card`, así que SIN el switch se sigue vistiendo con la ropa de
   siempre: lo que cambia acá es dónde y de qué tamaño, no de qué color.
   Las filas son minmax(126px, auto): 126 es el alto del mockup y el `auto`
   es el seguro de que nada se corte si un texto crece.
   ============================================================ */
.pn-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(126px, auto);
    gap: 12px;
}

.pn-b {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pn-2x2 {
    grid-column: span 2;
    grid-row: span 2;
}

.pn-2x1 {
    grid-column: span 2;
}

.pn-1x1 {
    grid-column: span 1;
}

/* La estrella (cumplimiento) reparte su alto: rótulo arriba, pie abajo. */
.pn-star {
    justify-content: space-between;
}

.pn-star-num {
    font-family: var(--font-titulo);
    font-size: 46px;
    line-height: 1;
    margin-top: 6px;
    color: var(--text);
}

.pn-star-unit {
    font-size: 24px;
}

.pn-star-rail {
    height: 10px;
    border-radius: 999px;
    margin-top: 12px;
    background: var(--accent-soft);
    overflow: hidden;
}

.pn-star-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--orange);
}

.pn-star-pie {
    font-size: 11.5px;
    margin-top: 8px;
    color: var(--text-3);
}

/* El valor arriba de cada columna del gráfico de órdenes. Reserva su renglón
   aunque el día no tenga órdenes, para que todas las columnas midan igual. */
.pn-bval {
    font-size: 10px;
    font-weight: 700;
    min-height: 13px;
    color: var(--text-3);
}

/* En el bloque 2×2 el gráfico usa el alto que sobra en vez de sus 110px fijos. */
.pn-2x2 .panel-bars {
    flex: 1;
    height: auto;
    min-height: 110px;
}

/* BENTO 13 · P5.5 — EL AIRE DE "LO MÁS PRODUCIDO". Con menos de 4 recetas el
   ranking dejaba una banda muerta abajo: sus filas se amontonaban arriba
   mientras el bloque 2×2 conservaba el alto que le marca su vecino (el gráfico
   de órdenes por día, que sí lo necesita). Ahora las filas reparten el alto que
   sobra, así que el bloque no fuerza altura vacía. Con las 4 filas queda como
   estaba: el reparto sólo se nota cuando hay menos. */
.pn-2x2 .panel-row {
    flex: 1 1 auto;
}

.pn-2x2 .pn-fantasma {
    flex-shrink: 0;
}

/* Medallitas del ranking (1 a 4). */
.pn-medal {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titulo);
    font-size: 11px;
    background: var(--accent-soft);
    color: var(--text-2);
}

.pn-medal-1 {
    background: var(--orange);
    color: var(--vivo-ink, #1a1a1a);
}

.pn-meta b {
    font-weight: 700;
    color: var(--text);
}

/* P1·1 — el pie del ranking cuando hay órdenes de recetas que ya no existen. */
.pn-fantasma {
    font-size: 10.5px;
    color: var(--text-2);
    margin-top: 10px;
}

/* P1·3 — el estado vacío que APRENDE: la leyenda y, si ya hay algo empezado,
   la barrita con su "N de M". */
.pn-learn-tx {
    font-size: 11.5px;
    line-height: 1.45;
    margin-top: 8px;
    color: var(--text-2);
}

.pn-learn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.pn-learn-nom {
    font-size: 11px;
    color: var(--text-2);
    max-width: 45%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-learn-rail {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--accent-soft);
    overflow: hidden;
}

.pn-learn-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--orange);
}

.pn-learn-n {
    font-size: 9.5px;
    font-weight: 700;
    flex-shrink: 0;
    color: var(--text-2);
}

/* P2 — el signo de la variación de costos: sube = caro (rojo), baja = barato
   (verde). Los mismos dos tonos que ya usan panel-up / panel-down. */
.pn-costo-sube {
    color: #e06c5f;
}

.pn-costo-baja {
    color: #5fbf77;
}

/* Móvil: dos columnas (la estrella 2×2 sigue arriba y sigue entrando), y en
   angosto una sola, con el alto libre para que nada se corte. */
@media (max-width: 900px) {
    .pn-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .pn-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .pn-2x2,
    .pn-2x1,
    .pn-1x1 {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ============================================================
   T3.2 — MENÚ DEL DÍA (apartado del chef)
   ============================================================ */

.md-modal {
    border: 1px solid var(--card-border);
    border-radius: 22px;
    box-shadow: var(--shadow-md);
    width: 92vw;
    max-width: 1100px;
    height: 90vh;
    max-height: 90vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn .2s ease;
}

/* Tema: el orden importa — la regla dark va DESPUÉS para ganar en oscuro
   (':root' matchea el html en ambos temas; por eso antes se veía claro en oscuro). */
:root .md-modal {
    background: rgba(248, 248, 246, 0.97);
}

[data-theme="dark"] .md-modal {
    background: rgba(22, 22, 22, 0.96);
}

.md-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.md-head-tt {
    margin-right: auto;
}

.md-head-tt h2 {
    font-family: 'DM Serif Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--text);
}

.md-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-top: 2px;
}

.md-week-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 4px 6px;
    background: var(--accent-soft);
}

.md-week-nav #md-week-label {
    font-size: 12.5px;
    color: var(--text);
    min-width: 130px;
    text-align: center;
}

.md-navbtn {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-2);
    font-size: 16px;
    cursor: pointer;
    border-radius: 7px;
}

.md-navbtn:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.md-body {
    padding: 16px 20px 24px;
    overflow-y: auto;
}

.md-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.md-day {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 10px;
    cursor: pointer;
    min-width: 0;
    background: var(--accent-soft);
    transition: border-color .15s, background .15s;
}

.md-day:hover {
    border-color: var(--text-3);
}

.md-day.sel {
    border-color: var(--orange);
    background: rgba(245, 158, 11, .08);
}

.md-day-top {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.md-day-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    margin: 4px 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-day.pasado .md-day-name {
    color: var(--text-3);
    font-weight: 500;
}

.md-day-gen {
    font-size: 10.5px;
    color: #5fbf77;
    font-weight: 600;
}

.md-day-cub,
.md-day-asignar {
    font-size: 10.5px;
    color: var(--text-3);
}

.md-editor {
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    background: var(--accent-soft);
}

.md-ed-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.md-ed-tt {
    flex: 1;
    min-width: 200px;
}

.md-nombre {
    width: 100%;
    border: none;
    background: none;
    color: var(--text);
    font-size: 18px;
    font-weight: 700;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    padding: 0;
}

.md-nombre::placeholder {
    color: var(--text-3);
    font-weight: 600;
}

.md-ed-sub {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 3px;
}

.md-costo {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 4px;
}

.md-costo:empty {
    display: none;
}

.md-plant-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.md-plant-btn:hover {
    border-color: var(--text-3);
}

.md-side {
    display: flex;
    gap: 12px;
}

.md-cub-box label,
.md-precio-box label {
    display: block;
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 4px;
}

.md-opt {
    color: var(--text-3);
}

.md-cub-box input,
.md-precio-box input {
    width: 92px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--text);
    font-size: 14px;
    padding: 0 10px;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.md-cub-box input:focus,
.md-precio-box input:focus {
    border-color: var(--text-2);
}

/* Sección = tarjeta con cabecera marcada + divisor */
.md-sec {
    border: 1px solid var(--border-2);
    border-radius: 14px;
    background: var(--accent-soft);
    margin-bottom: 14px;
    overflow: hidden;
}

.md-sec-head {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-2);
    flex-wrap: wrap;
}

.md-sec-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--card);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-size: 16px;
    flex-shrink: 0;
}

.md-sec-name {
    flex: 1 1 auto;
    min-width: 90px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13.5px;
    font-weight: 700;
    outline: none;
    font-family: 'DM Sans', sans-serif;
    padding: 0;
}

/* Segmentado "Todos lo mismo / A elección" */

.md-sec-subtotal {
    font-size: 11.5px;
    color: var(--text-3);
    flex-shrink: 0;
}

.md-sec-subtotal:empty {
    display: none;
}

.md-sec-actions {
    display: inline-flex;
    gap: 3px;
    flex-shrink: 0;
}

.md-sec-actions button {
    width: 26px;
    height: 24px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text-3);
    border-radius: 7px;
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
}

.md-sec-actions button:hover:not(:disabled) {
    color: var(--text);
    background: var(--accent-bg);
}

.md-sec-actions button:disabled {
    opacity: .3;
    cursor: default;
}

.md-sec-items {
    padding: 12px 14px 4px;
}

.md-sec-empty {
    font-size: 12px;
    color: var(--text-3);
    padding: 2px 2px 8px;
}

.md-additem-wrap {
    position: relative;
    padding: 2px 14px 12px;
}

/* Cada plato = fila con superficie y borde propios */
.md-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border: 1px solid var(--border-2);
    border-radius: 11px;
    background: var(--card);
    margin-bottom: 8px;
}

.md-gen-num {
    color: var(--orange);
    font-weight: 600;
}

.md-save {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: var(--btn-bg);
    color: var(--btn-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.md-save:hover {
    opacity: .9;
}

/* Miniatura de receta (ítems y resultados del buscador) */
.md-thumb {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    background-color: var(--accent-soft);
}

.md-sug-row .md-thumb {
    width: 30px;
    height: 30px;
}

.md-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-3);
    font-size: 15px;
}

.md-item-main {
    flex: 1;
    min-width: 0;
}

.md-item-n {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-item-tag,
.md-sug-tag {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .4px;
    padding: 2px 6px;
    border-radius: 5px;
    margin-left: 5px;
    background: rgba(125, 125, 125, .2);
    color: var(--text-2);
}

.md-item-gen {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

/* X7c — chip de ESTACIÓN de cada plato del menú. El <select> nativo (mismo desplegable
   que + Cargar) va transparente encima del chip: se ve el chip, se abre la lista real. */
.md-est-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    margin-top: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    background: var(--accent-soft);
    font-size: 11px;
    color: var(--text-3);
    cursor: pointer;
}

.md-est-wrap.on {
    border-color: var(--orange);
    color: var(--orange);
}

.md-est-ico {
    font-size: 12px;
}

.md-est-lbl {
    opacity: .8;
}

.md-est-txt {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.md-est-chev {
    font-size: 11px;
    opacity: .7;
}

.md-est-sel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

[data-theme="dark"] .md-est-sel {
    color-scheme: dark;
}

.md-est-sel:disabled {
    cursor: default;
}

.md-item-cub {
    font-size: 11px;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.md-item-cub input {
    width: 56px;
    height: 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 13px;
    text-align: center;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.md-item-x {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-3);
    font-size: 17px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 7px;
}

.md-item-x:hover {
    color: var(--red);
}

.md-additem {
    border: none;
    background: none;
    color: var(--text-2);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
    font-family: 'DM Sans', sans-serif;
}

.md-additem:hover {
    color: var(--text);
}

.md-item-search {
    margin-top: 6px;
    border: 1px solid var(--border-2);
    border-radius: 11px;
    overflow: hidden;
}

:root .md-item-search {
    background: #fff;
}

[data-theme="dark"] .md-item-search {
    background: #1f1f1f;
}

.md-search-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    padding: 11px 13px;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.md-search-results {
    max-height: 260px;
    overflow-y: auto;
}

.md-sug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 8px 13px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-3);
    background: var(--accent-soft);
    border-top: 1px solid var(--border);
}

.md-sug-c {
    opacity: .65;
}

.md-sug-chev {
    font-size: 14px;
    display: inline-block;
    transition: transform .15s;
}

.md-sug-chev.open {
    transform: rotate(90deg);
}

.md-sug-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 13px;
    cursor: pointer;
}

.md-sug-row:hover {
    background: var(--accent-soft);
}

.md-sug-n {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-sug-m {
    font-size: 11px;
    color: var(--text-3);
    flex-shrink: 0;
}

.md-sug-empty {
    padding: 14px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
}

.md-addsec {
    border: 1px dashed var(--border-2);
    background: none;
    color: var(--text-2);
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    margin-top: 14px;
}

.md-addsec:hover {
    color: var(--text);
    border-color: var(--text-3);
}

.md-ed-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.md-estado-listo {
    font-size: 12.5px;
    color: #5fbf77;
    background: rgba(95, 191, 119, .1);
    padding: 8px 12px;
    border-radius: 9px;
    margin-right: auto;
}

.md-estado-gen {
    font-size: 12.5px;
    color: var(--text-2);
    margin-right: auto;
}

/* X8 — BORRADOR: el menú está guardado (nada se pierde) pero todavía no declarado listo,
   así que el HUB no ofrece generarlo. Ámbar = falta una acción, no es un error. */
.md-estado-borrador {
    font-size: 12.5px;
    color: #e0a03a;
    background: rgba(224, 160, 58, .12);
    padding: 8px 12px;
    border-radius: 9px;
    margin-right: auto;
}

.md-foot-btns {
    display: flex;
    gap: 8px;
}

.md-ghost {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.md-ghost:hover {
    border-color: var(--text-3);
}

.md-ghost:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.md-ghost:disabled:hover {
    border-color: var(--border);
}

.md-pop-ov {
    position: fixed;
    inset: 0;
    z-index: 1700;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalIn .15s ease;
}

.md-pop {
    width: 100%;
    max-width: 340px;
    border: 1px solid var(--border-2);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: 18px;
}

:root .md-pop {
    background: #fff;
}

[data-theme="dark"] .md-pop {
    background: #1f1f1f;
}

.md-pop-tt {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
}

.md-pop-sub {
    font-size: 12px;
    color: var(--text-3);
    margin-bottom: 12px;
    line-height: 1.4;
}

.md-pop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2);
    margin-bottom: 16px;
}

.md-pop-row input {
    width: 110px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--text);
    font-size: 14px;
    padding: 0 10px;
    outline: none;
    font-family: 'DM Sans', sans-serif;
}

.md-pop-row input[type=date] {
    width: 100%;
    color-scheme: light;
}

[data-theme="dark"] .md-pop-row input[type=date] {
    color-scheme: dark;
}

.md-pop-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.md-pop-cancel {
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-2);
    border-radius: 9px;
    font-size: 13px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.md-pop-ok {
    height: 38px;
    padding: 0 16px;
    border: none;
    background: var(--btn-bg);
    color: var(--btn-color);
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.md-pop-ok:disabled {
    opacity: .5;
    cursor: default;
}

.md-plant-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.md-plant-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    margin-bottom: 6px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text);
}

.md-plant-row:hover {
    border-color: var(--text-3);
}

.md-plant-info {
    flex: 1;
    min-width: 0;
}

.md-plant-nom {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.md-plant-platos {
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.md-plant-pie {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-2);
}

.md-plant-fc-na {
    color: var(--text-3);
}

.md-plant-del {
    border: none;
    background: none;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 4px;
    flex-shrink: 0;
}

.md-plant-del:hover {
    color: var(--red);
}

@media (max-width: 640px) {
    #modal-menu-dia.modal-overlay {
        padding: 0;
        align-items: stretch;
        /* Termina donde empieza la barra (56px + safe-area): la barra (z130) queda por encima. */
        bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 120;
    }

    .md-modal {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
        margin: 0;
    }

    .md-week {
        grid-template-columns: repeat(4, 1fr);
    }

    .md-head {
        gap: 8px;
    }

    .md-side {
        width: 100%;
    }
}

/* ============================================================
   T3.3 — WIDGET "MENÚ DEL DÍA" EN EL HUB
   ============================================================ */
.hub-menudia-card {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* El widget entra en su recuadro: no scrollea entero, footer (Generar) siempre visible.
   Solo la lista de platos (.mwd-secs) scrollea hacia adentro si hace falta. */
.hub-wcard>.hub-w.hub-menudia-card {
    overflow: hidden;
}

.mwd-date {
    font-size: 11px;
    color: var(--text-3);
    margin-left: auto;
}

.mwd-pencil {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 8px;
    cursor: pointer;
    margin-left: 8px;
    font-size: 13px;
    flex-shrink: 0;
}

.mwd-pencil:hover {
    color: var(--text);
}

.mwd-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 160px;
    color: var(--text-3);
    text-align: center;
}

.mwd-empty i {
    font-size: 26px;
    opacity: .7;
}

.mwd-empty p {
    font-size: 13px;
    color: var(--text-2);
}

.mwd-plan {
    border: 1px solid var(--border-2);
    background: var(--accent-soft);
    color: var(--text);
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}

.mwd-plan:hover {
    background: var(--accent-bg);
}

.mwd-meta {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--text-3);
}

/* Nombre del menú + meta (cubiertos · costo/cub · pastilla FC) en una línea */
.mwd-topline {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 8px;
    flex: none;
}

/* Chips de categorías del menú del día (neutros): "Entrada · 3". Envuelven en varias
   líneas si no entran. No se comprimen con la altura del widget. */
.mwd-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    flex: none;
}

.mwd-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 20px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    color: var(--text-2);
    white-space: nowrap;
}

.mwd-chip-sep {
    color: var(--text-3);
}

.mwd-chip-n {
    color: var(--text);
    font-weight: 700;
}

.mwd-mname {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.mwd-metaline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 12px;
    color: var(--text-2);
}

.mwd-secs {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;   /* discreta: el thumb aparece solo al hover (bloque unificado del HUB) */
}

.mwd-seg {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-3);
    margin: 10px 0 2px;
}

.mwd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
}

.mwd-item:last-child {
    border-bottom: none;
}

.mwd-n {
    flex: 1;
    min-width: 0;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mwd-q {
    font-size: 11.5px;
    color: var(--text-2);
    flex-shrink: 0;
}

.mwd-book {
    width: 26px;
    height: 26px;
    border: none;
    background: none;
    color: var(--text-3);
    font-size: 14px;
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 7px;
}

.mwd-book:hover {
    color: var(--text);
    background: var(--accent-soft);
}

.mwd-genbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 9px 12px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--text-2);
    font-size: 12.5px;
}

.mwd-chip {
    border: 1px solid var(--border);
    background: var(--accent-soft);
    color: var(--text-2);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11.5px;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: all .15s;
}

.mwd-chip:hover {
    color: var(--text);
}

.mwd-chip.on {
    background: var(--orange);
    border-color: var(--orange);
    color: #161616;
    font-weight: 500;
}

.mwd-planificar {
    flex: none;
    margin-top: 9px;
    width: 100%;
    border: 0;
    background: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: 'DM Sans', sans-serif;
}

.mwd-planificar:hover {
    color: var(--orange);
}

/* Footer fijo del widget: Seguridad (segmentado) + Generar en una fila */
.mwd-foot {
    flex: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 11px;
}

.mwd-seg-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.mwd-seg-lbl {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
}

.mwd-segctrl {
    display: flex;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
}

.mwd-sgb {
    border: 0;
    background: transparent;
    color: var(--text-2);
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
}

.mwd-sgb:hover {
    color: var(--text);
}

.mwd-sgb.on {
    background: var(--orange);
    color: #161616;
}

.mwd-sgb-edit i {
    font-size: 12px;
}

/* Generar dentro del footer: ocupa el resto de la fila, alto compacto.
   En recuadros angostos baja a una fila completa (nunca se corta). */
.mwd-foot .gen-wrap {
    flex: 1 1 150px;
    margin-top: 0;
    width: auto;
}

.mwd-foot .gen-btn {
    height: 46px;
    font-size: 13.5px;
}

/* El pie con "Generar" respira igual que los botones de pie de los otros widgets
   (ej. "Ver producción del día"): descansa sobre el padding de 18px del recuadro,
   que overflow:hidden NUNCA recorta. Un margin-bottom acá quedaba en el borde del
   clip y en tarjetas justas (lista con scroll) se comía, dejando el botón pegado a
   la curva de la esquina. Sin margin: aire de 18px CONSTANTE en cualquier alto.
   Aplica a AMBOS estados (Generar y "Producción generada"), que comparten .mwd-foot. */
.hub-menudia-card .mwd-foot {
    margin-bottom: 0;
}

/* Footer con un solo botón ancho (estado "ya generado") */

/* Botón "Generar producción" — variante B (borde LED naranja girando) */
.gen-wrap {
    position: relative;
    padding: 2px;
    border-radius: 14px;
    overflow: hidden;
    width: 100%;
    margin-top: 14px;
}

.gen-wrap::before {
    content: "";
    position: absolute;
    inset: -50%;
    background: conic-gradient(from 0deg, transparent 0deg, #F5A623 60deg, transparent 140deg, transparent 360deg);
    animation: gen-spin 2.4s linear infinite;
}

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

.gen-btn {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 12px;
    background: #e9e4d8;
    color: #161616;
    font-size: 14.5px;
    font-weight: 600;
    font-family: 'DM Sans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
}

.gen-btn .play {
    display: inline-flex;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #161616;
    color: #e9e4d8;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.gen-wrap.loading::before {
    animation-duration: .8s;
}

.gen-btn .spin {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(22, 22, 22, 0.25);
    border-top-color: #161616;
    border-radius: 50%;
    animation: gen-rot .7s linear infinite;
}

@keyframes gen-rot {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .gen-wrap::before {
        animation: none;
        background: #F5A623;
    }

    .gen-btn .spin {
        animation: none;
    }
}

/* Estado apagado "Producción generada": gris plano, SIN el resplandor naranja.
   El brillo viene de .gen-wrap::before (conic-gradient naranja girando); acá se
   anula ese pseudo del wrapper cuando adentro hay un botón .gen-btn-off. */
.gen-wrap:has(.gen-btn-off) {
    padding: 0;
}

.gen-wrap:has(.gen-btn-off)::before {
    content: none !important;
    background: none !important;
    animation: none !important;
}

.gen-btn.gen-btn-off {
    background: var(--accent-bg, #2b2b30);
    color: var(--text-2, #b9b9c2);
    box-shadow: none !important;
    filter: none !important;
    opacity: 1;
    cursor: default;
}

.gen-btn.gen-btn-off::before,
.gen-btn.gen-btn-off::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}

.gen-btn.gen-btn-off .play {
    background: var(--border-2, #3a3a42);
    color: var(--text-2);
    box-shadow: none !important;
}

/* ============================================================
   HUB responsive — mobile (una sola columna apilada)
   ============================================================ */
@media (max-width: 640px) {

    /* Hero apilado; "Próximamente" como tiles 2x2 */
    

    

    /* Producción del día en celular: fecha + filtros visibles y la lista crece
       con su contenido (scroll normal de la página, sin cajita de ~2 órdenes). */
    .hub-prod .prod-datebar,
    .hub-prod .prod-filtros {
        display: flex;
    }

    .hub-prod #prod-lista {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow-y: visible;
    }

    /* Menú del día compacto */
    .hub-menudia-card .mwd-item {
        padding: 6px 0;
    }

    /* Biblioteca: full-width apilada en 1 columna (categorías arriba, recientes abajo) */
    .hub-biblio-wide {
        flex-direction: column;
        gap: 14px;
        padding: 18px;
    }

    .hub-biblio-main,
    .hub-biblio-recent-col {
        flex: none;
    }

    .hub-biblio-recent-col {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 14px;
    }

    /* Tiles "Próximamente": solo la cabecera (sin el detalle), más compactos */
    

    

    
}

/* ============================================================
   Editor de receta — ayudas del bloque de rendimiento
   ============================================================ */
.rend-help {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
}

.rend-opt {
    font-weight: 400;
    color: var(--text-3);
}

/* Cartelito informativo de merma de cocción (subrecetas). Solo espejo: no se guarda. */
.rend-coccion {
    margin-top: 12px;
    padding: 9px 12px;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-2);
}

/* ============================================================
   HUB — Dashboard tipo COLLAGE (3 plantillas, recuadros, swap, bandeja)
   Variables reales del tema; sin hex del mockup. Verde y naranja no juntos.
   ============================================================ */
/* Selector de plantilla (modo edicion) */
/* ============================================================
   EL HUB BENTO — la grilla de bloques
   ============================================================
   4 columnas, filas de 150px y un SPAN fijo por widget (prod 2x2, tareas 1x2,
   menu/biblio 2x1, el resto 1x1). Reemplaza al collage de recuadros s1..s9 y
   a sus tres plantillas: con spans fijos no hay geometría que elegir, lo único
   editable es el ORDEN.

   BILINGÜE POR CONSTRUCCIÓN, igual que el panel del HUB: los tokens de tierra
   se piden con FALLBACK a los de siempre. SIN el switch queda la MISMA grilla
   con la piel clásica —var(--card), var(--border), cero insets y cero bloques
   de color—; la piel (lima / hueso / vidrio / vitrina) cuelga de
   [data-paleta="tierra"] + tema oscuro, al final del archivo.
============================================================ */
.hub-bento {
    /* Materiales (la piel los repinta bajo tierra oscuro) */
    --bt-sup: var(--card);
    --bt-borde: var(--border);
    --bt-ink: var(--text);
    --bt-sombra: none;
    /* Lo VIVO y su tinta: el naranja de siempre sin el switch, el lima con él */
    --bt-vivo: var(--terra, var(--orange));
    --bt-vivo-ink: var(--vivo-ink, #1a1a1a);
    --bt-inset-vivo: none;
    /* La barra de producción */
    --bt-bar-track: var(--accent-bg);
    --bt-bar-inset: none;
    --bt-bar-fill: var(--terra, var(--orange));
    /* El botón grande de producción */
    --bt-cta-bg: var(--terra, var(--orange));
    --bt-cta-ink: var(--vivo-ink, #1a1a1a);
    --bt-cta-sombra: none;
    /* El botón del checklist (bloque hueso) */
    --bt-tk-cta-bg: var(--claro-ink, var(--text));
    --bt-tk-cta-ink: var(--claro, var(--card));
    /* Los chips de familias de la biblioteca */
    --bt-chip-bg: var(--claro-ink, var(--accent-bg));
    --bt-chip-ink: var(--claro, var(--text));

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 150px;
    /* BENTO t4 · A2.2 (estructura): los bloques chicos rellenan los huecos que dejan
       los 2×2. La bento t1 lo había dejado afuera para respetar el mockup aprobado;
       Facu lo pide ahora explícitamente. El drag sigue cayendo donde se ve porque
       hubDropOnBloque inserta en el ÍNDICE del bloque soltado, no en una coordenada. */
    grid-auto-flow: row dense;
    gap: 14px;
    width: 100%;
}

/* PANTALLA COMPLETA (para las dos paletas). En desktop las filas ESCALAN para que
   la grilla llene el alto visible: el alto de fila lo mide el JS (hubBentoAltoFila,
   molde del alto del mazo del fichero) y lo publica en --hub-fila. El minmax pone el
   piso: si la cuenta da menos de 150px manda el mínimo y aparece scroll, que es lo
   correcto en una pantalla baja. Sin JS —o antes de la primera medición— el fallback
   deja las filas de 150px de siempre. */
@media (min-width: 1024px) {
    .hub-bento {
        grid-auto-rows: minmax(150px, var(--hub-fila, 150px));
    }
}

.hub-bt {
    position: relative;
    min-width: 0;
    border-radius: 26px;
    padding: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .15s;
    background: var(--bt-sup);
    border: 1px solid var(--bt-borde);
    color: var(--bt-ink);
    box-shadow: var(--bt-sombra);
}

.hub-bt:hover {
    transform: translateY(-2px);
}

/* Toda la tarjeta abre (pase y biblioteca conservan el handler de hoy) */
.hub-bt[onclick] {
    cursor: pointer;
}

/* El interior es la columna flex: los "margin-top:auto" de adentro anclan abajo.
   Los absolutos (el botón, el ícono, el emoji) cuelgan del bloque, no de acá. */
.bt-in {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* SPANS — fijos por widget */
.hub-bt[data-w="prod"] {
    grid-column: span 2;
    grid-row: span 2;
}

.hub-bt[data-w="tareas"] {
    grid-row: span 2;
}

.hub-bt[data-w="menu"],
.hub-bt[data-w="biblio"] {
    grid-column: span 2;
}

/* ---- Piezas compartidas ---- */
.bt-lab {
    font-size: 11px;
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
    opacity: .75;
    line-height: 1.3;
}

.bt-lab-off {
    opacity: .6;
}

.bt-big {
    font-family: var(--font-titulo);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.15;
    margin-top: auto;
    overflow: hidden;
}

.bt-sub {
    font-size: 12.5px;
    font-weight: 700;
    opacity: .8;
    margin-top: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-ico {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 20px;
    line-height: 1;
    opacity: .9;
    pointer-events: none;
}

/* ---- 1 · PRODUCCIÓN — el bloque grande ---- */
.bt-prod-pct {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 96px;
    line-height: 1;
    letter-spacing: -.04em;
    margin-top: auto;
}

.bt-prod-row {
    display: flex;
    gap: 26px;
    margin-top: 10px;
}

.bt-prod-row b {
    display: block;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 22px;
    line-height: 1.15;
}

.bt-prod-row span {
    font-size: 11.5px;
    font-weight: 700;
    opacity: .75;
}

/* La barra NO ocupa todo el ancho: le deja los 190px de la derecha al botón, que
   antes la pisaba. Los dos apoyan en el MISMO fondo del bloque (el borde de abajo
   del contenido), así que el botón va a bottom:20px — los 20 del padding— y no a 18. */
.bt-prod-bar {
    height: 12px;
    width: calc(100% - 190px);
    border-radius: 99px;
    margin-top: 14px;
    overflow: hidden;
    background: var(--bt-bar-track);
    box-shadow: var(--bt-bar-inset);
}

.bt-prod-bar i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--bt-bar-fill);
    transition: width .3s ease;
}

.bt-prod-cta {
    position: absolute;
    right: 18px;
    bottom: 20px;
    border: none;
    border-radius: 16px;
    padding: 13px 18px;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    background: var(--bt-cta-bg);
    color: var(--bt-cta-ink);
    box-shadow: var(--bt-cta-sombra);
}

/* ---- 2 · CHECKLIST ---- */
.bt-tk-n {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 56px;
    line-height: 1;
    letter-spacing: -.04em;
    margin-top: auto;
}

.bt-tk-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bt-tk-it {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

/* El casillero: tocarlo tilda de verdad (tkToggle, el handler de siempre) */
.bt-tk-it i {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid currentColor;
    opacity: .5;
}

.bt-tk-it span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-tk-cta {
    margin-top: auto;
    border: none;
    border-radius: 14px;
    padding: 11px;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    background: var(--bt-tk-cta-bg);
    color: var(--bt-tk-cta-ink);
}

/* ---- 3 · PASE DE TURNO ---- */
.bt-pase-t {
    font-size: 30px;
}

/* ---- 4 · MENÚ DEL DÍA ----
   La foto es la identidad del bloque, así que va en las DOS paletas. Dos capas: el
   VELO SIEMPRE (sin él el texto muere sobre el vidrio verde) y debajo la imagen.
   Los colores del texto son fijos a propósito: se apoyan en la foto, no en la
   superficie de la paleta.

   EL ALPHA DE ARRIBA SALE DE LA MEDICIÓN, no del gusto: el mockup pedía .55 y con
   ese valor el RÓTULO —que cae justo sobre la zona más clara del vidrio, y su rgba
   al 75% no ayuda— quedaba en 3,75:1. Subiendo de a .05 sobre el píxel REAL de la
   foto: .60 → 4,17 · .65 → 4,66 ✓. El de abajo se queda en .78: ahí el título mide
   6,7-6,9:1 y el subtítulo 7,5:1, de sobra. */
/* 🍱 BENTO 8 · P1 — MUERE LA FOTO, ENTRA "ATARDECER SALVIA" (decisión sellada de Facu,
   7-sep). La foto (img/fondo-menu.webp) hacía que los botones "volaran": su superficie
   translúcida se apoyaba sobre una imagen con zonas claras y oscuras, y la legibilidad
   había que pelearla con velos y franjas. Un degradado de la casa la garantiza SOLO:
   es oscuro y previsible en cada punto, así que el mismo texto se lee igual en los tres
   estados y en las DOS paletas. DEROGA la decisión de t5c ("la foto se ve viva siempre").

   Con la foto mueren TODAS sus capas de defensa: el velo de t4·A5, la FRANJA inferior de
   t5c/t5d (el ::before que vivía acá y su override de celular) y —en P2— las cuatro
   veladuras `backdrop-filter: brightness(.4)` que protegían el rótulo y los botones. */
.hub-bt[data-w="menu"] {
    background: linear-gradient(135deg, #2A3328 0%, #3E4A33 45%, #6B6D2F 100%);
    border-color: rgba(255, 255, 255, .08);
}

.hub-bt[data-w="menu"] > .bt-in {
    position: relative;
    z-index: 1;
}

.hub-bt[data-w="menu"] .bt-lab {
    opacity: 1;
    color: rgba(240, 242, 245, .75);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.hub-bt[data-w="menu"] .bt-sub {
    opacity: 1;
    color: rgba(240, 242, 245, .85);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.bt-menu-t {
    font-size: 22px;
    color: #F0F2F5;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* El texto no se mete abajo del CTA (que es absoluto a la derecha) */
.bt-menu-t,
.hub-bt[data-w="menu"] .bt-sub {
    padding-right: 132px;
}

.bt-cta-vivo {
    position: absolute;
    right: 18px;
    bottom: 18px;
    border: none;
    border-radius: 14px;
    padding: 11px 16px;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 12.5px;
    cursor: pointer;
    background: var(--bt-vivo);
    color: var(--bt-vivo-ink);
    box-shadow: var(--bt-inset-vivo);
}

.bt-cta-off {
    opacity: .55;
    cursor: default;
}

/* ---- 6 · BIBLIOTECA DE RECETAS ---- */
.bt-biblio-n {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 40px;
    line-height: 1;
    letter-spacing: -.04em;
    margin-top: auto;
}

.bt-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    overflow: hidden;
    max-height: 34px;
}

.bt-chip {
    border: none;
    border-radius: 99px;
    padding: 7px 13px;
    /* El chip es cuerpo, no título: bajo tierra la regla general de button lo
       pasaría a Sora y el mockup lo tiene en la letra del cuerpo. */
    font-family: var(--font-cuerpo, 'DM Sans', sans-serif);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    background: var(--bt-chip-bg);
    color: var(--bt-chip-ink);
}

.bt-chip-on {
    background: var(--bt-vivo);
    color: var(--bt-vivo-ink);
    box-shadow: var(--bt-inset-vivo);
}

/* ---- 8-11 · VITRINAS "Próximamente" — sin números ni listas inventadas ---- */
.bt-vitrina {
    color: var(--text-3);
}

.bt-soon {
    margin-top: auto;
    font-family: var(--font-cuerpo, 'DM Sans', sans-serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    color: var(--text-3);
}

/* ---- Modo edición: arrastrar reordena; los clics de adentro se apagan ---- */
body.hub-editing .hub-bt {
    cursor: grab;
    outline: 2px solid var(--terra, var(--orange));
    outline-offset: -2px;
}

body.hub-editing .hub-bt:hover {
    transform: none;
}

body.hub-editing .hub-bt>.bt-in {
    pointer-events: none;
}

.hub-bt.dragging {
    opacity: .4;
}

body.hub-editing .hub-bt.drop-ok {
    outline: 2px dashed var(--terra, var(--orange));
    outline-offset: 2px;
}


/* Tarjeta del widget dentro del recuadro (el chrome real es .hub-w / .hub-biblio) */
.hub-wcard {
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.hub-wcard>.hub-w,
.hub-wcard>.hub-biblio {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;   /* discreta: el thumb aparece solo al hover (bloque unificado del HUB) */
}

/* ---- Barra de scroll interna de los widgets del HUB: finita, redondeada y discreta ----
   Invisible en reposo; aparece al pasar el mouse por la tarjeta (en desktop, scrollear
   implica hover). El gutter queda SIEMPRE reservado (solo cambia el color del thumb), así
   el contenido no salta. Thumb ~4px inset con borde transparente para no tocar el radio de
   la tarjeta. En celu no hay scroll interno (las tarjetas crecen), así que no aplica. */
.hub-wcard>.hub-w::-webkit-scrollbar,
.hub-wcard>.hub-biblio::-webkit-scrollbar,
.hub-wcard[data-w="prod"] #prod-resumen::-webkit-scrollbar,
.mwd-secs::-webkit-scrollbar {
    width: 16px;
}

/* Margen REAL en el riel: el recorrido de la barra arranca y termina 14px adentro,
   así el thumb nunca llega a las esquinas curvas de la tarjeta (arriba ni abajo). */
.hub-wcard>.hub-w::-webkit-scrollbar-track,
.hub-wcard>.hub-biblio::-webkit-scrollbar-track,
.hub-wcard[data-w="prod"] #prod-resumen::-webkit-scrollbar-track,
.mwd-secs::-webkit-scrollbar-track {
    background: transparent;
    margin: 14px 0;
}

.hub-wcard>.hub-w::-webkit-scrollbar-thumb,
.hub-wcard>.hub-biblio::-webkit-scrollbar-thumb,
.hub-wcard[data-w="prod"] #prod-resumen::-webkit-scrollbar-thumb,
.mwd-secs::-webkit-scrollbar-thumb {
    background: transparent;                 /* invisible en reposo */
    /* Aire lateral: thumb visible ~4px con 6px de inset a cada costado (16 - 12 = 4).
       El clearance vertical de las esquinas lo da el margin del riel de arriba. */
    border-style: solid;
    border-color: transparent;
    border-width: 2px 6px;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background .2s ease;
}

.hub-wcard:hover .hub-w::-webkit-scrollbar-thumb,
.hub-wcard:hover .hub-biblio::-webkit-scrollbar-thumb,
.hub-wcard:hover #prod-resumen::-webkit-scrollbar-thumb,
.hub-wcard:hover .mwd-secs::-webkit-scrollbar-thumb {
    background: var(--border-2);
    background-clip: padding-box;
}

/* Firefox: fina siempre (gutter reservado), color solo al hover de la tarjeta */
.hub-wcard:hover>.hub-w,
.hub-wcard:hover>.hub-biblio,
.hub-wcard:hover #prod-resumen,
.hub-wcard:hover .mwd-secs {
    scrollbar-color: var(--border-2) transparent;
}

/* Produccion: lista interna scrollea, el calendario puede salir */
.hub-wcard[data-w="prod"]>.hub-w {
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.hub-wcard[data-w="prod"] #prod-lista {
    flex: 1 1 auto;
    min-height: 0;
}

/* Widget del HUB (alto fijo): la lista-resumen scrollea ADENTRO y el boton
   "Ver produccion del dia" queda SIEMPRE al pie, dentro de la tarjeta.
   En mobile (.hub-w pasa a height:auto) el auto no recorta: la tarjeta crece. */
.hub-wcard[data-w="prod"] #prod-resumen {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;   /* discreta: el thumb aparece solo al hover (bloque unificado del HUB) */
}

.hub-wcard[data-w="prod"] .prod-ver-btn {
    flex-shrink: 0;
}

/* ---- Tareas y checklist: misma mecánica que Producción ----
   Header + chips fijos arriba, la lista scrollea por dentro con la barrita fina,
   y "Ver tareas del día" queda al pie. */
.hub-wcard[data-w="tareas"]>.hub-w {
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.hub-wcard[data-w="tareas"] .hub-w-head,
.hub-wcard[data-w="tareas"] .tk-chips {
    flex: none;
}

.hub-wcard[data-w="tareas"] #tk-lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;   /* discreta: el thumb aparece solo al hover */
}

.hub-wcard[data-w="tareas"] .prod-ver-btn {
    flex-shrink: 0;
}

/* Barra de scroll interna del widget de tareas: misma que el bloque unificado del HUB */
.hub-wcard[data-w="tareas"] #tk-lista::-webkit-scrollbar {
    width: 16px;
}

.hub-wcard[data-w="tareas"] #tk-lista::-webkit-scrollbar-track {
    background: transparent;
    margin: 14px 0;
}

.hub-wcard[data-w="tareas"] #tk-lista::-webkit-scrollbar-thumb {
    background: transparent;
    border-style: solid;
    border-color: transparent;
    border-width: 2px 6px;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background .2s ease;
}

.hub-wcard[data-w="tareas"]:hover #tk-lista::-webkit-scrollbar-thumb {
    background: var(--border-2);
    background-clip: padding-box;
}

.hub-wcard[data-w="tareas"]:hover #tk-lista {
    scrollbar-color: var(--border-2) transparent;
}

/* Fila de tarea: tocable (tilda/destilda). Reusa .hub-ord de producción. */
.tk-row {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
}

.tk-row:hover {
    background: rgba(255, 255, 255, .04);
}

.tk-row:active {
    background: var(--accent-soft);
}

.tk-row-body {
    flex: 1;
    min-width: 0;
}

.tk-row .hub-ord-n {
    white-space: normal;
}

.tk-done-meta {
    font-size: 10.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.tk-empty {
    color: var(--text-3);
    font-size: 13px;
    line-height: 1.5;
    padding: 14px 4px;
}

/* Modal "Nueva tarea": pills de lista / estación / cuándo (reusan .prod-fil-btn) */
.tk-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tk-sublabel {
    display: block;
    margin: 12px 0 6px;
    font-size: 12px;
    color: var(--text-3);
}

.tk-confirm-msg {
    color: var(--text-2);
    line-height: 1.5;
}

/* ============================================================
   TAREAS v2 — piezas del widget + Gestión de tareas
============================================================ */
/* Header del widget: engranaje de Gestión */
.tk-gear-btn { background: transparent; border: none; color: var(--text-3); cursor: pointer; padding: 4px; border-radius: 8px; display: inline-flex; align-items: center; transition: .14s; }
.tk-gear-btn:hover { color: var(--text); background: var(--accent-soft); }
.tk-gear-btn .ti { font-size: 18px; }

/* Botón ⚠ del header del widget: reportar incidencia (todos los roles) */
.tk-rep-btn { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: var(--text); border-radius: 8px; padding: 4px 9px; font-size: 13px; line-height: 1; cursor: pointer; transition: background .15s; }
.tk-rep-btn:hover { background: rgba(255, 255, 255, .18); }
.tk-rep-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0 4px; border-radius: 999px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }

/* Chips Tarea / Incidencia arriba del modal de la rápida */
.tk-rap-modo { display: flex; gap: 8px; margin-bottom: 16px; }

/* Chip de estación y tag "registrar" en las filas del widget/tablero */
.tk-chip-est { font-size: 10.5px; font-weight: 600; color: var(--text-3); background: var(--accent-soft); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; white-space: nowrap; align-self: center; margin-right: 6px; }
.tk-tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--orange); border: 1px solid var(--orange); border-radius: 999px; padding: 2px 8px; flex-shrink: 0; align-self: center; }
.tk-row-reg { cursor: default; }
.tk-row-reg:hover { background: transparent; }
.tk-row-reg:active { background: transparent; }
.tk-reg-ico { width: 24px; display: flex; align-items: center; justify-content: center; color: var(--text-3); flex-shrink: 0; }
.tk-reg-ico .ti { font-size: 16px; }
.tk-reg-rango { font-size: 11px; color: var(--text-3); font-weight: 600; }

/* ---- Registros HACCP: anotar valor, chips ok/fuera de rango, historial (Tanda C) ---- */
/* Fila de registro en el widget: ahora es tocable (abre el tablero para anotar) */
.tk-row-reg-tap { cursor: pointer; }
.tk-row-reg-tap:hover { background: var(--accent-soft); }

/* Chip del valor anotado: verde OK / rojo fuera de rango */
.tk-reg-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; align-self: center; white-space: nowrap; }
.tk-reg-chip.is-ok { color: var(--green-check); background: rgba(39, 174, 96, .12); border: 1px solid rgba(39, 174, 96, .40); }
.tk-reg-chip.is-bad { color: #fff; background: var(--red); border: 1px solid var(--red); }
.tk-reg-chip-mini { font-size: 10px; padding: 2px 7px; }
.tk-reg-meta { font-size: 10.5px; color: var(--text-3); align-self: center; white-space: nowrap; }

/* Tomas del registro en el tablero (1ª / 2ª): input+Anotar o el chip ya anotado */
.tb-trow.tk-row-reg { align-items: flex-start; }
.tk-reg-tomas { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.tk-reg-toma { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.tk-reg-toma-lbl { font-size: 10.5px; font-weight: 800; color: var(--text-3); min-width: 16px; }
.tk-reg-input.input-app { height: 32px; padding: 4px 8px; font-size: 13px; flex: 0 1 110px; max-width: 110px; }
.tk-reg-anotar { flex-shrink: 0; border: 1px solid var(--border-2); background: var(--accent-soft); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: .15s; }
.tk-reg-anotar:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: var(--text-3); }
.tk-reg-sin { font-size: 11px; font-weight: 700; color: var(--text-3); font-style: italic; align-self: center; }

/* Gestión → Registros: barra de exportación + historial desplegable */
.tg-reg-exportbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tg-reg-mes.input-app { max-width: 170px; }
.tg-reg-export-btn { flex-shrink: 0; }
.tg-reg-export-hint { font-size: 11.5px; color: var(--text-3); }
.tg-reg-hist { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--border); padding-top: 8px; }
.tg-reg-hist-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.tg-reg-hist-fecha { min-width: 74px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tg-reg-hist-quien { color: var(--text-3); }
.tg-reg-hist-load, .tg-reg-hist-empty { font-size: 12px; color: var(--text-3); padding: 4px 0; }

/* Tarea rápida / resolver incidencia */
.tk-rap-hint { font-size: 12px; color: var(--text-3); line-height: 1.5; margin: 4px 0 0; }
.tk-res-texto { font-size: 14px; font-weight: 600; color: var(--text); background: var(--accent-soft); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; }

/* ---- Apartado GESTIÓN (casi pantalla completa) ---- */
.tg-modal-box { max-width: 960px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.tg-modal-box .modal-header { flex-shrink: 0; }
.tg-body { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }

.tg-nav { flex: 0 0 236px; border-right: 1px solid var(--border); padding: 16px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.tg-nav-list { display: flex; flex-direction: column; gap: 4px; }
.tg-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: none; border-radius: 10px; padding: 10px 12px; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: .14s; }
.tg-nav-item:hover { background: var(--accent-soft); color: var(--text); }
.tg-nav-item.active { background: var(--accent-soft); color: var(--text); }
.tg-nav-item .ti { font-size: 18px; flex-shrink: 0; }
.tg-nav-nom { flex: 1; min-width: 0; }
.tg-nav-count { background: var(--orange); color: #1a1a1a; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; min-width: 20px; text-align: center; }
.tg-help { margin-top: auto; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.tg-help-t { font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 5px; }
.tg-help-p { font-size: 12px; line-height: 1.5; color: var(--text-3); margin: 0; }

.tg-panel { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 20px 22px; }
.tg-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tg-panel-t { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
.tg-panel-n { font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--accent-soft); border-radius: 999px; padding: 2px 10px; }

.tg-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.tg-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); }
.tg-item.editando { border-color: var(--orange); }
.tg-item-main { flex: 1; min-width: 0; }
.tg-item-nom { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; }
.tg-item-desc { font-size: 12px; color: var(--text-3); margin-top: 3px; line-height: 1.4; }
.tg-item-acc { display: flex; gap: 6px; flex-shrink: 0; }
.tg-ic-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 9px; background: transparent; color: var(--text-2); cursor: pointer; transition: .14s; }
.tg-ic-btn:hover { background: rgba(255,255,255,.05); color: var(--text); }
.tg-ic-danger:hover { color: var(--red); border-color: var(--red); }
.tg-ic-btn .ti { font-size: 16px; }
.tg-vacio { font-size: 13px; color: var(--text-3); padding: 16px; border: 1px dashed var(--border); border-radius: 12px; text-align: center; }
.tg-sub-h { font-size: 12px; font-weight: 700; letter-spacing: .4px; color: var(--text-3); text-transform: uppercase; margin: 6px 0 8px; }

/* Formulario de la sección */
.tg-form { border: 1px solid var(--border); border-radius: 14px; padding: 16px; background: var(--accent-soft); }
.tg-form-head { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 14px; }
.tg-form .input-app { width: 100%; }
.tgf-group { margin-bottom: 14px; }
.tgf-group > label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--text-3); text-transform: uppercase; margin-bottom: 6px; }
.tgf-row2 { display: flex; gap: 12px; }
.tgf-row2 .tgf-group { flex: 1; min-width: 0; }
.tgf-sub { margin-bottom: 14px; }
.tgf-mt { margin-top: 8px; }
.tgf-dia { min-width: 46px; }
.tgf-rango { display: flex; gap: 8px; }
.tgf-rango .input-app { flex: 1; min-width: 0; }
.tgf-unidad { flex: 0 0 66px !important; text-align: center; }
.tg-form-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.tg-form-foot .carga-cta { width: auto; padding: 0 22px; }
.modal-footer .carga-cta { width: auto; padding: 0 22px; }
/* Selects nativos del form (no usan Select Custom) */
.tgf-sel, #tk-rap-quien { width: 100%; -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; cursor: pointer; }

/* Incidencias */
.tg-inc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); }
.tg-inc-abierta { border-left: 3px solid var(--orange); }
.tg-inc-btn { width: auto !important; flex-shrink: 0; padding: 8px 16px; }
.tg-inc-cerrada { opacity: .72; }
.tg-inc-nota { font-size: 12px; color: var(--text-2); font-style: italic; margin-top: 5px; }
.tg-list-cerr { gap: 6px; }

@media (max-width: 640px) {
    /* Hoja de pantalla completa: sin franjas negras del overlay (el modal ocupa todo) */
    #modal-tareas-gestion.modal-overlay { padding: 0; align-items: stretch; }
    #modal-tareas-gestion .modal-box.tg-modal-box { max-width: 100%; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    /* Apilado: header → pestañas → contenido, sin huecos muertos */
    .tg-body { flex-direction: column; }

    /* Pestañas: fila deslizable horizontal, pegada bajo el header (8px), SIN barra visible */
    .tg-nav {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 0;
        padding: 8px 10px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;            /* Firefox: sin barra */
        -webkit-overflow-scrolling: touch;
    }
    .tg-nav::-webkit-scrollbar { display: none; }   /* WebKit: sin barra */
    /* En mobile la nav muestra SOLO las pestañas (fuera la ayuda y el párrafo suelto) */
    .tg-nav > .tg-help,
    .tg-nav > .tg-help-p { display: none; }
    .tg-nav-list { flex-direction: row; flex-wrap: nowrap; gap: 8px; flex: 0 0 auto; }
    /* width:auto anula el width:100% de la base (era el que estiraba el 1er tab a toda la
       fila y escondía los otros 4). Cada tab mide SU contenido y la fila desliza. */
    .tg-nav-item { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 8px 12px; }

    /* Contenido inmediatamente después de las pestañas */
    .tg-panel { padding: 12px 14px; }

    /* Tarjetas de tareas: lápiz/tacho SIEMPRE dentro; texto con elipsis si no entra */
    .tg-item-nom { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .tg-item-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Formulario: separación consistente de 12px, campos a ancho completo, apilados */
    .tgf-group, .tgf-sub { margin-bottom: 12px; }
    .tgf-row2 { flex-direction: column; gap: 0; }
    /* Botón Agregar (y Cancelar al editar) a ancho completo, abajo */
    .tg-form-foot { flex-direction: column; gap: 8px; margin-top: 4px; }
    .tg-form-foot .carga-cta,
    .tg-form-foot .btn-ghost { width: 100%; }
}

/* ============================================================
   TAREAS — TABLERO (columnas por estación)
============================================================ */
/* El tablero y la Gestión son base (z 1000). Los modales que se abren
   ENCIMA (resolver incidencia) van más arriba; el confirmar, más todavía. */
#modal-incidencia-resolver {
    z-index: 1100;
}

#modal-tk-confirm {
    z-index: 1200;
}

.tb-modal-box {
    max-width: 1600px;
    /* Casi toda la pantalla, descontando el padding de 20px del overlay
       (arriba y abajo) para que no se corte ni scrollee el modal entero. */
    height: calc(100vh - 40px);
    height: calc(100dvh - 40px);
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.tb-modal-box .modal-header {
    flex-shrink: 0;
}

.tb-toolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px 0;
}

.tb-datebar {
    margin-bottom: 0;
    flex: 1;
    max-width: 420px;
}

.tb-date-static {
    cursor: default;
}

.tb-date-static:hover {
    background: var(--accent-soft);
    border-color: var(--border);
}

.tb-ro-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--text-3);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 11px;
    white-space: nowrap;
}

.tb-ro-badge .ti {
    font-size: 13px;
}

/* Cuerpo: los carriles scrollean en horizontal (Trello). */
.tb-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 24px 24px;
    overflow: hidden;
}

.tb-cols {
    display: flex;
    gap: 14px;
    height: 100%;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
    padding-bottom: 6px;
}

.tb-cols::-webkit-scrollbar {
    height: 10px;
}

.tb-cols::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.tb-col {
    /* Reparten el ancho disponible (grow); si no entran, cada una se planta en
       280px y el carril scrollea de costado. */
    flex: 1 1 280px;
    min-width: 280px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
}

.tb-col-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--text-2);
}

.tb-col-head .ti {
    font-size: 16px;
    color: var(--text-3);
    flex-shrink: 0;
}

.tb-col-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
}

.tb-col-count {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    background: var(--card);
    border-radius: 999px;
    padding: 2px 9px;
}

.tb-col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

.tb-col-empty {
    color: var(--text-3);
    font-size: 12.5px;
    text-align: center;
    padding: 18px 8px;
    line-height: 1.7;
}

/* Grupos por momento dentro de cada columna */
.tb-grp { margin-bottom: 6px; }
.tb-grp:last-child { margin-bottom: 0; }
.tb-grp-h { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; color: var(--text-3); text-transform: uppercase; padding: 4px 2px 6px; }
.tb-grp-sem .tb-grp-h { color: #d9a441; }

/* Etiquetita del asignado en la fila del tablero */
.tb-asig { flex-shrink: 0; align-self: center; font-size: 10px; font-weight: 700; color: var(--text-3); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Contador X/Y en la toolbar */
.tb-counter { font-size: 12px; font-weight: 700; color: var(--text-3); white-space: nowrap; margin-left: auto; }

/* Banner de incidencias abiertas + campo de reporte (lo usa cualquiera) */
.tb-incidencias { flex-shrink: 0; padding: 12px 24px 0; display: flex; flex-direction: column; gap: 8px; }
.tb-incidencias.hidden { display: none; }
.tb-inc { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 11px; background: rgba(224,76,76,.10); border: 1px solid rgba(224,76,76,.35); }
.tb-inc-ico { flex-shrink: 0; color: var(--red); display: inline-flex; }
.tb-inc-ico .ti { font-size: 18px; }
.tb-inc-txt { flex: 1; min-width: 0; }
.tb-inc-t { font-size: 13.5px; font-weight: 600; color: var(--text); }
.tb-inc-m { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.tb-inc-btn { flex-shrink: 0; border: none; border-radius: 9px; background: var(--red); color: #fff; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; padding: 7px 14px; cursor: pointer; transition: opacity .15s; }
.tb-inc-btn:hover:not(:disabled) { opacity: .9; }
.tb-report { display: flex; gap: 8px; }
.tb-report .input-app { flex: 1; min-width: 0; }
.tb-report-btn { flex-shrink: 0; border: 1px solid var(--border-2); background: var(--accent-soft); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 0 16px; cursor: pointer; transition: .15s; }
.tb-report-btn:hover:not(:disabled) { background: rgba(255,255,255,.08); border-color: var(--text-3); }

/* Fila de tarea en el tablero: reusa .hub-ord/.tk-row; sumamos el menú ⋯ a la derecha */
.tb-trow {
    gap: 10px;
}

.tb-trow .tk-row-body {
    flex: 1;
}

.tb-trow.tk-row-ro {
    cursor: default;
}

.tb-trow.tk-row-ro:hover {
    background: transparent;
}

/* Celu: los carriles se apilan a lo ancho completo y el cuerpo scrollea vertical */
@media (max-width: 640px) {
    #modal-tareas-board.modal-overlay {
        padding: 0;
        align-items: stretch;
        overflow: hidden;
        /* Termina donde empieza la barra (56px + safe-area): la barra (z130) queda por encima. */
        bottom: calc(56px + env(safe-area-inset-bottom));
        z-index: 120;
    }

    #modal-tareas-board .modal-box.tb-modal-box {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
        border: none;
    }

    .tb-toolbar {
        padding: 12px 16px 0;
        flex-wrap: wrap;
    }

    .tb-datebar {
        max-width: none;
    }

    .tb-incidencias {
        padding: 10px 16px 0;
    }

    .tb-body {
        padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
        overflow-y: auto;
    }

    .tb-cols {
        flex-direction: column;
        height: auto;
        overflow-x: visible;
        overflow-y: visible;
        gap: 14px;
    }

    .tb-col {
        flex: none;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

    .tb-col-body {
        overflow-y: visible;
        max-height: none;
    }
}

/* Boton "ocultar" (manda a la bandeja) - solo en edicion */
.hub-hide-btn {
    display: none;
    position: absolute;
    top: 9px;
    right: 10px;
    z-index: 4;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: var(--accent-bg);
    border: 1px solid var(--border-2);
    color: var(--text-2);
    cursor: pointer;
    place-items: center;
}

body.hub-editing .hub-hide-btn {
    display: grid;
    pointer-events: auto;
}

.hub-hide-btn:hover {
    color: var(--orange);
    border-color: var(--orange);
}

.hub-hide-btn .ti {
    font-size: 15px;
}

/* Estado de edicion: arrastrable + clics internos desactivados */
body.hub-editing .hub-wcard {
    cursor: grab;
}

body.hub-editing .hub-wcard>.hub-w,
body.hub-editing .hub-wcard>.hub-biblio {
    border-color: var(--orange);
    /* 🌙 DESTILACIÓN · FASE 5 — era un anillo `inset` de 1px (no un relieve): pasa a outline,
       mismo aspecto, como los halos .mine de la FASE 1. Así el grep de inset queda limpio.
       (El anillo viejo REEMPLAZABA la sombra del widget en edición: se la sigue apagando.) */
    box-shadow: none;
    outline: 1px solid var(--orange-light);
    outline-offset: -1px;
    pointer-events: none;
}

.hub-wcard.dragging>.hub-w,
.hub-wcard.dragging>.hub-biblio {
    opacity: .4;
}

/* BANDEJA */
.hub-tray {
    display: none;
    margin-top: 16px;
    background: var(--card);
    border: 1px dashed var(--border-2);
    border-radius: 13px;
    padding: 13px 15px;
}

body.hub-editing .hub-tray {
    display: block;
}

.hub-tray.drop-ok {
    border-color: var(--orange);
    background: var(--orange-light);
}

.hub-tray-t {
    font-size: 11px;
    letter-spacing: .09em;
    font-weight: 700;
    color: var(--text-3);
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hub-tray-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 34px;
}

.hub-tray-empty {
    font-size: 13px;
    color: var(--text-3);
}

.hub-tchip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 13px;
    color: var(--text);
    cursor: grab;
}

.hub-tchip:hover {
    border-color: var(--orange);
}

.hub-tchip .ti {
    font-size: 15px;
    color: var(--text-2);
}

/* Barra flotante de edicion */
.hub-editbar {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%) translateY(160%);
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--card);
    border: 1px solid var(--border-2);
    border-radius: 14px;
    padding: 11px 13px;
    box-shadow: 0 16px 24px rgba(0, 0, 0, .4);
    transition: transform .25s ease;
    z-index: 50;
}

body.hub-editing .hub-editbar {
    transform: translateX(-50%) translateY(0);
}

.hub-editbar-lab {
    font-size: 12.5px;
    color: var(--text-2);
    padding: 0 4px 0 6px;
}

.hub-eb {
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 10px;
    padding: 9px 16px;
    cursor: pointer;
    border: 1px solid var(--border-2);
    background: transparent;
    color: var(--text);
}

.hub-eb-ghost {
    color: var(--text-2);
}

.hub-eb-ghost:hover {
    background: var(--accent-bg);
    color: var(--text);
}

.hub-eb-primary {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}

/* Adaptacion al recuadro (container queries) */
@container hubslot (max-width: 300px) {
    .hub-soon { display: none; }
}

/* ============================================================
   Biblioteca de recetas — adaptación al recuadro del collage.
   Se renderiza generoso (6 categorías + 5 recientes) y acá se revela/oculta
   por filas enteras según el tamaño del recuadro. Nunca se corta un ítem:
   se ven enteros o no se ven. Estado base = ANCHO (4 categorías + 3 recientes).
   ============================================================ */

/* ALTO (mucho espacio vertical, recuadro ancho): mostrar más filas */
@container hubslot (min-width: 461px) and (min-height: 265px) {
    .hub-acceso--r3 { display: flex; }          /* hasta 6 categorías (3 filas) */
}
@container hubslot (min-width: 461px) and (min-height: 300px) {
    .hub-recent--4 { display: flex; }          /* 4 recientes */
}
@container hubslot (min-width: 461px) and (min-height: 360px) {
    .hub-recent--5 { display: flex; }          /* 5 recientes */
}

/* BAJO (poca altura, recuadro ancho): menos filas, sin recortar */
@container hubslot (min-width: 461px) and (max-height: 235px) {
    .hub-recent--3 { display: none; }          /* recientes a 2 */
}
@container hubslot (min-width: 461px) and (max-height: 195px) {
    .hub-acceso--r2 { display: none; }          /* categorías a 1 fila (2) */
}
@container hubslot (min-width: 461px) and (max-height: 185px) {
    .hub-recent--2 { display: none; }          /* recientes a 1 */
}
@container hubslot (min-width: 461px) and (max-height: 130px) {
    .hub-biblio-recent-col { display: none; }   /* no entra ninguna: solo categorías + "Ver todas" */
}

/* ANGOSTO (recuadro angosto): apilar en 1 columna, recientes abajo.
   Estado estable de 4 categorías + 3 recientes (el alto lo resuelve el scroll del recuadro). */
@container hubslot (max-width: 460px) {
    .hub-biblio-wide {
        flex-direction: column;
        gap: 14px;
    }
    .hub-biblio-main,
    .hub-biblio-recent-col {
        flex: none;
    }
    .hub-biblio-recent-col {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding-left: 0;
        padding-top: 14px;
    }
    .hub-acceso--r2 { display: flex; }
    .hub-acceso--r3 { display: none; }
    .hub-recent--1,
    .hub-recent--2,
    .hub-recent--3 { display: flex; }
    .hub-recent--4,
    .hub-recent--5 { display: none; }
}

/* ---- EL BENTO EN TABLET: 2 columnas ----
   Los span 2 pasan a ocupar el ancho entero, que es lo que pide el mockup. */
@media (max-width: 1023px) {
    .hub-bento {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- EL BENTO EN CELULAR: 1 columna ----
   Todos los bloques a lo ancho y de alto AUTO (mínimo el contenido), en el
   MISMO orden de lectura que en la grilla. Los dos que tienen su botón
   absoluto al pie se reservan el lugar para que nunca lo tape el contenido. */
@media (max-width: 640px) {
    .hub-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
    }

    .hub-bt,
    .hub-bt[data-w="prod"],
    .hub-bt[data-w="tareas"],
    .hub-bt[data-w="menu"],
    .hub-bt[data-w="biblio"] {
        grid-column: span 1;
        grid-row: span 1;
        min-height: 150px;
    }

    /* Con una sola columna la barra vuelve a ocupar todo y el botón se pone DEBAJO,
       en el flujo y a lo ancho: ahí no hay lugar para tenerlos lado a lado. */
    .bt-prod-bar {
        width: 100%;
    }

    .bt-prod-cta {
        position: static;
        width: 100%;
        margin-top: 12px;
    }

    /* RETOQUE t5d — acá vivía un padding-bottom: 66px de bento t1, que reservaba el lugar
       del CTA cuando era ABSOLUTO al pie. Desde t5·P3 el CTA está EN FLUJO, así que ese
       padding ya no reservaba nada: era un hueco muerto de 46px que empujaba el título y
       el renglón fuera de la franja (medido: el renglón quedaba en el 37% del bloque). */

    .bt-menu-t,
    .hub-bt[data-w="menu"] .bt-sub {
        padding-right: 0;
    }

    /* Acá el alto es AUTO: los chips de familias pueden envolver en dos filas en vez
       de quedar recortados (en escritorio el tope los deja en una sola, como el mockup). */
    .bt-chips {
        max-height: none;
    }
}

/* Mobile / tablet portrait: sin edicion.
   Cada tarjeta crece segun su contenido: sin alturas fijas ni scroll interno. */
@media (max-width: 820px) {
    .hub-wcard {
        height: auto;
    }

    /* Sin scroll interno: la tarjeta muestra todo su contenido y crece. */
    .hub-wcard>.hub-w,
    .hub-wcard>.hub-biblio,
    .hub-wcard>.hub-w.hub-menudia-card {
        height: auto;
        overflow: visible;
    }

    /* Edición del tablero solo desde desktop/tablet (el arrastre no funciona por touch) */
    #ajc-editar-dashboard {
        display: none;
    }

    /* Widget de Producción: con TODAS las órdenes, la lista no se hace infinita en celu.
       Se le pone un alto máximo y scrollea por dentro (header, barra y botón quedan fijos). */
    .hub-wcard[data-w="prod"] #prod-resumen {
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Tareas: mismo tope de alto en celu (header, chips y botón quedan fijos). */
    .hub-wcard[data-w="tareas"] #tk-lista {
        max-height: 60vh;
        overflow-y: auto;
    }
}

/* ============================================================
   NÚMEROS ALINEADOS (tabular-nums)
   Solo celdas/valores numéricos: las cifras quedan a plomo y no
   "bailan" al cambiar de dígitos. No toca prosa ni cálculos.
============================================================ */
.rec-ing-table,
.pub-ing-table,
.td-rend,
.td-foodcost,
.costo-kpi-valor,
.costo-kpi-sub,
.preview-costo-valor,
.fr-costos,
.panel-kval,
.panel-ktrend,
.stat-num,
.rec-yield-v,
.pub-yield-val,
.ing-col-costo,
.ing-col-importe,
.ing-col-cant-neta,
.ing-cant-neta-input,
.receta-pill-num,
.receta-costo-valor,
.food-cost-ok,
.food-cost-warning,
.food-cost-danger,
.ing-ccost,
.ing-cbruto,
.ing-cmerma{
    -moz-font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
}

/* Ventanita "Nueva subreceta": sin columna Procesamiento */
#modal-mini-sub .ing-nuevo-header,
#modal-mini-sub .ing-nuevo-row {
    grid-template-columns: 1.6fr 60px 55px 100px 65px 85px 85px 24px;
}
#modal-mini-sub .ing-nuevo-row > *:nth-child(2) {
    display: none;
}

/* ============ Producción — dos miradas (Del menú / A producir) ============ */
.prod-grupo { margin-bottom: 18px; }
.prod-grupo-h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; color: var(--text-3); margin: 0 2px 10px; }
.prod-grupo-ln { flex: 1 1 8px; min-width: 8px; height: 1px; background: var(--border); }
.prod-grupo-hint { font-weight: 600; letter-spacing: .2px; flex: none; }
/* Título del separador con ícono (bloques por origen: menú / manual) */
.prod-grupo-t { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.prod-grupo-t i { font-size: 13px; }

/* Encabezado plegable de "A producir": área táctil generosa, misma tipografía */
.prod-grupo-h-btn { cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; padding: 9px 6px; margin: 0 2px 8px; border-radius: 9px; transition: background .12s; }
.prod-grupo-h-btn:active { background: var(--accent-soft); }
.prod-grupo.plegada .prod-grupo-h-btn { margin-bottom: 0; }
.prod-grupo-chev { flex: none; font-size: 15px; color: var(--text-3); margin-left: 2px; }
/* Resumen del bloque plegado: cantidad (cede primero) + chips de estado (se priorizan) */
.prod-grupo-sum { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden; }
.prod-grupo-sum-n { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; letter-spacing: .2px; color: var(--text-3); text-transform: none; }
.prod-grupo-sum-chips { flex: none; display: inline-flex; gap: 5px; }
.prod-grupo-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; text-transform: none; }
.prod-grupo-chip.curso { background: var(--orange-light); color: var(--orange); }
.prod-grupo-chip.listo { background: rgba(39,174,96,.14); color: var(--green-check); }

/* Barra de acciones de la vista "A producir" (botón "Plegar/Abrir todas", a la derecha) */
.prod-toolbar { display: flex; justify-content: flex-end; margin: 0 2px 10px; }
.prod-plegar-btn { font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: .12s; }
.prod-plegar-btn:hover { border-color: var(--border-2); color: var(--text); }
.prod-plegar-btn:active { background: var(--accent-bg); }
/* Cabecera de origen dentro del widget-resumen del HUB */
.prod-resumen-h { margin-top: 6px; }
.prod-resumen-h:first-child { margin-top: 0; }

/* tarjeta de plato */
.prod-plato { background: var(--card); border: 1px solid var(--border); border-left: 3px solid #c9a227; border-radius: 13px; padding: 12px 14px; margin-bottom: 10px; cursor: pointer; transition: .15s; }
.prod-plato:hover { transform: translateY(-1px); border-color: var(--border-2); }
.prod-plato-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.prod-plato-nm { font-size: 15.5px; font-weight: 600; line-height: 1.15; }

.prod-plato-cub { font-size: 17px; font-weight: 700; color: #c9a227; margin-top: 7px; }
.prod-plato-cub small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 3px; }

/* tarjeta de subreceta */
.prod-sub { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 13px; padding: 8px 14px; margin-bottom: 6px; cursor: pointer; transition: .15s; }
.prod-sub:hover { transform: translateY(-1px); border-color: var(--border-2); }
.prod-sub.curso { border-left-color: var(--orange); }
.prod-sub.done { opacity: .55; }
.prod-sub.done .prod-sub-nm { text-decoration: line-through; color: var(--text-3); }
.prod-sub.mine { outline: 1px solid var(--terra-borde); outline-offset: -2px; }
/* Tarjeta = una sola fila: texto a la izquierda (flex:1), botón/acción a la derecha centrado */

/* Estación · persona (línea chica bajo "para…", solo cuando existe) */
.prod-sub-meta { font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.prod-sub-nm { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prod-sre { font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: rgba(230,126,34,.15); color: var(--orange); }
/* Chip del TURNO con el que nació la orden. Neutro (no compite con el tag naranja S.R.E/ING). */
.prod-turno-chip { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: .2px; padding: 2px 6px; border-radius: 5px; background: var(--accent-soft); border: 1px solid var(--border); color: var(--text-2); vertical-align: middle; }
.prod-sub-q { font-size: 17px; font-weight: 700; color: var(--orange); margin-top: 2px; }
.prod-sub.done .prod-sub-q { color: var(--text-3); }
.prod-sub-q small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
/* Puente "X en crudo → Y limpios": cada número+palabra no se parte; en celu angosto wrapea entre grupos (los dos números siempre visibles). */
.prod-mise-g { white-space: nowrap; }
.prod-mise-fl { font-size: 14px; font-weight: 600; color: var(--text-3); margin: 0 4px; }

.prod-sub-del { border: none; background: transparent; color: var(--text-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; flex-shrink: 0; }
.prod-sub .prod-cron { color: var(--orange); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; margin-left: 6px; }
.prod-pbtn { margin-left: auto; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 8px 17px; cursor: pointer; border: none; flex-shrink: 0; }
.prod-pbtn.cream { background: #e9e2d4; color: #1a1a1a; }
.prod-pbtn.gh { background: rgba(255,255,255,.06); color: var(--text); border: 1px solid var(--border-2); }
/* Empecé "trabado" (le falta preparación): atenuado pero SIEMPRE clickeable → abre el cartel. */
.prod-pbtn.wait { background: rgba(255,255,255,.10); color: var(--text-3); border: 1px solid var(--border); }

/* ============ Producción inteligente: puntitos por plato + progreso + dependencias ============ */
/* Puntito de color estable del plato (viaja a todas sus preparaciones). NO confundir con
   .prod-dot (el naranja de "en curso", que además pulsa). */
.prod-pdot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; margin-right: 6px; vertical-align: middle; }
/* En los títulos que son flex con gap (subcard y Tu lista) el gap ya separa: sin margen extra.
   .hub-ord-n NO es flex (texto con ellipsis) → ahí el margen SÍ hace falta. */
.prod-sub-nm .prod-pdot{ margin-right: 0; }

/* Barrita de progreso de "Tu lista" */

/* Línea de dependencias en la tarjeta de subreceta */
.prod-wait { font-size: 11.5px; color: #f5b544; margin-top: 4px; line-height: 1.35; }
.prod-hastodo { font-size: 10.5px; color: #4ADE80; margin-top: 4px; font-weight: 600; }

/* Cartel "le falta preparación" (modal) */
.prod-wait-list { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.prod-wait-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 11px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid var(--border); }
.prod-wait-item-nm { font-size: 13px; font-weight: 500; color: var(--text); min-width: 0; }
.prod-wait-item-est { font-size: 11px; font-weight: 600; flex-shrink: 0; }
.prod-wait-item-est.pendiente { color: var(--text-3); }
.prod-wait-item-est.en_curso { color: var(--orange); }
.prod-wait-nota { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ============================================================
   PLATOS DEL DÍA — renglones con árbol desplegable (mockup 1)
   ============================================================ */

.prod-pd { border-bottom: 1px solid var(--border); }
.prod-pd:last-child { border-bottom: none; }

/* Árbol: oculto hasta desplegar */

/* Nodos del árbol: líneas de rama por indentación */

.prod-nodo-cant { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.prod-nodo-est { font-size: 11px; font-weight: 600; }
.prod-nodo-est.ok { color: #4ADE80; }
.prod-nodo-est.curso { color: var(--orange); }
.prod-nodo-est.wait { color: #f5b544; }
.prod-nodo-est.pend { color: var(--text-3); }

/* ============================================================
   TARJETAS COMPACTAS "A producir" + chips plegables (mockup 2)
   ============================================================ */
.prod-sub-cx .prod-sub-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.prod-sub-cx .prod-sub-nm { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.prod-sub-cx .prod-sub-q { font-size: 15px; font-weight: 700; color: var(--orange); flex-shrink: 1; min-width: 0; margin: 0; }
.prod-sub-cx.prod-cons .prod-sub-q { color: #f5c451; }
.prod-sub-cx.done .prod-sub-q { color: var(--text-3); }
.prod-sub-cx .prod-sub-q small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
/* "en curso" en línea chica debajo */
.prod-sub-curso { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--orange); font-weight: 600; margin-top: 5px; }
.prod-sub-cx .prod-cons-desg { font-size: 11.5px; color: var(--text-2); margin-top: 5px; }
/* Historia del corte: línea chica bajo el número ("de X · ya entregado Y"). Da contexto al vivo. */
.prod-sub-cx .prod-hist-corte { font-size: 11px; color: var(--text-3); margin-top: 3px; }
/* En la fila plegable, va bajo el renglón (siempre visible), indentada bajo el nombre. */
.prod-cons-fila .prod-hist-corte { font-size: 11px; color: var(--text-3); padding: 0 12px 9px 34px; margin-top: -3px; }
/* Carga ya entregada en el desglose: "ya entregado <original>" en gris (en vez de un confuso "0 kg"). */
.prod-desg-entregado { color: var(--text-3); }
/* Marquita "manual" en el desglose por plato (carga directa que no viene del menú). Pill mini gris. */
.prod-desg-manual { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--text-3); border: 1px solid var(--border); vertical-align: middle; }
/* Consolidado en "Terminado": versión compacta, pareja con las tarjetas de plato dentro de la grilla. */
.prod-cons--compact { padding: 12px 14px; margin-bottom: 0; }
.prod-cons--compact .prod-sub-nm { font-size: 15px; }
/* Entregada en "Terminado": UNA línea, nombre tachado, sin hueco (no estira la celda de la grilla). */

/* Fila de chips */
.prod-sub-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.prod-chipx { display: inline-flex; flex-direction: column; }
.prod-chipx-b { display: inline-flex; align-items: center; gap: 5px; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 600; color: var(--text-2); background: rgba(255,255,255,.06); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.prod-chipx-b:hover { background: rgba(255,255,255,.10); }
.prod-chipx-chev { font-size: 13px; transition: transform .18s ease; }
.prod-chipx.open .prod-chipx-chev { transform: rotate(180deg); }
.prod-chipx.wait .prod-chipx-b { color: #f5b544; border-color: rgba(245,181,68,.35); background: rgba(245,181,68,.10); }
/* TANDA DE CONFIANZA · P6 — la banda del GUARDIÁN: fija arriba del catálogo mientras la pantalla no
   cierre con la base. Roja (la familia borgoña del peligro), tocable para ver el detalle. */
.prod-guardian { margin: 0 0 12px; border-radius: 14px; border: 1px solid #C86A80; background: #3A1D25; color: #F0F2F5; overflow: hidden; }
.prod-guardian-h { display: flex; align-items: flex-start; gap: 9px; width: 100%; min-height: 44px; padding: 11px 14px; border: 0; background: none; color: inherit; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; }
.prod-guardian-ic { flex: none; font-size: 15px; line-height: 1.2; }
.prod-guardian-tx { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.prod-guardian-det { display: none; padding: 0 14px 12px 38px; font-size: 12.5px; }
.prod-guardian.open .prod-guardian-det { display: block; }
.prod-guardian-r { padding: 5px 0; border-top: 1px solid rgba(255,255,255,.08); overflow-wrap: anywhere; }
.prod-guardian-pie { padding-top: 7px; font-size: 12px; color: #E3C3CB; }
/* TANDA DE CONFIANZA · P5 — "⏳ esperando N": el lima apagado de la casa (mockup aprobado) y su lista FLOTA. */
.prod-esp-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 5px 13px; border-radius: 99px; border: 1px solid rgba(216,226,74,.35); background: rgba(216,226,74,.08); color: #C9C05A; font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 800; cursor: pointer; }
.prod-esp-chip:hover { background: rgba(216,226,74,.13); }
.prod-esp-chev { font-size: 13px; opacity: .7; transition: transform .18s ease; }
.prod-esp-chip[aria-expanded="true"] .prod-esp-chev { transform: rotate(180deg); }
.prod-esp-pop { position: fixed; z-index: 3500; display: none; min-width: 250px; max-width: calc(100vw - 16px); padding: 6px; border-radius: 13px; background: #14171C; border: 1px solid #2E343C; box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.prod-esp-pop.open { display: block; }
.prod-esp-flecha { position: absolute; top: -5px; left: 16px; width: 9px; height: 9px; background: #14171C; border-left: 1px solid #2E343C; border-top: 1px solid #2E343C; transform: rotate(45deg); }
.prod-esp-pop.arriba .prod-esp-flecha { top: auto; bottom: -5px; border: none; border-right: 1px solid #2E343C; border-bottom: 1px solid #2E343C; }
.prod-esp-r { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 9px; }
.prod-esp-r b { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.prod-esp-est { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #C9C05A; background: rgba(201,192,90,.1); border-radius: 6px; padding: 3px 8px; }
.prod-chipx-body { display: none; margin-top: 6px; }
.prod-chipx.open .prod-chipx-body { display: block; }
.prod-chip-det { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--border); font-size: 12px; }
.prod-chip-det-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--text-2); }
.prod-chip-det-row span:last-child { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 500; flex-shrink: 0; }
/* Chip de acción (Consolidar) — naranja */
.prod-chipx-act { font-family: 'DM Sans', sans-serif; font-size: 11.5px; font-weight: 700; color: var(--orange); background: rgba(230,126,34,.12); border: 1px solid var(--orange); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.prod-chipx-act:hover { background: rgba(230,126,34,.22); }
/* "✓ tenía todo" como pastilla verde chica */
.prod-hastodo-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; color: #4ADE80; background: rgba(74,222,128,.12); border-radius: 8px; padding: 5px 10px; }

/* Destino del corte (solo visor): "→ Sofrito 0,54". Chips sueltos, sin acción, wrap prolijo. */
.prod-dest-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prod-dest-chip { flex: none; font-size: 11px; font-weight: 600; color: var(--text-2); background: rgba(255,255,255,.05); border: 1px solid var(--border); border-radius: 8px; padding: 4px 9px; white-space: nowrap; }
/* En la checklist del detalle: los chips van a la derecha de la fila y bajan enteros si no entran. */
.prod-check-dest { flex: 0 1 auto; margin-left: auto; margin-top: 0; justify-content: flex-end; }
/* Al terminar (tachado), el chip se atenúa como el resto de la fila/tarjeta. */
.prod-sub.done .prod-dest-chip{ opacity: .5; }
/* Destino ya ENTREGADO (su subreceta terminó y descontó el corte): tachado + ✓, color apagado. */
.prod-dest-chip--done { text-decoration: line-through; color: var(--text-3); opacity: .75; }
.prod-dest-chip--done .ti { text-decoration: none; color: var(--green-check); margin-left: 2px; }

/* Flash al saltar desde una rama a su tarjeta */
@keyframes prodFlash { 0% { box-shadow: 0 0 0 2px var(--orange); background: rgba(230,126,34,.10); } 100% { box-shadow: 0 0 0 0 transparent; background: transparent; } }
.prod-flash { animation: prodFlash 1.4s ease-out; }

/* ============ Paso 2 — receta: subrecetas tocables + cortes "cómo se hace" ============ */
.mrec-row-tap { cursor: pointer; transition: background .12s; }
.mrec-row-tap:hover { background: rgba(255,255,255,.04); }
.mrec-row-tap:hover .mrec-nm { color: var(--orange); }
.mrec-corte-pill { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--orange); background: rgba(230,126,34,.15); border-radius: 5px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.mrec-corte-ic { color: var(--text-3); font-size: 13px; margin-left: 4px; vertical-align: middle; }
/* Etiqueta "limpia" junto a la unidad (solo ingredientes con merma) + nota al pie del visor */
.mrec-limpia { font-size: 10px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.mrec-limpio-note { font-size: 11.5px; color: var(--text-3); line-height: 1.4; margin: 8px 2px 0; }
/* Línea "en crudo: X kg (merma Y%)" bajo el nombre, solo ingredientes con merma */
.mrec-crudo { font-size: 11px; color: var(--text-3); line-height: 1.3; margin-top: 2px; }
/* Cantidad en una sola línea: número (peso de siempre) + unidad chica minúscula + "limpia".
   número y unidad nunca se separan; "limpia" puede caer debajo si no entra. */
.rec-ing-table td.mrec-q { text-align: right; white-space: normal; width: auto; text-transform: none; }
.mrec-q-nu { white-space: nowrap; }
.mrec-q-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.mrec-q-un { font-size: 12px; font-weight: 400; color: var(--text-3); margin-left: 2px; }
.mrec-sub-pill { font-size: 10px; font-weight: 700; letter-spacing: .3px; color: var(--orange); background: rgba(230,126,34,.15); border-radius: 5px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.mrec-sub-pill i { font-size: 12px; }

/* Receta sin foto: el encabezado no ocupa el espacio de la imagen, queda compacto */
.rec-hero.rec-hero-sf { height: auto; min-height: 0; background: none !important; padding: 16px 20px 14px 60px; }
.rec-hero.rec-hero-sf .rec-hero-shade { display: none; }
.rec-hero.rec-hero-sf .rec-hero-tt { position: static; left: auto; right: auto; bottom: auto; }
.rec-hero.rec-hero-sf .rec-hero-tt h2 { color: var(--text); font-size: 22px; }

/* ============ Producción del día — apartado flotante grande + resumen del widget ============ */
.prod-modal-box { max-width: 820px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
/* TANDA 4 · PUNTO 4 — En el DETALLE (comanda), el modal se angosta para abrazar la pieza; el catálogo
   recupera el ancho para su grilla de tarjetas. Mobile: el modal ya es full-screen (regla de abajo). */
.prod-modal-box.prod-modal-box--detalle { max-width: 700px; }
.prod-modal-box .modal-header { flex-shrink: 0; }
.prod-modal-box .modal-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }

/* Widget resumen: botón "Ver producción del día" + mini-lista */
.prod-ver-btn { width: 100%; margin-top: 12px; padding: 11px 14px; border-radius: 11px; border: 1px solid var(--border-2); background: rgba(255,255,255,.04); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.prod-ver-btn:hover { background: rgba(255,255,255,.08); }
:root .prod-ver-btn { background: var(--accent-soft); }
.prod-resumen-empty { color: var(--text-3); font-size: 13px; padding: 8px 2px; }

@media (max-width: 640px) {
    /* Termina donde empieza la barra (56px + safe-area): la barra (z130) queda por encima. */
    #modal-produccion.modal-overlay { padding: 0; align-items: stretch; overflow: hidden; bottom: calc(56px + env(safe-area-inset-bottom)); z-index: 120; }
    #modal-produccion .modal-box.prod-modal-box {
        width: 100%; max-width: none;
        height: 100%; max-height: 100%;
        margin: 0; border-radius: 0; border: none;
    }
    #modal-produccion .modal-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* Tiempo total + quién, en el pie de la tarjeta de subreceta terminada (apartado) */
.prod-sub-done-meta { font-size: 10.5px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }

/* ---- Consolidación de producción ---- */
/* Aviso al pie de una tarjeta suelta: "También lo pediste en X" + botón Consolidar */

/* Tarjeta consolidada: acento dorado (como "compartido") + tag y "deshacer" */
.prod-sub.prod-cons { border-left-color: #f5c451; }
.prod-sub.prod-cons .prod-sub-q { color: #f5c451; }
.prod-sub.prod-cons.done .prod-sub-q { color: var(--text-3); }
.prod-cons-tag { background: rgba(245,196,81,.16) !important; color: #f5c451 !important; }
/* Pill "entregado": la tarjeta consolidada que quedó en 0 por el descuento y vive en "Terminado". */

.prod-cons-desg { color: var(--text-2); }
/* "deshacer": pastilla gemela del tag "consolidado" (mismo alto/letra/forma).
   El VISUAL es chico como el tag; el área táctil se agranda con un ::before
   transparente (≥40px de alto), sin cambiar lo que se ve. */
/* TANDA B3a — el chip "deshacer" de la olla se mudó al menú ⋯ (prodMenuOlla): su CSS se fue con él. */

/* ============================================================
   CATÁLOGO DE PLATOS (apartado) + DETALLE del plato (vista apilada)
   ============================================================ */
/* Grilla de tarjetas de plato: 1 columna en celu, 2 en desktop (modal 880px). */
/* TANDA 21 · CAMBIO 7 — minmax(0,1fr) en vez de 1fr: con 1fr la columna NO puede achicarse por debajo
   de su contenido, así que con el modal angosto la grilla se pasaba de ancho y las tarjetas quedaban
   cortadas contra el borde ("0/2 lis…", "10 porcion…"). Con minmax(0,…) la celda cede y el texto entra
   o elipsa adentro de la tarjeta. Mismo diseño, solo deja de desbordar. */
.prod-plato-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 641px) { .prod-plato-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prod-plato-grid > * { min-width: 0; }

.prod-plato-card { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--orange); border-radius: 13px; padding: 12px 14px; cursor: pointer; transition: .15s; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.prod-plato-card:hover { transform: translateY(-1px); border-color: var(--border-2); }
.prod-plato-card.done { opacity: .6; }
.prod-plato-card.done .prod-plato-nm { text-decoration: line-through; color: var(--text-3); }
.prod-plato-card.mine { outline: 1px solid var(--terra-borde); outline-offset: -2.5px; }
.prod-plato-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prod-plato-nm { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* CAMBIO 7 — el NÚMERO no se achica (era lo que se cortaba): quien cede es el nombre, que ya elipsa.
   El tope del 60% es la red de seguridad para que un texto largo nunca se coma la fila entera. */
.prod-plato-cub { flex: 0 0 auto; min-width: 0; max-width: 60%; font-size: 11px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* TANDA B2 — El mismo chip, pero TOCABLE (abre "Reducir la carga"). Se ve igual salvo el subrayado
   punteado que avisa que se puede tocar: el número no cambia de tamaño ni de color, así la tarjeta
   sigue leyéndose igual. Como es un <button>, hay que devolverle a mano lo que el navegador le saca. */
/* TANDA B3a — el chip volvió a ser TEXTO PLANO: modificar la cantidad se pide desde el menú ⋯.
   (Acá vivía el botón subrayado de B2; su CSS se fue con él.) */
.prod-plato-go { flex: none; font-size: 17px; color: var(--text-3); }

/* ============================================================
   TANDA B3a — EL ⋯ Y SU MENÚ FLOTANTE
   Un solo botón por tarjeta (40×40 para el dedo; 34×34 en las filas de mise). El menú se pinta en el
   body con position:fixed anclado al botón — mismo molde que el popover de ayuda (.help-pop).
   ============================================================ */
.prod-kebab {
    flex: 0 0 auto; width: 40px; height: 40px; margin: -7px -9px -7px 0; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 11px;
    color: var(--text-3); font-size: 19px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: .12s;
}
.prod-kebab:hover, .prod-kebab.is-active { background: var(--accent-soft); color: var(--text); }
.prod-kebab .ti { pointer-events: none; }   /* el click siempre es del botón, nunca del ícono */
/* El chico de las filas de mise: sin los márgenes negativos (ahí no hay que morder ningún borde). */
.prod-kebab--sm { width: 34px; height: 34px; margin: 0 0 0 4px; font-size: 17px; border-radius: 9px; }

.pmenu {
    /* RETOQUES 1 — 3600, no 3500: el ⋯ ahora también se abre DESDE la hojita del ✓
       (.help-pop, z-index 3500). Con el mismo valor ganaba el que se hubiera creado
       último en el body — una carrera. Un menú abierto desde un popover va arriba. */
    position: fixed; z-index: 3600; display: none;
    /* TANDA "DUEÑOS" · CAMBIO 2 — el submenú "Traspasar a…" lista a TODO el equipo: con mucha gente
       el cartelito tiene que scrollear adentro, nunca desbordar la pantalla (_pmenuPosicionar mide
       offsetHeight, que ya viene topeado por esto). */
    max-height: min(70vh, 420px); overflow-y: auto; overscroll-behavior: contain;
    min-width: 212px; max-width: min(280px, calc(100vw - 24px));
    background: var(--card); border: 1px solid var(--card-border); border-radius: 14px;
    box-shadow: var(--card-shadow);
    padding: 6px; color: var(--text);
}
.pmenu.open { display: block; }
.pmenu-item {
    display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
    font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; text-align: left;
    background: transparent; border: none; border-radius: 10px; padding: 11px 12px;
    color: var(--text); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
button.pmenu-item:hover { background: var(--accent-soft); }
.pmenu-item.danger { color: #e74c3c; }
/* Apagado = informativo: se ve, se lee POR QUÉ no se puede, y no se toca. */
.pmenu-item.off { color: var(--text-3); cursor: default; }
.pmenu-ico { flex: 0 0 auto; width: 18px; text-align: center; font-size: 15px; }
.pmenu-tx { flex: 1 1 auto; min-width: 0; }
.pmenu-nota { flex: 0 0 auto; font-size: 11px; font-weight: 500; color: var(--text-3); }
.prod-plato-sum { font-size: 11.5px; color: var(--text-3); margin-top: 4px; overflow-wrap: anywhere; }
/* BENTO · B5 — LA FILA DEL NÚMERO GORDO (estructura: las dos paletas).
   El dato ya estaba en la tarjeta, arriba a la derecha y en 11px; acá baja a su
   propia fila y se vuelve el protagonista, con la unidad y el resumen al lado.
   Cuando esta fila existe, el resumen suelto de abajo desaparece: ya viaja acá. */
.prod-plato-numrow { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; min-width: 0; }
.prod-plato-num { flex: none; font-family: var(--font-titulo); font-size: 32px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.prod-plato-meta { min-width: 0; font-size: 11px; font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El chip de la persona viaja pegado al resumen, como siempre: ahora adentro de esta fila. */
.prod-plato-meta .prod-asig-chip { margin-left: 6px; vertical-align: middle; }
/* X7b — Chip de la PERSONA asignada, al lado del resumen "N prep · M cortes". Discreto: la cápsula es
   la de siempre (accent-soft + borde, como el chip de turno) y el color lo pone SOLO el circulito de
   las iniciales, en violeta suave. Las dos variantes del violeta viven acá al lado, igual que los ⛓. */
:root {
    --prod-asig-bg: #ebe6f7; --prod-asig-fg: #5b4b8a;
}
[data-theme="dark"] {
    --prod-asig-bg: rgba(124,102,190,.30); --prod-asig-fg: #c9b9ee;
}
.prod-plato-asig { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; margin-left: 7px; padding: 1px 8px 1px 2px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border); color: var(--text-2); font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.prod-plato-asig-ini { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--prod-asig-bg); color: var(--prod-asig-fg); font-size: 8px; font-weight: 800; letter-spacing: .2px; }
/* El nombre de pila nunca parte la cápsula: una línea que corta con "…" si la tarjeta viene angosta. */
.prod-plato-asig-nm { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* TANDA "DUEÑOS" · CAMBIO 4 — el CIRCULITO de iniciales de una línea de comanda: el mismo de arriba
   (idénticas variables de color), pero SOLO — en una fila no entra el nombre al lado, y para eso está
   el title. Sin márgenes propios: las tres cajas donde vive (.cmd-main, .cmd-cook y el título del
   fichero) son flex con su propio gap. Con la línea EN CURSO gana el aro ámbar con el que la app
   pinta "en curso" en todos lados. */
.cmd-ini {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--prod-asig-bg); color: var(--prod-asig-fg);
    font-size: 8.5px; font-weight: 800; letter-spacing: .2px; vertical-align: middle;
}
.cmd-ini.curso { box-shadow: 0 0 0 1.5px var(--orange); }
/* En el título del fichero la fila es space-between (nombre … cantidad): el margin-right auto deja el
   circulito PEGADO al nombre y manda el kilaje al otro extremo, como estaba. */
.prod-fich-top .cmd-ini { margin-right: auto; align-self: center; }
/* TANDA 6 · PUNTO 5 — subtítulo "para: <plato>" de una salsa hecha aparte */
.prod-plato-para { font-size: 11.5px; color: var(--text-2); font-weight: 600; margin-top: 3px; overflow-wrap: anywhere; }
.prod-plato-prog { display: flex; align-items: center; gap: 9px; margin-top: 9px; min-width: 0; }
.prod-plato-bar { flex: 1 1 auto; min-width: 20px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.10); overflow: hidden; }
.prod-plato-bar-fill { height: 100%; border-radius: 3px; transition: width .3s ease; }
/* Terminado: el verde sale de la paleta. El fallback es el #4ADE80 de siempre, así
   que sin el atributo la barra se ve idéntica. */
.prod-plato-bar-fill.full { background: var(--salvia, #4ADE80); }
.prod-plato-count { flex: 0 0 auto; min-width: 0; max-width: 70%; font-size: 11.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-plato-curso { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--orange); margin-top: 7px; min-width: 0; overflow-wrap: anywhere; }
/* TANDA 3 · PUNTO 1 — Chip espejo "⛓ en olla consolidada · estado" en la tarjeta de una carga
   directa consolidada (conserva su identidad y su kg; la prep se opera en la olla). */
/* TANDA 22 · CAMBIO 2 — Misma medicina que el chip de la comanda: una sola línea que corta con "…"
   (antes, con la tarjeta angosta, el flex-wrap le partía el texto adentro del chip). El align-self
   flex-start lo sigue dejando del ancho de su contenido. */
.prod-plato-cons { display: block; align-self: flex-start; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 8px; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--cmd-chain-bd); background: var(--cmd-chain-bg); color: var(--cmd-chain-fg); font-size: 11.5px; font-weight: 700; }
.prod-plato-cons i { font-size: 13px; flex-shrink: 0; vertical-align: -2px; }
/* TANDA 22 · CAMBIO 1 — El ⏱ de la tarjeta no se parte (la línea permite cortes en cualquier lado). */
.prod-plato-curso .prod-cron { white-space: nowrap; }
/* TANDA B3b · §3 — El ⏱ de la OLLA adentro del chip: toma el color del chip (no el naranja global),
   misma decisión que .cmd-chain-curso — el naranja se peleaba con el bordó/crema del chip. */
.prod-plato-cons .prod-cron { color: inherit; }

/* ---- DETALLE del plato: una columna centrada dentro del modal ---- */
.prod-det { max-width: 640px; margin: 0 auto; }
/* Hero estilo biblioteca */

/* Barra "Producción de hoy" */

.prod-det-sec { margin-bottom: 20px; }
.prod-det-sec-h { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--text-3); margin: 0 2px 10px; }
.prod-det-sec-h small { font-weight: 600; letter-spacing: .2px; text-transform: none; }

/* Checklist compacta de cortes (mise en place) */
.prod-check { display: flex; flex-direction: column; }

/* Entregado por el descuento (auto, no tildado a mano): check verde apagado, sin interacción. */

.prod-check-cant { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; }

/* Reparto de un corte compartido entre platos (una sola tarea física, repartida) */
.prod-check-reparto { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prod-check-done { display: block; font-size: 10.5px; color: var(--text-3); margin-top: 3px; }
.prod-check-cons { flex: none; font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: rgba(245,196,81,.16); color: #f5c451; text-transform: none; }

/* Botón a la ficha completa */
.prod-det-verrec { width: 100%; margin-top: 4px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--border-2); background: rgba(255,255,255,.04); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .15s; }
.prod-det-verrec:hover { background: rgba(255,255,255,.08); }
.prod-det-verrec i { font-size: 17px; color: var(--orange); }
.prod-det-verrec small { font-weight: 500; color: var(--text-3); }
:root .prod-det-verrec { background: var(--accent-soft); }

/* ============================================================
   LA COMANDA — el detalle con cara de receta (ingredientes vivos + pasos).
   Reusa .rec-ing-table / .mrec-* / .rec-proc-*; acá solo lo propio de la comanda.
   ============================================================ */
/* TANDA 4 · PUNTO 5 — Paleta (menos naranja), como variables con variante clara/oscura:
   · chips ⛓ → bordó sobre crema (en oscuro: translúcido bordó + texto claro).
   · pill "PRODUCÍS" → azul sobre celeste crema (en oscuro: translúcido azul + texto claro). */
:root {
    --cmd-chain-bg: #f4e7e6; --cmd-chain-fg: #8a2f3b; --cmd-chain-bd: rgba(138,47,59,.28);
    --cmd-pill-bg: #e3edf6;  --cmd-pill-fg: #1f5c86;  --cmd-pill-bd: rgba(31,92,134,.24);
}
[data-theme="dark"] {
    /* Oscuro = vino tinto, NO rosado: fondo bordó oscuro translúcido + texto rojizo claro (rojo-dominante). */
    --cmd-chain-bg: rgba(118,28,40,.42); --cmd-chain-fg: #e79488; --cmd-chain-bd: rgba(206,110,102,.42);
    --cmd-pill-bg: rgba(31,92,134,.22);  --cmd-pill-fg: #8fc4e8;  --cmd-pill-bd: rgba(143,196,232,.30);
}

/* TANDA 4 · PUNTO 1 — La comanda entera = UNA sola pieza: hero + cuerpo + pie dentro de un marco. */
.prod-comanda { border: 1px solid var(--border); border-radius: 18px; background: var(--card); overflow: hidden; box-shadow: var(--shadow); }
/* Hero dentro del marco: fondo surface + borde inferior (ya no es un bloque-imagen aparte). */
.cmd-hero { background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.cmd-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 0; }
.cmd-hero-back { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-size: 17px; cursor: pointer; transition: .15s; }
.cmd-hero-back:hover { color: var(--text); border-color: var(--text-3); }
.cmd-hero-main { display: flex; align-items: center; gap: 13px; padding: 8px 16px 15px; }
.cmd-hero-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--card); border: 1px solid var(--border); font-size: 24px; }
.cmd-hero-tt { min-width: 0; flex: 1 1 auto; }
.cmd-hero-tt h2 { font-family: 'DM Serif Display', serif; font-size: 24px; line-height: 1.1; color: var(--text); }
/* TANDA 21 · CAMBIO 2 — "para: <plato> · N porciones" bajo el título de la comanda de una salsa aparte
   (mismo dato que el subtítulo de su tarjeta). */
.cmd-hero-para { font-size: 12px; font-weight: 600; color: var(--text-2); line-height: 1.25; margin-top: 5px; }
.cmd-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cmd-hero-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--border); color: var(--text-2); }
/* Chip ⛓ de la consolidada en el hero: bordó/crema y tocable (navega a la olla). */
.cmd-chain-chip { border-color: var(--cmd-chain-bd); background: var(--cmd-chain-bg); color: var(--cmd-chain-fg); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: .15s; }
.cmd-chain-chip:hover { filter: brightness(1.03); }
.cmd-chain-chip i { font-size: 12px; }
/* Cuerpo del marco (padding); el hero y el pie van edge-to-edge. */
.cmd-body { padding: 16px; }

/* PUNTO 3 — Flechas ‹ › para recorrer las comandas. En el hero-comanda van en la barra superior
   (ghost sobre surface); en el hero-clásico (imagen oscura) van arriba a la derecha, blancas. */
.cmd-nav { display: inline-flex; gap: 6px; }
.cmd-hero-top .cmd-nav-arrow { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border-2); background: transparent; color: var(--text-2); font-size: 17px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; }
.cmd-hero-top .cmd-nav-arrow:hover:not([disabled]) { color: var(--text); border-color: var(--text-3); }
.cmd-nav-arrow[disabled] { opacity: .32; cursor: default; }

/* Pill "PRODUCÍS N …" (encabezado de la caja de Ingredientes) — PUNTO 5: celeste/azul. */
.cmd-prod-pill { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .4px; padding: 5px 11px; border-radius: 999px; background: var(--cmd-pill-bg); border: 1px solid var(--cmd-pill-bd); color: var(--cmd-pill-fg); text-transform: uppercase; white-space: nowrap; }

/* TANDA 3 · PUNTO 4 — CAJAS: Ingredientes y Procedimiento en paneles con borde + encabezado propio
   (fondo levemente distinto). Nada flota. Variables de la app → tema claro y oscuro sin hardcodear. */
.cmd-panel { margin: 0 0 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--card); overflow: hidden; }
.cmd-panel-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--border); }
.cmd-panel-tt { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); }
.cmd-panel-tt small { font-weight: 600; letter-spacing: .2px; text-transform: none; font-size: 11px; color: var(--text-3); }
.cmd-panel-body { padding: 12px 14px; }
/* Ingredientes: la tabla va al ras de la caja; padding lateral en las celdas de los bordes. */
.cmd-panel-ing .cmd-ing-table { margin: 0; }
.cmd-panel-ing .cmd-ing-table td.cmd-c-main { padding-left: 14px; }
.cmd-panel-ing .cmd-ing-table td.cmd-c-qty { padding-right: 14px; }
.cmd-panel-ing .cmd-ing-table tr:last-child td { border-bottom: none; }
/* Cebra: fila viva por medio con un fondo apenas más claro (sutil). */
.cmd-panel-ing .cmd-ing-table tr.cmd-row:nth-child(even) { background: var(--accent-soft); }
/* Procedimiento dentro de su caja: la lista de pasos sin margen extra arriba. */
.cmd-panel-proc .rec-proc-list { margin: 0; }

/* TANDA 5 · PUNTO 2 — MISE EN PLACE en formato comanda (caja + 3 columnas + cebra). Anchos FIJOS
   (table-layout:fixed) para que el nombre + reparto (col.1) y los pesos (col.3) NUNCA generen scroll
   lateral: la col.1 tiene ancho definido (el reparto largo trunca con "…") y la col.3 el suyo. Además
   los "pesos en crudo → limpios" se APILAN (cada peso en su línea, sin la flecha), compactos. */
.cmd-mise-table { table-layout: fixed; }
.cmd-panel-mise .cmd-mise-table td.cmd-c-act { width: 8px; padding-left: 0; padding-right: 0; }
.cmd-panel-mise .cmd-mise-table td.cmd-c-qty { width: 38%; white-space: normal; }
.cmd-mise-q { font-size: 12px; }
.cmd-mise-q .prod-mise-g { display: block; }
.cmd-mise-q .prod-mise-fl { display: none; }
.cmd-row.done .cmd-mise-q { opacity: .6; }
/* Sublíneas de la fila de mise (reparto, destinos, quién·hora) bajo el nombre, en la col. 1. */
.cmd-mise-dest { margin-top: 4px; }
.cmd-c-main .prod-check-reparto, .cmd-c-main .prod-check-done { margin-left: 0; }
/* Check "entregado por descuento": tilde verde apagado, sin interacción (igual que la vista vieja). */
.cmd-chk--entregada { opacity: .55; cursor: default; }

/* PUNTO 1 — Filas en 3 COLUMNAS FIJAS: col1 flexible (control + nombre + sublíneas),
   col2 la acción (mismo ancho para todas: botón/chip, o vacía → el hueco alinea todo),
   col3 la cantidad angosta a la derecha (número + unidad; "limpio" abajo).
   Se sobreescriben los nth-child heredados de .rec-ing-table (que eran para 2 columnas). */
.cmd-ing-table td { vertical-align: top; }
.cmd-ing-table td.cmd-c-main { width: auto; text-align: left; font-weight: 400; }
.cmd-ing-table td.cmd-c-act { width: 1%; white-space: nowrap; text-align: right; padding-left: 12px; font-weight: 400; font-variant-numeric: normal; }
.cmd-ing-table td.cmd-c-qty { width: 1%; white-space: nowrap; text-align: right; padding-left: 12px; color: var(--text); font-size: 14px; text-transform: none; }
/* La acción vive sola en su celda: sin el margin-left:auto del layout viejo, y el chip sin su margin-top. */
.cmd-c-act .cmd-act { margin-left: 0; }
.cmd-c-act .cmd-chain { margin-top: 0; }
/* "limpio" como segunda línea chiquita bajo el número (nunca empuja el número ni la fila). */
.cmd-q-limpio { display: block; margin-top: 1px; font-size: 10px; font-weight: 600; color: var(--text-3); }
.cmd-row.done .cmd-q-limpio { opacity: .55; }
.cmd-main { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }
/* TANDA DE CAMPO 1 · P1 — EL NOMBRE CEDE, LA CANTIDAD NO.
   Esta tabla es la UNICA de las tres comandas sin `table-layout: fixed` (la mise si lo
   tiene, y su comentario de arriba dice para que: "que NUNCA generen scroll lateral").
   Corriendo en auto-layout, el nombre le fijaba a la columna 1 un piso duro igual a su
   palabra mas larga, y como las columnas 2 y 3 son incompresibles (`width:1%` +
   `nowrap`), la suma podia pasarse del ancho de la caja. Y no habia escape: `.cmd-panel`
   es `overflow: hidden`, asi que el desborde no scrolleaba — RECORTABA la columna de
   cantidades contra el borde derecho.
   `min-width: 0` + `overflow-wrap: anywhere` le dan al nombre la valvula que le faltaba:
   con lugar no cambia nada (el texto no se parte si entra), y sin lugar cede en vez de
   desbordar. `anywhere` y no `break-word` a proposito: solo `anywhere` baja el ancho
   min-content, que es justo el numero con el que la tabla decide si desborda.
   El `min-width` de la cantidad es el cinturon: su columna reserva su ancho y no se
   comprime ni en el caso extremo. MEDIDO: desborde 11,3px -> 0. */
.cmd-nm { font-size: 14px; font-weight: 600; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.cmd-ing-table td.cmd-c-qty { min-width: 62px; }
/* El ULTIMO piso duro de la columna 1: la pildora de la forma es `nowrap`, asi que una
   forma larga ("en gajos rusticos") es una caja inquebrable de ~103px que la tabla no
   puede comprimir — MEDIDO: con el min-content de la tabla entrando en la caja (268 de
   276), la tabla igual medía 288 por este piso. Dentro de la comanda la pildora cede
   cuando no hay lugar (con lugar no cambia nada: sigue en una linea). Scopeado a la
   tabla de la comanda: la pildora del recetario queda como estaba. */
.cmd-ing-table .mrec-corte-pill { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
/* TANDA CONSOLIDAR 2 · P2 — el último ámbar de la comanda: el fondo de la píldora de la forma de
   corte ("concassé", "rallada") en las filas. Solo el COLOR —pasa a la familia lima, que ya era su
   tinta— y solo adentro de la comanda: la geometría de las filas no se toca y la píldora del
   recetario queda como está. */
.prod-comanda .mrec-corte-pill { background: rgba(201,192,90,.12); }
.cmd-row.done .cmd-nm { text-decoration: line-through; color: var(--text-3); }
.cmd-row.done .mrec-q-num, .cmd-row.done .mrec-corte-pill { opacity: .55; }
.cmd-empty { color: var(--text-3); font-size: 13px; padding: 16px 4px; }

/* Checkbox del corte (misma tarea de mise en place) */
.cmd-chk { flex: none; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--border-2); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; padding: 0; transition: .12s; }
.cmd-chk:hover { border-color: var(--orange); }
.cmd-chk.on { background: var(--green-check); border-color: var(--green-check); }
span.cmd-chk { cursor: default; }

/* "?" cómo se hace */
.cmd-help { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border-2); background: transparent; color: var(--text-3); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.cmd-help:hover { color: var(--orange); border-color: var(--orange); }

/* Acción de una subreceta (Empecé/Listo/↺) dentro de la fila.
   TANDA 3 · PUNTO 3 — "Listo" ya NO es verde (el verde parecía cartel de "terminado"): va CREMA como
   "Empecé". El verde queda solo para lo ya terminado (el check ✓ del corte, el tachado). */
.cmd-act { flex: none; margin-left: auto; padding: 6px 13px; border-radius: 8px; border: none; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; background: var(--btn-bg); color: var(--btn-color); transition: .15s; }
.cmd-act:hover { filter: brightness(1.05); }
.cmd-act.cream { background: var(--btn-bg); color: var(--btn-color); }
.cmd-act.ghost { background: transparent; border: 1px solid var(--border-2); color: var(--text-2); font-size: 15px; padding: 4px 10px; }
/* "⏳ esperando N cortes": look ámbar de espera, pero sigue siendo un botón tocable (abre el cartel). */
/* TANDA CONSOLIDAR 2 · P2 — "esperando N cortes" deja el ÁMBAR: la familia lima de lo vivo. En las
   FILAS de la comanda solo cambia el COLOR (la geometría de las filas no se toca: son las que se
   arreglaron para iPhone); la forma de chip vive solo en la barra "Cocinar" (.cmd-cook, abajo). */
/* TANDA DE CONFIANZA · P5 — el "esperando" de las filas, al mismo lima apagado del chip (solo color). */
.cmd-act.cmd-wait { background: rgba(216,226,74,.08); color: #C9C05A; border: 1px solid rgba(216,226,74,.35); font-weight: 700; }
.cmd-act.cmd-wait:hover { background: rgba(216,226,74,.13); filter: none; }

/* Chip de cadena: la subreceta está en una olla consolidada → navega a la olla */
/* Chip de cadena ⛓ de las filas (S.R.E en olla, corte en olla, "se hace aparte") — PUNTO 5: bordó/crema. */
.cmd-chain { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 11px; border-radius: 9px; border: 1px solid var(--cmd-chain-bd); background: var(--cmd-chain-bg); color: var(--cmd-chain-fg); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; }
.cmd-chain:hover { filter: brightness(1.03); }
.cmd-chain i { font-size: 14px; }
.cmd-chain-est { font-weight: 600; opacity: .85; }
/* TANDA 21 · CAMBIO 3 — El espejo en curso suma "· quién · ⏱ vivo". El cronómetro toma el color del
   chip (no el naranja global) para no pelearse con el bordó/crema. */
.cmd-chain-curso { font-weight: 600; opacity: .85; white-space: nowrap; }
.cmd-chain-curso .prod-cron { color: inherit; font-variant-numeric: tabular-nums; }
/* TANDA 3 · PUNTO 2 — Chip chico "⛓ en olla →" en la columna de acción de un corte consolidado. */
.cmd-chain-mini { margin-top: 0; padding: 4px 9px; font-size: 11px; gap: 4px; white-space: nowrap; }
.cmd-chain-mini i { font-size: 12px; }
/* TANDA 22 · CAMBIO 2 — El chip NUNCA se parte por dentro: SIEMPRE una sola línea que corta con "…"
   si no entra (en celu se quebraba en 3 renglones: "se hace / en aparte / curso"). Va inline-block y
   no inline-flex porque el texto del chip son nodos sueltos: solo un contenedor de línea les puede dar
   el "…". El ícono queda alineado al medio del texto. Mismo look: el espacio del HTML reemplaza al gap. */
.cmd-chain { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.cmd-chain i { flex-shrink: 0; vertical-align: -2px; }

/* Banda de sugerencia de consolidar dentro de la comanda (fila que ocupa las 2 columnas) */
.cmd-sug-row > td { padding: 0 !important; border-bottom: none !important; }

/* TANDA 7 · PUNTO 2 — Banda "¿Contás con esta preparación?" debajo de una S.R.E pendiente sin decidir.
   Misma anatomía que la banda de consolidar (.prod-sug-fila), pero en blanco/negro: superficie neutra
   y borde izquierdo fuerte del color del texto. Funciona igual en claro y en oscuro. */
.prod-tenes { margin: 3px 0 10px 35px; padding: 9px 11px; border: 1px solid var(--border); border-left: 3px solid var(--text); border-radius: 12px; background: var(--accent-soft); }
.prod-tenes-txt { font-size: 12.5px; line-height: 1.4; color: var(--text); font-weight: 700; }
.prod-tenes-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.prod-tenes-si { padding: 6px 11px; border: none; border-radius: 9px; background: var(--text); color: var(--bg); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; cursor: pointer; transition: .15s; }
.prod-tenes-si:hover { opacity: .85; }
.prod-tenes-no { padding: 6px 10px; border: 1px solid var(--border-2); border-radius: 9px; background: transparent; color: var(--text-2); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: .15s; }
.prod-tenes-no:hover { color: var(--text); border-color: var(--text-3); }
@media (max-width: 480px) { .prod-tenes { margin-left: 0; } }

/* Barra ámbar "Cocinar los X kg" (la preparación en sí: orden o olla) */
/* TANDA CONSOLIDAR 2 · P2 — la barra "Cocinar" deja el ámbar: la FILA de la casa (#171A1F / borde
   #252A31 / radio 14), sin hilito, con un punto lima con glow. En curso, el borde toma el lima; lista,
   el verde de siempre (no era ámbar: se queda). */
.cmd-cook { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; padding: 13px 16px; border-radius: 14px; border: 1px solid #252A31; background: #171A1F; }
.cmd-cook.curso { border-color: rgba(201,192,90,.35); }
.cmd-cook.done { border-color: rgba(74,222,128,.35); border-left-color: var(--green-check); background: rgba(74,222,128,.08); }
.cmd-cook-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #C9C05A; box-shadow: 0 0 7px rgba(201,192,90,.7); }
.cmd-cook.done .cmd-cook-dot { background: var(--green-check); box-shadow: none; }
.cmd-cook-lbl { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 800; color: var(--text); }
.cmd-cook .cmd-act { margin-left: 0; }
/* El CHIP DE ESTADO de la barra: lima suave, píldora, 10.5px/800, y su puntito-reloj de 6px al 55% en
   lugar del ⏳ (prodComandaEmpeceBtn lo emite solo para la barra). Sigue siendo el MISMO botón con el
   MISMO intent: tocarlo abre el cartel "le falta preparación", como siempre. */
.cmd-cook .cmd-act.cmd-wait { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: none; border-radius: 99px; background: rgba(201,192,90,.12); color: #C9C05A; font-size: 10.5px; font-weight: 800; }
.cmd-wait-pt { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #C9C05A; opacity: .55; }
/* PUNTO 2 — "· quién · ⏱" junto a la etiqueta cuando la olla/carga está en curso (peso normal, ámbar). */
.cmd-cook-curso { font-weight: 600; font-size: 12px; color: var(--orange); white-space: nowrap; }
.cmd-cook.done .cmd-cook-curso { color: var(--text-3); }

/* Caja "VIENE DE N PEDIDOS" (olla consolidada) */
/* TANDA CONSOLIDAR 2 · P2 — "Viene de N pedidos" (la comanda de una OLLA) compartía la piel ÁMBAR de
   la barra: pasa a la misma fila de la casa, y su ícono al lima. Sus renglones no cambian. */
.cmd-cons-box { margin-bottom: 18px; padding: 12px 14px; border-radius: 14px; border: 1px solid #252A31; background: #171A1F; }
.cmd-cons-h { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--text-2); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.cmd-cons-h i { font-size: 15px; color: #C9C05A; }
.cmd-cons-mem { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--text); }
.cmd-cons-mem + .cmd-cons-mem { border-top: 1px solid var(--border); }
.cmd-cons-mem .prod-pdot { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.cmd-cons-plato { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* TANDA CONSOLIDAR 2 · P2 — con la caja en #171A1F el rótulo del origen en --text-3 medía 3,05:1 (por
   píxel, en los dos motores): pasa a --text-2 (5,7). Es la caja que vistió esta tanda; la regla de
   contraste manda. */
.cmd-cons-org { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; color: var(--text-2); text-transform: uppercase; }
.cmd-cons-cant { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Pie: progreso + botón "Plato listo"/"Lista".
   TANDA 4 · PUNTO 1 — Anclado abajo DEL MARCO (no del modal): edge-to-edge, fondo surface propio +
   borde superior. Es la base de la pieza; scrollea junto con ella. */
.cmd-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--accent-soft); border-top: 1px solid var(--border); }
.cmd-foot-prog { font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.cmd-foot-btn { flex: none; padding: 12px 22px; border-radius: 11px; border: none; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 800; cursor: pointer; background: var(--btn-bg); color: var(--btn-color); transition: .15s; }
.cmd-foot-btn:hover { filter: brightness(1.05); }
.cmd-foot-btn.full { background: var(--green-check); color: #fff; }
/* Sin atajo: gris y muerto mientras falten tareas; se habilita (.full) al terminar todo a mano. */
.cmd-foot-btn:disabled { background: var(--border-2); color: var(--text-2); cursor: default; opacity: .7; filter: none; }
.cmd-foot-btn:disabled:hover { filter: none; }

/* Nota "producto limpio" dentro de la comanda: sin display:none heredado del id del modal */
.cmd-nota { display: block !important; }

/* Celu: hero más bajo; la barra del cocinero sigue por encima (z-index actual del modal). */
@media (max-width: 640px) {
    
    
    /* PUNTO 1 (celu): las 3 columnas entran sin scroll horizontal. La columna del botón se achica y,
       si hace falta, el texto largo ("⏳ esperando N cortes" / el chip de cadena) parte en 2 líneas. */
    .cmd-ing-table td.cmd-c-act { white-space: normal; padding-left: 8px; }
    .cmd-ing-table td.cmd-c-qty { padding-left: 8px; }
    .cmd-c-act .cmd-act.cmd-wait { white-space: normal; padding: 5px 9px; font-size: 11.5px; line-height: 1.2; }
    /* TANDA 22 · CAMBIO 2 — El chip ya NO parte su texto en varias líneas: en celu se le pone un tope
       de ancho real (en vw, no %) para que la columna no exija más que eso y la tabla siga entrando
       sin scroll lateral. Lo que no entra se corta con "…" adentro del chip. */
    .cmd-c-act .cmd-chain { max-width: 40vw; }
    .cmd-c-act .cmd-chain-mini { max-width: none; }   /* "en olla →" es corto: entra entero */
    /* PUNTO 1 (celu): la pieza de la comanda ocupa el ancho, con hero más compacto. */
    .cmd-hero-main { padding: 6px 13px 13px; gap: 11px; }
    .cmd-hero-ic { width: 40px; height: 40px; font-size: 21px; }
    .cmd-hero-tt h2 { font-size: 21px; }
}

/* Modal consolidar: desglose por origen */
.consolidar-desglose { margin: 12px 0 2px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.consolidar-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 13px; font-size: 13.5px; }
.consolidar-row + .consolidar-row { border-top: 1px solid var(--border); }
.consolidar-row.consolidar-total { font-weight: 700; background: var(--accent-bg); }

/* Consolidar todo: fila prolija — nombre a la izquierda en UNA línea (elipsis si
   no entra), total a la derecha y el desglase en una segunda línea gris chiquita. */
.consolidar-row-todo { align-items: flex-start; gap: 12px; }
.consolidar-row-todo .consolidar-nom {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding-top: 1px;
}
.consolidar-row-todo .consolidar-cant {
    flex: 0 1 auto; max-width: 60%;
    display: flex; flex-direction: column; align-items: flex-end;
    text-align: right; gap: 1px; line-height: 1.25;
}
.consolidar-row-todo .consolidar-sum { font-weight: 700; white-space: nowrap; }
.consolidar-row-todo .consolidar-desg-linea { font-size: 11.5px; color: var(--text-2); }

/* TANDA 24 — Aviso en el cartel de consolidar SALSAS: "sus cortes se juntan también", con el total de
   cada corte. Ámbar suave, la misma familia visual de lo consolidado (caja "VIENE DE N PEDIDOS"). */
/* Sin margen propio: el .modal-body ya es flex con gap — el margen se sumaba y quedaba un hueco doble. */
.consolidar-cortes { padding: 11px 13px; border: 1px solid rgba(245,196,81,.30); border-left: 3px solid #f5c451; border-radius: 12px; background: rgba(245,196,81,.07); }
.consolidar-cortes-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: var(--text-2); }
.consolidar-cortes-h i { flex: none; font-size: 15px; color: #b6892a; }
.consolidar-cortes-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 7px; font-size: 13px; color: var(--text); }
.consolidar-cortes-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consolidar-cortes-cant { flex: none; font-weight: 700; font-variant-numeric: tabular-nums; }
/* TANDA DE CONFIANZA · P1 — el corte que se SUMA a una olla que ya existe lo dice debajo de su nombre. */
.consolidar-cortes-dest { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: var(--text-2); white-space: normal; }
/* LA PODA · P2c — Pantallita "Generando cargas solicitadas…". Se apoya en .modal-overlay (fondo,
   z-index, blur) y solo centra una cajita chica. Sin botones: no se cancela a mitad de escritura. */
.ovgen { align-items: center; z-index: 1200; }
.ovgen-box { margin: auto; padding: 26px 34px; border-radius: var(--radius-lg); background: var(--bg); border: 1px solid var(--border); box-shadow: var(--shadow-md); text-align: center; }
.ovgen-box .spinner { margin: 0 auto 14px; }
.ovgen-txt { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
/* L7 — Detalle de lo que falta generar, adentro del botón ("+2 Milanesa · +8 Flan"). */
.gen-btn-lbl { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.2; min-width: 0; }
.gen-btn-falta { margin-top: 2px; font-size: 11px; font-weight: 600; color: inherit; opacity: .82; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* LA PODA · L2 — Texto del aviso "sin responder" (misma caja ámbar): consolidar cuenta como
   "No, la hago", así que la mise de esa salsa nace en el mismo acto. */
.consolidar-cortes-txt { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
/* TANDA 2 — "La hace: X" en el cartel de consolidar: informativo, no decide nada. */
.consolidar-quien { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.consolidar-quien i { flex: none; font-size: 15px; color: var(--text-3); }
.consolidar-quien b { color: var(--text); font-weight: 700; }
/* LA PODA · L1 — Etiqueta chica "· para <salsa>": distingue el corte del plato del corte de su salsa
   cuando comparten plato e ingrediente (si no, quedan como dos renglones gemelos). */
.prod-desg-para { font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; }

/* Consolidación inteligente — Entrega 2 */

/* Cambio 0 · mise en place: cantidad + quién·hora del corte listo, EN LA MISMA línea */

/* Cambio 1 · tarjetita cálida de sugerencia de consolidar (debajo de una preparación) */
.prod-sug { margin: -3px 0 10px; padding: 11px 13px; border: 1px solid rgba(245,196,81,.30); border-left: 3px solid #f5c451; border-radius: 12px; background: rgba(245,196,81,.07); }
.prod-sug-txt { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.prod-sug-txt b { color: var(--text); font-weight: 700; }
.prod-sug-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.prod-sug-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.prod-sug-yes { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border: none; border-radius: 9px; background: #f5c451; color: #3a2c00; font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: .15s; }
.prod-sug-yes:hover { filter: brightness(1.06); }
/* El de la FICHA lee las variables del fichero; el de las bandas queda como está. */
.prod-fich-card .prod-sug-yes { background: var(--fi-btn); color: var(--fi-btn-tx); }
.prod-sug-yes i { font-size: 15px; }
.prod-sug-no { padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 9px; background: transparent; color: var(--text-2); font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.prod-sug-no:hover { color: var(--text); border-color: var(--text-3); }
/* Banda COMPACTA de sugerencia dentro de la checklist de cortes (indentada bajo el texto de la fila). */
.prod-sug-fila { margin: 3px 0 10px 35px; padding: 9px 11px; }
.prod-sug-fila .prod-sug-txt { font-size: 12px; line-height: 1.4; }
.prod-sug-fila .prod-sug-acts { margin-top: 8px; gap: 6px; }
.prod-sug-fila .prod-sug-yes { padding: 6px 11px; font-size: 12px; }
.prod-sug-fila .prod-sug-no { padding: 6px 10px; font-size: 12px; }
@media (max-width: 480px) { .prod-sug-fila { margin-left: 0; } }

/* ============================================================
   FICHERO "PARA JUNTAR HOY" — vitrina de las propuestas de consolidar, arriba del catálogo.
   Misma familia visual que la banda de adentro de la comanda (.prod-sug): ámbar suave y borde
   izquierdo dorado. Reusa el encabezado del catálogo (.prod-grupo-h) y los dos botones de la banda
   (.prod-sug-yes / .prod-sug-no): acá solo vive la anatomía de la tarjeta.
   ============================================================ */
/* RETOQUES 1 · PIEZA 2 — el ámbar del fichero pasa a variables. Los DEFAULT son los
   valores que estaban escritos a mano, así que sin [data-paleta="tierra"] la ficha se
   ve byte a byte como siempre. Bajo tierra, el bloque del final las da vuelta. */
.prod-fich {
    margin-bottom: 18px;
    --fi-bd: rgba(245, 196, 81, .30);   /* borde de la ficha */
    --fi-hilo: #f5c451;                 /* el hilito de la izquierda */
    --fi-sup: rgba(245, 196, 81, .07);  /* superficie (acepta color o gradiente) */
    --fi-base: var(--bg);               /* la capa de abajo, para que el mazo tape */
    --fi-sep: rgba(245, 196, 81, .28);  /* separadores internos */
    --fi-num: #b6892a;                  /* el número (kg total) */
    --fi-btn: #f5c451;                  /* botón "Juntar" */
    --fi-btn-tx: #3a2c00;               /* su tinta */
    --fi-dot: #b6892a;                  /* puntito activo del mazo */
    --fi-foco: #b6892a;                 /* foco del desplegable */
    --fi-radio: 12px;
}

[data-theme="dark"] .prod-fich { --fi-num: #f5c451; --fi-dot: #f5c451; --fi-foco: #f5c451; }

.prod-fich-card { padding: 12px 14px; border: 1px solid var(--fi-bd); border-left: 3px solid var(--fi-hilo); border-radius: var(--fi-radio); background: var(--fi-sup); }
/* Nombre a la izquierda (cede y se recorta) + cantidad a la derecha (nunca se aplasta). */
.prod-fich-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.prod-fich-nm { min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-fich-cant { flex: none; font-size: 14.5px; font-weight: 700; color: var(--fi-num); font-variant-numeric: tabular-nums; }
.prod-fich-quien { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.prod-fich-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
/* Tanda 1b — LA PREGUNTA VA PRIMERO. Bloque "¿Alguna ya está hecha?" dentro de la tarjeta del
   fichero, arriba de los botones. Cada chip es el botón "Sí, la tengo" de la banda del plato
   (.prod-tenes), así que toma su lenguaje: blanco y negro, no ámbar — el ámbar es el de juntar.
   Los chips SON botones (borde y ✓) para que no se confundan con la línea de arriba, que es texto. */
.prod-fich-preg { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fi-sep); }
.prod-fich-preg-txt { font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--text); }
.prod-fich-preg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.prod-fich-tengo { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 11px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--card); color: var(--text-2); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: .15s; }
.prod-fich-tengo:hover { border-color: var(--text-3); color: var(--text); }
.prod-fich-tengo:active { background: var(--accent-soft); }
.prod-fich-tengo i { flex: none; font-size: 14px; }
.prod-fich-tengo b { font-weight: 700; color: var(--text); white-space: nowrap; }
.prod-fich-tengo .prod-sug-dot { margin-right: 0; }
/* TANDA 2 — EL DUEÑO DE LA OLLA: el desplegable "¿Quién la hace?", vestido como los botones de la
   tarjeta (mismo borde, mismo radio, misma letra). Ancho completo porque los nombres son largos. */
.prod-fich-dueno { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--fi-sep); }
.prod-fich-dueno-lb { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; line-height: 1.4; color: var(--text); }
.prod-fich-dueno-in { display: block; width: 100%; padding: 8px 30px 8px 11px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--card); color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 12.5px; font-weight: 600; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; background-size: 15px; transition: .15s; }
.prod-fich-dueno-in:hover { border-color: var(--text-3); }
.prod-fich-dueno-in:focus { outline: none; border-color: var(--fi-foco); }

/* (Tanda 1e — acá vivía EL MAZO del fichero y sus puntitos. 🌙 DESTILACIÓN · FASE 2: "Para juntar"
   es UNA fila (.prod-fich-fila, al final del archivo) y el mazo murió.) */

/* Cambio 4 · "No hagas de más": otra orden del mismo componente ya está en curso */
.prod-aviso-curso { margin: -3px 0 10px; padding: 10px 13px; border: 1px solid rgba(230,126,34,.28); border-left: 3px solid var(--orange); border-radius: 12px; background: rgba(230,126,34,.07); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.prod-aviso-curso b { color: var(--text); font-weight: 700; }

/* Cambio 3 · aviso de estación cruzada (dentro de los cartelitos de consolidar) */
.prod-cross { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.prod-cross-line { padding: 9px 12px; border-radius: 10px; background: rgba(56,189,248,.09); border: 1px solid rgba(56,189,248,.22); font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.prod-cross-line b { color: var(--text); font-weight: 700; }

/* Cambio 2 · botón "Consolidar todo el plato" (arriba del detalle) */
.prod-cons-todo-btn { width: 100%; margin: 0 0 16px; padding: 12px 16px; border: 1px solid rgba(245,196,81,.35); border-radius: 12px; background: rgba(245,196,81,.10); color: #f5c451; font-family: 'DM Sans', sans-serif; font-size: 13.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: .15s; }
.prod-cons-todo-btn:hover { background: rgba(245,196,81,.16); }
.prod-cons-todo-btn i { font-size: 17px; }

/* ============================================================
   CONSOLIDADO dividido: PREPARACIONES (tarjetas) + MISE EN PLACE (filas plegables)
   Los cortes consolidados pasan de tarjetón a renglones de una línea que se
   despliegan al tocarlos. Todo dentro del marco del bloque (borde izq dorado).
   ============================================================ */
/* Subtítulos dentro del bloque (mismo estilo que el detalle del plato: .prod-det-sec-h).
   Estas reglas van DESPUÉS de .prod-det-sec-h → ganan por orden y solo ajustan el margen. */
.prod-cons-sub-h { margin: 2px 2px 10px; }
.prod-cons-sub-h.sep { margin-top: 16px; }   /* separa MISE de las tarjetas de PREPARACIONES */

/* Marco de las filas: hairlines entre renglones, borde izquierdo dorado como el resto del bloque. */
.prod-cons-filas { border: 1px solid var(--border); border-left: 3px solid #f5c451; border-radius: 13px; overflow: hidden; background: var(--card); }
.prod-cons-fila { border-bottom: 1px solid var(--border); }
.prod-cons-fila:last-child { border-bottom: none; }
.prod-cons-fila.curso { background: rgba(230,126,34,.06); }
/* LA PODA · L11 — olla de cortes RETENIDA por su madre: toda tildada, sigue en MISE, tachada. */
.prod-cons-fila.done .prod-cons-fila-t { text-decoration: line-through; color: var(--text-3); }
.prod-cons-fila.done .prod-cons-fila-q { color: var(--text-3); }

/* Renglón cerrado: chevron + nombre (crece y wrapea) + viva + botón (nunca se aplasta).
   Celu primero (360px): con nombre largo el número puede caer de línea; el botón siempre entero. */
.prod-cons-fila-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px; min-height: 40px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.prod-cons-fila-row:hover { background: rgba(255,255,255,.03); }
.prod-cons-fila-chev { flex: 0 0 auto; font-size: 16px; color: var(--text-3); transition: transform .18s ease; }
.prod-cons-fila.open .prod-cons-fila-chev { transform: rotate(90deg); }
.prod-cons-fila-nm { flex: 1 1 auto; min-width: 0; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.prod-cons-fila-nm .prod-pdot { margin-right: 0; }
.prod-cons-fila-q { flex: 0 1 auto; min-width: 0; font-size: 14.5px; font-weight: 700; color: #f5c451; }
.prod-cons-fila-q small { font-size: 11px; font-weight: 500; color: var(--text-2); margin-left: 3px; }
.prod-cons-fila-btn { margin-left: auto; flex-shrink: 0; padding: 7px 15px; font-size: 12.5px; }
.prod-cons-fila .prod-cron { color: var(--orange); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 600; margin-left: 6px; }

/* Detalle desplegable: oculto hasta abrir. Indentado bajo el nombre. */
/* TANDA DE CONFIANZA · P3 — la fila de un corte SUELTO de una madre en olla: el mismo molde, sin plegado. */
.prod-cons-fila-row--suelta { cursor: default; }
.prod-cons-fila-row--suelta:hover { background: none; }
.prod-cons-fila-row--suelta .prod-cons-fila-nm { flex-basis: 100%; }
.prod-suelto-tag { background: rgba(255,255,255,.06); color: var(--text-2); border-radius: 999px; padding: 3px 8px; letter-spacing: .04em; }
.prod-suelto-sub { padding: 0 12px 10px 12px; margin-top: -4px; font-size: 12px; color: var(--text-2); }
.prod-cons-fila--suelta .prod-kebab--sm { flex-shrink: 0; }
.prod-cons-fila-det { display: none; padding: 0 12px 11px 34px; }
.prod-cons-fila.open .prod-cons-fila-det { display: block; }
.prod-cons-fila-det .prod-cons-desg { font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.prod-cons-fila-det .prod-sub-curso { margin-top: 4px; }
.prod-cons-fila-det .prod-sub-chips,
.prod-cons-fila-det .prod-dest-chips { margin-top: 8px; }
.prod-cons-fila-det .prod-sug { margin-top: 8px; }

/* Cambio 6 · widget del HUB compacto: tarjetitas por plato, apiladas */
.prod-resumen-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.prod-plato-card--mini { padding: 9px 11px; border-radius: 11px; }
.prod-plato-card--mini .prod-plato-nm { font-size: 14px; }
.prod-plato-card--mini .prod-plato-prog { margin-top: 7px; }
.prod-plato-card--mini .prod-plato-curso { margin-top: 6px; }

/* "+ Cargar": bloque de rinde de la subreceta (reemplaza el selector de unidad) */
.carga-rinde { display: flex; flex-direction: column; justify-content: center; min-height: 34px; line-height: 1.3; }
.carga-rinde-base { font-size: 11px; color: var(--text-2); }
.carga-rinde-tot { font-size: 12.5px; font-weight: 600; color: var(--orange); margin-top: 2px; }

/* ============ Producción — "Tu lista" (intenciones cargadas) ============ */

/* Cartel de la DECISIÓN (regeneración del menú): qué se genera de cada plato + aviso de bajas. */
.preview-desg-linea { display: flex; flex-wrap: wrap; gap: 7px; }
.preview-desg-chip { flex: none; font-size: 12px; font-weight: 700; color: #3a2c00; background: #f5c451; border-radius: 999px; padding: 4px 11px; }
.preview-desg-chip small { font-weight: 600; opacity: .8; }
.preview-desg-baja { font-size: 12px; line-height: 1.4; color: #f5b544; background: rgba(245,181,68,.10); border: 1px solid rgba(245,181,68,.30); border-radius: 9px; padding: 8px 11px; margin-top: 8px; }

/* ============================================================
   PERLA DE RECARGA MODERNA (solo mobile)
   Gesto tipo Instagram: en REPOSO no se ve nada. Aparece solo mientras
   el gesto está activo (.dragging) y se esfuma en el lugar al soltar
   (.releasing). El gesto lo dispara el JS sobre el scroller principal
   (#admin-main), no la perla. En escritorio no existe (display:none).
============================================================ */
.refresh-pearl,
.refresh-sweep { display: none; }

@media (max-width: 640px) {
    /* EN REPOSO: la perla es 100% invisible y no intercepta nada (pointer-events:none).
       El CUERPO (vidrio/borde/sombra) va en ::before para poder desvanecerlo entero. */
    .refresh-pearl {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 55px;                     /* justo bajo el header (56px) */
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translateX(-50%);
        z-index: 1700;
        pointer-events: none;          /* puramente visual: el gesto lo maneja el scroller */
        opacity: 0;                    /* invisible en reposo → no queda ninguna barrita */
        -webkit-tap-highlight-color: transparent;
        transition: opacity .18s ease;
    }
    .refresh-pearl.dragging { opacity: 1; }   /* visible mientras se arrastra (al soltar, .releasing la esfuma) */

    /* Cuerpo de la perla (círculo de vidrio esmerilado): aparece al arrastrar y al
       soltar se esfuma acá mismo (opacity → 0), sin viajar. */
    .refresh-pearl::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--sidebar-bg);
        border: 1px solid var(--border);
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .refresh-pearl.dragging::before { opacity: 1; }

    /* Arrastrando: sigue al dedo con la resistencia elástica (--pull-y, ×0,6 en el JS).
       El transform NO transiciona: sigue al dedo sin lag. */
    .refresh-pearl.dragging {
        transform: translateX(-50%) translateY(var(--pull-y, 0px));
    }

    /* Puntito naranja del centro: parte del cuerpo al arrastrar. Sin glow: en reposo
       la perla entera está invisible, así que ya no hay "barrita" flotando. */
    .refresh-pearl-dot {
        position: relative;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--orange);
    }

    /* Aro de progreso (oculto en reposo; el JS baja stroke-dashoffset) */
    .refresh-pearl-ring {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);     /* empieza a llenar desde arriba */
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease;
    }
    .refresh-pearl.dragging .refresh-pearl-ring { opacity: 1; }
    .refresh-pearl-ring-bg { fill: none; stroke: var(--border); stroke-width: 3; }
    .refresh-pearl-ring-fg {
        fill: none;
        stroke: var(--orange);
        stroke-width: 3;
        stroke-linecap: round;
        stroke-dasharray: 119.38;      /* 2·π·19 */
        stroke-dashoffset: 119.38;
    }

    /* Texto de ayuda debajo de la perla ("un poco más…" / "soltá") */
    .refresh-pearl-hint {
        position: absolute;
        top: calc(100% + 7px);
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: 11px;
        color: var(--text-2);
        opacity: 0;
        pointer-events: none;
        transition: opacity .16s ease, color .18s ease;
    }
    .refresh-pearl.dragging .refresh-pearl-hint { opacity: 1; }

    /* Umbral alcanzado: se enciende en naranja (glow en el cuerpo) */
    .refresh-pearl.ready::before {
        border-color: var(--orange);
        box-shadow: 0 0 0 3px var(--orange-light), 0 0 16px 1px rgba(230, 126, 34, 0.5);
    }
    .refresh-pearl.ready .refresh-pearl-hint { color: var(--orange); font-weight: 600; }

    /* AL SOLTAR (pase o no el umbral): la perla entera —cuerpo, aro, glow y texto—
       se ESFUMA en el lugar (queda congelada donde estaba, con --pull-y vivo, y baja
       la opacidad a 0). Sin barrita a la que volver: en reposo no hay nada. */
    .refresh-pearl.releasing {
        transform: translateX(-50%) translateY(var(--pull-y, 0px));   /* congelada donde estaba */
        opacity: 0;
        transition: opacity .5s ease;
    }
    .refresh-pearl.releasing::before { opacity: 0; box-shadow: none; }
    .refresh-pearl.releasing .refresh-pearl-ring { opacity: 0; }
    .refresh-pearl.releasing .refresh-pearl-hint { opacity: 0; }

    /* Brillo naranja que barre el header al recargar */
    .refresh-sweep {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        z-index: 1699;
        overflow: hidden;
        pointer-events: none;
        opacity: 0;
    }
    .refresh-sweep::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 45%;
        background: linear-gradient(90deg, transparent, var(--orange), transparent);
        opacity: 0.55;
        filter: blur(2px);
        transform: translateX(-140%);
    }
    .refresh-sweep.sweeping { opacity: 1; }
    .refresh-sweep.sweeping::before { animation: refreshSweep .5s ease-out forwards; }
    @keyframes refreshSweep {
        from { transform: translateX(-140%); }
        to   { transform: translateX(340%); }
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .refresh-pearl { transition: opacity .1s linear; }
    .refresh-pearl.releasing { transition: opacity .12s linear; }
    .refresh-sweep.sweeping::before { animation-duration: .01ms; }
}

/* ============================================================
   🧪 LABORATORIO DEL MOTOR (oculto · solo desarrollo)
   ============================================================ */
.ajc-card-lab { border-style: dashed; }
.ajc-ico-lab { font-size: 22px; }

.lab-modal { max-width: 640px; }
.lab-body { display: flex; flex-direction: column; gap: 14px; }

.lab-base-info {
    font-size: 13px;
    color: var(--text-2);
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--accent-soft);
}
.lab-base-info b { color: var(--text); }

.lab-controles {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lab-int-group {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.lab-int {
    position: relative;
    cursor: pointer;
    user-select: none;
}
.lab-int input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}
.lab-int span {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    border-right: 1px solid var(--border);
}
.lab-int:last-child span { border-right: 0; }
.lab-int input:checked + span {
    background: var(--accent-bg);
    color: var(--text);
}
.lab-int input:disabled + span { opacity: .5; }

.lab-btn-correr {
    flex: 1;
    min-width: 160px;
    padding: 10px 16px;
    border: 0;
    border-radius: 10px;
    background: var(--text);
    color: var(--bg);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.lab-btn-correr:disabled { opacity: .55; cursor: default; }
.lab-btn-frenar {
    padding: 10px 16px;
    border: 1px solid var(--red);
    border-radius: 10px;
    background: var(--red-light);
    color: var(--red);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.lab-progress-wrap { display: flex; flex-direction: column; gap: 6px; }
.lab-progress-track {
    height: 8px;
    border-radius: 6px;
    background: var(--accent-soft);
    overflow: hidden;
}
.lab-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--text);
    border-radius: 6px;
    transition: width .12s linear;
}
.lab-progress-txt { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.lab-resumen {
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--text);
    border: 1px solid var(--border);
    background: var(--accent-soft);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
}
.lab-resumen.con-fallas { border-color: var(--red); background: var(--red-light); }
.lab-resumen.todo-ok { border-color: var(--green-check, var(--border-2)); }
.lab-resumen-sub { margin-left: auto; font-size: 12px; color: var(--text-2); }

.lab-ok-msg {
    padding: 14px;
    border-radius: 12px;
    font-size: 14px;
    color: var(--text);
    background: var(--accent-soft);
    text-align: center;
}
.lab-seccion-tt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 14px 0 4px;
}
.lab-falla {
    border: 1px solid var(--red);
    border-left-width: 3px;
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: var(--red-light);
}
.lab-falla-top { display: flex; align-items: center; gap: 8px; }
.lab-falla-nom { font-size: 13.5px; font-weight: 700; color: var(--text); flex: 1; }
.lab-falla-count {
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    background: var(--bg);
    border: 1px solid var(--red);
    border-radius: 20px;
    padding: 1px 8px;
}
.lab-falla-det { font-size: 12.5px; color: var(--text); margin-top: 5px; }
.lab-falla-esc { font-size: 12px; color: var(--text-2); margin-top: 3px; word-break: break-word; }
.lab-falla-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.lab-seed { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lab-mini-btn {
    padding: 5px 10px;
    border: 1px solid var(--border-2);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.lab-mini-btn:hover { background: var(--accent-bg); }

.lab-mugre-lista { display: flex; flex-direction: column; gap: 6px; }
.lab-mugre {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--accent-soft);
    flex-wrap: wrap;
}
.lab-mugre-tag {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
    border: 1px solid var(--border-2);
    border-radius: 6px;
    padding: 1px 7px;
    white-space: nowrap;
}
.lab-mugre-nom { font-size: 13px; font-weight: 600; color: var(--text); }
.lab-mugre-det { font-size: 12px; color: var(--text-2); }

.lab-repetir {
    margin-top: 12px;
    border: 1px dashed var(--border-2);
    border-radius: 10px;
    padding: 10px 12px;
    background: var(--accent-soft);
}
.lab-repetir-tt { font-size: 13px; font-weight: 700; color: var(--text); }
.lab-repetir-esc { font-size: 12px; color: var(--text-2); margin: 3px 0 6px; word-break: break-word; }
.lab-repetir-list { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.lab-repetir-list li { margin: 2px 0; }

.lab-nota { font-size: 11.5px; color: var(--text-3); line-height: 1.5; margin-top: 4px; }

/* ============================================================
   BORRADO PROTEGIDO + HISTORIAL DE BORRADOS
   Reusa el teclado del PIN (.pin-modal-*) y las tarjetas de Ajustes de cocina
   (.ajc-card). Acá solo lo propio: el "qué estoy por borrar" y la lista.
   ============================================================ */
.cbo-que {
    font-size: 14px;
    line-height: 1.5;
    background: var(--bg-2, rgba(127, 127, 127, .08));
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.cbo-nota {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 6px;
}

.hb-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.hb-fila {
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 12px;
}

.hb-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    color: var(--text-2);
    margin-bottom: 4px;
}

.hb-quien { font-weight: 600; }

.hb-que {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}

.hb-meta {
    font-size: 12px;
    color: var(--text-2);
    margin-top: 2px;
}

.hb-motivo {
    font-size: 13px;
    color: var(--text-2);
    font-style: italic;
    margin-top: 6px;
}

.hb-vacio {
    font-size: 13.5px;
    color: var(--text-2);
    text-align: center;
    padding: 24px 0;
}

/* TANDA B3b · §2 — "· en vivo" con puntito verde al lado del título del modal (solo con el
   canal conectado) y el resalte de la línea que acaba de llegar: borde verde que se apaga
   solo a los ~2 seg. Nada de esto toca el layout de la fila (mismo borde, mismo alto). */
.hb-vivo {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--green-check);
    margin-left: 8px;
    white-space: nowrap;
    vertical-align: middle;
}

.hb-vivo::before { content: '· '; color: var(--text-3); }

.hb-vivo-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: 1px;
    animation: hbLate 1.8s ease-in-out infinite;
}

@keyframes hbLate {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.hb-fila.hb-nuevo {
    border-color: var(--green-check);
    box-shadow: 0 0 0 2px rgba(39, 174, 96, .18);
    transition: border-color .6s ease, box-shadow .6s ease;
}

/* ============================================================
   🌾 TIERRA · FASE 1 — LOS CIMIENTOS (paleta en paralelo)
   ============================================================
   La paleta nueva vive EN PARALELO: el atributo data-paleta="tierra" en el
   <html> (al lado de data-theme, puesto por el mismo script anti-FOUC del
   index) redefine las MISMAS variables que ya lee toda la app. SIN el
   atributo no se aplica ni una sola de estas reglas: todo lo de acá abajo
   es AGREGADO, no toca una línea de arriba. Esa es la red.

   Especificidad, a propósito: :root[data-paleta] pesa (0,2,0) y le gana a
   los :root sueltos que hay repartidos más arriba (--green-check línea 6150,
   --green-soft-check 6242, --prod-asig-* 15692, --cmd-chain/pill-* 15773),
   que pesan (0,1,0). Y el bloque oscuro pesa (0,3,0), así que le gana al
   claro de tierra. Por eso los DOS bloques declaran el juego COMPLETO: nada
   queda cruzado.

   Decisión 1 (sellada): el glass queda SOLO en las capas que flotan. Acá se
   resuelve por variable, no borrando backdrop-filter: con --card sólido el
   desenfoque de las tarjetas de base deja de verse solo. NO se saca ni un
   backdrop-filter — un backdrop-filter distinto de none es bloque contenedor
   de los position:fixed que cuelgan adentro, y sacarlo movería layouts.
   Los layouts NO se tocan NUNCA.
============================================================ */

/* Tokens de tipografía. El cuerpo no cambia (DM Sans en las dos paletas);
   el de títulos es el que se da vuelta bajo tierra. Las 137 declaraciones
   de font-family que ya existen NO se tocaron: las reglas del final pisan
   solo con el atributo puesto. */
:root {
    --font-cuerpo: 'DM Sans', sans-serif;
    --font-titulo: 'DM Serif Display', serif;
    /* Tinta que se lee SOBRE el color de lo vivo (--orange / --terra). El default es
       el #1a1a1a que la app ya tenía escrito a mano, así que nada cambia sin paleta. */
    --vivo-ink: #1a1a1a;
}

/* ============================================================
   TIERRA — CLARO
============================================================ */
:root[data-paleta="tierra"] {
    /* ---- 14 tokens nuevos (tabla, sección 1) ---- */
    /* TANDA LIMA — lo VIVO pasa de terracota a LIMA. En claro el lima pleno no se
       lee sobre crema, así que va un lima ACEITUNA: mismo rol, tono legible.
       El #8F862E del mockup daba 3,74:1 como texto sobre la tarjeta y 3,29:1 sobre
       el fondo — por debajo de la regla de contraste, que manda sobre los números.
       Con #726B24 da 5,46 y 4,80. Medido, no estimado. */
    --terra: #726B24;
    --terra-suave: rgba(114, 107, 36, 0.1);
    --terra-borde: rgba(114, 107, 36, 0.4);
    /* La nav es café oscuro también en claro: ahí el lima PLENO sí se lee (8,69:1). */
    --terra-nav: #C9C05A;
    /* El salvia se corre al gris-verde para no chocar con el lima. El #66795F del
       mockup daba 4,14:1 sobre el fondo crema; #5D6F57 da 4,76 y conserva el tono
       (105° contra 104°: el mismo verde apagado). */
    --salvia: #5D6F57;
    --salvia-suave: rgba(93, 111, 87, 0.1);
    --salvia-borde: rgba(93, 111, 87, 0.4);
    --oliva: #55613B;
    --oliva-sup: linear-gradient(180deg, #F0F2E6, #E4E9D4);
    --oliva-borde: rgba(122, 114, 39, 0.3);   /* acompaña al lima */
    --borg: #8C3247;
    --borg-tx: #8C3247;
    --borg-suave: rgba(140, 50, 71, 0.07);
    --relieve: #F0EBDF;

    /* Superficie de las capas que FLOTAN (decisión 1). No está en la tabla:
       es la pieza que le devuelve el vidrio a los popovers cuando --card se
       vuelve sólido. */
    --flot: rgba(255, 253, 249, 0.82);

    /* ---- tipografía: Sora entra, DM Serif Display sale ---- */
    --font-titulo: 'Sora', 'DM Sans', sans-serif;
    /* El lima aceituna de claro es OSCURO: encima va tinta clara (5,46:1). */
    --vivo-ink: #FFFFFF;

    /* ---- bases y texto ---- */
    --bg: #F4F0E7;
    --bg-2: #EDE8DB;
    --card: #FFFFFF;
    --card-border: #E6E0D2;
    --card-shadow: 0 6px 20px rgba(60, 45, 30, 0.06);
    --sidebar-bg: #FFFFFF;
    --sidebar-border: #E6E0D2;
    --text: #241F19;
    --text-2: #7A7268;
    --text-3: #A39C90;
    --border: #E6E0D2;
    --border-2: #D8D0C2;

    /* ---- el monocromo: --accent sigue siendo TINTA; lo vivo usa --terra ---- */
    --accent: #241F19;
    --accent-bg: #E8E1D1;
    --accent-soft: #F0EBDF;
    --gold: #726B24;
    --gold-light: rgba(114, 107, 36, 0.1);
    --green: #5D6F57;
    --green-mid: #6E8068;
    --green-light: rgba(93, 111, 87, 0.1);
    --nav-active-bg: rgba(36, 31, 25, 0.08);
    --nav-active-color: #241F19;
    --nav-color: #7A7268;
    --badge-bg: #F0EBDF;
    --badge-color: #7A7268;
    --avatar-bg: #241F19;
    --avatar-color: #F4F0E7;
    --btn-bg: #241F19;
    --btn-color: #F4F0E7;

    /* ---- tags del recetario ---- */
    --tag-est-bg: #F0EBDF;
    /* Un tono más oscuro que --text-2 a propósito: la tinta neutra sobre --relieve
       daba 4,0:1 (y el tag de estación hoy da 11,1). Con #655E54 da 5,4:1 y sigue
       siendo un gris cálido apagado, no tinta plena. Medido, no estimado. */
    --tag-est-color: #655E54;
    --tag-prod-bg: rgba(93, 111, 87, 0.12);
    --tag-prod-color: #55684E;
    --tag-desp-bg: rgba(114, 107, 36, 0.12);
    /* El #7A7227 del mockup daba 4,20:1 sobre su propio fondo tenue; #6B6422 da 5,16. */
    --tag-desp-color: #6B6422;

    /* ---- estados y semáforos ---- */
    --red: #8C3247;
    --red-light: rgba(140, 50, 71, 0.07);
    --orange: #726B24;
    --orange-light: rgba(114, 107, 36, 0.1);
    --green-check: #5D6F57;
    --green-soft-check: rgba(93, 111, 87, 0.1);

    /* ---- producción y comanda ---- */
    --cmd-pill-bg: #F0EBDF;
    --cmd-pill-fg: #655E54;   /* misma razón que --tag-est-color: 4,0:1 → 5,4:1 */
    --cmd-pill-bd: #D8D0C2;
    --cmd-chain-bg: #E9EDDC;
    --cmd-chain-fg: #46512F;
    --cmd-chain-bd: rgba(85, 97, 59, 0.35);
    --prod-asig-bg: #F0EBDF;
    --prod-asig-fg: #241F19;

    /* ---- nav mobile: café, no gris tech. Mecánica y forma NO se tocan
       (la burbuja sigue siendo la burbuja): solo cambia de color. ---- */
    --mbar-bg: #241F19;
    --mbar-border: transparent;
    --mbar-ink: #8F887C;
    --mbar-bubble: #C9C05A;
    --mbar-bubble-ink: #241F19;   /* fondo LIMA → SIEMPRE tinta oscura (8,69:1) */

    /* ---- forma y efectos ---- */
    /* RETOQUES 2 · PIEZA 3 — Facu re-selló los radios: seguía muy rectangular.
       Como son variables, toda la app que las lee se redondea sola. */
    --radius: 20px;
    --radius-lg: 32px;
    --shadow: 0 2px 10px rgba(60, 45, 30, 0.05);
    --shadow-md: 0 8px 26px rgba(60, 45, 30, 0.09);
    --glass-blur: none;
    --mi-glass: rgba(250, 246, 238, 0.86);

    /* Los orbes ya no existen en la app (quedaron huérfanos: ninguna regla
       los lee). Se apagan igual, para que el día que alguien los resucite
       el fondo tierra siga liso. */
    --orb-1: transparent;
    --orb-2: transparent;
}

/* ============================================================
   TIERRA — OSCURO · BASE PIZARRA FRÍA
   ============================================================
   TANDA PIZARRA (sellada por Facu, 4-sep). Facu vio la app entera con la base
   "negro café" y la rechazó: el tinte marrón le quedaba como un filtro
   amarillento encima de todo. Eligió PIZARRA FRÍA (gris con un pelo azulado)
   de una comparación de 4. Acá cambian SOLO los valores de la base de ESTE
   bloque: el lima, el salvia, el oliva, el borgoña, la gama por plato y
   --vivo-ink quedan EXACTAMENTE como estaban, y la estructura no se toca.

   La regla que se siguió, simple y verificable: si un color de la base tenía
   MÁS ROJO QUE AZUL, no pertenece a la familia nueva. Se re-tonalizaron los
   37 que la incumplían —bases, textos, bordes, relieve, nav, tags, píldoras,
   avatar/botón y las superficies que flotan (--flot, --mi-glass)— al mismo
   ROL y al mismo nivel de luz, sin una gota de marrón. Las sombras ya eran
   negro puro y no se tocaron.

   El tema CLARO no entra en esta tanda: la crema clara es otra discusión y
   Facu decide después. El bloque de arriba queda tal cual.
============================================================ */
:root[data-theme="dark"][data-paleta="tierra"] {
    /* ---- 14 tokens nuevos ---- */
    /* TANDA LIMA — lo VIVO pasa de terracota a LIMA. En oscuro va el lima pleno:
       9,40:1 como texto sobre la tarjeta (el terracota daba 4,93). */
    --terra: #C9C05A;
    --terra-suave: rgba(201, 192, 90, 0.12);
    --terra-borde: rgba(201, 192, 90, 0.45);
    --terra-nav: #C9C05A;
    /* El salvia se corre al gris-verde para no chocar con el nuevo protagonista:
       65° de diferencia de tono con el lima, se distinguen de reojo. */
    --salvia: #8FA98F;
    --salvia-suave: rgba(143, 169, 143, 0.12);
    --salvia-borde: rgba(143, 169, 143, 0.4);
    --oliva: #55613B;
    /* PIZARRA — el oliva es lo ÚNICO cálido que se queda cálido, porque es VERDE
       y no marrón (el verde manda: G es el canal más alto). Se lo enfrió un paso
       para que asiente sobre la base gris sin verse embarrado. Desde esta tanda
       tiene por fin quien lo lea: la ficha de "PARA JUNTAR HOY". */
    --oliva-sup: linear-gradient(180deg, #262F22, #1C2419);
    --oliva-borde: rgba(169, 177, 120, 0.35);   /* acompaña al lima */
    --borg: #8C3247;
    --borg-tx: #E08BA0;
    --borg-suave: rgba(140, 50, 71, 0.15);
    --relieve: #1F242B;

    --flot: #171A1F;

    --font-titulo: 'Sora', 'DM Sans', sans-serif;
    /* El lima pleno de oscuro es CLARO: encima va tinta oscura (9,26:1). */
    --vivo-ink: #241F19;

    /* ---- bases y texto ---- */
    /* TANDA VIDRIO — el fondo sigue siendo pizarra SÓLIDA (es el lienzo), y encima
       las superficies vuelven a ser VIDRIO: blanco translúcido, sin una gota de
       tinte. El velo marrón de antes era el fondo café, no el vidrio; sobre gris
       frío el mismo blanco al 5% queda limpio. Es EXACTAMENTE la mecánica que la
       paleta clásica oscura usa desde siempre (--card: rgba(255,255,255,.06)), y
       por eso alcanza sola a las 80 reglas que ya leen --card y a las 43 que ya
       traen backdrop-filter: var(--glass-blur). */
    --bg: #0E1013;
    --bg-2: #0A0C0E;
    --card: #171A1F;
    --card-border: #252A31;
    --card-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
    --sidebar-bg: #171A1F;
    --sidebar-border: #252A31;
    --text: #F0F2F5;
    --text-2: #8C94A0;
    --text-3: #5F6772;
    /* Los bordes acompañan al vidrio: sobre el fondo pelado son el MISMO gris que
       antes —medido, rgba(255,255,255,.10) sobre #0E1013 da #26282B contra el
       #252A31 de la pizarra sólida—, pero encima de un orbe se encienden con la
       luz en vez de quedar como una línea oscura. */
    --border: #252A31;
    --border-2: #343B44;

    /* ---- el monocromo ----
       EXCEPCIÓN MEDIDA DE LA TANDA VIDRIO: --accent-bg, --accent-soft, --relieve,
       --badge-bg, --tag-est-bg, --cmd-pill-bg y --prod-asig-bg se quedan SÓLIDOS.
       Son las superficies "hundidas" que viven ADENTRO de una tarjeta, así que si
       también fueran translúcidas se apilarían tres capas de luz sobre el orbe y
       el texto se lava: medido, --text-2 caía a 3,70:1 (contra 4,56 con estas
       sólidas). Un hundido opaco sobre vidrio se lee como hundido igual — y es la
       diferencia entre que se lea o no. */
    --accent: #F0F2F5;
    --accent-bg: #252A31;
    --accent-soft: #1F242B;
    --gold: #C9C05A;
    --gold-light: rgba(201, 192, 90, 0.12);
    --green: #8FA98F;
    --green-mid: #7E967E;
    --green-light: rgba(143, 169, 143, 0.12);
    --nav-active-bg: rgba(240, 242, 245, 0.1);
    --nav-active-color: #F0F2F5;
    --nav-color: #8C94A0;
    --badge-bg: #1F242B;
    --badge-color: #8C94A0;
    --avatar-bg: #E4E8EE;
    --avatar-color: #12151A;
    --btn-bg: #E4E8EE;
    --btn-color: #12151A;

    /* ---- tags del recetario ---- */
    --tag-est-bg: #1F242B;
    --tag-est-color: #8C94A0;
    --tag-prod-bg: rgba(143, 169, 143, 0.15);
    --tag-prod-color: #8FA98F;
    --tag-desp-bg: rgba(201, 192, 90, 0.15);
    --tag-desp-color: #C9C05A;

    /* ---- estados y semáforos ----
       --red se usa de las DOS formas en la app: como texto sobre el fondo y
       como fondo con letras blancas encima. El --borg puro (#8C3247) queda
       ilegible como TEXTO en oscuro (2,2:1), así que acá va un borgoña
       aclarado: 4,9:1 como texto sobre la tarjeta y 3,6:1 como fondo con blanco
       — mejor que el #ef5350 de hoy (4,7 y 3,5) en LAS DOS puntas. Medido.
       El --borg puro sigue disponible para quien necesite el bordó pleno. */
    --red: #C86A80;
    --red-light: rgba(140, 50, 71, 0.15);
    --orange: #C9C05A;
    --orange-light: rgba(201, 192, 90, 0.12);
    --green-check: #8FA98F;
    --green-soft-check: rgba(143, 169, 143, 0.12);

    /* ---- producción y comanda ---- */
    --cmd-pill-bg: #1F242B;
    --cmd-pill-fg: #8C94A0;
    --cmd-pill-bd: #343B44;
    --cmd-chain-bg: rgba(85, 97, 59, 0.35);
    --cmd-chain-fg: #C3D0AC;
    --cmd-chain-bd: rgba(143, 169, 143, 0.35);   /* sigue al salvia nuevo */
    --prod-asig-bg: #252A31;
    --prod-asig-fg: #F0F2F5;

    /* ---- nav mobile ----
       --mbar-ink va #8F887C en las DOS paletas a propósito: el panel de la
       barra es café oscuro en claro Y en oscuro (nunca se aclara), y el
       #655F55 que traía la tabla da 2,4:1 contra él — ilegible. Medido. */
    --mbar-bg: #171A1F;
    --mbar-border: #252A31;
    --mbar-ink: #7C8490;
    --mbar-bubble: #C9C05A;
    --mbar-bubble-ink: #241F19;   /* fondo LIMA → SIEMPRE tinta oscura (8,69:1) */

    /* ---- forma y efectos ---- */
    /* RETOQUES 2 · PIEZA 3 — Facu re-selló los radios: seguía muy rectangular.
       Como son variables, toda la app que las lee se redondea sola. */
    --radius: 20px;
    --radius-lg: 32px;
    --shadow: none;
    --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.32);
    /* El vidrio, re-tonado: más desenfoque y MENOS saturación que el de la paleta
       clásica (1,8 exageraba el lima que pasa por atrás y lo volvía mostaza). */
    --glass-blur: none;
    /* Las capas que FLOTAN (hojitas, el ⋯, el menú de perfil) van al MISMO sólido
       que la base: con las superficies opacas, lo que las despega es el BORDE y la
       sombra, no la transparencia. Acá vivía el 92% de la tanda VIDRIO, que subía
       del 84% para no apoyarse sobre otra transparencia: ya no hay ninguna. */
    --mi-glass: #171A1F;
    /* LAS LUCES DEL FONDO. Renacen los orbes de la Fase 1, que habían quedado
       huérfanos: un resplandor lima arriba a la derecha y uno verde frío abajo a
       la izquierda. Estáticos: son luz, no protagonistas. Los pinta body::before /
       body::after, más abajo.
       EL ALPHA SALE DE LA MEDICIÓN, no del gusto: el prompt pedía .16 y .13, pero
       una tarjeta de vidrio parada sobre el pico del orbe lima dejaba --text-2 en
       3,96:1 — el orbe ACLARA la tarjeta y toda la letra de la app es clara, así
       que subir la opacidad de la tarjeta (que es blanca) empeora en vez de
       arreglar. El único lever que sirve es el orbe. Con .10 da 4,56:1. */
    --orb-1: rgba(201, 192, 90, 0.10);
    --orb-2: rgba(90, 140, 120, 0.12);
    /* LA LUZ DE ADENTRO DEL MODAL. Los orbes del body no llegan a un modal: el overlay
       los tapa. Así que los modales grandes se pintan SU propia luz en el fondo, en
       versión interior (más chica y más tenue, porque acá está pegada a las tarjetas).
       Va como background-image, NO como un backdrop-filter nuevo: un backdrop-filter
       sería bloque contenedor de los position:fixed que cuelgan adentro y movería el
       desplegable de + Cargar. Estática, como las de afuera. */
    --orb-modal-1: rgba(201, 192, 90, 0.09);
    --orb-modal-2: rgba(90, 140, 120, 0.08);

    /* ---- EL HUB BENTO: el tercer material y los tres relieves ----
       HUESO (--claro): un crema grisáceo que no ensucia la pizarra; es "lo que
       hacés con las manos" (Checklist, Biblioteca). Los tres insets son el
       relieve de cada material: oscuro para el vidrio y las vitrinas, claro
       para el hueso, vivo para el lima. Solo existen acá: sin el switch la
       grilla queda plana, con --card y --border de siempre. */
    --claro: #E8E6DC;
    --claro-ink: #1B1E16;
    --inset-oscuro: inset 0 2px 6px rgba(255, 255, 255, .09), inset 0 -6px 14px rgba(0, 0, 0, .4);
    --inset-claro: inset 0 2px 6px rgba(255, 255, 255, .9), inset 0 -8px 16px rgba(0, 0, 0, .10);
    --inset-vivo: inset 0 2px 6px rgba(255, 255, 255, .35), inset 0 -8px 18px rgba(0, 0, 0, .18);
}

/* ============================================================
   TIERRA — TIPOGRAFÍA
   Sora en los títulos, los números gordos y los botones; DM Sans sigue
   siendo el cuerpo. La lista de abajo es EXACTAMENTE la de los 23 lugares
   que hoy usan DM Serif Display (relevados uno por uno del archivo, con
   .sidebar-logo-mark repetido en dos bloques): bajo tierra la serif deja de
   usarse, sin el atributo sigue intacta.
============================================================ */
:root[data-paleta="tierra"] .login-heading,
:root[data-paleta="tierra"] .sidebar-logo-mark,
:root[data-paleta="tierra"] .admin-page-title,
:root[data-paleta="tierra"] .empty-title,
:root[data-paleta="tierra"] .detalle-title,
:root[data-paleta="tierra"] .costo-valor,
:root[data-paleta="tierra"] .formato-valor,
:root[data-paleta="tierra"] .modal-title,
:root[data-paleta="tierra"] .preview-costo-valor,
:root[data-paleta="tierra"] .pub-logo-mark,
:root[data-paleta="tierra"] .onb-logo,
:root[data-paleta="tierra"] .onb-title,
:root[data-paleta="tierra"] .onb-stepper-val,
:root[data-paleta="tierra"] .costo-kpi-valor,
:root[data-paleta="tierra"] .merma-hist-pct,
:root[data-paleta="tierra"] .ing-panel-head h3,
:root[data-paleta="tierra"] .presu-h1,
:root[data-paleta="tierra"] .presu-crname input,
:root[data-paleta="tierra"] .presu-pricecard .presu-pbig,
:root[data-paleta="tierra"] .inst-titulo,
:root[data-paleta="tierra"] .panel-kval,
:root[data-paleta="tierra"] .md-head-tt h2,
:root[data-paleta="tierra"] .cmd-hero-tt h2,
:root[data-paleta="tierra"] button,
:root[data-paleta="tierra"] [role="button"],
:root[data-paleta="tierra"] input[type="submit"] {
    font-family: var(--font-titulo);
}

/* ============================================================
   TIERRA — GLASS (decisión 1)
   Con --card sólido, las tarjetas de base ya quedaron sólidas solas. Acá se
   le devuelve el vidrio a las capas que SÍ flotan sobre el contenido y que
   se apoyaban en --card. Los modales (fondo --bg + overlay con blur), los
   toasts (rgba propio) y el menú inmersivo (--mi-glass) ya lo conservan sin
   tocar nada. .corte-pop queda AFUERA a propósito: es sólida por decisión
   vieja y su comentario lo dice.
============================================================ */
:root[data-paleta="tierra"] .menu-perfil,
:root[data-paleta="tierra"] .help-pop,
:root[data-paleta="tierra"] .pmenu,
:root[data-paleta="tierra"] .banner-instalar,
:root[data-paleta="tierra"] .hoja-mas,
:root[data-paleta="tierra"] #tour-globo {
    background: var(--flot);
}

/* ============================================================
   PANEL INFORMATIVO GENERAL DEL HUB — "El día de un vistazo"
   ============================================================
   Pieza NUEVA entre la barra del turno y el collage. Solo admin/chef.
   BILINGÜE POR CONSTRUCCIÓN: los tokens de tierra (--terra, --salvia,
   --relieve) SOLO existen bajo [data-paleta="tierra"], así que acá se los
   pide con fallback a los de siempre. Nunca un hex a mano: el día que la
   paleta cambie de valor, el panel cambia con ella.
============================================================ */
.hub-panel {
    --hp-vivo: var(--terra, var(--orange));
    --hp-vivo-suave: var(--terra-suave, var(--orange-light));
    --hp-vivo-borde: var(--terra-borde, var(--orange));
    --hp-ok: var(--salvia, var(--green-check));
    --hp-ok-suave: var(--salvia-suave, var(--green-soft-check));
    --hp-ok-borde: var(--salvia-borde, var(--green-check));
    --hp-relieve: var(--relieve, var(--accent-soft));
    /* El NÚMERO grande no puede usar el mismo color que la barra: --orange (el de la
       paleta clásica) es un naranja brillante que sobre la tarjeta da 2,7:1 y el dato
       protagonista queda ilegible. Como GRÁFICO (la barra) ese naranja está bien —es
       el mismo de .prod-progress-bar—, como TEXTO no. Así que el número pide --terra
       y, si no existe (paleta clásica), cae a la TINTA, que es justamente el acento
       del mundo monocromo. Medido: 2,7:1 → 16:1 en claro. */
    --hp-num: var(--terra, var(--text));

    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 13px 16px 14px;
    margin-bottom: 16px;
}

/* El cocinero no lo ve: MISMO criterio que el widget del pase
   (body.rol-cocinero .hub-wcard[data-w="pase"]). El JS además ni lo pinta. */
body.rol-cocinero #hub-panel {
    display: none !important;
}

.hub-panel-nums {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    /* En una pantalla ancha la tarjeta ocupa todo el HUB y los dos datos de apoyo se
       iban a 1.300px del %, como si no tuvieran nada que ver. El tope los mantiene
       juntos sin tocar el celular (que nunca llega a 560px). La barra de abajo NO se
       recorta: es hermana, no hija, y sigue midiendo toda la tarjeta. */
    max-width: 560px;
}

/* (Acá vivía el % grande del panel. TANDA SIN ECOS · P1: murió — era el eco del
   widget de Producción, que es la única casa del %. El panel quedó en PULSO.) */

/* Los datos del pulso: tareas · platos · cubiertos. */
.hp-datos {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-left: auto;
    flex-wrap: wrap;
}

.hp-dato {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.hp-dato-v {
    font-family: var(--font-titulo);
    font-size: 17px;
    line-height: 1;
    color: var(--text);
    white-space: nowrap;
}

.hp-dato-l {
    font-size: 11.5px;
    color: var(--text-2);
    white-space: nowrap;
}

/* Barra de avance: el mismo gesto que la del widget de producción. */
.hp-bar {
    height: 5px;
    border-radius: 99px;
    background: var(--hp-relieve);
    overflow: hidden;
    margin-top: 11px;
}

.hp-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--hp-vivo);
    transition: width .35s ease;
}

.hp-bar-fill.full {
    background: var(--hp-ok);
}

/* ---- Renglón de avisos: chips tocables ---- */
.hp-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.hp-chips:empty {
    display: none;
}

.hp-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--border-2);
    background: var(--hp-relieve);
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    cursor: pointer;
    transition: filter .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.hp-chip:hover {
    filter: brightness(0.97);
}

.hp-chip.is-active {
    border-color: var(--text-3);
}

/* Familia de lo VIVO (checklist con pendientes) y de lo LISTO. El color vive en el
   BORDE y en el fondo tenue; la letra queda en tinta. Pintar el texto del acento daba
   2,4:1 en la paleta clásica (naranja sobre naranja al 12%) y 4,1:1 en tierra: un chip
   se reconoce por su color igual, y así se lee en los cuatro mundos. Medido. */
.hp-chip--vivo {
    background: var(--hp-vivo-suave);
    border-color: var(--hp-vivo-borde);
}

/* "Todo en orden ✓" — no es tocable: no abre nada. */
.hp-chip--ok {
    background: var(--hp-ok-suave);
    border-color: var(--hp-ok-borde);
    cursor: default;
}

.hp-chip--ok:hover {
    filter: none;
}

.hp-chip-n {
    font-weight: 800;
}

/* ---- Cuerpo de la ventanita (reusa .help-pop: mismo nodo, mismos oídos) ---- */
.hp-pop-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    max-height: 210px;
    overflow-y: auto;
    margin: 2px 0 0;
}

.hp-pop-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 12.5px;
    color: var(--text);
    line-height: 1.35;
}

.hp-pop-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hp-vivo, var(--orange));
    transform: translateY(-1px);
}

.hp-pop-tx {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.hp-pop-est {
    flex: none;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--relieve, var(--accent-soft));
    border-radius: 99px;
    padding: 1px 7px;
}

.hp-pop-mas {
    font-size: 11.5px;
    color: var(--text-3);
    margin-top: 2px;
}

.hp-pop-btn {
    display: block;
    width: 100%;
    margin-top: 11px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-2);
    background: var(--relieve, var(--accent-soft));
    color: var(--text);
    font-family: 'DM Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
}

.hp-pop-btn:hover {
    filter: brightness(0.97);
}

/* (Acá vivía el flex:none del panel para el desktop de alto fijo. Ese candado se fue
   con el bento: el HUB scrollea, así que el panel ya es de alto natural por defecto.) */

/* ============================================================
   PRODUCCIÓN 360 · ETAPA A — LA CABECERA (el timón)
   ============================================================
   Reemplaza la barra de fecha + los chips sueltos. Bilingüe por construcción,
   igual que el panel del HUB: los tokens de tierra se piden con fallback a los
   de siempre, así la pantalla nueva se ve bien con y sin data-paleta.
============================================================ */
.prodhead {
    --ph-vivo: var(--terra, var(--orange));
    --ph-vivo-suave: var(--terra-suave, var(--orange-light));
    --ph-ok: var(--salvia, var(--green-check));
    --ph-relieve: var(--relieve, var(--accent-soft));
    /* El número grande, igual que en el panel: el acento solo si la paleta trae uno
       que se lee como TEXTO; si no, la tinta, que es el acento del mundo monocromo. */
    --ph-num: var(--terra, var(--text));

    flex-shrink: 0;
    margin-bottom: 14px;
}

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

.prodhead-tt {
    font-family: var(--font-titulo);
    font-size: 21px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}

/* TANDA SIN ECOS · P2 — el empuje hacia la derecha pasa del título a los botones:
   así la pildorita del avance queda PEGADA al título (y si todavía no se pintó,
   los botones siguen contra el borde igual). */
.prodhead-acts {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
    margin-left: auto;
}

/* Los dos botones-icono: embudo y ✓ */
.ph-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    border: 1px solid var(--border-2);
    background: var(--ph-relieve);
    color: var(--text);
    font-size: 17px;
    cursor: pointer;
    transition: filter .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.ph-btn:hover:not(:disabled) {
    filter: brightness(0.96);
}

.ph-btn:disabled {
    opacity: .45;
    cursor: default;
}

.ph-btn.is-active {
    border-color: var(--text-3);
}

/* Globito con el conteo */
.ph-globo {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--ph-vivo);
    color: var(--vivo-ink, #1a1a1a);
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

/* + Cargar: el protagonista */
.ph-cargar {
    flex: none;
    padding: 8px 15px;
    border-radius: 11px;
    border: 1px solid var(--ph-vivo);
    background: var(--ph-vivo);
    color: var(--vivo-ink, #1a1a1a);
    font-family: var(--font-titulo);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .15s;
    -webkit-tap-highlight-color: transparent;
}

.ph-cargar:hover {
    filter: brightness(0.94);
}

/* ---- La tira de la semana: UN SOLO contenedor ----
   BENTO · B1 (estructura, para las dos paletas). Los días dejan de tener cajita
   propia: la caja es la tira entera, y el botón de calendario vive ADENTRO, al
   final. Bajo tierra la caja es de vidrio con relieve (ver la sección del bento
   de Producción, al final del archivo); sin el switch, --card y --border sólidos
   de siempre. */
.prodhead-sem {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 5px;
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    overflow-x: auto;
    scrollbar-width: none;
}

.prodhead-sem::-webkit-scrollbar {
    display: none;
}

.ph-dia {
    position: relative;
    flex: 1 1 0;
    min-width: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 2px;
    border-radius: 13px;
    /* BENTO · B1 — el día ya no tiene caja propia: la caja es la tira. (Acá vivía
       la cajita por día de la tanda PIZARRA · 2.1, que ahora la reemplaza el
       contenedor unificado.) El día ELEGIDO sí se pinta: su regla está abajo. */
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-2);
    font-family: 'DM Sans', sans-serif;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.ph-dia:hover:not(:disabled):not(.act) {
    background: var(--ph-relieve);
}

.ph-dia:disabled {
    opacity: .3;
    cursor: default;
}

.ph-dia-d {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .3px;
    line-height: 1;
}

.ph-dia-n {
    font-family: var(--font-titulo);
    font-size: 14px;
    line-height: 1;
    color: var(--text);
}

/* Hoy: se marca sin robarle el protagonismo al día elegido */
.ph-dia.hoy .ph-dia-d {
    color: var(--ph-vivo);
    font-weight: 700;
}

/* El día que se está mirando: la única pastilla de color de la tira. */
.ph-dia.act {
    background: var(--ph-vivo);
    border-color: transparent;
    box-shadow: none;
}

.ph-dia.act .ph-dia-d,
.ph-dia.act .ph-dia-n {
    color: var(--vivo-ink, #1a1a1a);
    font-weight: 800;
}

/* Punto de "este día tiene producción" (solo con el dato ya en memoria) */
.ph-dia-pt {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-3);
}

.ph-dia.act .ph-dia-pt {
    background: var(--vivo-ink, #1a1a1a);
}

/* En un celular angosto la tira entra justa: los días ceden ancho antes que el
   calendario, que si no queda medio cortado contra el borde (el riel scrollea,
   pero de arranque tiene que verse entero). */
@media (max-width: 420px) {
    .ph-dia {
        min-width: 34px;
    }
}

/* El calendario, adentro de la tira y al final. Conserva su handler y su anclaje. */
.ph-cal {
    flex: none;
    width: 42px;
    height: 42px;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    border: 1px dashed var(--border-2);
    background: transparent;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}

.ph-cal:hover {
    color: var(--text);
    border-color: var(--text-3);
}

/* ---- El avance del día ----
   TANDA SIN ECOS · P2 — en SUSURRO. El hero grandote del % (.prodhead-av) murió:
   el % vive UNA sola vez, gigante, en el widget de Producción del HUB. Acá queda
   una pildorita al lado del título: mini-riel hundido + "N/M" + "· turno X".
   Mismos datos que alimentaban el hero (prodResumenDelDia), cero consultas. */
.ph-pulso {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    min-width: 0;
    padding: 6px 13px;
    border-radius: 99px;
    background: #171A1F;
    border: 1px solid #252A31;
    font-size: 11.5px;
    line-height: 1.2;
    white-space: nowrap;
}

/* Antes de que el JS la pinte no ocupa lugar (ni una píldora vacía un instante). */
.ph-pulso:empty {
    display: none;
}

.ph-pulso-riel {
    flex: none;
    width: 34px;
    height: 6px;
    border-radius: 99px;
    background: #0D1014;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
    overflow: hidden;
}

.ph-pulso-riel i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: #C9C05A;
}

.ph-pulso-n {
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.ph-pulso-tn {
    font-weight: 700;
    color: #8C94A0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* (TANDA SIN ECOS · P2 — acá vivía la grilla de dos filas del celular con los TRES botones a la
   derecha. 🌙 DESTILACIÓN · FASE 2: los botones de ícono bajaron a la fila de días; la regla nueva
   vive al final del archivo.) */

/* ---- La hojita del embudo (cuerpo dentro del popover compartido) ---- */
.ph-hoja-sec {
    margin-bottom: 11px;
}

.ph-hoja-lb {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 6px;
}

.ph-hoja-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Las barras de turno y persona entran tal cual a la hojita: se les saca el rótulo
   propio (la hojita ya pone el suyo) y se las deja envolver. */
.ph-hoja-sec .prod-turno-bar,
.ph-hoja-sec .prod-persona-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.ph-hoja-sec .prod-persona-lb {
    display: none;
}

/* El puntito verde de las filas del ✓ */
.hp-pop-dot.ph-dot-ok {
    background: var(--salvia, var(--green-check));
}

/* ---- ETAPA B · agrupado: la cabecera de un cajón "al día" ---- */
.prod-grupo--aldia .prod-grupo-h {
    cursor: default;
}

.prod-aldia {
    flex: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 2px 9px;
    border-radius: 999px;
    color: var(--salvia, var(--green-check));
    background: var(--salvia-suave, var(--green-soft-check));
    border: 1px solid var(--salvia-borde, var(--green-check));
}

/* ============================================================
   PRODUCCIÓN 360 · ETAPA C — EL VESTIDO, SOLO BAJO TIERRA
   ============================================================
   Todo lo de acá cuelga de [data-paleta="tierra"]: sin el switch la pantalla
   nueva se ve con la paleta CLÁSICA de siempre, sin una sola regla de estas.
   La estructura (cabecera + agrupado) es para todos; la pintura, solo bajo el
   atributo.
============================================================ */

/* El hilito del color del plato: 4px en el borde izquierdo, con el color que la
   tarjeta publica en --pc (la gama TIERRA la elige prodPaletaActual). Sin el
   atributo sigue el borde de 3px en --orange de siempre. */
:root[data-paleta="tierra"] .prod-plato-card {
    border-left: 4px solid var(--pc, var(--terra));
}

/* Lo MÍO: el halo interior deja el naranja hardcodeado y toma el color de lo vivo. */
:root[data-paleta="tierra"] .prod-plato-card.mine {
    outline: 1px solid var(--terra-borde);
    outline-offset: -2.5px;
}

/* Chips de estado: en curso ya lee --orange (= lima bajo tierra) y el cronómetro
   también. Lo que faltaba era el fondo del chip "listo", que tenía el verde escrito
   a mano. */
:root[data-paleta="tierra"] .prod-grupo-chip.listo {
    background: var(--salvia-suave);
    color: var(--salvia);
}

/* Los verdes sueltos de "ya está todo" pasan al salvia. */
:root[data-paleta="tierra"] .prod-hastodo,
:root[data-paleta="tierra"] .prod-nodo-est.ok {
    color: var(--salvia);
}

:root[data-paleta="tierra"] .prod-hastodo-chip {
    color: var(--salvia);
    background: var(--salvia-suave);
}

/* ---- RETOQUES 1 · la hojita del ✓ gestiona lo terminado ----
   Con muchos terminados la lista scrollea POR DENTRO, con el mismo recurso que ya usa
   el ⋯ para un equipo grande (max-height + overflow): sin mecanismo nuevo. */
.ph-term-lista {
    max-height: min(58vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 2px -4px 0;
    padding: 2px 4px;
}

/* Adentro de la hojita la grilla es de UNA columna, aunque la pantalla sea ancha:
   el popover mide 300px. */
.ph-term-lista .prod-plato-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

/* ============================================================
   TANDA PIZARRA · PIEZA 2.3 — EL FICHERO VUELVE AL VERDE (solo bajo tierra)
   ============================================================
   Decisión de Facu (4-sep): vio el minimalista neutro andando y prefiere el
   verde de la referencia. PISA a Retoques 2 · pieza 1, que había dejado la
   ficha como una tarjeta neutra con el kg en lima.

   La ficha vuelve a ser un MUNDITO VERDE: superficie oliva (--oliva-sup, que
   hasta hoy no la leía nadie), el nombre y el kg en crema, los platos en UN
   RENGLÓN simple ("Pizza · Ravioles") en verde suave, y los dos botones como
   la referencia — "Juntar" en SALVIA pleno con tinta oscura y "Cada uno el
   suyo" fantasma con borde claro.

   Se REAPUNTAN los tokens --fi-*: los DEFAULT (los de la ficha ámbar de
   siempre) no se tocan, así que sin el switch la ficha sale byte a byte como
   siempre. Los valores de acá son los del tema CLARO; el bloque de abajo da
   vuelta las tintas para el OSCURO — el --oliva-sup ya es bilingüe solo.

   Contraste MEDIDO (vara 4,5:1 para texto, 3:1 para bordes), contra la punta
   más desfavorable del gradiente:
     nombre y kg 12,10 / 10,61 · platos 6,94 / 5,35 · rótulos 7,49 / 5,93 ·
     tinta de Juntar sobre el salvia 7,18 / 5,42 · texto del fantasma 7,49 /
     5,93 · chip "ya la tengo" 12,10 / 10,61 y su ✓ 5,45 / 4,36 · texto del
     desplegable 14,21 / 12,24 · bordes de chip/fantasma/select 3,50 / 3,51.
   El borde de la ficha contra el fondo da 2,03 en oscuro: NO llega a 3:1,
   pero es el marco de un contenedor, no de un control — y por la vara de la
   propia app está MEJOR que cualquier tarjeta común (su borde da 1,32 y su
   superficie 1,09, contra 2,03 y 1,37 de la ficha). Se anota, no se fuerza.
============================================================ */
:root[data-paleta="tierra"] .prod-fich {
    --fi-bd: var(--oliva-borde);
    --fi-hilo: var(--oliva-borde);      /* borde parejo: el color vive en la superficie */
    --fi-sup: #E4E9D4;                  /* el tono plano del oliva (la punta baja del gradiente) */
    --fi-sep: rgba(85, 97, 59, .30);
    --fi-btn: var(--salvia);            /* "Juntar" en SALVIA pleno */
    --fi-btn-tx: #FFFFFF;               /* el salvia de CLARO es oscuro: pide tinta clara (5,42:1) */
    --fi-dot: var(--salvia);
    --fi-foco: var(--salvia);
    --fi-radio: var(--radius-lg);

    /* Las tintas del mundito verde. Viven acá y no en la paleta porque son de la
       ficha: el resto de la app no tiene un fondo oliva donde apoyarlas. */
    --fi-tx: #2A3320;                   /* nombre, kg, chips: la tinta protagonista */
    --fi-tx-2: #4E5A3C;                 /* rótulos, la unidad, el botón fantasma */
    --fi-plato: var(--oliva);           /* el renglón de platos, en verde suave */
    --fi-linea: rgba(42, 51, 32, .60);  /* borde de chips, fantasma y desplegable (3,51:1) */
    --fi-hueco: rgba(255, 255, 255, .65); /* el fondo del desplegable, cavado en el verde */

    --fi-num: var(--fi-tx);             /* el kg gordo va en la misma tinta, no en un acento */
}

/* OSCURO: el verde se da vuelta y las tintas pasan a crema. Misma decisión que
   --vivo-ink y que la tinta del salvia: el salvia de oscuro es CLARO, así que
   encima va tinta oscura (7,18:1). */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich {
    --fi-sup: #1C2419;
    --fi-sep: rgba(169, 177, 120, .30);
    --fi-btn-tx: #12151A;
    --fi-tx: #EDF1E4;
    --fi-tx-2: #B7C2AC;
    --fi-plato: #A8BE9A;
    --fi-linea: rgba(226, 232, 216, .45);
    --fi-hueco: rgba(0, 0, 0, .28);
}

/* LA SUPERFICIE. El gradiente NO puede ir por --fi-sup: la regla del mazo lo mete
   adentro de un linear-gradient() (para apilar dos capas opacas y que una carta
   tape a la de atrás), y un gradiente adentro de un gradiente no es css válido.
   Así que --fi-sup se queda con el tono PLANO y acá se pisa la capa de arriba con
   el oliva de verdad. La especificidad alcanza de sobra: (0,4,0) contra (0,2,0). */
:root[data-paleta="tierra"] .prod-fich .prod-fich-card {
    background-image: var(--oliva-sup);
}

/* El hilito de la izquierda deja de ser un acento: la ficha se cierra con su
   borde parejo (el color ahora es toda la superficie). */
:root[data-paleta="tierra"] .prod-fich-card {
    border-left-width: 1px;
}

/* Fila de arriba: nombre a la izquierda, kg gordo a la derecha. */
:root[data-paleta="tierra"] .prod-fich-nm {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 16px;
    color: var(--fi-tx);
}

:root[data-paleta="tierra"] .prod-fich-cant {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 26px;
    line-height: 1;
}

/* La unidad, chica y apagada, pegada al número. */
:root[data-paleta="tierra"] .prod-fich-cant .fi-u {
    font-size: 12px;
    font-weight: 700;
    color: var(--fi-tx-2);
    margin-left: 3px;
}

/* LOS PLATOS, EN UN RENGLÓN SIMPLE. Retoques 2 los había vuelto píldoras; la
   referencia los quiere como texto corrido separado por puntos medios —
   "Pizza · Ravioles"—, en verde suave. El separador lo pone el css (::before del
   que no es el primero): el JS que arma los chips NO se toca. La cantidad de
   cada plato se queda, en la tinta principal: es el dato que la ficha ya daba y
   sacarlo no era parte del pedido. */
:root[data-paleta="tierra"] .prod-fich-quien {
    gap: 2px 7px;
    color: var(--fi-plato);
}

:root[data-paleta="tierra"] .prod-fich-quien .prod-sug-item {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    color: var(--fi-plato);
    font-size: 12.5px;
    font-weight: 600;
}

:root[data-paleta="tierra"] .prod-fich-quien .prod-sug-item:not(:first-child)::before {
    content: '·';
    margin-right: 7px;
    opacity: .6;
}

:root[data-paleta="tierra"] .prod-fich-quien .prod-sug-item b {
    color: var(--fi-tx);
    font-weight: 700;
    margin-left: 4px;
}

:root[data-paleta="tierra"] .prod-fich-quien .prod-desg-para {
    color: var(--fi-tx-2);
}

/* El texto de la pregunta y el del huérfano, en la tinta apagada del verde. */
:root[data-paleta="tierra"] .prod-fich-preg-txt {
    color: var(--fi-tx-2);
}

/* Los RÓTULOS de la ficha: chicos, en MAYÚSCULAS y con peso. Van solo donde hay
   un rótulo de verdad: el "¿Alguna ya está hecha?" (el único .prod-fich-preg que
   viene pegado al renglón de platos) y el "¿Quién la hace?". La tarjeta del
   HUÉRFANO reusa la misma caja para una FRASE LARGA —"Ajo suelto de Pizza ·
   nadie lo tiene — sumalo a la tablita de…"— y ésa no es un rótulo: ahí el
   hermano de arriba es .prod-fich-top, no .prod-fich-quien, así que la regla no
   la alcanza y la frase queda en minúsculas, como se lee una frase. */
:root[data-paleta="tierra"] .prod-fich-quien + .prod-fich-preg .prod-fich-preg-txt,
:root[data-paleta="tierra"] .prod-fich-dueno-lb {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--fi-tx-2);
}

/* Chips "ya la tengo": fantasma sobre el verde; el ✓ SIEMPRE en salvia, que acá
   es la marca de "lo tengo" (en un celular no hay hover que la muestre). */
:root[data-paleta="tierra"] .prod-fich-tengo {
    background: transparent;
    border-color: var(--fi-linea);
    border-radius: 999px;
    color: var(--fi-tx);
}

:root[data-paleta="tierra"] .prod-fich-tengo b {
    color: var(--fi-tx);
}

:root[data-paleta="tierra"] .prod-fich-tengo i {
    color: var(--salvia);
}

:root[data-paleta="tierra"] .prod-fich-tengo:hover,
:root[data-paleta="tierra"] .prod-fich-tengo:active {
    border-color: var(--salvia-borde);
    background: var(--salvia-suave);
    color: var(--fi-tx);
}

/* El desplegable de "quién": un hueco cavado en el verde, no una caja gris. */
:root[data-paleta="tierra"] .prod-fich-dueno-in {
    background-color: var(--fi-hueco);
    border-color: var(--fi-linea);
    color: var(--fi-tx);
}

:root[data-paleta="tierra"] .prod-fich-dueno-in:hover {
    border-color: var(--salvia-borde);
}

/* Los botones: "Juntar" en salvia con su tinta medida (el color y la tinta salen
   de --fi-btn / --fi-btn-tx, que ya lee la regla de la ficha); "Cada uno el
   suyo", fantasma con borde claro. */
:root[data-paleta="tierra"] .prod-fich-card .prod-sug-yes {
    font-family: var(--font-titulo);
    font-weight: 800;
    border-radius: 16px;
}

:root[data-paleta="tierra"] .prod-fich-card .prod-sug-no {
    background: transparent;
    border-color: var(--fi-linea);
    color: var(--fi-tx-2);
    border-radius: 16px;
}

:root[data-paleta="tierra"] .prod-fich-card .prod-sug-no:hover {
    color: var(--fi-tx);
    border-color: var(--fi-tx);
}

/* ============================================================
   RETOQUES 2 · PIEZA 2 — LAS NEGRITAS DE LA CABECERA
   ============================================================
   DECISIÓN, con la medición delante: --text-3 mide IGUAL de flojo en las dos
   paletas (1,81 y 2,23 en la clásica; 2,39 y 3,00 en tierra), así que en las
   piezas que nacieron en ESTA saga —la cabecera es de la etapa A— el arreglo
   va para las DOS: no hay un "ayer" que preservar y dejarlo en 1,81 sería
   dejar un defecto a sabiendas. Pasa a --text-2 + peso: 3,26 · 4,52 · 4,16 ·
   5,78. El rótulo de sección (.prod-grupo-t), que NO es de esta saga y vive en
   todo el tablero, se toca SOLO bajo tierra.
============================================================ */
.ph-dia-d {
    font-weight: 800;
    letter-spacing: .6px;
    color: var(--text-2);
}

/* El día activo pisa la tinta de arriba (su regla vive más arriba en el archivo,
   con menos peso de cascada por venir antes: se re-afirma acá). */
.ph-dia.act .ph-dia-d {
    color: var(--vivo-ink, #1a1a1a);
}

.ph-dia-n {
    font-weight: 800;
}

/* Los rótulos de sección del tablero: solo bajo tierra (son de toda la app). */
:root[data-paleta="tierra"] .prod-grupo-t {
    font-weight: 800;
}

/* ============================================================
   RETOQUES 2 · PIEZA 3 — MÁS REDONDEZ (solo bajo tierra)
   ============================================================
   --radius y --radius-lg suben en los bloques tierra (16→20, 26→32) y toda la
   app que los lee se redondea sola. Acá se acompañan los radios que quedaron
   escritos a mano en las piezas nuevas de la saga. Sin el atributo, nada.
============================================================ */
:root[data-paleta="tierra"] .ph-btn {
    border-radius: 15px;
}

:root[data-paleta="tierra"] .ph-cargar {
    border-radius: 16px;
}

:root[data-paleta="tierra"] .hp-pop-btn {
    border-radius: 14px;
}

/* Las hojitas y el menú ⋯ */
:root[data-paleta="tierra"] .help-pop {
    border-radius: 20px;
}

:root[data-paleta="tierra"] .pmenu {
    border-radius: 18px;
}

/* Las tarjetas del tablero. Llevan overflow:hidden y —bajo tierra— un hilito de
   4px a la izquierda: con más radio la curva se lo come en las puntas, que es
   justo lo que se quiere (el hilito sigue la esquina). Nada de contenido se
   recorta: el padding no cambia. */
:root[data-paleta="tierra"] .prod-plato-card,
:root[data-paleta="tierra"] .prod-sub {
    border-radius: 18px;
}

:root[data-paleta="tierra"] .prod-plato-card--mini {
    border-radius: 15px;
}

:root[data-paleta="tierra"] .prod-fich-dueno-in {
    border-radius: 14px;
}

/* ============================================================
   TANDA PIZARRA · el calendario, en la base nueva
   ============================================================
   .prod-cal tiene su superficie escrita a mano desde siempre (:root → #fff y
   [data-theme="dark"] → #1c1c1c). No es marrón, pero tampoco es de esta
   familia: sobre el gris pizarra quedaba una hojita de otro mundo. Bajo tierra
   toma la superficie y el borde de la paleta, como el resto de los popovers.
   Especificidad: (0,2,1) contra los (0,1,1) de las dos reglas de arriba.

   TANDA VIDRIO — pasa a --flot, no a --card. El calendario es una capa que
   FLOTA (position:fixed sobre el contenido), y con --card ahora translúcido se
   habría vuelto transparente encima de la pantalla. --flot es justamente el
   token de las capas que flotan: la misma familia que .help-pop y .pmenu.
============================================================ */
:root[data-paleta="tierra"] .prod-cal {
    background: var(--flot);
    border-color: var(--card-border);
    border-radius: 20px;
}

/* ============================================================
   🫙 TANDA VIDRIO — el vidrio vuelve a la base *(sellada por Facu, 4-sep)*
   ============================================================
   Facu comparó sólido contra vidrio sobre la base pizarra y eligió VIDRIO. Esto
   PISA la decisión 1 de la Fase 1 ("el glass queda SOLO en las capas que
   flotan"): el velo marrón que la motivó era el FONDO café, no el vidrio.

   Casi todo se resolvió arriba, por VARIABLES: con --card y --card-border
   translúcidos otra vez, las 80 reglas que ya leen --card y las 43 que ya traen
   `backdrop-filter: var(--glass-blur)` se vuelven vidrio solas, sin tocar una.
   Acá abajo queda solo lo que la variable no alcanza: las superficies de base
   que NUNCA tuvieron la propiedad, las luces del fondo y el fallback.

   Sigue en pie lo de la Fase 1: NO se saca ni un backdrop-filter. Y al AGREGARLO
   vale la misma advertencia al revés — un backdrop-filter distinto de none es
   bloque contenedor de los position:fixed que cuelgan adentro. Por eso la lista
   de abajo es corta y elegida: se verificó que ninguna de estas superficies tiene
   un descendiente fixed (el ⋯, las hojitas, el calendario y los modales viven en
   el body, no adentro de la tarjeta), y el arnés compara la GEOMETRÍA de todos
   los nodos antes y después para que ningún layout se mueva.
============================================================ */

/* Las superficies de base que leen --card (o --relieve) pero nunca tuvieron el
   desenfoque: el tablero de producción, el panel del HUB, el hero del avance, la
   caja de la semana y los botones de ícono de la cabecera.

   TANDA VIDRIO PINTADO: acá vivía el backdrop-filter que les daba vidrio REAL. El
   desenfoque se fue (se arrastraba en gama baja) y el vidrio ahora es PINTADO: lo
   da el alpha de --card, subido en la canilla. La regla quedó sin nada adentro y
   por eso se borró entera; el listado se deja acá de memoria de qué superficies
   eran. */

/* El botón de ícono de la cabecera se apoyaba en --relieve, que se queda SÓLIDO
   por legibilidad (ver la excepción medida en el bloque de tokens). Como acá el
   que manda es el vidrio y no hay texto largo adentro —es un ícono—, toma --card. */
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn {
    background: var(--card);
}

/* ============================================================
   LAS LUCES DEL FONDO
   ============================================================
   Dos resplandores radiales fijos detrás de todo: lima arriba a la derecha,
   verde frío abajo a la izquierda. Grandes, difusos y ESTÁTICOS (son luz, no
   protagonistas: ni una animación).

   Van en body::before / body::after y no en un nodo nuevo: esto es una tanda de
   css y el index no se toca. z-index -1 los deja encima del fondo del lienzo
   —que lo pinta body y va siempre abajo de todo— y debajo de cualquier
   contenido; pointer-events none para que no se coman un solo toque.

   Los centros quedan FUERA de la pantalla a propósito: así el pico que llega a
   verse es todavía más suave que el alpha nominal, y la medición de contraste
   (que se hizo con el alpha PLENO) queda del lado seguro.
============================================================ */
:root[data-theme="dark"][data-paleta="tierra"] body::before,
:root[data-theme="dark"][data-paleta="tierra"] body::after {
    content: '';
    position: fixed;
    z-index: -1;
    pointer-events: none;
}

:root[data-theme="dark"][data-paleta="tierra"] body::before {
    top: -22vmax;
    right: -16vmax;
    width: 72vmax;
    height: 72vmax;
    background: radial-gradient(closest-side, var(--orb-1), transparent 72%);
}

:root[data-theme="dark"][data-paleta="tierra"] body::after {
    bottom: -26vmax;
    left: -20vmax;
    width: 78vmax;
    height: 78vmax;
    background: radial-gradient(closest-side, var(--orb-2), transparent 72%);
}

/* ============================================================
   El FALLBACK de la tanda VIDRIO vivía acá — ya no hace falta
   ============================================================
   Decía: "una tarjeta de blanco al 5% SIN desenfoque no es vidrio, es una
   tarjeta que no se ve", y por eso devolvía los sólidos de pizarra al navegador
   que no soportara backdrop-filter. Tenía razón, y de más: sin desenfoque NO se
   veía en ningún navegador. La tanda VIDRIO PINTADO sacó el desenfoque de toda
   la app y esta corrección promovió esos MISMOS sólidos al bloque oficial de
   tierra, así que el @supports quedó idéntico al default: código muerto, y se
   borró entero. Los valores no se perdieron — son los que están arriba.
============================================================ */


/* ============================================================
   💡 LA LUZ ADENTRO DEL MODAL (solo oscuro + tierra)
   ============================================================
   El vidrio de la tanda VIDRIO no lucía dentro de los modales: el overlay tapa los
   orbes del body, así que la tarjeta translúcida se apoyaba sobre una superficie
   plana y no tenía nada que mostrar. La solución sellada es pintarle al modal SU
   propia luz.

   Va como background-image y NO como un backdrop-filter nuevo, a propósito y por una
   regla ya conocida: un backdrop-filter distinto de none es BLOQUE CONTENEDOR de los
   position:fixed que cuelgan adentro, y adentro de este modal cuelga uno de verdad —
   el desplegable de resultados de + Cargar (.prodform-results). El A/B de geometría
   con los modales abiertos vuelve a correr en esta tanda y tiene que dar 0 movidos.

   Como es SOLO background-image, el color de fondo del modal (var(--bg), o el suyo
   propio) no se toca: la luz se apila encima.

   Los modalitos de confirmación (.modal-box-sm, 21 en el index) quedan como están:
   son cartelitos, no pantallas. Por eso el :not().
============================================================ */
:root[data-theme="dark"][data-paleta="tierra"] .modal-box:not(.modal-box-sm) {
    background-image:
        radial-gradient(circle 300px at 100% 0%, var(--orb-modal-1), transparent 70%),
        radial-gradient(circle 340px at 0% 100%, var(--orb-modal-2), transparent 70%);
}

/* ============================================================
   📥 EL MODAL DE CARGAR, VESTIDO (solo oscuro + tierra)
   ============================================================
   Misma mecánica de siempre, otra ropa: buscar → tocar → ajustar →
   confirmarCargaMultiple() no se tocan ni una línea. Del JS solo salieron dos cosas de
   PRESENTACIÓN, con el molde del <span class="fi-u"> del fichero: el color de la receta
   publicado en --cc (para el puntito y el hilito) y el CTA en dos renglones.

   Los controles que la tarjeta ya tenía se conservan TODOS —cantidad, corte, estación,
   persona, prioridad, el chevron y la ✕—: acá se los viste y se les da dedo, no se saca
   ninguno.
============================================================ */

/* La caja: el #1b1b1b escrito a mano no es de esta familia. Bajo tierra toma la base de
   la paleta, y así la luz del modal (pieza 1) se apoya sobre el color correcto. */
:root[data-theme="dark"][data-paleta="tierra"] .cargacard-modal {
    background-color: var(--bg);
}

/* ---- El buscador: píldora de vidrio ----
   SIN backdrop-filter, y no por olvido: el panel de resultados (.prodform-results) es un
   position:fixed que cuelga ADENTRO de esta misma píldora (así está en el index). Con el
   desenfoque puesto, la píldora se vuelve su BLOQUE CONTENEDOR y el panel se va 500 px de
   su lugar — medido en el navegador: el style.left seguía diciendo 496px y el panel
   renderizaba en 996. Es la misma regla que hizo que la luz del modal fuera un
   background-image y no un desenfoque; acá la cazó el arnés de anclas.
   La píldora no lo necesita: se apoya sobre la superficie plana del modal, donde un
   desenfoque no tendría nada que desenfocar. */
:root[data-theme="dark"][data-paleta="tierra"] .carga-search {
    height: 46px;
    border-radius: 999px;
    border-color: var(--card-border);
    background: var(--card);
    padding: 0 16px;
    gap: 10px;
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-search-ico {
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-search-input {
    font-size: 14px;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-search-input::placeholder {
    color: var(--text-2);
}

/* ---- El panel de resultados: vidrio flotante ----
   Va con --flot y no con --card: es position:fixed por encima del modal, o sea una capa
   que FLOTA. Misma familia que .help-pop y .pmenu. */
:root[data-theme="dark"][data-paleta="tierra"] .prodform-results {
    background: var(--flot);
    border-color: var(--card-border);
    border-radius: 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] .cargasug-head {
    background: transparent;
    border-top-color: var(--border);
    color: var(--text-3);
}

/* El PUNTITO del color de la receta, delante del nombre. El color lo publica el JS en
   --cc (la misma gama por plato del tablero); un ingrediente no tiene plato, así que
   cae al neutro por el fallback de la variable. */
:root[data-theme="dark"][data-paleta="tierra"] .cargasug-row .cargasug-n::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--cc, var(--text-3));
    vertical-align: middle;
}

:root[data-theme="dark"][data-paleta="tierra"] .cargasug-row {
    min-height: 52px;
}

:root[data-theme="dark"][data-paleta="tierra"] .cargasug-row:hover {
    background: var(--accent-soft);
}

/* La estación / el tipo, a la derecha y apagados. */
:root[data-theme="dark"][data-paleta="tierra"] .cargasug-m,
:root[data-theme="dark"][data-paleta="tierra"] .cargasug-tag {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .cargasug-tag {
    background: var(--relieve);
    border-radius: 999px;
    padding: 3px 9px;
}

/* ---- La sección y el vacío ---- */
:root[data-theme="dark"][data-paleta="tierra"] .carga-sect {
    font-family: var(--font-titulo);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .5px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-empty {
    color: var(--text-3);
    text-align: center;
}

/* ---- Las tarjetas de la lista: vidrio con el hilito del color de la receta ---- */
:root[data-theme="dark"][data-paleta="tierra"] .carga-card {
    background: var(--card);
    border-color: var(--card-border);
    border-left: 4px solid var(--cc, var(--terra));
    border-radius: 16px;
    padding: 12px 14px;
}

/* Abierta: el ámbar escrito a mano se va; el hilito y el relieve alcanzan para decir
   "esta es la que estás editando". */
:root[data-theme="dark"][data-paleta="tierra"] .carga-card.open {
    background: var(--relieve);
    border-color: var(--card-border);
    border-left-color: var(--cc, var(--terra));
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-rname {
    font-family: var(--font-titulo);
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* MEDIDO, y por eso NO va en --text-3 como pedía el mockup: sobre la tarjeta, --text-3
   da 2,73:1 y estos renglones venían de 5,1-5,6 en la versión de hoy. La regla de
   contraste manda sobre el token del mockup (mismo criterio que la tanda LIMA y que la
   ficha del fichero): van en --text-2, que mide 5,4-5,6:1 y sigue siendo el gris apagado
   del secundario. Vale para .carga-rmeta, .carga-lbl, .carga-tag y los del panel. */
:root[data-theme="dark"][data-paleta="tierra"] .carga-rmeta {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-tag {
    background: var(--relieve);
    color: var(--text-2);
    border-radius: 999px;
    padding: 3px 9px;
}

/* Los botones de la tarjeta (chevron y ✕) con área de dedo, no de mouse. */
:root[data-theme="dark"][data-paleta="tierra"] .carga-i {
    width: 40px;
    height: 40px;
    margin: -8px -6px -8px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-i:hover {
    background: var(--accent-soft);
    color: var(--text);
}

/* ---- Los campos de la tarjeta abierta: grandes y tocables ---- */
:root[data-theme="dark"][data-paleta="tierra"] .carga-lbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-2);   /* medido: --text-3 daba 2,73:1 */
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-field {
    height: 44px;
    border-radius: 12px;
    border-color: var(--border-2);
    background: var(--bg-2);
    font-size: 14px;
}

/* El NÚMERO es el protagonista de la tarjeta: grande, en Sora, y con dedo. */
:root[data-theme="dark"][data-paleta="tierra"] .carga-cant {
    font-family: var(--font-titulo);
    font-size: 19px;
    font-weight: 800;
    text-align: center;
    letter-spacing: .5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-field:focus {
    border-color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-sel-chev {
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .carga-flag {
    color: var(--text-2);
    min-height: 40px;
}

/* ---- El pie y el CTA: lima pleno con su tinta medida ---- */
:root[data-theme="dark"][data-paleta="tierra"] .carga-foot {
    border-top-color: var(--border);
}

:root[data-theme="dark"][data-paleta="tierra"] {
    --cta-bg: var(--terra);
    --cta-ink: var(--vivo-ink);
}

/* OJO CON EL ALCANCE: .carga-cta es una clase COMPARTIDA — la usan también el botón de
   Tarea rápida y los de Gestión. El COLOR sí va para todos (es la paleta haciendo su
   trabajo, y un token no mueve nada), pero el TAMAÑO va solo para el de + Cargar: subirlo
   a 50px en la clase le crecía 6px al modal de Tarea rápida y le corría todo el contenido
   3px. Lo cazó el A/B de geometría. */
:root[data-theme="dark"][data-paleta="tierra"] #carga-cta {
    height: 50px;
    border-radius: 16px;
    font-family: var(--font-titulo);
    font-size: 14.5px;
    font-weight: 800;
}


/* ============================================================
   EL HUB BENTO — LA PIEL (solo tierra + tema OSCURO)
   ============================================================
   Tres materiales, y cada uno con su relieve:
     LIMA   = lo VIVO (Producción, el bloque gigante) — --inset-vivo
     HUESO  = lo que hacés con las manos (Checklist, Biblioteca) — --inset-claro
     VIDRIO = información (Menú, Pase) — --inset-oscuro
     VITRINA = lo que todavía no existe: opaca, apagada y con el borde punteado.

   Todo por TOKENS: acá no se repinta una sola propiedad de layout, solo se
   cambian las variables que la estructura ya lee. Sin el switch (o en tierra
   claro) los fallbacks dejan la grilla con --card / --border, sin insets.
============================================================ */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bento {
    --bt-inset-vivo: var(--inset-vivo);
}

/* ---- LIMA: Producción ---- */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="prod"] {
    --bt-sup: var(--terra);
    --bt-ink: var(--vivo-ink);
    --bt-borde: transparent;
    --bt-sombra: var(--inset-vivo), 0 18px 40px rgba(201, 192, 90, .18);
    --bt-bar-track: rgba(0, 0, 0, .16);
    --bt-bar-inset: inset 0 2px 4px rgba(0, 0, 0, .2);
    --bt-bar-fill: var(--vivo-ink);
    --bt-cta-bg: var(--vivo-ink);
    --bt-cta-ink: var(--terra);
    --bt-cta-sombra: var(--inset-oscuro);
}

/* ---- HUESO: Checklist y Biblioteca ---- */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="tareas"],
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="biblio"] {
    --bt-sup: var(--claro);
    --bt-ink: var(--claro-ink);
    --bt-borde: transparent;
    --bt-sombra: var(--inset-claro);
}

/* ---- VIDRIO: Menú y Pase ----
   El desenfoque es seguro acá: adentro de estos bloques no cuelga ningún
   position:fixed (los popovers y el ⋯ viven en el body), que es la trampa
   conocida del backdrop-filter. Lo verifica el A/B de geometría. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="menu"],
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="pase"] {
    --bt-sup: var(--card);
    --bt-borde: var(--card-border);
    --bt-sombra: var(--inset-oscuro);
}

/* ---- VITRINA: lo que todavía no existe ----
   Es el ÚNICO bloque opaco, y por eso se lee "apagado" al lado de los de
   vidrio. El #171A1F es el tono de tarjeta que dejó la tanda PIZARRA (hoy
   --card es vidrio y no sirve de sólido): va literal, como pide el mockup. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt.bt-vitrina {
    --bt-sup: #171A1F;
    --bt-borde: var(--card-border);
    --bt-sombra: var(--inset-oscuro);
    border-style: dashed;
}

/* ---- EL PANEL DE AVANCE, vestido igual que los bloques de vidrio ----
   Su mecánica no se toca: los mismos números, los mismos chips, las mismas
   ventanitas. El vidrio y el desenfoque ya los tenía; suma el relieve y el
   radio de la grilla. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-panel {
    border-color: var(--card-border);
    border-radius: 26px;
    box-shadow: none;
}


/* ============================================================
   BENTO · PRODUCCIÓN DEL DÍA — LA PIEL (solo tierra + tema OSCURO)
   ============================================================
   El mismo lenguaje del HUB bento: vidrio con relieve para lo que informa,
   HUESO para el hero del avance, lima para lo vivo y salvia para lo que junta.
   Acá NO se toca una sola línea de mecánica: filtros, hojitas, tildado,
   fichero, ⋯ y terminados quedan exactamente como estaban.
============================================================ */

/* ---- B1 · la tira de la semana: la caja, de vidrio ---- */
:root[data-theme="dark"][data-paleta="tierra"] .prodhead-sem {
    border-color: var(--card-border);
    box-shadow: none;
}

/* ---- B3 · la cabecera ---- */
:root[data-theme="dark"][data-paleta="tierra"] .prodhead-tt {
    font-family: var(--font-titulo);
    font-size: 21px;   /* 🌙 FASE 2: 22 → 21 (el mockup) */
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] .ph-btn {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: var(--card);
    border-color: var(--card-border);
    color: var(--text-2);
    box-shadow: none;
}

/* Los globitos: el del embudo en lima (es un filtro, algo VIVO) y el del ✓ en
   salvia (es lo que ya está hecho). Su tinta va medida, no heredada. */
:root[data-theme="dark"][data-paleta="tierra"] #ph-embudo-n {
    background: var(--terra);
    color: var(--vivo-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #ph-term-n {
    background: var(--salvia);
    color: #16211A;
}

:root[data-theme="dark"][data-paleta="tierra"] .ph-cargar {
    padding: 12px 18px;
    border-radius: 15px;
    border-color: transparent;
    background: var(--terra);
    color: var(--vivo-ink);
    font-family: var(--font-titulo);
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: none;
}

/* (B2 · acá vivía la piel HUESO del hero del avance. Murió con él en la TANDA
   SIN ECOS · P2: el avance es ahora la pildorita .ph-pulso, al lado del título.) */

/* ---- B4 · la ficha de juntar ---- */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-card {
    border-radius: 24px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich {
    --fi-tx: #EEF4EA;
    --fi-tx-2: #A9C4AE;
    --fi-plato: #A9C4AE;
    --fi-num: #E9EFE2;
    --fi-linea: rgba(143, 169, 143, .35);
    --fi-hueco: rgba(0, 0, 0, .28);
    --fi-btn-tx: #16211A;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-nm {
    font-size: 15.5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-cant {
    font-size: 26px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-cant .fi-u {
    font-size: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-quien .prod-sug-item {
    font-size: 11.5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-quien + .prod-fich-preg .prod-fich-preg-txt,
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-dueno-lb {
    font-size: 11px;
    letter-spacing: .05em;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-dueno-in {
    border-radius: 14px;
    border-width: 1px;
    color: #E5EDE1;
    font-size: 12.5px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-card .prod-sug-yes {
    padding: 13px;
    border-radius: 15px;
    font-size: 13px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich-card .prod-sug-no {
    border-width: 1.5px;
    border-radius: 15px;
    color: #C9D9CC;
    font-size: 12px;
}

/* ---- B5 · las tarjetas de plato del tablero ----
   TANDA SIN ECOS · P3 — la tarjeta deja el apagado: cada plato pinta la suya con su
   color (--pc, que publica renderPlatoCard desde la gama del plato). Muere el hilito
   de 5px: el color pasa a ser el BORDE entero (1.5px pleno), un VELO del mismo color
   al 14% sobre el #171A1F, el NÚMERO grande y el relleno de la barra.
   El velo es un ::before DEBAJO del contenido (isolation + z-index -1): tiñe el fondo
   y nunca la letra, y no se come ningún toque. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card {
    position: relative;
    isolation: isolate;
    padding: 15px;
    border-radius: 24px;
    border: 1.5px solid var(--pc, var(--card-border));
    background: #171A1F;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--pc, transparent);
    opacity: .14;
    pointer-events: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-num {
    color: var(--pc, var(--text));
}

/* El texto SECUNDARIO de la tarjeta, un paso más claro. MEDIDO por píxel: el velo
   aclara el fondo según el color del plato, y sobre los velos claros (hueso, pasto,
   lima) el #8C94A0 del renglón chico caía a 3,9-4,3:1 y el "X / Y listas" en
   --text-3 a 2,1-2,5 (ya estaba flojo antes: 2,98). La regla de contraste manda sobre
   el "como están": #A0A8B3 es la misma familia gris fría, y pasa 4,5 en los 8. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-meta,
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-count,
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-para,
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-sum {
    color: #A0A8B3;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-nm {
    font-family: var(--font-titulo);
    font-size: 15px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-kebab {
    width: 36px;
    height: 36px;
    margin: -5px -6px -5px 0;
    border-radius: 13px;
    border: 1px solid var(--card-border);
    background: var(--card);
    box-shadow: none;
}

/* El chip de estado de las ollas: pastilla, con las familias de siempre. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-grupo-chip {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .32);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-bar-fill {
    border-radius: 999px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-3);
    margin-left: auto;
    text-align: right;
}

/* ---- B6 · los rótulos de sección ---- */
:root[data-theme="dark"][data-paleta="tierra"] .prod-grupo-h {
    font-size: 10.5px;
    letter-spacing: .09em;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-grupo-t {
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-grupo-hint {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
}

/* ============================================================
   🍱 BENTO · TANDA 3 — PIEZA 1: MENÚ DEL DÍA
   ============================================================
   El planificador semanal, vestido al lenguaje bento. La mecánica NO se toca:
   mdSelDia / mdGuardarDia / mdGuardarManual / mdAgregarItem / las plantillas /
   el autoguardado / el sello siguen exactamente igual.

   ESTRUCTURA (las dos paletas), y es la ÚNICA excepción declarada de esta pieza:
   los 7 días dejan sus cajitas sueltas y la caja pasa a ser la TIRA entera —
   calcado byte a byte del molde de .prodhead-sem (BENTO t2 · B1), tokens con
   fallback incluidos, para que la clásica caiga en sus colores de siempre.

   Todo lo demás (materiales, sombras, hueso, chips) cuelga de
   [data-paleta="tierra"] + tema oscuro: sin el switch no cambia un pixel.
============================================================ */

/* ---- 1.2 · La semana: UNA caja contenedora (estructura) ---- */
.md-week {
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--card);
    grid-template-columns: none;
}

.md-day {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* El día ya no tiene caja propia: la caja es la tira. */
    border: 1px solid transparent;
    background: transparent;
    border-radius: 13px;
    padding: 9px 2px;
    text-align: center;
}

.md-day:hover {
    border-color: transparent;
    background: var(--ph-relieve, var(--accent-soft));
}

.md-day-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.md-day-dow {
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .05em;
    color: var(--text-2);
    line-height: 1;
}

.md-day-num {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--text);
    line-height: 1;
    text-transform: none;
}

.md-day-name {
    font-size: 8.5px;
    font-weight: 700;
    margin: 5px 0 2px;
    color: var(--text-3);
}

.md-day.hay .md-day-name {
    color: var(--salvia, var(--green-check));
}

.md-day-cub,
.md-day-asignar,
.md-day-gen {
    font-size: 8.5px;
    font-weight: 700;
}

/* Puntito de "este día tiene menú asignado" */
.md-day-dot {
    display: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--salvia, var(--green-check));
    margin: 3px auto 0;
}

.md-day.hay .md-day-dot {
    display: block;
}

/* El día que se está editando: la única pastilla de color de la tira. */
.md-day.sel {
    background: var(--ph-vivo, var(--orange));
    border-color: transparent;
    box-shadow: none;
}

.md-day.sel .md-day-dow,
.md-day.sel .md-day-num,
.md-day.sel .md-day-name,
.md-day.sel .md-day-cub,
.md-day.sel .md-day-asignar,
.md-day.sel .md-day-gen {
    color: var(--vivo-ink, #1a1a1a);
}

.md-day.sel .md-day-dot {
    background: var(--vivo-ink, #1a1a1a);
}

/* ---- PIEL TIERRA (solo oscuro) — piezas 1.1, 1.3, 1.4, 1.5 y 1.6 ---- */

/* La luz interior de los modales grandes (tanda "luz en el modal") se declaró sobre
   .modal-box; el modal del Menú del día tiene clase propia (.md-modal) y por eso no
   la heredaba. Misma receta, mismos tokens: no se re-implementa nada. */
:root[data-theme="dark"][data-paleta="tierra"] .md-modal {
    /* El fondo propio del modal era un negro #161616 escrito a mano (regla de tema, más
       arriba): bajo tierra pasa a la pizarra, igual que .modal-box. */
    background-color: var(--bg);
    background-image:
        radial-gradient(circle 300px at 100% 0%, var(--orb-modal-1), transparent 70%),
        radial-gradient(circle 340px at 0% 100%, var(--orb-modal-2), transparent 70%);
    border-radius: var(--radius-lg);
}

/* 1.1 · Cabecera */
:root[data-theme="dark"][data-paleta="tierra"] .md-head-tt h2 {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-week-nav {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 15px;
    padding: 5px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-navbtn {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: none;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-week-nav #md-week-label {
    font-family: var(--font-titulo);
    font-size: 12.5px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-head .x-btn {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

/* 1.2 · la tira, con material */
:root[data-theme="dark"][data-paleta="tierra"] .md-week {
    border-color: var(--card-border);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-day-num {
    font-family: var(--font-titulo);
}

/* 1.3 · El hero del día: bloque HUESO.
   El contenedor .md-editor deja de ser una caja: la caja pasa a ser cada pieza. */
:root[data-theme="dark"][data-paleta="tierra"] .md-editor {
    border: none;
    background: none;
    padding: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-ed-head {
    background: var(--claro);
    color: var(--claro-ink);
    border-radius: 24px;
    padding: 16px 18px;
    box-shadow: none;
    align-items: center;
    gap: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-nombre {
    font-family: var(--font-titulo);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-nombre::placeholder {
    color: rgba(27, 30, 22, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-ed-sub {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    /* El .6 del mockup daba 4,12:1 sobre el hueso — y es el ÚNICO texto de la pieza que
       empeoraba contra hoy (5,10). Con .72 vuelve a 5,1. Misma decisión que ya tomaron
       LIMA y la ficha del fichero: la regla de contraste manda sobre el token del mockup. */
    color: rgba(27, 30, 22, .72);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-costo {
    font-size: 11.5px;
    font-weight: 700;
    /* Medido sobre el hueso: con .6 daba 4,12:1. Con .72 pasa la vara. */
    color: rgba(27, 30, 22, .72);
}

/* El chip de FOOD COST. El % viene con su color inline (mdFcColor, que no se toca):
   acá se lo pisa con la tinta que se lee sobre el verde del chip. */
:root[data-theme="dark"][data-paleta="tierra"] .md-fc {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    background: rgba(143, 169, 143, .25);
    border: 1px solid rgba(92, 112, 70, .35);
    border-radius: 14px;
    padding: 8px 13px;
    vertical-align: middle;
    color: #3E5236 !important;
}

/* El % primero y el rótulo después: el TEXTO que emite el js es el de siempre
   ("food cost 18%"), acá solo se lo reordena y se lo viste. */
:root[data-theme="dark"][data-paleta="tierra"] .md-fc .md-fc-n {
    order: 1;
    font-family: var(--font-titulo);
    font-size: 17px;
    font-weight: 800;
    color: #3E5236;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-fc .md-fc-l {
    order: 2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #556248;
}

/* 1.4 · Plantillas guardadas. La píldora vive DENTRO del bloque hueso, así que su
   tinta es el lima OSCURO (#8F862E) y no var(--terra) —el lima claro sobre hueso
   no se lee—. Misma decisión que ya tomaron LIMA y la ficha del fichero: la regla
   de contraste manda sobre el token del mockup. */
:root[data-theme="dark"][data-paleta="tierra"] .md-plant-btn {
    border-radius: 99px;
    padding: 9px 15px;
    height: auto;
    font-size: 12px;
    font-weight: 700;
    color: #5E5820;
    background: rgba(27, 30, 22, .06);
    border: 1px solid rgba(110, 103, 34, .4);
    box-shadow: none;
}

/* 1.3 · Cubiertos y Precio */
:root[data-theme="dark"][data-paleta="tierra"] .md-cub-box label,
:root[data-theme="dark"][data-paleta="tierra"] .md-precio-box label {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(27, 30, 22, .55);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-opt {
    color: rgba(27, 30, 22, .62);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-cub-box input,
:root[data-theme="dark"][data-paleta="tierra"] .md-precio-box input {
    width: 74px;
    height: auto;
    padding: 9px 6px;
    border-radius: 12px;
    text-align: center;
    background: rgba(27, 30, 22, .08);
    border: 1px solid rgba(27, 30, 22, .15);
    color: var(--claro-ink);
    font-family: var(--font-titulo);
    font-size: 16px;
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-cub-box input:focus,
:root[data-theme="dark"][data-paleta="tierra"] .md-precio-box input:focus {
    border-color: rgba(27, 30, 22, .4);
}

/* 1.5 · Las secciones de platos: tarjeta de vidrio */
:root[data-theme="dark"][data-paleta="tierra"] .md-sec {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 11px;
    box-shadow: none;
    overflow: visible;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-head {
    padding: 0 0 10px;
    border-bottom: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-ico {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--relieve);
    border: none;
    box-shadow: none;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-name {
    font-family: var(--font-titulo);
    font-size: 15.5px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-subtotal {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-actions button {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: var(--relieve);
    border: none;
    font-size: 15px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-sec-items {
    padding: 0;
}

/* Cada plato: fila con separador, sin caja propia */
:root[data-theme="dark"][data-paleta="tierra"] .md-item {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    padding: 11px 0;
    margin-bottom: 0;
}

/* El puntito del color del plato (la gama de siempre, publicada en --cc) */
:root[data-theme="dark"][data-paleta="tierra"] .md-item-n::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cc, var(--text-2));
    margin-right: 8px;
    vertical-align: baseline;
    flex-shrink: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-item-n {
    font-size: 13.5px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-item-gen {
    font-size: 10.5px;
    color: var(--text-3);
}

/* Cubiertos: el número grande arriba y "CUB" chico debajo */
:root[data-theme="dark"][data-paleta="tierra"] .md-item-cub {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    /* text-3 sobre el relieve daba 2,0:1 — el rótulo del dato tiene que leerse. */
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-item-cub input {
    width: 58px;
    height: auto;
    padding: 3px 4px;
    border-radius: 11px;
    background: var(--relieve);
    border: 1px solid var(--border);
    font-family: var(--font-titulo);
    font-size: 16px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-item-x {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: var(--relieve);
    font-size: 16px;
    /* Con fondo propio, el text-3 de fábrica daba 2,73:1. */
    color: var(--text-2);
}

/* "+ Agregar plato" */
:root[data-theme="dark"][data-paleta="tierra"] .md-additem-wrap {
    padding: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-additem {
    display: block;
    width: 100%;
    border: 1.5px dashed var(--border-2);
    border-radius: 14px;
    background: transparent;
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    padding: 11px;
    margin-top: 9px;
}

/* 1.6 · "+ Agregar sección" y el pie */
:root[data-theme="dark"][data-paleta="tierra"] .md-addsec {
    border: 1.5px dashed var(--border-2);
    border-radius: 18px;
    padding: 15px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-ed-foot {
    border-top: 1px solid var(--border);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-estado-listo {
    background: var(--salvia-suave);
    border: 1px solid var(--salvia-borde);
    color: var(--salvia);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 99px;
    padding: 8px 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-estado-borrador {
    background: var(--terra-suave);
    border: 1px solid var(--terra-borde);
    color: var(--terra);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 99px;
    padding: 8px 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-estado-gen {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .md-ghost {
    height: auto;
    padding: 11px 15px;
    border-radius: 14px;
    background: var(--card);
    border: 1px solid var(--card-border);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 700;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-save {
    height: auto;
    padding: 13px 22px;
    border-radius: 15px;
    background: var(--terra);
    color: var(--vivo-ink);
    font-family: var(--font-titulo);
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: none;
}

/* ============================================================
   🍱 BENTO · TANDA 3 — PIEZA 2: PASE DE TURNO
   ============================================================
   Las 3 zonas QUEDAN donde estaban; cambia la ropa y la jerarquía. La mecánica no se
   toca: pasePasarOrden / paseDescartarOrden / paseToggleTarea / paseAddInline /
   paseGuardarItem / paseVerHistorial siguen exactamente igual, y los NOMBRES de los
   botones ("Pasa", "Descartar", "+ Tarea"…) son los del código.

   Del index solo salió un envoltorio de LAYOUT (.pase-plan-box) para que el bloque
   hueso pueda cubrir el plan y sus 4 botones, y dos spans vacíos para el conteo de
   los rótulos. Sin el switch ninguno lleva estilo: el conteo va en display:none
   (molde del .ph-av-mas de BENTO t2 · B2).

   TODO lo de acá cuelga de [data-paleta="tierra"] + tema oscuro.
============================================================ */

/* El conteo del rótulo: solo existe bajo tierra */
.pase-zona-n {
    display: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-zona-n:not(:empty) {
    display: inline;
    margin-left: 8px;
    font-family: var(--font-titulo);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-zona-n--ok:not(:empty) {
    color: var(--salvia);
}

/* 2.1 · Cabecera */
:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-title {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-close {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

/* 2.2 · Rótulos de zona */
:root[data-theme="dark"][data-paleta="tierra"] .pase-zona-h {
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
    color: var(--text-2);
    margin: 14px 4px 9px;
}

/* Los emojis del mockup: el DOM no los tiene y son decoración pura. */
:root[data-theme="dark"][data-paleta="tierra"] #pase-main .pase-zona:nth-of-type(1) > .pase-zona-h::before {
    content: '↩ ';
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-main .pase-zona:nth-of-type(2) > .pase-zona-h::before {
    content: '📋 ';
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-main .pase-zona:nth-of-type(3) > .pase-zona-h::before {
    content: '🤖 ';
}

/* 2.3 · "Quedó del turno": vidrio con el borde de atención */
:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo {
    background: var(--card);
    border: 1px solid var(--terra-borde);
    border-radius: 24px;
    padding: 6px 16px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    padding: 12px 0;
    margin-bottom: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card:first-child {
    border-top: none;
}

/* El ícono en cajita. El DOM no trae ninguno, así que se lo pone el css y se elige por
   la marca que YA distingue los dos tipos: una ORDEN pinta .pase-estado; una tarea no. */
:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card::before {
    content: '🍳';
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--relieve);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card:not(:has(.pase-estado))::before {
    content: '📋';
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card-nm {
    font-size: 13.5px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card-meta {
    font-size: 10.5px;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-btn-pasa {
    background: var(--terra);
    color: var(--vivo-ink);
    font-family: var(--font-titulo);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 13px;
    padding: 10px 15px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-btn-desc {
    background: none;
    border: 1.5px solid var(--border-2);
    /* El text-3 del mockup daba 2,95:1 sobre el vidrio de la zona, y venía de 5,10. Es un
       BOTÓN: tiene que leerse (mismo criterio que "Cada uno el suyo" en Retoques 2). */
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
    border-radius: 13px;
    padding: 10px 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-vacio {
    padding: 14px 2px;
}

/* 2.4 · "Plan del turno": bloque HUESO (acá se escribe) */
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box {
    background: var(--claro);
    color: var(--claro-ink);
    border-radius: 24px;
    padding: 6px 16px 14px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item {
    border-bottom: none;
    border-top: 1px solid rgba(27, 30, 22, .1);
    padding: 12px 0;
    gap: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item:first-child {
    border-top: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-check {
    width: 32px;
    height: 32px;
    border: 2.5px solid rgba(27, 30, 22, .4);
    border-radius: 11px;
    background: none;
    color: transparent;
    font-size: 17px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item.hecho .pase-check {
    background: #5C7046;
    border-color: #5C7046;
    color: var(--claro);
}

/* Las NOTAS no se tildan: su casillero (que no existe) se representa con el borde punteado
   del ítem. La nota no trae .pase-check, así que la marca va en su texto. */
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item-nota::before {
    content: '';
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 2.5px dashed rgba(27, 30, 22, .25);
    border-radius: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item-tx {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-nota-tx {
    color: rgba(27, 30, 22, .72);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item.hecho .pase-item-tx {
    text-decoration: line-through;
    color: var(--claro-ink);
    opacity: .5;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-prod-est,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-prod-descartada {
    font-size: 10.5px;
    color: rgba(27, 30, 22, .62);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item-x {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    background: rgba(27, 30, 22, .08);
    color: rgba(27, 30, 22, .62);
    font-size: 16px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Los 4 botones de agregar: "+ Tarea" en lima; los otros tres, oscuros sobre el hueso */
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-row {
    margin-top: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-btn {
    border: none;
    border-radius: 99px;
    font-size: 11.5px;
    font-weight: 800;
    padding: 9px 14px;
    background: rgba(27, 30, 22, .9);
    color: var(--claro);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-btn:first-child {
    background: var(--terra);
    color: var(--vivo-ink);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-form .input-app,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-form input[type="text"] {
    background: rgba(27, 30, 22, .08);
    border: 1px solid rgba(27, 30, 22, .2);
    border-radius: 12px;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-prep-toggle,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-cancel,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-prep-unidad {
    color: rgba(27, 30, 22, .72);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-cancel {
    border-color: rgba(27, 30, 22, .25);
    border-radius: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-vacio {
    color: rgba(27, 30, 22, .62);
}

/* 2.5 · Bitácora IA (vitrina honesta) y el historial */
:root[data-theme="dark"][data-paleta="tierra"] .pase-bitacora {
    background: #171A1F;
    border: 1px dashed var(--card-border);
    border-radius: 24px;
    padding: 18px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-bitacora::before {
    content: '✨';
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: var(--relieve);
    opacity: .6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-bitacora::after {
    content: 'el resumen del turno se va a escribir solo';
    font-size: 11px;
    font-weight: 600;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-hist-link {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 12px;
    font-weight: 700;
    /* Idem: es la puerta al historial, y con text-3 daba 3,33:1 viniendo de 5,99. */
    color: var(--text-2);
    padding: 14px 0 2px;
}

/* ============================================================
   🍱 BENTO · TANDA 3 — PIEZA 3: BIBLIOTECA DE RECETAS
   ============================================================
   La pantalla de estaciones. La mecánica no se toca: pubSetModo / pubAbrirEstacion /
   pubBuscar / pubLimpiarBusqueda / pubNavegar siguen exactamente igual.

   Del index solo salió un span vacío para el TOTAL del título (el css lo esconde sin
   el switch) y del js, el conteo de cada estación partido en número + palabra —el
   MISMO texto—, molde del <span class="fi-u"> del fichero.

   TODO lo de acá cuelga de [data-paleta="tierra"] + tema oscuro.
============================================================ */

.pub-total {
    display: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-total:not(:empty) {
    display: inline;
    margin-left: 10px;
    font-family: var(--font-titulo);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
    color: var(--terra);
}

/* 3.1 · Cabecera */
:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-header-title {
    font-family: var(--font-titulo);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-transform: none;
    max-width: 72%;
}

/* El segmentado Producción / Despacho */
:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-toggle {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 4px;
    height: auto;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-toggle-btn {
    padding: 9px 17px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-toggle-btn.active {
    color: var(--vivo-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-toggle-indicator {
    background: var(--terra);
    border-radius: 12px;
    box-shadow: none;
}

/* El buscador */
:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap {
    border-radius: 17px;
    padding: 13px 16px;
    height: auto;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input {
    font-size: 13.5px;
    font-weight: 600;
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input::placeholder {
    color: var(--text-3);
    font-size: 13.5px;
    font-weight: 600;
}

/* 3.2 · Las estaciones: bento HUESO.
   El html no se toca: .pub-station-top pasa a display:contents y sus dos hijos caen
   directo en el flex de la tarjeta, así el orden del mockup sale del `order`. */
:root[data-theme="dark"][data-paleta="tierra"] #pub-estaciones.pub-grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-card {
    position: relative;
    background: var(--claro);
    color: var(--claro-ink);
    border: none;
    border-radius: 24px;
    padding: 17px;
    box-shadow: none;
    justify-content: flex-start;
    min-height: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-card:hover {
    transform: translateY(-2px);
    border-color: transparent;
}

/* La flecha → de arriba a la derecha (el DOM no la trae: es decoración) */
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-card::after {
    content: '→';
    position: absolute;
    top: 17px;
    right: 17px;
    font-size: 16px;
    line-height: 1;
    color: rgba(27, 30, 22, .35);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-top {
    display: contents;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-ico {
    order: 1;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: rgba(27, 30, 22, .1);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-name {
    order: 2;
    font-family: var(--font-titulo);
    font-size: 16px;
    font-weight: 800;
    color: var(--claro-ink);
    margin-top: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-count {
    order: 3;
    display: flex;
    align-items: baseline;
    gap: 5px;
    background: none;
    padding: 0;
    border-radius: 0;
    margin-top: 2px;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-st-n {
    font-family: var(--font-titulo);
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #8F862E;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-st-u {
    font-size: 11px;
    font-weight: 700;
    color: rgba(27, 30, 22, .55);
}

/* El acceso "Menú del día" (la estación virtual): la misma tarjeta, en lima */
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-card.pub-station-menu {
    background: var(--terra);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-station-ico,
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-station-name,
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-st-n {
    color: var(--vivo-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-st-u,
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu::after {
    color: rgba(26, 26, 16, .6);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-station-ico {
    background: rgba(26, 26, 16, .12);
}

/* ============================================================
   🍱 BENTO · TANDA 3 — PIEZA 4: TAREAS DEL DÍA
   ============================================================
   La mecánica no se toca: tkToggle / tbDiaAnterior / tbDiaSiguiente / tbReportar /
   tgResolverPedir / tkAnotarRegistro siguen exactamente igual, y los permisos también.

   ESTRUCTURA (las dos paletas, y son las excepciones declaradas de la pieza):
   1) el hero: la fecha en dos renglones y el avance (barra + %) al lado del contador
      que YA existía — con los MISMOS números;
   2) los carriles de alto fijo mueren: masonry de 2 columnas (1 en celular) con la
      tarjeta a MEDIDA de su contenido;
   3) las estaciones sin tareas hoy dejan de ser una tarjeta vacía y van al pie como
      píldoras "Al día ✓";
   4) el campo "¿Se rompió algo?" deja la vista permanente: lo abre "＋ Reportar".

   Los materiales (hueso, vidrio, lima, salvia) van SOLO bajo tierra oscuro.
============================================================ */

/* ---- 4.1 · El hero (estructura) ---- */
.tb-toolbar {
    flex-wrap: wrap;
}

.tb-date-main {
    display: block;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}

.tb-date-mes {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-2);
    line-height: 1.15;
}

.tb-counter {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 800;
}

.tb-av {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.tb-av.hidden {
    display: none;
}

.tb-av-bar {
    display: block;
    width: 150px;
    height: 10px;
    border-radius: 999px;
    background: var(--accent-bg);
    overflow: hidden;
}

.tb-av-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ph-vivo, var(--orange));
}

.tb-av-pct {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ph-vivo, var(--orange));
}

/* ---- 4.2 · El reporte de roturas (estructura) ---- */
.tb-rep-row {
    display: flex;
    justify-content: flex-end;
}

.tb-rep-row.hidden {
    display: none;
}

.tb-rep-abrir {
    border: 1.5px solid var(--borg-tx, var(--red));
    background: none;
    color: var(--borg-tx, var(--red));
    border-radius: 999px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 700;
    padding: 7px 14px;
    cursor: pointer;
}

.tb-report.hidden {
    display: none;
}

.tb-rep-cancel {
    flex-shrink: 0;
    border: 1px solid var(--border-2);
    background: none;
    color: var(--text-2);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    border-radius: 9px;
    padding: 0 14px;
    cursor: pointer;
}

/* ---- 4.3 · Masonry: mueren los carriles de alto fijo (estructura) ---- */
.tb-body {
    overflow-y: auto;
    overflow-x: hidden;
}

.tb-cols {
    display: block;
    columns: 2;
    column-gap: 12px;
    height: auto;
    overflow: visible;
    padding-bottom: 0;
}

.tb-col {
    display: block;
    break-inside: avoid;
    margin-bottom: 12px;
    min-width: 0;
    /* El alto lo pone el contenido: se acabaron los mares de vacío. */
    height: auto;
}

.tb-col-body {
    display: block;
    overflow: visible;
    height: auto;
}

.tb-col-body > .tb-grp + .tb-grp {
    margin-top: 12px;
}

@media (max-width: 640px) {
    .tb-cols {
        columns: 1;
    }
}

/* Las estaciones "al día": píldoras al pie */
/* El ANILLO de avance es piel: sin el switch no existe (el chip .tb-col-count sigue
   siendo el que muestra el hechas/total, exactamente como hasta hoy). */
.tb-ring {
    display: none;
}

.tb-aldia {
    break-inside: avoid;
    margin-top: 4px;
}

.tb-aldia-h {
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 9px;
}

.tb-aldia-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tb-aldia-p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--salvia-suave, var(--green-soft-check, rgba(74, 222, 128, .12)));
    border: 1px solid var(--salvia-borde, var(--green-check));
    color: var(--salvia, var(--green-check));
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 999px;
    padding: 8px 14px;
}

.tb-aldia-p .ti {
    font-size: 14px;
}

/* ---- PIEL TIERRA (solo oscuro) ---- */

/* 4.1 · El hero: bloque HUESO */
:root[data-theme="dark"][data-paleta="tierra"] .tb-toolbar {
    background: var(--claro);
    color: var(--claro-ink);
    border-radius: 24px;
    padding: 14px 18px;
    margin: 0 24px;
    box-shadow: none;
    gap: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-toolbar .prod-date-nav {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid rgba(27, 30, 22, .2);
    background: rgba(27, 30, 22, .06);
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-datebar {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    flex: 0 1 auto;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-date-static {
    background: none;
    border: none;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-date-main {
    font-family: var(--font-titulo);
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-date-mes {
    /* .62 daba 4,38:1 sobre el hueso; con .72 pasa la vara. */
    color: rgba(27, 30, 22, .72);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-counter {
    color: rgba(27, 30, 22, .72);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-av-bar {
    background: rgba(27, 30, 22, .14);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-av-fill {
    background: #8F862E;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-av-pct {
    font-family: var(--font-titulo);
    color: #8F862E;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-ro-badge {
    background: rgba(27, 30, 22, .08);
    border-color: rgba(27, 30, 22, .2);
    color: rgba(27, 30, 22, .72);
}

/* 4.2 · Roturas: el banner borgoña */
:root[data-theme="dark"][data-paleta="tierra"] .tb-inc {
    background: var(--borg-suave);
    border: 1px solid rgba(224, 139, 160, .4);
    border-radius: 20px;
    padding: 13px 16px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-inc-ico {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: rgba(0, 0, 0, .25);
    align-items: center;
    justify-content: center;
    color: var(--borg-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-inc-t {
    font-size: 13.5px;
    font-weight: 700;
    color: #F3D9DF;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-inc-m {
    font-size: 10.5px;
    color: var(--borg-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-inc-btn {
    background: var(--borg-tx);
    color: #241014;
    font-family: var(--font-titulo);
    font-size: 11.5px;
    font-weight: 800;
    border-radius: 13px;
    padding: 10px 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-rep-abrir {
    border-color: var(--borg-tx);
    color: var(--borg-tx);
}

/* 4.3 · Las estaciones: tarjeta de vidrio a medida */
:root[data-theme="dark"][data-paleta="tierra"] .tb-col {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 15px;
    box-shadow: none;
    overflow: visible;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-col-head {
    padding: 0 0 10px;
    border-bottom: none;
    font-family: var(--font-titulo);
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-col-name {
    text-transform: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-col-head .ti {
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: var(--relieve);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--text-2);
}

/* El chip de conteo lo reemplaza el ANILLO (el mismo dato, otra forma) */
:root[data-theme="dark"][data-paleta="tierra"] .tb-col-count {
    display: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-ring {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(var(--salvia) var(--p, 0%), var(--relieve) 0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-ring-in {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #15181D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titulo);
    font-size: 9px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-col-body {
    padding: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-grp-h {
    font-size: 9px;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--text-3);
    padding: 4px 0 6px;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-grp-sem .tb-grp-h {
    color: var(--terra);
}

/* Cada tarea */
:root[data-theme="dark"][data-paleta="tierra"] .tb-trow {
    background: none;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
    padding: 9px 0;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-trow .hub-ord-check {
    width: 30px;
    height: 30px;
    border: 2.5px solid var(--border-2);
    border-radius: 11px;
    background: none;
    color: transparent;
    font-size: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-trow.hub-ord-done .hub-ord-check {
    background: var(--salvia);
    border-color: var(--salvia);
    color: #16211A;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-trow .hub-ord-n {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-trow.hub-ord-done .hub-ord-n {
    text-decoration: line-through;
    opacity: .45;
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-trow .tk-done-meta {
    font-size: 10px;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .tb-asig {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--text-2);
    background: var(--relieve);
    border: none;
    border-radius: 999px;
    padding: 4px 9px;
}

/* ============================================================
   🍱 BENTO · TANDA 4 — PARTE A: ARREGLOS
   ============================================================ */

/* ---- A1 (t4) → P3 (t5) · El lápiz del Menú del día ----
   Vivía FLOTANDO (position:absolute) y por eso desaparecía con cualquier cambio: la
   propia t4 se lo robó al poner .bt-in en position:relative. En la t5 pasó a ser un
   botón EN FLUJO dentro de la fila 1 del bloque (.bt-menu-edit, más abajo), así que
   estas reglas murieron con él. */

/* ---- A3 · Mobile: los widgets, más anchos (estructura) ----
   En una columna el padding lateral del contenedor del HUB baja de 20 a 10 por lado
   y el gap entre bloques de 14 a 10. Ningún otro cambio de tamaño. */
@media (max-width: 640px) {
    #pub-home {
        padding-left: 10px;
        padding-right: 10px;
    }

    .hub-bento {
        gap: 10px;
    }
}

/* ---- A6 · Los 5 tonos flojos (decisión de Facu tras el reporte de la t3) ----
   Cada uno es UNA línea, sobre las reglas que la tanda 3 dejó con el valor literal
   del mockup. El 5º —el % del hero de Tareas en #8F862E— NO se toca a propósito:
   la decisión es mantenerlo igual que el hero de Producción (bento t2). */

/* 1 · Los subtítulos en var(--text-3) de las 4 pantallas → var(--text-2) */
/* El .md-day-name SOLO en el día sin menú: el que tiene menú va en salvia y el elegido
   en --vivo-ink, y esta regla pesa más que las dos (se probó: pisaba el lima y daba 1,63). */
:root[data-theme="dark"][data-paleta="tierra"] .md-day:not(.hay):not(.sel) .md-day-name,
:root[data-theme="dark"][data-paleta="tierra"] .md-day:not(.hay):not(.sel) .md-day-asignar,
:root[data-theme="dark"][data-paleta="tierra"] .md-sec-subtotal,
:root[data-theme="dark"][data-paleta="tierra"] .md-item-gen,
:root[data-theme="dark"][data-paleta="tierra"] #pase-quedo .pase-card-meta,
:root[data-theme="dark"][data-paleta="tierra"] .pase-bitacora,
:root[data-theme="dark"][data-paleta="tierra"] .pase-bitacora::after,
:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] .tb-grp-h,
:root[data-theme="dark"][data-paleta="tierra"] .tb-trow .tk-done-meta {
    color: var(--text-2);
}

/* 2 · Los rótulos del hero del menú: .55 → .7 */
:root[data-theme="dark"][data-paleta="tierra"] .md-cub-box label,
:root[data-theme="dark"][data-paleta="tierra"] .md-precio-box label {
    color: rgba(27, 30, 22, .7);
}

/* 3 · "FOOD COST": #556248 → #4A5640 */
:root[data-theme="dark"][data-paleta="tierra"] .md-fc .md-fc-l {
    color: #4A5640;
}

/* 4 · "recetas" de las estaciones: .55 → .7. El acceso "Menú del día" (la tarjeta lima)
   recibe el MISMO tratamiento sobre su propia tinta: era el único que quedaba flojo. */
:root[data-theme="dark"][data-paleta="tierra"] .pub-st-u {
    color: rgba(27, 30, 22, .7);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu .pub-st-u,
:root[data-theme="dark"][data-paleta="tierra"] .pub-station-menu::after {
    color: rgba(26, 26, 16, .78);
}

/* ---- A7 · El puntito del color del plato en "Quedó del turno" ----
   Es la MISMA gama del tablero (prodColorPlato), publicada en --pp. Estructura: el
   puntito existe en las dos paletas, como los del tablero. */
.pase-punto {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pp, var(--text-2));
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ---- A8 · "Vistas recientemente" y "Ver todas" en la pantalla de Biblioteca ----
   La lista y el link son los MISMOS del widget del HUB (mismo render, mismo historial,
   mismo onclick): acá solo se los viste. La sección nace en display:none y el render la
   muestra cuando hay algo, así que sin recetas no ocupa lugar. */
.pub-rec-sec {
    margin-top: 22px;
}

.pub-rec-lab {
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: 9px;
}

/* El tag: S·R·E familia salvia, R·G·E familia lima. El render marca el tipo en el texto. */
:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent-t {
    flex-shrink: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 99px;
    padding: 4px 10px;
    background: var(--terra-suave);
    color: var(--terra);
    border: 1px solid var(--terra-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent.es-sre .hub-recent-t {
    background: var(--salvia-suave);
    color: var(--salvia);
    border-color: var(--salvia-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent-empty {
    padding: 14px 0;
    font-size: 12.5px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-vt-n {
    font-family: var(--font-titulo);
    font-weight: 800;
    color: var(--terra);
}

/* ============================================================
   🍱 BENTO · TANDA 4 — PARTE B: VIDA NUEVA
   ============================================================ */

/* ---- B1 (t4) → P1 (t5) · Las vitrinas se diseñan ADENTRO del bloque ----
   Las 6 pantallas ficticias de la t4 MURIERON (modal + handler + su css): Facu quería
   los widgets diseñados, no una pantalla al tocar. De aquella pieza sobrevive solo el
   coral del 86, que sigue siendo el único que rompe la línea. La muestra de cada
   vitrina y su píldora "PRÓXIMAMENTE" viven más abajo, en el bloque de la t5. */
/* EL COLOR SALTÓN — el 86 es el único que rompe la línea de las vitrinas apagadas */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="ochoseis"] {
    background: #F0532D;
    /* Ya no es una vitrina apagada: tiene contenido. El borde punteado que le dejaba la
       regla generica de .bt-vitrina (bento t1) no corresponde. */
    border: 1px solid transparent;
    color: #2A0D06;
    box-shadow: inset 0 2px 6px rgba(255, 255, 255, .3), inset 0 -8px 18px rgba(0, 0, 0, .25);
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-lab-86 {
    color: #2A0D06;
    opacity: .78;
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-86-ray {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 20px;
    line-height: 1;
}

/* ---- B2 · La comanda del plato, vestida (solo tierra oscuro) ----
   SOLO ROPA: la mecánica, los avisos, las variables y las notificaciones quedan intactos.
   Los handlers (prodCorteTildeIntent, prodListoIntent, prodAparteNo, las flechas ‹ ›,
   "Plato listo") no se tocan ni se nombran acá. */

/* Cabecera */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero {
    background: none;
    border-bottom: 1px solid var(--border);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-back,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-top .cmd-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-ic {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: var(--relieve);
    border: none;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-tt h2 {
    font-family: var(--font-titulo);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-chip {
    border-radius: 99px;
    padding: 5px 11px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0;
    background: var(--relieve);
    border: none;
    color: var(--text-2);
}

/* El chip R.G.E (el primero de la fila) va en la familia de lo vivo */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-chip:first-child {
    background: var(--terra-suave);
    border: 1px solid var(--terra-borde);
    color: var(--terra);
}

/* Las cajas: Ingredientes y Procedimiento */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-panel {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-panel-h {
    background: none;
    border-bottom: none;
    padding: 14px 16px 4px;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-panel-tt {
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-prod-pill {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 99px;
    background: var(--terra-suave);
    border: 1px solid var(--terra-borde);
    color: var(--terra);
}

/* Cada ingrediente: separador y aire, sin cebra */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-panel-ing .cmd-ing-table tr.cmd-row:nth-child(even) {
    background: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-ing-table td {
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 11px;
    padding-bottom: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-ing-table tr.cmd-row:first-child td {
    border-top: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-nm {
    font-size: 14px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] .mrec-crudo {
    font-size: 10.5px;
    color: var(--text-2);
}

/* La cantidad, a la derecha: número gordo + unidad chica + "limpio" debajo */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-c-qty .mrec-q-num {
    font-family: var(--font-titulo);
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-c-qty .mrec-q-un {
    font-size: 10px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-q-limpio {
    font-size: 9px;
    color: var(--text-3);
}

/* El chip S.R.E de una subreceta dentro de la fila (.mrec-sub-pill es su clase real) */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-c-main .mrec-sub-pill {
    background: var(--salvia-suave);
    border: 1px solid var(--salvia-borde);
    color: var(--salvia);
}

/* El recuadro "¿Contás con esta preparación?" */
:root[data-theme="dark"][data-paleta="tierra"] .prod-tenes {
    background: var(--relieve);
    border: none;
    border-left: none;
    border-radius: 16px;
    padding: 12px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-tenes-txt {
    font-size: 12px;
    font-weight: 800;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-tenes-si {
    background: var(--salvia);
    color: #16211A;
    font-family: var(--font-titulo);
    font-size: 12px;
    font-weight: 800;
    border-radius: 13px;
    padding: 10px 14px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-tenes-no {
    background: none;
    border: 1.5px solid var(--border-2);
    color: var(--text-2);
    border-radius: 13px;
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
}

/* Procedimiento vacío */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-panel-proc .cmd-empty {
    color: var(--text-3);
}

/* La nota de producto limpio */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-nota {
    font-size: 10.5px;
    color: var(--text-3);
}

/* El pie */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot {
    background: none;
    border-top: 1px solid var(--border);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot-prog {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot-btn {
    font-family: var(--font-titulo);
    font-size: 14px;
    font-weight: 800;
    border-radius: 16px;
    padding: 14px 22px;
    background: var(--terra);
    color: var(--vivo-ink);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot-btn.full {
    background: var(--terra);
    color: var(--vivo-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot-btn:disabled {
    background: var(--relieve);
    /* El text-3 del mockup daba 2,73:1 sobre el relieve y venia de 3,46 — es el UNICO
       texto de la comanda que empeoraba contra hoy. Con text-2 vuelve a 4,7. */
    color: var(--text-2);
    box-shadow: none;
    opacity: 1;
}

/* ---- B3 · La barra de turno y el panel: más vida (solo tierra oscuro) ----
   Hoy se pierden contra el fondo. Solo ropa: ni una fuente de datos se toca. */

/* La barra del turno */
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip {
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-strip-dot {
    width: 9px;
    height: 9px;
    background: var(--terra);
    box-shadow: 0 0 12px var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-strip-item b {
    font-weight: 700;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-strip-item {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-gear-btn,
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-avatar-btn {
    width: 38px;
    height: 38px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

/* El panel "El día de un vistazo" */
:root[data-theme="dark"][data-paleta="tierra"] .hub-panel {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 26px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-dato-l {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
}

/* Los datos de apoyo, como números */
:root[data-theme="dark"][data-paleta="tierra"] .hp-dato-v {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-bar {
    height: 8px;
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-chip {
    padding: 8px 15px;
    font-size: 12px;
    font-weight: 800;
}

/* ============================================================
   🍱 BENTO · TANDA 5 — P1: LAS VITRINAS, DISEÑADAS ADENTRO DEL BLOQUE
   ============================================================
   Cada vitrina muestra su muestra ESTÁTICA en el propio bloque del HUB. No son
   tocables (la estructura del no-click va a las dos paletas); la ropa, solo tierra. */

/* La cabecera del bloque: rótulo + píldora (o el rayo del 86) */
.bt-vhead {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bt-vhead .bt-lab {
    flex: 1 1 auto;
    min-width: 0;
}

.bt-pill {
    flex: none;
    font-size: 8.5px;
    letter-spacing: .08em;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: 99px;
    padding: 4px 9px;
    white-space: nowrap;
    color: var(--terra, var(--orange));
    background: var(--terra-suave, var(--orange-light));
    border: 1px solid var(--terra-borde, var(--orange));
}

/* La muestra: siempre anclada abajo del bloque */
.bt-vm {
    margin-top: auto;
    min-width: 0;
}

/* --- filas (stock, 86, menú de personal) --- */
.bt-vm-f {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.bt-vm-f:first-child {
    border-top: none;
}

.bt-vm-n {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-vm-v {
    flex: none;
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-3);
    white-space: nowrap;
}

.bt-vm-v--mal {
    color: #F0532D;
}

/* --- 86 · SE ACABÓ (coral): sus filas van sobre la tinta oscura --- */
.bt-vm-86 .bt-vm-f {
    border-top: 1.5px solid rgba(42, 13, 6, .18);
}

.bt-vm-86 .bt-vm-f:first-child {
    border-top: none;
}

.bt-vm-86 .bt-vm-n {
    font-size: 12px;
    font-weight: 800;
}

.bt-vm-86 .bt-vm-v {
    font-size: 12px;
    font-weight: 700;
    color: inherit;
    opacity: .75;
}

/* --- SOCIAL --- */
.bt-vm-social {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bt-vm-msg {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.bt-vm-av {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titulo);
    font-size: 10.5px;
    font-weight: 800;
    background: var(--claro, var(--accent-bg));
    color: var(--claro-ink, var(--text));
    box-shadow: var(--inset-claro, none);
}

.bt-vm-msg-tx {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 10.5px;
    color: var(--text-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bt-vm-msg-tx b {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

/* --- EVENTOS --- */
.bt-vm-ev {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.bt-vm-dia {
    flex: none;
    font-family: var(--font-titulo);
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--terra, var(--orange));
}

.bt-vm-ev-tx {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-2);
}

/* --- PIZARRA DEL DÍA --- */
.bt-vm-tiza {
    font-family: var(--font-titulo);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.25;
    text-decoration: underline wavy rgba(220, 231, 218, .35) 1.5px;
    text-underline-offset: 6px;
}

.bt-vm-firma {
    margin-top: 9px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: .6;
}

/* --- MENÚ DE PERSONAL: el horario en Sora --- */
.bt-vm-pers .bt-vm-f {
    border-top: 1px solid rgba(27, 30, 22, .1);
}

.bt-vm-pers .bt-vm-f:first-child {
    border-top: none;
}

.bt-vm-pers .bt-vm-v {
    font-family: var(--font-titulo);
    font-size: 11px;
    font-weight: 800;
    /* BENTO t6 · P4 — mismo cierre que la pildora: #8F862E -> #6E6722 sobre el hueso. */
    color: #6E6722;
}

/* ---- P1 · los MATERIALES de cada vitrina (solo tierra oscuro) ---- */

/* Las vitrinas de VIDRIO: stock, social y eventos dejan el borde punteado */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="stock"],
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="social"],
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="eventos"] {
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: var(--inset-oscuro);
    color: var(--text);
}

/* PIZARRA DEL DÍA — verde pizarrón, material nuevo */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="pizarra"] {
    background: #39473B;
    color: #DCE7DA;
    border: 1px solid rgba(220, 231, 218, .12);
    box-shadow: var(--inset-oscuro);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="pizarra"] .bt-lab {
    color: #DCE7DA;
    opacity: .78;
}

/* La firma toma la tinta de la tiza pero conserva SU opacity (.6): la regla del rótulo
   se la pisaba. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="pizarra"] .bt-vm-firma {
    color: #DCE7DA;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="pizarra"] .bt-pill {
    color: #DCE7DA;
    background: rgba(220, 231, 218, .1);
    border-color: rgba(220, 231, 218, .25);
}

/* MENÚ DE PERSONAL — hueso */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="personal"] {
    background: var(--claro);
    color: var(--claro-ink);
    border: 1px solid transparent;
    box-shadow: var(--inset-claro);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="personal"] .bt-lab {
    /* .62 daba 4,38:1 sobre el hueso; el prompt no le fija tinta, asi que va .72. */
    color: rgba(27, 30, 22, .72);
    opacity: 1;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="personal"] .bt-pill {
    /* BENTO t6 · P4 — el #8F862E daba 2,65:1 sobre el hueso. Cierre aprobado por Facu. */
    color: #6E6722;
    background: rgba(143, 134, 46, .12);
    border-color: rgba(143, 134, 46, .35);
}

/* El 86 conserva su coral de la t4; acá solo se afina su rótulo y su rayo. */
:root[data-theme="dark"][data-paleta="tierra"] .bt-86-ray {
    position: static;
    font-size: 19px;
    line-height: 1;
    flex: none;
}

/* Los rótulos de las vitrinas de vidrio dejan de estar apagados: ahora hay contenido. */
:root[data-theme="dark"][data-paleta="tierra"] .bt-vhead .bt-lab-off {
    opacity: 1;
    color: var(--text-2);
}

/* ============================================================
   🍱 BENTO · TANDA 5 — P2: BIBLIOTECA A PANTALLA COMPLETA
   ============================================================
   (estructura, las dos paletas) La pantalla deja la columna de 600px y usa el ancho
   entero, con los márgenes laterales que ya usa el HUB. La cabecera pasa a UNA fila. */

#pub-biblioteca {
    max-width: none;
}

.pub-bib-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

/* Los tres bloques de la cabecera caen al flex de la fila */
.pub-bib-head .pub-header {
    display: contents;
}

/* El título deja de estar centrado en absoluto: va en el flujo, al lado del botón */
.pub-bib-head .pub-header-title {
    position: static;
    transform: none;
    max-width: none;
    flex: none;
    white-space: nowrap;
}

/* El spacer de 44px que equilibraba el header centrado ya no hace falta */
.pub-bib-head .pub-header > div[aria-hidden="true"] {
    display: none;
}

.pub-bib-head .pub-back-btn {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 15px;
}

/* El buscador se estira y ocupa el hueco */
.pub-bib-head .pub-search-wrap {
    flex: 1 1 auto;
    min-width: 220px;
    margin-bottom: 0;
    height: auto;
    padding: 12px 15px;
    border-radius: 16px;
}

.pub-bib-head .pub-toggle {
    flex: none;
    margin-bottom: 0;
}

/* Las estaciones llenan el ancho */
#pub-estaciones.pub-grid {
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 12px;
}

#pub-estaciones .pub-station-card {
    min-height: 128px;
    display: flex;
    flex-direction: column;
}

/* El ícono arriba; el nombre y el conteo, abajo */
#pub-estaciones .pub-station-name {
    margin-top: auto;
}

/* ---- P2 · la piel de la cabecera en una fila (solo tierra oscuro) ---- */
:root[data-theme="dark"][data-paleta="tierra"] .pub-bib-head .pub-back-btn {
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
    color: var(--text-2);
}

/* La regla de la t3 usa el ID (#pub-biblioteca) y le gana a la clase: acá se la iguala. */
:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-bib-head .pub-search-wrap {
    border-radius: 16px;
    padding: 12px 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input::placeholder {
    font-size: 13px;
    font-weight: 600;
}

/* ============================================================
   🍱 BENTO · TANDA 5 — P3: EL WIDGET MENÚ DEL DÍA, ROBUSTO
   ============================================================
   Regresión definitiva: el lápiz vivía flotando y cualquier cambio lo tapaba (en la
   t4 misma, ponerle position:relative a .bt-in se lo robó). Ahora NADA flota: el
   bloque son DOS FILAS EN FLUJO. (estructura para las dos paletas; colores en tierra) */

.bt-menu-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
}

/* FILA 1 — rótulo + espaciador + "✎ Editar" */
.bt-menu-r1 {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bt-menu-sp {
    flex: 1 1 auto;
}

.bt-menu-r1 .bt-lab {
    flex: none;
    font-size: 11px;
    letter-spacing: .09em;
    font-weight: 800;
}

.bt-menu-edit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 12px;
    padding: 8px 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    /* BENTO 8 · P2 — el ULTIMO vidrio real de la app se va de acá. El brightness(.4) de
       t5c oscurecía la superficie propia del botón para que su tinta clara sobreviviera a
       la parte clara de la FOTO (sin él daba 2,69:1). Sin foto no hay nada de qué
       defenderse: el botón pasa a un sólido y se lee igual en todo el bloque. */
    background: #1B1E16;
    border: 1px solid rgba(255, 255, 255, .14);
    /* La tinta NO puede seguir siendo var(--text): el degradado es oscuro en las DOS
       paletas y en los DOS temas, así que en claro el botón quedaba con letra oscura
       sobre fondo oscuro (medido en HEAD sobre la foto: 1,62:1). Va la misma tinta clara
       que ya usan el título y el renglón de este bloque. */
    color: #F0F2F5;
}

/* FILA 2 — título y renglón a la izquierda, botón de estado a la derecha */
.bt-menu-r2 {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    min-width: 0;
}

.bt-menu-tx {
    flex: 1 1 auto;
    min-width: 0;
}

.bt-menu-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bt-menu-cta {
    flex: none;
    border: none;
    border-radius: 14px;
    padding: 10px 14px;
    font-family: var(--font-titulo);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    background: var(--terra, var(--orange));
    color: var(--vivo-ink, #1a1a1a);
    box-shadow: var(--inset-vivo, none);
}

.bt-menu-cta--ok,
.bt-menu-cta--off {
    cursor: default;
}

/* ---- P3 · la piel (solo tierra oscuro) ---- */
:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-r1 .bt-lab {
    color: rgba(240, 242, 245, .8);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    opacity: 1;
    align-self: center;
    padding: 3px 7px;
    border-radius: 8px;
    /* BENTO 8 · P2 — el brightness(.4) de t5d oscurecía la superficie propia del rótulo
       para ganarle a la foto (2,45 → 8,12:1). Sin foto, la misma pastilla se consigue con
       un negro al 35%: sólido, sin desenfoque y con el mismo peso visual. */
    background: rgba(0, 0, 0, .35);
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-t,
:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-sub {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-t {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    padding-right: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-sub {
    font-size: 12px;
    font-weight: 700;
    color: rgba(240, 242, 245, .85);
    padding-right: 0;
}

/* "Producción al día ✓": deshabilitado, en la familia salvia */
:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-cta--ok {
    /* BENTO 8 · P2 — este es el único de los cuatro que NO es "un botón oscuro": es de la
       familia SALVIA ("listo"), y esa identidad se conserva. En vez de inventarle un tono,
       se apila el MISMO --salvia-suave sobre el MISMO sólido de los otros botones, así que
       el token sigue vivo y el resultado es opaco: el velo salvia sobre #1B1E16. */
    background: linear-gradient(var(--salvia-suave), var(--salvia-suave)), #1B1E16;
    border: 1px solid var(--salvia-borde);
    color: #CFE3CF;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .bt-menu-cta--off {
    /* BENTO 8 · P2 — el "equivalente" del botón de editar: misma receta, mismo sólido. */
    background: #1B1E16;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #F0F2F5;
    box-shadow: none;
}

/* RETOQUE t5c — acá vivían la anulación del velo en el estado GENERADO y los dos scrims
   por fila que lo compensaban. Los tres murieron: ahora NINGÚN estado tiene velo completo
   y la única protección es la franja de abajo (arriba, junto a la foto), igual para los
   tres. El rótulo se defiende con su text-shadow reforzado. */

/* ============================================================
   🍱 BENTO · TANDA 5 — P4: LA SEMANA DE PRODUCCIÓN, SUELTA
   ============================================================
   Decisión de Facu con la foto en mano (5-sep): PISA la unificación de BENTO t2 · B1.
   El contenedor que encerraba los 7 días desaparece y cada día recupera su cajita.
   (estructura, las dos paletas)

   Solo la tira de PRODUCCIÓN: la semana del planificador del Menú (t3 · 1.2) es un
   componente APARTE (.md-week / .md-day; ésta es .prodhead-sem / .ph-dia), así que no
   hay un molde compartido que bifurcar. Queda como está. */
.prodhead-sem {
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
}

.ph-dia {
    border: 1px solid var(--card-border);
    background: var(--card);
    border-radius: 14px;
    padding: 8px 2px;
}

/* ---- P4 · la piel (solo tierra oscuro): cada cajita con su relieve ---- */
:root[data-theme="dark"][data-paleta="tierra"] .prodhead-sem {
    border: none;
    background: none;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .ph-dia {
    box-shadow: none;
}

/* El día activo: cajita propia, en lima pleno */
:root[data-theme="dark"][data-paleta="tierra"] .ph-dia.act {
    background: var(--ph-vivo);
    border-color: transparent;
    box-shadow: none;
}

/* ============================================================
   🍱 BENTO · TANDA 5 — P5: EL ✓ Y LA ✕ DEL PASE, ACLARADOS
   ============================================================
   Los dos que la t4 dejó anotados bajo la vara: el tilde del casillero (4,35:1) y la ✕
   de archivar (4,11:1). Suben manteniendo su familia — el ✓ en la del casillero hecho,
   la ✕ neutra. Nada más del Pase se toca. */
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item.hecho .pase-check {
    /* El ✓ era var(--claro) sobre #5C7046: 4,35. Con el hueso más claro llega a 5,1. */
    color: #F4F2EA;
}

:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-item-x {
    /* La ✕ era rgba(27,30,22,.62) sobre su hundido: 4,11. Con .78 llega a 5,7. */
    color: rgba(27, 30, 22, .78);
}

/* ============================================================
   🍱 RETOQUE t5d — AIRE EN MOBILE (pedido de Facu)
   ============================================================
   (estructura, las dos paletas) Solo en una columna: en desktop no cambia nada. */
@media (max-width: 640px) {
    /* El widget Menú del día respira: con el título en dos renglones quedaba apretado. */
    .hub-bt[data-w="menu"] {
        min-height: 180px;
    }

    /* Y si el título ocupa dos líneas, el botón de estado BAJA a su propia línea en vez
       de pelear el ancho: nada encimado. */
    .bt-menu-r2 {
        flex-wrap: wrap;
        /* Con wrap, align-items:flex-end alinea cada item al fondo de SU línea y las dos
           líneas se reparten el alto sobrante (align-content:stretch): eso abría un hueco
           de ~120px entre el renglón y el botón, y dejaba el texto en el 37% del bloque,
           fuera de la franja. Con flex-end las dos líneas quedan juntas y al pie. */
        align-content: flex-end;
    }

    .bt-menu-tx {
        flex: 1 1 100%;
    }

    .bt-menu-cta {
        margin-left: auto;
        margin-top: 10px;
    }

    /* BENTO 8 · P1 — acá vivía el override de la FRANJA para una columna (la extendía al
       60% con su parada al 42%, porque con el botón bajando a su línea el renglón quedaba
       afuera del scrim). Murió con la foto: el degradado es oscuro y parejo en todo el
       bloque, así que no hay ninguna zona clara de la que defenderse. El min-height de
       180px y el wrap del botón, que son de layout, quedan intactos arriba. */

    /* El checklist: más aire adentro y entre renglones. */
    .hub-bt[data-w="tareas"] {
        padding: 20px;
    }

    .bt-tk-list {
        gap: 10px;
        /* El CTA conserva su margin-top:auto (se pega al fondo si sobra alto); este
           margen le pone el PISO de 14px respecto del último renglón. */
        margin-bottom: 14px;
    }
}

/* ============================================================
   🍱 BENTO · TANDA 6 — P1: EL PANEL Y LA BARRA DE TURNO, VIVOS
   ============================================================
   (estructura, las dos paletas) El panel pasa a TRES columnas: el % a la izquierda,
   la barra y los stats al medio, los avisos a la derecha. Los datos son los mismos
   (prodResumenDelDia / tkResumenHoy / el dato de cubiertos de la barra del turno). */

/* ---- 1.1 · el estado del turno, en píldora ---- */
.hub-turno-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 99px;
    padding: 7px 14px;
    background: var(--terra-suave, var(--orange-light));
    border: 1px solid var(--terra-borde, var(--orange));
}

.hub-turno-chip b {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--terra, var(--orange));
}

/* Fuera de turno: familia neutra, sin glow. */
.hub-turno-chip:has(.hub-turno-off) {
    background: var(--relieve, var(--accent-soft));
    border-color: var(--border, var(--border-2));
}

.hub-turno-chip:has(.hub-turno-off) .hub-strip-dot {
    background: var(--text-2);
    box-shadow: none;
}

.hub-turno-chip b.hub-turno-off {
    color: var(--text-2);
}

/* ---- 1.2 · el panel en tres columnas ---- */
.hub-panel {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.hp-centro {
    flex: 1 1 260px;
    min-width: 0;
}

/* TANDA SIN ECOS · P1 — el PULSO: murió la columna del % (.hp-izq); los datos van
   arriba y la barra debajo, que es la misma gramática del widget de Producción
   (números → barra). */
.hp-bar {
    margin-top: 0;
}

.hp-datos {
    display: flex;
    align-items: baseline;
    gap: 22px;
    margin: 0 0 9px;
    flex-wrap: wrap;
}

.hp-chips {
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-left: auto;
}

/* ---- P1 · la piel (solo tierra oscuro) ---- */
/* La regla de t4·B3 (:root[dark][tierra] .hub-strip-item b) pesa más que la clase del
   chip: acá se le iguala la especificidad para que mande la píldora. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip:has(.hub-turno-off) {
    background: var(--relieve);
    border-color: var(--border);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip:has(.hub-turno-off) .hub-strip-dot {
    background: var(--text-2);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b.hub-turno-off {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #hub-hora {
    font-weight: 700;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #hub-cubiertos {
    color: var(--text-2);
}

/* EL PANEL PASA A HUESO (pisa la piel de vidrio de t4·B3).
   TANDA SIN ECOS · P1 — y baja a PULSO: sin el % gigante, más bajito (13/18) y
   con el radio de los bloques chicos. El mismo inset hueso. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-panel {
    background: var(--claro);
    color: var(--claro-ink);
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 13px 18px;
    box-shadow: none;
}

/* La barra, con el patrón §Barras: carril hundido sobre el hueso + relleno en
   píldora con su brillito. El relleno va #6E6722 (el lima de texto sobre hueso),
   también cuando está completa: el verde de "listo" lo dice el chip de avisos. */
:root[data-theme="dark"][data-paleta="tierra"] .hp-bar {
    height: 10px;
    border-radius: 99px;
    background: rgba(27, 30, 22, .14);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-bar-fill,
:root[data-theme="dark"][data-paleta="tierra"] .hp-bar-fill.full {
    background: #6E6722;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-dato-v {
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-dato-l {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5a5d52;
}

/* Los avisos: chip oscuro sobre el hueso. Mismos handlers y popovers. */
:root[data-theme="dark"][data-paleta="tierra"] .hp-chip {
    background: var(--claro-ink);
    border: none;
    color: var(--claro);
    border-radius: 99px;
    padding: 9px 15px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-chip.is-active {
    border: none;
}

/* Lo que está al día: píldora verde, no tocable */
:root[data-theme="dark"][data-paleta="tierra"] .hp-chip--ok {
    background: rgba(92, 112, 70, .2);
    border: 1px solid rgba(92, 112, 70, .35);
    color: #3E5236;
    box-shadow: none;
}


/* ============================================================================
   BENTO t6 · PIEZA 2 — la ficha de receta del cocinero, vestida.
   TODO scopeado a #modal-receta-cocina: `.rec-ing-table`, `.rec-proc-list`,
   `.rec-sec-tt` y `.rec-yield` los comparten la comanda de Produccion y la
   ficha rapida del admin, que esta pieza NO toca. Cero mecanica: el stepper,
   el recalculo, el xN y los datos de merma quedan tal cual.
   ============================================================================ */

/* El envoltorio del stepper no existe para el layout salvo bajo tierra. */
.scale-step { display: contents; }

/* --- 1 · cabecera --- */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-back {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    background: var(--card);
    border: 1px solid var(--card-border);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-tt {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-tt h2 {
    font-family: var(--font-titulo);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Los tags, en fila debajo del titulo. El COLOR ya viene tipificado (familia
   salvia para S.R.E): aca solo se les da la forma. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .tag-cocina {
    margin-top: 0;
    font-size: 9.5px;
    font-weight: 800;
    border-radius: 99px;
    padding: 4px 10px;
}

/* --- 2 · la franja PRODUCIS, en HUESO --- */
/* column-reverse: la franja arriba y el rotulo INGREDIENTES abajo, pegado a su
   tabla, sin mover una linea del html. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-scale-row {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
    flex-wrap: nowrap;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-box {
    background: var(--claro);
    color: var(--claro-ink);
    border: none;
    border-radius: 20px;
    padding: 12px 16px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-lbl {
    font-size: 10.5px;
    letter-spacing: .08em;
    font-weight: 800;
    color: rgba(27, 30, 22, .6);
    margin-right: auto;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-step {
    display: flex;
    align-items: center;
    background: rgba(27, 30, 22, .08);
    border: 1px solid rgba(27, 30, 22, .15);
    border-radius: 14px;
    padding: 3px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .step-btn {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: none;
    border: none;
    font-size: 17px;
    font-weight: 800;
    /* El spec pide rgba(27,30,22,.6), igual que el rotulo. Sobre el fondo del stepper eso
       mide 3,89:1 y estos SI son controles que se tocan (venian de 12,88 en la version de
       hoy): unico desvio, y es el lever del propio color — la misma tinta, mas opaca. */
    color: rgba(27, 30, 22, .8);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-input {
    font-family: var(--font-titulo);
    font-size: 20px;
    font-weight: 800;
    min-width: 46px;
    width: 46px;
    text-align: center;
    color: var(--claro-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-unit {
    font-family: var(--font-titulo);
    font-size: 13px;
    font-weight: 800;
    color: rgba(27, 30, 22, .6);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-batch {
    background: var(--terra);
    color: var(--vivo-ink);
    font-size: 10.5px;
    font-weight: 800;
    border-radius: 99px;
    padding: 5px 10px;
    box-shadow: none;
}

/* --- 3 · INGREDIENTES --- */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-sec-tt {
    font-size: 10.5px;
    letter-spacing: .09em;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-ing-table {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 6px 16px;
    box-shadow: none;
    border-collapse: separate;
    border-spacing: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-ing-table tr {
    border-bottom: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-ing-table td {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    padding: 12px 0;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-ing-table tr:last-child td {
    border-bottom: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-nm {
    font-weight: 700;
    font-size: 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-corte-pill,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-sub-pill {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--terra);
    background: var(--terra-suave);
    border: 1px solid var(--terra-borde);
    border-radius: 99px;
    padding: 3px 9px;
    letter-spacing: .03em;
    text-transform: uppercase;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-crudo {
    font-size: 10.5px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-ing-table td.mrec-q {
    text-align: right;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-q-num {
    font-family: var(--font-titulo);
    font-size: 17px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-q-un {
    font-size: 10px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-limpia {
    display: block;
    font-size: 9px;
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-limpio-note {
    font-size: 10.5px;
    color: var(--text-2);
    font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, .06);
    padding-top: 10px;
    margin-top: 12px;
}

/* --- 4 · RECETA BASE (RINDE) --- */
/* BENTO 7 · P1 — el vidrio muere en la ficha: los tres recuadros van SÓLIDOS.
   La tarjeta de INGREDIENTES y la de PROCEDIMIENTO ya medían #171A1F / #252A31 (leen --card y
   --card-border, que la corrección de v257 dejó sólidos): verificado en el navegador, no se tocan.
   La banda RINDE era la única distinta — el hundido --relieve (#1F242B) — y pasa al MISMO sólido.
   Se pide por el token, no por el hex: --card ES #171A1F en esta piel. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-yield {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 14px 18px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-yield-l {
    font-size: 10.5px;
    letter-spacing: .08em;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-yield-v {
    font-family: var(--font-titulo);
    font-size: 19px;
    font-weight: 800;
    color: var(--terra);
}

/* --- 5 · PROCEDIMIENTO --- */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-proc-list {
    background: var(--card);
    border: 1px solid var(--card-border);
    border-radius: 24px;
    padding: 16px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-empty {
    padding: 0;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-2);
}


/* ============================================================================
   BENTO t6 · PIEZA 3 — "Vistas recientemente" pasa a TARJETAS CON FOTO.
   Pisa el bloque de dos columnas de t5·P2 (sus reglas se BORRARON, no se
   taparon). Solo en la PANTALLA de Biblioteca (.pub-rec-lista): el widget del
   HUB (#hub-recientes) comparte el mismo render y queda EXACTAMENTE igual.
   La grilla y la tarjeta son ESTRUCTURA: van en las dos paletas. Sin el switch
   `--card` y `--border` son los solidos de siempre; bajo tierra, vidrio.
   ============================================================================ */

#pub-recientes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* Grid de 2 columnas x 3 filas: la foto arriba, el cuerpo, y la fila del pie
   con el tag a la izquierda y el › a la derecha. Un `flex-direction: column`
   no podia dejar el ::after al lado del tag, y el html no se toca. */
.pub-rec-lista .hub-recent {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "foto foto" "tx tx" "tag chev";
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--card);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: transform .15s, background .15s, border-color .15s;
}

.pub-rec-lista .hub-recent:hover,
.pub-rec-lista .hub-recent:active {
    transform: translateY(-2px);
}

.pub-rec-lista .hub-recent-th {
    grid-area: foto;
    width: 100%;
    height: 84px;
    border: none;
    border-radius: 0;
    background: linear-gradient(160deg, #2A3328, #1C2419);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 33px;
}

.pub-rec-lista .hub-recent-tx {
    grid-area: tx;
    min-width: 0;
    padding: 12px 14px 0;
}

.pub-rec-lista .hub-recent-n {
    font-family: var(--font-titulo);
    font-size: 13.5px;
    font-weight: 800;
}

.pub-rec-lista .hub-recent-m {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-2);
}

.pub-rec-lista .hub-recent-t {
    grid-area: tag;
    justify-self: start;
    margin: 9px 0 12px 14px;
}

.pub-rec-lista .hub-recent::after {
    content: '\203A';
    grid-area: chev;
    justify-self: end;
    margin: 9px 14px 12px 0;
    color: var(--text-3);
    font-size: 17px;
    line-height: 1;
}

/* --- piel tierra --- */
:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent {
    box-shadow: none;
    border-color: var(--card-border);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent-th {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent-n {
    color: var(--text);
}

/* El tag: S·R·E familia salvia, R·G·E familia lima. El render marca el tipo en el texto. */
:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent-t {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 99px;
    padding: 4px 10px;
    background: var(--terra-suave);
    color: var(--terra);
    border: 1px solid var(--terra-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] .pub-rec-lista .hub-recent.es-sre .hub-recent-t {
    background: var(--salvia-suave);
    color: var(--salvia);
    border-color: var(--salvia-borde);
}

/* BENTO t6 · P4 — vitrina Stock: "vence 16/jun" pasa de --text-3 a --text-2.
   Scopeado, porque .bt-vm-v es la regla base de todas las vitrinas; y el :not()
   deja las dos filas vencidas con su coral (.bt-vm-v--mal). */
.bt-vm-stock .bt-vm-v:not(.bt-vm-v--mal) {
    color: var(--text-2);
}


/* ============================================================
   BENTO 7 · P2 — EL VIDRIO MUERE EN EL MODAL DE SECCIÓN
   Medido en el navegador: la tarjeta .rec-sq no tenía NINGÚN fondo
   (rgba(0,0,0,0)) — se veía a través de ella el modal de atrás, y lo único
   que la pintaba era el degradado blanco al 10% de .rec-sq-img. De ahí el
   "rectángulo vacío" de las que no tienen foto.
   Ahora la tarjeta va SÓLIDA, y el pie donde vive el nombre también: el
   nombre deja de apoyarse en el degradado de .rec-sq-shade y se lee sobre
   un fondo pleno. Por el token, que en esta piel ES #171A1F / #252A31.
   Solo el skin tierra oscuro; con el switch apagado no cambia nada.
   NO se toca .rec-sq-img ni .rec-sq-shade: ese es el camino de las fotos.
   ============================================================ */
:root[data-theme="dark"][data-paleta="tierra"] #modal-estacion .rec-sq {
    background: var(--card);
    border-color: var(--card-border);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-estacion .rec-sq-info {
    background: var(--card);
}


/* ============================================================
   BENTO 7 · P3 — EL EMOJI DE LA SECCIÓN (estructural: las DOS paletas)
   Solo se pinta cuando la tarjeta NO tiene foto — el render ni siquiera lo
   emite si hay foto —, así que no tapa ninguna imagen. Ocupa el área de la
   miniatura que YA existía (.rec-sq-img es inset:0): no mueve geometría.
   Sin z-index propio: queda por encima de .rec-sq-shade (va después en el DOM)
   y por debajo del nombre y del tag, que llevan z-index:2.
   ============================================================ */
.rec-sq-emoji {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
    pointer-events: none;
}

@media (max-width: 640px) {
    .rec-sq-emoji {
        font-size: 34px;
    }
}


/* ============================================================================
   BENTO 9 — EL RECETARIO ADMIN, VESTIDO AL LENGUAJE BENTO
   Todo cuelga de [data-theme="dark"][data-paleta="tierra"] Y de los cuatro
   ids de esta tanda. El scope NO es una precaución teórica: .btn-primary,
   .btn-ghost, .filter-pill, .search-wrap, .stat-card y .recipes-table las
   comparten Equipo, Ingredientes, Configuración y Presupuestos, que esta
   tanda NO toca. Mismo criterio que bento t6·P2 con #modal-receta-cocina.

   La esencia sellada por Facu (7-sep):
     1. misma línea del HUB bento (colores y materiales);
     2. PLANO donde va plano — una tarjeta de contenido es sólida, plana y de
        borde fino: nada de vidrio-3D curvo. El hueso y el lima se reservan
        para las estrellas;
     3. toda BARRA lleva profundidad: carril hundido + relleno en píldora.

   BENTO 10 (7-sep) PISA dos partes de este bloque, con sus mockups aprobados:
   el CABEZAL del recetario (§1–§4, que abajo son ya los de la tanda 10) y el
   ASISTENTE entero (el viejo P3 murió; su lugar lo ocupa "BENTO 10 · P2").
   Lo que queda TAL CUAL de la tanda 9: la tabla y sus chips (§5–§7), la ficha
   de receta admin (P2) y la papelera (P4). El §0 de acá sigue siendo la única
   fuente de materiales de las cuatro pantallas.
   ============================================================================ */

/* ── §0 · MATERIALES ─────────────────────────────────────────────────────
   Los cuatro roots comparten el mismo juego, así ninguna pieza inventa un
   valor propio. Todo sale de la paleta que ya existe salvo los dos limas de
   botón, que el mockup fija.                                              */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta,
:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera,
/* BENTO 11 suma sus cinco pantallas a la MISMA lista: los materiales se
   declaran una sola vez y nadie inventa un valor propio. */
:root[data-theme="dark"][data-paleta="tierra"] .sidebar,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion,
/* BENTO 12 suma el PANEL a la MISMA lista: los materiales se declaran una sola
   vez y ninguna pieza inventa un valor propio. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel,
/* BENTO 13 cierra la zona admin: presupuestos, equipo y el modal de invitar. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos,
:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo,
:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar,
/* REGISTRO BENTO suma el FLUJO DE ENTRADA a la MISMA lista: login, alta de
   restaurante (los 6 pasos), invitación, "Completá tu perfil" y sin acceso.
   Los materiales se declaran una sola vez y ninguna pieza inventa un valor. */
:root[data-theme="dark"][data-paleta="tierra"] #view-login,
:root[data-theme="dark"][data-paleta="tierra"] #view-onboarding,
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion,
:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup,
:root[data-theme="dark"][data-paleta="tierra"] #view-sin-acceso {
    --rc-sup: #171A1F;                        /* = var(--card): sólido plano   */
    --rc-borde: #252A31;                      /* = var(--card-border)          */
    --rc-hueso: var(--claro);                 /* #E8E6DC — la estrella         */
    --rc-hueso-ink: var(--claro-ink);         /* #1B1E16 — 13,49:1 sobre hueso */
    --rc-lima: #DBD455;                       /* lima viva de botón            */
    --rc-lima-ink: #1A1A10;                   /* 11,31:1 sobre el lima         */
    --rc-lima-tx: #C9C05A;                    /* = var(--terra): lima de TEXTO */
    --rc-lima-bg: rgba(201, 192, 90, .14);    /* fondo tenue de chip vivo      */
    --rc-salvia-tx: #8FA98F;                  /* = var(--salvia)               */
    --rc-salvia-bg: rgba(143, 169, 143, .16);
    /* BENTO 10 — EL MATERIAL HUNDIDO. Reemplaza al --rc-input de t9 (#14171B):
       el mockup del cabezal y el del asistente fijan el MISMO campo cavado para
       el buscador, los inputs, la tabla de ingredientes, el carril del toggle y
       los recuadros de carga. Un solo juego, un solo lugar. */
    --rc-hundido: #0D1014;
    --rc-hundido-bd: #1E232A;
    --rc-hundido-in: none;

    /* Los dos tonos que viven SOBRE el hueso: el separador de las celdas del
       panel de stats y el rótulo/renglón chico. El #5a5d52 es valor del mockup
       y mide 5,37:1 sobre el hueso. */
    --rc-hueso-sep: rgba(27, 30, 22, .14);
    --rc-hueso-sub: #5a5d52;

    /* BENTO 11 — EL MARCO, con nombre. Es la superficie de los cabezales y de
       los modales grandes: un paso por encima del lienzo. Su luz pintada
       también vive acá, así que el cabezal del recetario, el de ingredientes,
       la ficha y el modal de ingrediente no pueden discrepar. */
    --rc-marco: #12151A;
    --rc-marco-luz:
        radial-gradient(55% 90% at 88% 0%, rgba(201, 192, 90, .10), transparent 60%),
        radial-gradient(45% 80% at 4% 100%, rgba(143, 169, 143, .08), transparent 55%);
    /* El separador de las superficies OSCURAS (el del hueso es --rc-hueso-sep). */
    --rc-sep-luz: rgba(255, 255, 255, .06);
    --rc-sep: rgba(255, 255, 255, .05);       /* separador de filas            */
    --rc-hover: rgba(255, 255, 255, .03);     /* hover de fila                 */

    /* EL NÚMERO GRANDE SOBRE HUESO VA #6E6722, NO #8F862E.
       Medido por píxel: el #8F862E del mockup da 2,99:1 sobre el hueso — no
       llega ni a la vara de 3 del texto grande. Con #6E6722 da 4,63. Es el
       MISMO lever que bento t6·P4 ya aplicó en la vitrina de personal, y el
       propio mockup lista este valor como "lima texto chico sobre hueso o
       claro". La regla de contraste manda sobre el valor. */
    --rc-num-hueso: #6E6722;

    /* EL TENUE DEL MOCKUP (--tx-3, #5F6772) NO PUEDE LLEGAR A 4,5 EN NINGÚN
       FONDO: su luminancia deja el mejor caso posible —sobre negro puro— en
       3,67:1. El lever "ajustar por el lado del fondo" es matemáticamente
       imposible acá, así que el único que queda es el color del texto.
       Va --text-2 (5,10:1 sobre el hundido, 5,70 sobre la tarjeta). La
       jerarquía la sostienen el tamaño y el peso, que es lo que hace el
       propio mockup (10px/800 en mayúsculas). Mismo criterio que la tanda
       BENTO t4·A6. */
    --rc-tenue: var(--text-2);
    /* Y se aplica DE UNA, en el único lugar donde se define: dentro de estas
       cuatro pantallas --text-3 pasa a valer lo mismo que --text-2. Es una
       línea auditable en vez de enumerar las 28 clases que lo usan (rótulos,
       previews, hints, contadores, la tira de pasos, los sub del asistente…).
       Sus usos NO-texto en estas pantallas son thumbs de scrollbar y hovers
       de borde: relevados uno por uno, ninguno es un fondo detrás de texto. */
    --text-3: var(--text-2);

    /* §Barras — el patrón de profundidad, definido UNA vez */
    --rc-carril: #0F1216;                              /* un paso más oscuro que la superficie */
    --rc-carril-in: inset 0 1px 3px rgba(0, 0, 0, .4);
    --rc-relleno-in: none;  /* el brillito de arriba */
}

/* ── §1 · P1 · EL CABEZAL, UNA PIEZA CON LUZ ─────────────────────────────
   BENTO 10 · P1 (mockup "recetario-cabezal-3d", aprobado por Facu 7-sep).
   REEMPLAZA los §1–§4 de la tanda 9: el título, los botones, el toggle, el
   buscador, los filtros y las stats dejan de ser cuatro bloques sueltos y
   pasan a vivir DENTRO de un marco único con su lucecita. La tabla (§5) y sus
   chips (§6) quedan EXACTAMENTE como salieron de t9.

   La esencia: el 3D (hundido / realzado) es factor de diseño y vive en el
   cabezal y en los controles — hundido donde se escribe o se navega, realzado
   donde se elige. El contenido (la tabla) sigue PLANO.                     */
/* BENTO 11 suma el cabezal de INGREDIENTES a esta misma regla: es el mismo
   marco, con los mismos valores, definido en un solo lugar. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .rec-cabezal,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-cabezal {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 32px;
    padding: 26px 26px 22px;
    margin-bottom: 24px;
}

/* El aire de abajo lo pone el padding del marco. Sin esto, el margen de la
   fila de stats se SUMA al padding (un padding corta el colapso de márgenes)
   y quedan 46px muertos adentro; y afuera, la distancia del cabezal a la
   tabla sigue siendo la de siempre porque el marco se lleva esos 24px. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .rec-cabezal .stats-row,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-cabezal .stats-row {
    margin-bottom: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .admin-page-title,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .admin-page-title {
    font-weight: 800;
    letter-spacing: -.02em;
}

/* "+ Nueva Receta": el ÚNICO botón vivo de la cabecera. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 14px;
    padding: 10px 18px;
    font-weight: 800;
    box-shadow: none;
}

/* "Papelera": sólido plano, con el filo de luz de arriba. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .btn-ghost {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 14px;
    color: var(--text-2);
    box-shadow: none;
}

/* ── §2 · P1 · TOGGLE R.G.E / S.R.E (hundido + realzado) ─────────────────
   El carril se hunde y la pestaña elegida SALTA en hueso. El borde del carril
   no lo fija el mockup: va el mismo #1E232A de los campos hundidos, que es la
   familia del material (y así el carril conserva su 1px de siempre en vez de
   mover la geometría). */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tabs,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tabs {
    background: var(--rc-hundido);
    border-color: var(--rc-hundido-bd);
    border-radius: 99px;
    padding: 4px;
    box-shadow: none;
}

/* Radio 99 en la pestaña: el mockup no lo nombra, pero una pastilla de 8px
   adentro de un carril de 99 se ve rota. Es consecuencia del carril. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tab,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tab {
    border-radius: 99px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tab.active,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tab.active {
    background: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

/* Los contadores, chips: sobre el hueso el rgba(255,255,255,.2) de siempre
   quedaría invisible. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tab.active .tab-count,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tab.active .tab-count {
    background: var(--rc-hueso-ink);
    color: var(--rc-hueso);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tab:not(.active),
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tab:not(.active) {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .catalogo-tab:not(.active) .tab-count,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .catalogo-tab:not(.active) .tab-count {
    background: var(--rc-borde);
    color: var(--text-2);
}

/* ── §3 · P1 · BUSCADOR (hundido) Y FILTROS ─────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .search-wrap,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .search-wrap {
    background: var(--rc-hundido);
    border-color: var(--rc-hundido-bd);
    border-radius: 14px;
    box-shadow: var(--rc-hundido-in);
}

/* EL PLACEHOLDER NO VA EN #5F6772: sobre el hundido #0D1014 mide 3,33:1.
   Se aplica la cláusula del propio prompt (subir a --tx-2 y anotar): 6,23:1.
   Es además lo que ya hacía t9 con --rc-tenue, así que no se suma un literal
   nuevo al censo. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .search-wrap input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .search-wrap svg,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .search-wrap input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .search-wrap svg {
    color: var(--rc-tenue);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .filter-pill,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .filter-menu-pill {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .filter-pill.active,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .filter-menu-pill.active {
    background: var(--rc-lima);
    border-color: var(--rc-lima);
    color: var(--rc-lima-ink);
    font-weight: 800;
    box-shadow: none;
}

/* ── §4 · P1 · LAS STATS: de 4 tarjetas a UN PANEL HUESO (la estrella) ────
   La fila deja de ser cuatro tarjetas sueltas y pasa a ser un solo panel con
   4 celdas separadas por un filito. Es la única superficie clara del cabezal:
   ahí es donde la vista aterriza. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row {
    background: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    border-radius: 22px;
    padding: 14px 6px;
    gap: 0;
    flex-wrap: nowrap;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card {
    background: transparent;
    border: 0;
    border-left: 1px solid var(--rc-hueso-sep);
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    min-width: 0;
    padding: 2px 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card:first-child,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card:first-child {
    border-left: 0;
}

/* BENTO 11 · P0 — Facu probó la t10 y pidió los números un poco más grandes:
   26 → 30, y el hero 38 → 44. Solo eso. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-num,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-num {
    font-family: var(--font-titulo);
    font-size: 30px;
    font-weight: 800;
    color: var(--rc-hueso-ink);
}

/* La celda "Total" es el hero del panel. El número va #6E6722 y no el #8F862E
   de la familia: ése da 2,99:1 sobre el hueso (ni la vara de 3 del texto
   grande); con #6E6722, 4,63. Mismo lever que bento t6·P4. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card:first-child .stat-num,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card:first-child .stat-num {
    font-size: 44px;
    color: var(--rc-num-hueso);
}

/* La celda de aviso, sobre el hueso: el naranja de la paleta no se lee ahi, y
   este ladrillo es el valor que t11 ya habia elegido para este mismo aviso.
   Medido sobre el hueso: 6,09:1. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card.stat-warn .stat-num {
    color: #8a3a2a;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-label,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rc-hueso-sub);
}

/* EN CELULAR EL PANEL SE PARTE EN 2×2 — el mockup define escritorio, y ahí las
   4 celdas en una fila entran holgadas. En 390px NO: "CATEGORÍAS" a 10px/800 no
   baja de ~70px de ancho mínimo y las cuatro pedían 323px contra 304 de hueco,
   así que el panel desbordaba. En vez de achicar la letra del mockup, las celdas
   envuelven de a dos adentro del MISMO panel hueso y el filito acompaña: a la
   izquierda solo en la celda par, y arriba en las dos de abajo. El marco también
   afloja su padding, como afloja el de la app en ese ancho. */
@media (max-width: 640px) {
    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .rec-cabezal {
        padding: 18px 14px 16px;
        border-radius: 26px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row,
    :root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row {
        flex-wrap: wrap;
        padding: 10px 4px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card,
    :root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card {
        flex: 1 1 50%;
        padding: 8px 12px;
        border-left: 0;
    }

    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card:nth-child(even),
    :root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card:nth-child(even) {
        border-left: 1px solid var(--rc-hueso-sep);
    }

    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .stats-row .stat-card:nth-child(n+3),
    :root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .stats-row .stat-card:nth-child(n+3) {
        border-top: 1px solid var(--rc-hueso-sep);
    }
}

/* ── §5 · P1 · LA TABLA ──────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .recipes-table-wrap {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
    box-shadow: none;
}

/* Contenedor sólido = UN plano. La banda gris del encabezado sobraba: el
   rótulo ya se distingue por tamaño, peso y mayúsculas. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .recipes-table thead {
    background: transparent;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .recipes-table th {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--rc-tenue);
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .recipes-table td {
    border-bottom-color: var(--rc-sep);
}

@media (hover: hover) {
    :root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .recipes-table tbody tr:hover td {
        background: var(--rc-hover);
    }
}

/* ── §6 · P1 · LOS CHIPS DE LA TABLA ─────────────────────────────────── */
/* "MENÚ" → hueso chico. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .tag-menu {
    background: var(--rc-hueso);
    color: var(--rc-num-hueso);
    border-color: var(--rc-hueso);
}

/* Estación → gris de borde con tinta secundaria. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .tag-estacion {
    background: var(--rc-borde);
    color: var(--text-2);
}

/* Tipo (Producción / Despacho): conservan su lima, en versión legible. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .tag-tipo-production,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .tag-tipo-dispatch {
    background: var(--rc-lima-bg);
    color: var(--rc-lima-tx);
}

/* El food cost: sus verdes/rojos semánticos QUEDAN (medidos sobre el sólido
   nuevo: verde 6,07 · naranja 6,12 · rojo 4,56 — los tres pasan). El ÚNICO que
   no llegaba es el guión de "sin food cost", que el JS pinta inline con
   var(--text-3) y da 3,05. Se lo alcanza por el estilo inline —CSS puro, sin
   tocar una línea de JS— y solo a ése: los tres hex semánticos no matchean. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .td-foodcost span[style*="--text-3"] {
    color: var(--rc-tenue) !important;
}

/* ── §7 · P1 · VACÍO Y CARGA ─────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .empty-sub,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .loading-state p {
    color: var(--rc-tenue);
}


/* ============================================================================
   BENTO 9 · P2 — LA FICHA DE RECETA ADMIN (#modal-ficha-receta)
   Coherencia total con la ficha de cocina post-t7: sólido y PLANO.
   Scopeado a #modal-ficha-receta porque .rec-ing-table, .rec-yield,
   .rec-proc-list, .rec-sec-tt, .rec-empty y .tag-cocina los comparten la
   comanda de Producción y la ficha del cocinero (#modal-receta-cocina), que
   esta tanda NO toca.
   ============================================================================ */

/* ── §1 · CHIPS DE LA CABECERA ───────────────────────────────────────────
   Van SÓLIDOS a propósito: viven sobre el hero, que puede ser una FOTO.
   Un chip translúcido ahí queda a merced de lo que haya detrás — es el mismo
   motivo por el que .rec-hero-tt .tag-menu ya tenía su propio override. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-hero-tt .tag-cocina.tag-rge {
    background: #1B231B;
    color: var(--rc-salvia-tx);          /* 6,32:1 — a prueba de foto */
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-hero-tt .tag-cocina.tag-sre {
    background: #2A2718;
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-hero-tt .tag-menu {
    background: var(--rc-hueso);
    color: var(--rc-num-hueso);          /* 4,63:1 */
    border-color: var(--rc-hueso);
}

/* ── §2 · LAS 4 TARJETAS DE COSTOS ───────────────────────────────────────
   Ya nacían sobre var(--card)/var(--card-border), que bajo esta piel SON
   #171A1F y #252A31: planas y sólidas sin tocarlas. Acá solo la tipografía
   y el tenue de las etiquetas. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-costo-lbl,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-comp-tt,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-sub-tag,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-tiempo-real,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-ing-table td:nth-child(3) {
    color: var(--rc-tenue);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-costo-val {
    font-family: var(--font-titulo);
    font-weight: 800;
}

/* El guión de "sin food cost": el JS lo pinta inline con var(--text-3) (3,05).
   Mismo caso —y misma solución— que en la tabla de P1: se lo alcanza por el
   estilo inline, sin tocar JS, y solo a él. Los tres hex semánticos del
   semáforo no matchean y quedan como están. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-costo-val[style*="--text-3"] {
    color: var(--rc-tenue) !important;
}

/* El renglón de tiempo real trae su propio tenue adentro (.tr-muted). */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .tr-muted {
    color: var(--rc-tenue);
}

/* ── §3 · §BARRAS · LA DE FOOD COST ──────────────────────────────────────
   El carril ES el gradiente semántico verde→naranja→rojo (los tres segmentos
   lo tapan entero), así que la profundidad se pinta ENCIMA, con una capa
   propia. Va como ::after —CSS puro, sin tocar el html— y con pointer-events
   apagados para no comerse ningún toque. La agujita del objetivo queda. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fc-meter-bar {
    background: var(--rc-carril);
    border-radius: 999px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fc-meter-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 999px;
    box-shadow: var(--rc-carril-in);
    pointer-events: none;
}

/* ── §4 · §BARRAS · LAS DE COMPOSICIÓN DEL COSTO ─────────────────────────
   Carril hundido de verdad (el de siempre leía var(--card): el MISMO color
   del modal, así que no se veía) y relleno en píldora lima con su brillito. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-comp-bar {
    background: var(--rc-carril);
    border-radius: 999px;
    box-shadow: var(--rc-carril-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-comp-fill {
    background: var(--rc-lima-tx);
    border-radius: 999px;
    box-shadow: var(--rc-relleno-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-comp-head {
    color: var(--rc-tenue);
}

/* ── §5 · INGREDIENTES, RENDIMIENTO Y PROCEDIMIENTO ──────────────────────
   La lista ya es sólida como en cocina (t7). El RENDIMIENTO BASE y las
   tarjetas del procedimiento venían del hundido var(--accent-soft): pasan al
   sólido plano de la casa. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-ing-table tr {
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-yield {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-yield-v {
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-proc-card {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
}

/* "Sin procedimiento cargado." / "Sin ingredientes cargados." */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .rec-empty {
    color: var(--rc-tenue);
    font-style: italic;
}

/* ── §6 · LOS TRES BOTONES ───────────────────────────────────────────────
   Duplicar y Archivar ya eran var(--card)/var(--card-border) = el sólido
   plano. Editar conserva su lima y cambia la TINTA: el #fff de siempre daba
   1,88:1 sobre el lima — es la deuda que la tanda LIMA dejó anotada
   ("--vivo-ink") y que acá se salda. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ficha-receta .fr-act-edit {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    font-weight: 700;
}


/* ============================================================================
   BENTO 10 · P2 — EL ASISTENTE NUEVA RECETA / EDITAR RECETA (#modal-receta)
   Mockup "nueva-receta-bento", aprobado por Facu (7-sep). REEMPLAZA entero el
   P3 de la tanda 9: mismos materiales, ahora con el 3D donde va (progreso,
   numeritos, campos y casilleros) y PLANO donde va plano (las tarjetas de paso
   y las tarjetitas informativas del paso 04).

   Scopeado a #modal-receta porque .accordion-step, .form-group, .btn-primary,
   .input-app, .nivel-btn, .est-coc-chip, .costo-kpi y .btn-nav viven en media
   app. Textos, handlers, orden de pasos y lógica de la IA: intocables — esta
   pieza es 100% CSS.
   ============================================================================ */

/* ── §1 · EL MODAL ───────────────────────────────────────────────────────
   Fondo propio (#12151A, un paso por encima del lienzo) con UNA luz arriba a
   la derecha. Le gana por id a la luz genérica de los modales grandes de la
   tanda "luz en el modal": el asistente tiene la suya, más chica y más tenue. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .modal-box {
    background-color: #12151A;
    background-image:
        radial-gradient(50% 70% at 92% 0%, rgba(201, 192, 90, .08), transparent 60%);
    border-color: var(--rc-borde);
    border-radius: 32px;
}

/* Las dos bandas de chrome (la del progreso y la del pie) venían de
   var(--accent-soft) = #1F242B, que con el modal en #12151A y los pasos en
   #171A1F quedaba como lo MÁS claro de la pantalla: justo al revés. Se apoyan
   sobre la superficie del modal. (Salda la duda 3 de la tanda 9.) */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-progress-track,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-acordeon-footer {
    background: transparent;
    border-color: var(--rc-borde);
}

/* ── §2 · LA TIRA DE PROGRESO (hundida) ──────────────────────────────────
   Carril hundido por segmento; el relleno, píldora con su brillito de arriba.
   La tira no tiene un hijo "relleno": la barra ENTERA cambia de color, así que
   el relleno se pinta sobre la misma pieza. El lima es el paso EN CURSO y el
   salvia los COMPLETOS — las dos familias de siempre. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-bar {
    height: 8px;
    border-radius: 99px;
    background: var(--rc-hundido);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-wrap.active .receta-pill-bar {
    background: var(--rc-lima-tx);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-wrap.complete .receta-pill-bar {
    background: var(--rc-salvia-tx);
    box-shadow: none;
}

/* Las etiquetas: 9px/800. El tenue del mockup (#5F6772) da 3,20:1 sobre el
   modal — se aplica la cláusula del propio prompt y va --tx-2 (5,98). Ya era
   así desde t9, que remapea --text-3 a --text-2 dentro de estas pantallas. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-meta {
    font-size: 9px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-label {
    font-size: 9px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-pill-wrap.active .receta-pill-meta {
    color: var(--rc-lima-tx);
}

/* ── §3 · LAS TARJETAS DE PASO (PLANAS) ──────────────────────────────────
   Al paso ABIERTO no lo distingue nada más que su borde y su sombra: ni fondo
   distinto, ni curvas. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.active,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete.active {
    background: var(--rc-sup);
    border-radius: 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step {
    border-color: var(--rc-borde);
    box-shadow: none;
}

/* El paso COMPLETO pero cerrado conserva su señal salvia de t9 (el chip dice
   lo mismo, pero el borde ayuda de reojo). Abierto manda el #3a3f2a. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete {
    border-color: rgba(143, 169, 143, .28);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.active,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete.active {
    border-color: #3a3f2a;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .acc-content-inner {
    border-top-color: var(--rc-sep);
}

/* ── §4 · LOS NUMERITOS 01–04 (hundidos; el abierto, realzado) ─────────── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .acc-step-num {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--rc-borde);
    border-color: var(--rc-borde);
    color: var(--text-2);
    font-family: var(--font-titulo);
    font-size: 14px;
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.active .acc-step-num {
    background: var(--rc-lima);
    border-color: var(--rc-lima);
    color: var(--rc-lima-ink);
    box-shadow: none;
}

/* El paso COMPLETO sigue mostrando su tilde en vez del número: hay que
   conservar la tinta transparente que lo esconde, o el número y el tilde se
   pisan. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete .acc-step-num {
    color: transparent;
}

/* Y el tilde de un paso completo Y abierto va en la tinta del lima: el salvia
   sobre el lima da 1,65:1 — invisible. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete.active .acc-step-num::after {
    border-color: var(--rc-lima-ink);
}

/* ── §5 · LOS CHIPS DE ESTADO ────────────────────────────────────────────
   EN CURSO → lima · OPCIONAL y PENDIENTE → gris de borde · COMPLETO → salvia.
   Medidos sobre la tarjeta plana: 7,01 · 4,72 · 5,21. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .acc-step-tag {
    font-size: 9.5px;
    font-weight: 800;
    border-radius: 99px;
    background: var(--rc-borde);
    border-color: var(--rc-borde);
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.active .acc-step-tag {
    background: var(--rc-lima-bg);
    border-color: rgba(201, 192, 90, .35);
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .accordion-step.complete .acc-step-tag {
    background: var(--rc-salvia-bg);
    border-color: rgba(143, 169, 143, .3);
    color: var(--rc-salvia-tx);
}

/* ── §6 · ADENTRO DEL PASO: RÓTULOS Y CAMPOS (hundidos) ──────────────────
   Todo lo que se escribe se hunde: inputs, selects, textareas, los campos de
   la tabla de ingredientes y los dos recuadros de carga (fotos y video). */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group label {
    font-size: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group input,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group select,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group textarea,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .input-app,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .cs-trigger,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .te-field,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ing-nuevo-row input,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ing-nuevo-row select {
    background: var(--rc-hundido);
    border-color: var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group input,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group select,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group textarea,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .input-app,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .cs-trigger {
    border-radius: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group input:focus,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group select:focus,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .form-group textarea:focus,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .input-app:focus,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ing-nuevo-row input:focus,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ing-nuevo-row select:focus {
    background: var(--rc-hundido);
    border-color: var(--rc-lima-tx);
}

/* Misma cláusula del prompt que en el buscador: el #5F6772 sobre el hundido
   da 3,33:1, así que el placeholder va --tx-2 (6,23). */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta textarea::placeholder {
    color: var(--rc-tenue);
}

/* Los dos recuadros de carga (galería y video) y la baldosa de agregar foto:
   son zonas donde se SUELTA algo, así que se hunden como un campo. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-galeria-wrap,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-video-wrap,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .galeria-add {
    background: var(--rc-hundido);
    border-color: var(--rc-hundido-bd);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-galeria-wrap,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .receta-video-wrap {
    box-shadow: var(--rc-hundido-in);
}

/* ── §7 · EL SELECTOR R.G.E / SUBRECETA ─────────────────────────────────
   La elegida SALTA en hueso. "Sin borde" se hace con el borde del color de la
   tarjeta: así no se mueven los 2px y la fila no salta al elegir. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn {
    background: #12151A;
    border-color: var(--rc-borde);
    border-radius: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-tag {
    font-size: 9px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-rge.active,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-sre.active {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-rge.active .nivel-btn-tag,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-sre.active .nivel-btn-tag {
    color: var(--rc-num-hueso);
}

/* El nombre y el renglón chico de la elegida: sobre el hueso, la tinta clara
   de siempre daría 1,05 y 2,45:1. Van la tinta y el sub del hueso. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-rge.active .nivel-btn-label,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-sre.active .nivel-btn-label {
    color: var(--rc-hueso-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-rge.active .nivel-btn-sub,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .nivel-btn-sre.active .nivel-btn-sub {
    color: var(--rc-hueso-sub);
}

/* ── §8 · LAS PÍLDORAS DE ESTACIÓN ─────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .est-coc-chip {
    background: #12151A;
    border-color: var(--rc-borde);
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .est-coc-chip.active {
    background: var(--rc-lima);
    border-color: var(--rc-lima);
    color: var(--rc-lima-ink);
    font-weight: 800;
    box-shadow: none;
}

/* ── §9 · LOS CASILLEROS ─────────────────────────────────────────────────
   El mockup fija los DOS estados con su fondo, su borde y su radio 6, y eso
   un checkbox nativo no lo sabe hacer: acá SÍ va appearance:none (a diferencia
   de la papelera de t9, donde el mockup no pedía forma). Sigue siendo un
   <input type=checkbox> de verdad —el label lo tildea igual y el teclado
   también—; lo único que cambia es cómo se pinta, y se le devuelve su anillo
   de foco. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .es-menu-toggle input[type="checkbox"],
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .sre-vende-toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    /* box-sizing + padding 0: sin esto, el relleno que el navegador le pone a un
       <input> deja la caja en 26x22 y no en los 20x20 del mockup. */
    box-sizing: border-box;
    padding: 0;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--rc-borde);
    border: 1px solid #2E3540;
    position: relative;
    transition: background .15s, border-color .15s;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .es-menu-toggle input[type="checkbox"]:checked,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .sre-vende-toggle input[type="checkbox"]:checked {
    background: var(--rc-lima);
    border-color: var(--rc-lima);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .es-menu-toggle input[type="checkbox"]:checked::after,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .sre-vende-toggle input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: 2px solid var(--rc-lima-ink);
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .es-menu-toggle input[type="checkbox"]:focus-visible,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .sre-vende-toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--rc-lima-tx);
    outline-offset: 2px;
}

/* ── §10 · CONTINUAR, AGREGAR Y LOS BOTONES DE IA ─────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-next-step {
    background: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    border-radius: 12px;
    font-weight: 800;
    box-shadow: none;
}

/* El botoncito de la tabla de ingredientes: lima chico. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-add-row,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-add-row:hover {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    font-weight: 800;
}

/* Ordenar / Resumir / Detallar / Estandarizar: píldoras inactivas estándar,
   las mismas que las de estación. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ia-modo-btn {
    background: #12151A;
    border-color: var(--rc-borde);
    border-radius: 99px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .ia-modo-btn.active {
    background: var(--rc-lima-bg);
    border-color: rgba(201, 192, 90, .35);
    color: var(--rc-lima-tx);
}

/* ── §11 · EL PASO 04: LAS TARJETITAS INFORMATIVAS, PLANAS ─────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .costo-kpi,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .costo-kpi-fc {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
}

/* La de FOOD COST traía tres verdes escritos a mano (#0F6E56 y #1D9E75)
   pensados para el tema CLARO: en oscuro la etiqueta daba 2,30:1. Va la
   familia SALVIA de la casa — el semáforo no cambia de significado, cambia de
   tono para poder leerse. Sobre el plano nuevo mide 6,84:1. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .costo-kpi-fc .costo-kpi-label,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .costo-kpi-fc .costo-kpi-valor,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .costo-kpi-fc .costo-kpi-sub {
    color: var(--rc-salvia-tx);
}

/* ── §12 · EL PIE: FLECHAS Y GUARDAR ─────────────────────────────────────
   Las flechas van sólidas con borde claro y la flecha en la tinta principal:
   que se VEAN (no repetir el bug de las flechitas invisibles de Tareas). */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-nav {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--rc-sup);
    border-color: #2E3540;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-nav:hover:not(:disabled) {
    background: var(--rc-borde);
    color: var(--text);
}

/* "Guardar Receta" / "Guardar Cambios" */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

/* ============================================================================
   BENTO 9 · P4 — LA PAPELERA (#modal-papelera)
   Sobria y sólida, con los mismos criterios de la tabla de P1.
   ============================================================================ */

:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .recipes-table-wrap {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .recipes-table thead {
    background: transparent;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .recipes-table th {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--rc-tenue);
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .recipes-table td {
    border-bottom-color: var(--rc-sep);
}

@media (hover: hover) {
    :root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .recipes-table tbody tr:hover td {
        background: var(--rc-hover);
    }
}

/* Los casilleros: tildado LIMA con la tilde en tinta oscura.
   Va por `accent-color`, que es LA propiedad para esto y no toca el control.
   NO se usa appearance:none: reimplementar un checkbox nativo cambiaría su
   geometría y su accesibilidad por un cuadrado dibujado a mano. El cuadrado
   SIN tildar lo pinta el sistema, y `color-scheme: dark` es lo que le dice que
   lo pinte oscuro — el mismo recurso que la app ya usa en .presu-ficha input. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera input[type="checkbox"] {
    accent-color: var(--rc-lima);
    color-scheme: dark;
}

/* "Restaurar": sólido plano. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .btn-ghost {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 14px;
}

/* "Eliminar definitivo" conserva su rol destructivo y CAMBIA DE TONO: el --red
   de la paleta (#C86A80, un borgoña ACLARADO pensado para leerse como TEXTO)
   con letras blancas encima daba 3,60:1. Pasa al --borg PLENO (#8C3247), que
   la propia paleta declara "disponible para quien necesite el bordó pleno":
   7,88:1. Es el lever "por el lado del fondo" que pide el prompt, y sin
   inventar un color nuevo. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-papelera .btn-danger {
    background: var(--borg);
    border-radius: 14px;
}


/* ============================================================================
   BENTO 11 — SIDEBAR + INGREDIENTES + CONFIGURACIÓN
   Mockup "admin-ingredientes-sidebar-config", aprobado por Facu (7-sep): cada
   valor de acá sale de ahí. Sigue la MISMA gramática sellada en la t10:
     · HUNDIDO   → donde se escribe o se navega
     · LIMA      → lo vivo / activo
     · HUESO     → lo elegido / la estrella
     · PLANO     → contenido (#171A1F sobre borde #252A31)
     · MARCO     → cabezales y modales grandes (#12151A + luz pintada)
   El 3D es factor de diseño, no decoración.

   Los materiales NO se redefinen: salen del §0 de la tanda 9, que arriba ya
   suma a su lista los cinco scopes nuevos (sidebar, #tab-ingredientes,
   #ing-detalle, #modal-ingrediente y #tab-configuracion). Un solo lugar.

   Scope: [data-theme="dark"][data-paleta="tierra"] + esos ids. NO es una
   precaución teórica: .btn-primary, .btn-ghost, .form-group, .search-wrap,
   .catalogo-tabs, .modal-box, .costo-card y .det-section las comparten media
   app — Recetario, Equipo, Presupuestos, Producción y la cocina, que esta
   tanda NO toca.
   ============================================================================ */

/* ── P1 · EL MENÚ LATERAL (vale para TODAS las pantallas) ────────────────
   El sidebar es un MARCO angosto: la misma superficie de los cabezales, con
   una luz finita arriba en vez de las dos de los marcos grandes. */
:root[data-theme="dark"][data-paleta="tierra"] .sidebar {
    background-color: var(--rc-marco);
    background-image: radial-gradient(70% 30% at 50% 0%, rgba(201, 192, 90, .07), transparent 70%);
    border-right-color: var(--rc-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar-tenant {
    border-bottom-color: var(--rc-sep-luz);
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar-bottom {
    border-top-color: var(--rc-sep-luz);
}

/* Los ítems son píldoras. El icono baja de 18 a 16px por CSS: el width/height
   del <svg> es un atributo de presentación y la hoja le gana sin tocar el html. */
:root[data-theme="dark"][data-paleta="tierra"] .sidebar .nav-link {
    border-radius: 99px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar .nav-link svg {
    width: 16px;
    height: 16px;
}

/* La sección donde estás parado es lo ELEGIDO: salta en hueso. */
:root[data-theme="dark"][data-paleta="tierra"] .sidebar .nav-link.active {
    background: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar .user-avatar,
:root[data-theme="dark"][data-paleta="tierra"] .sidebar .user-avatar-initials {
    border-color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar .user-name {
    font-size: 12.5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .sidebar .sidebar-tenant-small {
    font-size: 10.5px;
    color: var(--text-2);
}

/* ── P2 · INGREDIENTES ───────────────────────────────────────────────────
   El cabezal es el MARCO —el mismo de la t10, declarado allá con los dos
   scopes— y acá va solo lo propio de esta pantalla. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .admin-page-title {
    font-size: 27px;
}

/* Los dos botones de ícono del encabezado y el de filtros del buscador. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn {
    width: 38px;
    height: 38px;
    align-self: center;
    border-radius: 12px;
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    color: var(--text-2);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn svg {
    width: 17px;
    height: 17px;
}

/* EL "+" SIGUE SIENDO SOLO UN ÍCONO — el prompt manda no inventarle texto —
   pero pasa a LIMA. Lleva sus colores en un estilo INLINE (var(--btn-bg)), que
   le gana a cualquier regla: se lo alcanza por ese mismo atributo, que es único
   en la pantalla. Mismo recurso que t9 usó con el guión del food cost. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn[style*="--btn-bg"] {
    background: var(--rc-lima) !important;
    border-color: var(--rc-lima) !important;
    color: var(--rc-lima-ink) !important;
    box-shadow: none;
}

/* BENTO 13 · P5.1 — la linea de resumen YA tiene celdas (renderIngStats las
   emite), asi que el panel HUESO del cabezal la toma sola: la unica regla que
   hace falta es sumar #tab-ingredientes a las listas de selectores de §4, mas
   abajo. Muere la nota de t11 que decia que no se podia. */

/* La lista: contenido, o sea PLANO. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-list-wrap {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-thead {
    font-size: 10px;
    font-weight: 800;
    color: var(--text-2);
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-row {
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-row:hover {
    background: var(--rc-hover);
}

/* Los tres puntos de estado conservan su semáforo, en los tonos de la casa. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-dot.ok {
    background: var(--rc-salvia-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-dot.warn {
    background: #C9905A;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-dot.bad {
    background: #F0532D;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-ccost b {
    font-weight: 800;
}

/* "sin precio": un dato que falta, no una alarma. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-ccost b.none {
    color: var(--text-2);
    font-weight: 500;
}

/* Los chips de filtros activos y los estados vacíos, con los mismos materiales. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-chip {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .empty-sub,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .loading-state p {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .empty-state .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

/* ── P3 · NUEVO / EDITAR INGREDIENTE (#modal-ingrediente) ────────────────
   Es el MISMO modal para nuevo y para editar (lo cambia guardarIngrediente
   por el id oculto), así que se viste una sola vez. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .modal-box {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border-color: var(--rc-borde);
    border-radius: 32px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .modal-title {
    font-size: 19px;
    font-weight: 800;
}

/* La calculadora de merma: una tarjeta de contenido, o sea PLANA. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .merma-card {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
}

/* El indicador de MERMA es el resultado: tinta clara sobre el oscuro del hueso. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .merma-resultado {
    background: var(--rc-hueso-ink);
    border-color: var(--rc-hueso-ink);
    border-radius: 14px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .merma-pct,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .merma-label {
    color: var(--rc-hueso);
}

/* EL COSTO CALCULADO ES LA ESTRELLA: la única superficie clara del modal. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente #costos-preview {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    border-radius: 20px;
    box-shadow: none;
}

/* El rótulo "💰 Costo calculado" lleva su color en un estilo INLINE: se lo
   alcanza por ese atributo, sin tocar una línea de JS ni de html. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente #costos-preview > div[style*="--text-3"] {
    color: var(--rc-hueso-sub) !important;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .preview-costo-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 2px 6px;
}

/* Las dos celdas se separan con el filito del hueso, como en el panel de stats. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .preview-costo-card + .preview-costo-card {
    border-left: 1px solid var(--rc-hueso-sep);
    padding-left: 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .preview-costo-label {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--rc-hueso-sub);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .preview-costo-valor {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    color: var(--rc-num-hueso);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .preview-costo-unit {
    font-size: 10px;
    color: var(--rc-hueso-sub);
}

/* ── P4 · LA FICHA DE UN INGREDIENTE (#ing-detalle) ──────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .ing-ficha-box {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border-color: var(--rc-borde);
    border-radius: 32px;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .back-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    color: var(--text);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .detalle-title {
    font-size: 21px;
    font-weight: 800;
}

/* La familia va como chip; la unidad y el estado viven en un SOLO span de
   texto que no se puede partir sin JS (duda anotada). */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .detalle-sub .tag-estacion {
    background: var(--rc-borde);
    color: var(--text-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .04em;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .detalle-sub {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .btn-editar {
    background: var(--rc-lima);
    border-color: var(--rc-lima);
    color: var(--rc-lima-ink);
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 800;
    border-radius: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .btn-eliminar {
    background: transparent;
    border-color: #7a2f3a;
    color: #e08a95;
    border-radius: 12px;
}

/* Los dos KPI: tarjetas de contenido, con su badge chico en hueso. */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card.neto {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-badge,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card.neto .costo-badge {
    background: var(--rc-hueso);
    color: var(--rc-num-hueso);
    font-size: 8.5px;
    font-weight: 800;
}

/* El .neto trae sus tres colores con !important desde la hoja vieja: hay que
   ganarle con la misma arma. */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-label,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card.neto .costo-label {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--text-2) !important;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-valor,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card.neto .costo-valor {
    font-family: var(--font-titulo);
    font-size: 23px;
    font-weight: 800;
    color: var(--text) !important;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-unit,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .costo-card.neto .costo-unit {
    font-size: 10.5px;
    color: var(--text-2) !important;
}

/* Las secciones: planas, con la cabecera apoyada sobre la misma superficie. */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .det-section {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 20px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .det-section-header {
    background: transparent;
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .det-section-title {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-2);
}

/* §Barras: el riel se hunde y el relleno es una píldora con su brillito. */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-bar-det {
    background: var(--rc-carril);
    border-radius: 99px;
    box-shadow: var(--rc-carril-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-bar-fill-det {
    background: var(--rc-lima-tx);
    border-radius: 99px;
    box-shadow: var(--rc-relleno-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle #det-rend-label {
    color: var(--rc-salvia-tx);
    font-weight: 800;
}

/* La merma la pinta el html con un estilo inline var(--red): se lo alcanza por
   el id, que es único, sin tocar el html. */
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle #det-merma-label {
    color: var(--text-2) !important;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .det-info-row {
    border-bottom-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .det-info-value {
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .formato-item {
    border-right-color: var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .formato-label {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .formato-valor {
    font-family: var(--font-titulo);
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .formato-unit,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-bar-sub-det,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-hist-label,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-hist-count,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .historial-header-row,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .merma-hist-header,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .notas-body-det {
    color: var(--text-2);
}

/* ── P5 · CONFIGURACIÓN ─────────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .admin-page-title {
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .admin-topbar .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 14px;
    padding: 10px 18px;
    font-weight: 800;
    box-shadow: none;
}

/* Cada sección es una tarjeta de contenido, con su cabecera propia. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-new {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 26px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-header-new {
    background: transparent;
    border-bottom-color: var(--rc-sep);
}

/* El iconito de cada sección va en un cuadradito HUNDIDO: los cuatro colores
   de antes (green/gold/blue/gray) eran el mismo gris con distinto nombre. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-icon-new,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-icon-new.green,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-icon-new.gold,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-icon-new.blue,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-icon-new.gray {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--rc-hundido);
    box-shadow: var(--rc-hundido-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-title-new {
    font-size: 14px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .config-card-sub-new {
    font-size: 11.5px;
    color: var(--text-2);
}

/* Los tours, píldoras. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones button {
    background: var(--rc-marco);
    border-color: var(--rc-borde);
    border-radius: 99px;
    font-size: 12px;
    font-weight: 700;
}

/* Los tres temas: tarjetas, y el ELEGIDO en hueso. */
/* Y aca vivia su ropa de tierra. Misma historia: la tarjeta ya no existe. */

/* "Cambiar foto": sólido plano.
   EL BOTÓN DE LA FILA "PALETA TIERRA (BETA)" QUEDA AFUERA a propósito: el
   prompt manda no tocar esa fila, que muere el día que la paleta se sella. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .btn-ghost:not(#config-paleta-slot .btn-ghost) {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 12px;
}

/* ── CAMPOS HUNDIDOS: el modal de ingrediente y toda la configuración ──── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .form-group input,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .form-group select,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .form-group textarea,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .input-app,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .form-group input,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .form-group select,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .form-group textarea,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .input-app {
    background: var(--rc-hundido);
    border-color: var(--rc-hundido-bd);
    border-radius: 12px;
    color: var(--text);
    box-shadow: var(--rc-hundido-in);
}

/* Los dos campos de solo lectura de la calculadora traen su fondo en un estilo
   inline: se hunden como los demás. La opacidad .6 es de ellos y NO se toca —
   es la marca de "esto no se escribe, se calcula". */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .form-group input[style*="--accent-soft"] {
    background: var(--rc-hundido) !important;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .form-group label,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente textarea::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion input::placeholder,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion textarea::placeholder {
    color: var(--rc-tenue);
}

/* El pie del modal: cancelar sólido, guardar en lima. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .modal-footer .btn-ghost {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    border-radius: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .modal-footer .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

/* ============================================================
   BENTO 12 · P4 — EL PANEL, VESTIDO (skin tierra: solo bajo el switch)
   Mockup "panel-admin-unificado", aprobado por Facu con dos correcciones:
   sin emojis y "Cumplimiento" a secas. La grilla y el JS son de P1-P3 y se
   ven en las dos paletas; acá solo va la ropa.

   Gramática de siempre (t9/t10/t11): HUNDIDO donde se navega · LIMA lo vivo ·
   HUESO la estrella · PLANO el contenido. Los materiales NO se redeclaran:
   salen del §0, al que esta tanda le sumó #tab-panel.
   ============================================================ */

/* ── El cabezal: título + el selector de período como toggle de la casa ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .admin-page-title {
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-chips {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-chip {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    border-radius: 999px;
    font-weight: 700;
    padding: 6px 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-chip.on {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

/* ── Los bloques oscuros: PLANOS, que es donde va el contenido ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-b {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 22px;
    padding: 16px 18px;
}

/* El rótulo chico de todos los bloques (el `.k` del mockup). Los títulos de
   los gráficos toman el MISMO material: en el lenguaje bento el rótulo es uno
   solo. El texto no cambia — la mayúscula la pone el css. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-klabel,
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-ctitle {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-ctitle {
    margin-bottom: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-kval {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 24px;
    margin-top: 10px;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-kunit {
    font-size: 15px;
}

/* ── CUMPLIMIENTO: la estrella, en LIMA con su luz ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star {
    background-color: var(--rc-lima);
    background-image: radial-gradient(70% 60% at 85% 10%, rgba(255, 255, 255, .25), transparent 60%);
    border-color: var(--rc-lima);
    color: var(--rc-lima-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star .panel-klabel {
    color: rgba(26, 26, 16, .75);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-num {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 78px;
    letter-spacing: -.05em;
    color: var(--rc-lima-ink);
    margin-top: 2px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-unit {
    font-size: 34px;
    letter-spacing: -.02em;
}

/* §Barras, con la profundidad dada vuelta: el carril se cava sobre el lima y
   el relleno es la tinta oscura. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-rail {
    height: 12px;
    background: rgba(26, 26, 16, .22);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-fill {
    background: #1A1A10;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-pie {
    font-size: 11.5px;
    font-weight: 800;
    color: rgba(26, 26, 16, .75);
}

/* Las flechas de la tendencia, sobre el lima. El ▼ lo fija el mockup; el ▲ no
   lo cubría y va el salvia OSCURECIDO (mismo tono, 120°), porque el salvia de
   siempre sobre lima es ilegible. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-pie .panel-down {
    color: #7a2a1a;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-pie .panel-up {
    color: #3E5A3E;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-star-pie .panel-muted {
    color: rgba(26, 26, 16, .75);
}

/* ── PRODUCCIÓN VALORIZADA: la otra estrella, en HUESO ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-hueso {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-hueso .panel-klabel {
    color: var(--rc-hueso-sub);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-hueso .panel-kval {
    color: var(--rc-num-hueso);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-hueso .panel-ktrend,
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-hueso .panel-muted {
    font-size: 10px;
    color: var(--rc-hueso-sub);
}

/* ── Las barras de aprendizaje (§Barras) ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-learn-rail {
    background: var(--rc-hundido);
    box-shadow: var(--rc-carril-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-learn-fill {
    background: var(--rc-lima-tx);
    box-shadow: var(--rc-relleno-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-learn-n {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--rc-lima-tx);
}

/* ── ÓRDENES POR DÍA: columnas con volumen ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-bar {
    background: linear-gradient(180deg, #D8CF63, #A89F3E);
    border-radius: 8px 8px 4px 4px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-bar.pn-bar-hoy {
    background: linear-gradient(180deg, #F0EBAA, #C9C05A);
    outline: 2px solid rgba(201, 192, 90, .4);
    outline-offset: 2px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-bval {
    font-size: 10px;
    font-weight: 800;
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-bday {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--text-2);
}

/* ── CARGA POR ESTACIÓN: §Barras con la gama por estación ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-estname {
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-hbar {
    height: 9px;
    border-radius: 999px;
    background: var(--rc-hundido);
    box-shadow: var(--rc-carril-in);
    overflow: hidden;
}

/* El color lo publica el JS en --pb (la MISMA gama del tablero). Sin él —y sin
   el switch— la barra queda del color de siempre. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-hfill {
    height: 9px;
    border-radius: 999px;
    background: var(--pb, var(--rc-lima-tx));
    box-shadow: var(--rc-relleno-in);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-hval {
    font-size: 11px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-insight {
    font-size: 10.5px;
    color: var(--text-2);
}

/* ── LO MÁS PRODUCIDO: medallitas y metas ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-medal {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    background: var(--rc-borde);
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-medal-1 {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-meta {
    font-size: 11px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-meta b {
    font-weight: 800;
    color: var(--text);
}

/* ── La variación de costos: el rojo del mockup, medido sobre el plano ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-costo-sube {
    color: #F08A6E;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .pn-costo-baja {
    color: var(--salvia);
}

/* ── Las dos vitrinas ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-soon {
    opacity: .9;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-stag {
    background: var(--rc-lima-bg);
    color: var(--rc-lima-tx);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .08em;
}

/* ============================================================
   BENTO 13 · P1 y P2 — PRESUPUESTOS (Inicio + Creador)
   La última pantalla de la zona admin. Sin mockup: se aplica la gramática ya
   sellada en t9-t12, valor por valor. HUNDIDO donde se escribe o se navega ·
   LIMA lo vivo · HUESO lo elegido y la estrella · PLANO el contenido · MARCO
   los cabezales · §Barras toda barra con profundidad.

   Los materiales NO se redeclaran: #tab-presupuestos entró a la lista del §0,
   así que hereda el mismo juego que el recetario, ingredientes, configuración
   y el panel — incluido el --text-3 = --text-2 de esas pantallas, que es lo
   que arregla de una todos los `color:var(--text-3)` que el creador escribe
   INLINE (y contra un inline no se puede sin !important).
   ============================================================ */

/* ── El toggle Inicio/Creador: hundido con la pestaña elegida en HUESO ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-subnav {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 999px;
    padding: 4px;
    gap: 2px;
    display: inline-flex;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-subnav button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-2);
    font-weight: 700;
    padding: 7px 18px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-subnav button.presu-tab-on {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

/* ── Título y separadores de sección ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-h1 {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-sub {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-sectitle {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-sectitle .presu-line {
    background: rgba(255, 255, 255, .06);
}

/* ── P1 · Las 5 plantillas: PLANAS, con su icono en cuadradito hundido ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-card {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile {
    border-radius: 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile .presu-ti {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile h3 {
    font-size: 14.5px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile p {
    font-size: 11.5px;
    color: var(--text-2);
}

/* El hover toma el mismo verde-oliva del paso ABIERTO del asistente (t10): es
   el lever de "esto es lo que estás por elegir". */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile:hover {
    border-color: #3a3f2a;
}

/* "En blanco": el único punteado del bloque. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile.presu-blank {
    background: transparent;
    border: 1px dashed #2E3540;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile.presu-blank .presu-plus,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tile.presu-blank span {
    color: var(--text-2);
}

/* ── Guardados ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-saved .presu-row {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-saved .presu-thumb {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-saved .presu-meta b {
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-saved .presu-meta span {
    color: var(--text-2);
    font-size: 12.5px;
}

/* ── "Lo que viene": las 6 vitrinas ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-proj .presu-p {
    opacity: .85;
    border-radius: 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-proj .presu-pi {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-soon {
    background: var(--rc-lima-bg);
    color: var(--rc-lima-tx);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── P2 · Las pestañas de presupuestos abiertos ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tab {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 999px;
    color: var(--text-2);
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tab.presu-tab-active {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tab.presu-tab-active .presu-x,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tab.presu-tab-active .presu-tdot {
    color: var(--rc-hueso-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tab.presu-tab-active .presu-x:hover {
    background: rgba(27, 30, 22, .12);
    color: var(--rc-hueso-ink);
}

/* El "+" es un botón de ícono de la casa. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tabadd {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 12px;
    color: var(--text-2);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-tabadd:hover {
    color: var(--text);
    border-color: var(--border-2);
}

/* ── La cabecera del presupuesto: MARCO con su luz ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-crhead {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 26px;
    padding: 20px 22px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-crname input {
    font-family: 'Sora', sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* El chip del tipo: lo que ESTE presupuesto es → hueso chico. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-chip {
    background: var(--rc-hueso);
    color: var(--rc-num-hueso);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 999px;
}

/* PORCIONES / CUBIERTOS: la cajita hundida donde se escribe. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-field {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-field label {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-field input {
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-crsub {
    color: var(--text-2);
}

/* ── Las tarjetas de SECCIÓN: contenido, o sea PLANO ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-block {
    border-radius: 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-blkhead .presu-dot {
    background: var(--rc-lima-tx);
}

/* El nombre de la sección lo escribe el JS con su tamaño INLINE (14px/600):
   se lo pisa acá porque es el titulito de la tarjeta y la gramática lo pide en
   13px/800. Es presentación pura — el onchange no se toca. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-blkhead input {
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* Los encabezados de columna. El color sale solo (el JS los escribe con
   var(--text-3), que dentro de estas pantallas vale --text-2 = #8C94A0); el
   peso sí se pone acá. El tamaño se queda en los 10px del inline: por medio
   píxel no vale un !important. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row:not(:has(input)) {
    font-weight: 800;
}

/* Los inputs de las filas: HUNDIDOS. Va scopeado a #tab-presupuestos porque
   .ing-nuevo-row la comparte el asistente de recetas, que t10 ya vistió. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row input,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row select {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 10px;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row input:focus,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row select:focus {
    border-color: var(--rc-lima-tx);
    background: var(--rc-hundido);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .ing-nuevo-row input::placeholder {
    color: var(--text-2);
}

/* B / P / M — un mini carril hundido con la letra elegida en pastilla HUESO. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .merma-selector {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .merma-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--text-2);
    width: 24px;
    height: 24px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .merma-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .merma-btn.active {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

/* La × de borrar fila conserva su rojo, con el borgoña de la paleta. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .btn-remove-row {
    background: var(--borg-suave, rgba(140, 50, 71, .18));
    color: var(--red);
    border-radius: 8px;
}

/* "+ Agregar ítem…" y "+ Agregar sección" ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-additem {
    color: var(--text-2);
    font-size: 12.5px;
    border-top: 1px dashed var(--rc-borde);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-additem:hover {
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-addsec {
    background: transparent;
    border: 1px dashed #2E3540;
    border-radius: 20px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-addsec:hover {
    color: var(--text);
    border-color: #3a3f2a;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-secfoot {
    border-top: 1px solid var(--rc-sep);
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-secfoot b {
    font-weight: 800;
}

/* ── EL SIDEBAR DE RESUMEN: MARCO ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-totals {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 26px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-totrow {
    border-bottom: 1px solid var(--rc-sep);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-totrow .presu-k {
    font-size: 13px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-totrow .presu-v {
    font-size: 13px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-comp-h {
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-comp-sub {
    color: var(--text-2);
    font-size: 10.5px;
    font-weight: 400;
}

/* Las barras de composición: §Barras, gemelas de las de la ficha admin (t9). */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .costo-bar-track {
    background: var(--rc-carril);
    box-shadow: var(--rc-carril-in);
    height: 8px;
    border-radius: 999px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .costo-bar-fill {
    background: var(--rc-lima-tx);
    box-shadow: var(--rc-relleno-in);
    height: 8px;
    border-radius: 999px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .costo-bar-row-nombre {
    font-size: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .costo-bar-row-valor {
    font-weight: 800;
}

/* ── MARGEN + slider ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-marginbox .presu-lab {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-marginbox .presu-lab b {
    font-weight: 800;
    color: var(--text);
}

/* EL RIEL ES §Barras Y EL RELLENO LIMA LLEGA HASTA LA BOLITA, sin una línea de
   JS. `accent-color` sola no sirve: en cuanto se le pone fondo propio al input,
   el navegador deja de pintar su relleno (probado: el riel quedaba vacío). El
   relleno lo pinta la PROPIA bolita, con una sombra larguísima hacia la
   izquierda que el overflow del riel recorta. Es CSS puro y la mecánica del
   slider (su value, su evento input, el recálculo) no se toca. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-marginbox input[type=range] {
    height: 8px;
    border-radius: 999px;
    background: var(--rc-carril);
    box-shadow: var(--rc-carril-in);
    overflow: hidden;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-marginbox input[type=range]::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--rc-lima);
    box-shadow: 0 0 0 1px rgba(26, 26, 16, .35), -1000px 0 0 992px #A89F3E;
}

/* LA BOLITA NO PUEDE SER DE 18px NI LLEVAR SOMBRA HACIA AFUERA, y se dice como
   es: el relleno lo pinta ella con una sombra hacia la izquierda, y para que esa
   sombra no se derrame hay que recortarla con el overflow del riel — que
   recorta TAMBIÉN la bolita y su sombra externa. Las dos cosas del mockup no
   pueden convivir en css puro, así que se conserva la que dice algo: el
   relleno. La bolita se distingue igual, con el lima VIVO (#DBD455) contra el
   lima apagado del relleno (#A89F3E, el mismo de las columnas del panel) más su
   brillito y su aro oscuro. */

/* ── PRECIO SUGERIDO: la estrella de la pantalla, en HUESO ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard {
    background: var(--rc-hueso);
    background-image: none;
    border: 1px solid var(--rc-hueso);
    border-radius: 20px;
    color: var(--rc-hueso-ink);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-pl {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--rc-hueso-sub);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-pbig {
    font-family: 'Sora', sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--rc-num-hueso);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-pper {
    font-size: 11px;
    color: var(--rc-hueso-sub);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-pper b {
    font-weight: 800;
    color: var(--rc-hueso-ink);
}

/* El food cost: chip LIMA sobre el hueso. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-fc {
    color: var(--rc-hueso-sub);
    font-size: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard .presu-fc b {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 10px;
}

/* "objetivo N%" lo escribe el JS con var(--text-3) INLINE, y sobre el hueso ese
   tono da 2,41:1. Es el único lugar de la tanda donde hace falta ganarle a un
   estilo en línea; se lo alcanza por el propio atributo, como t9 hizo con el
   guión del food cost. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-pricecard [style*="--text-3"] {
    color: var(--rc-hueso-sub) !important;
}

/* ── Los tres botones del pie ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-btn {
    border-radius: 14px;
    font-weight: 800;
}

/* "Guardar presupuesto" es LA acción del módulo: la única en lima. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary:last-of-type,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary[onclick*="presuAbrirGuardar()"] {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-color: var(--rc-lima);
    box-shadow: none;
}

/* "Guardar como receta": sólido, de contenido. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary[onclick*="Receta"] {
    background: var(--rc-sup);
    color: var(--text);
    border-color: var(--rc-borde);
    box-shadow: none;
}

/* "Exportar PDF": vitrina. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-btn-ghost {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    color: var(--text-2);
    opacity: .85;
}

/* ── La carta: sus dos campos por plato, hundidos como los demás ── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-plato-precio,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-plato-fc {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 10px;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-plato-stat>span {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-plato-stat>b {
    font-weight: 800;
}

/* ============================================================
   BENTO 13 · P3 y P4 — EQUIPO + INVITAR USUARIO
   Mismos materiales del §0 (a cuya lista entraron #tab-equipo y #modal-invitar).
   La tabla es la MISMA receta de Recetario e Ingredientes: PLANA.
   ⚠️ La lógica de invitaciones no se toca ni se mira: acá sólo hay pintura.
   ============================================================ */

:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .admin-page-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .admin-page-sub {
    color: var(--text-2);
}

/* "+ Invitar Usuario": la acción de la pantalla. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-color: var(--rc-lima);
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

/* (La tabla de equipo y sus reglas se fueron con la TANDA EQUIPO EN TARJETAS:
   el wrap, el thead, el th, el td y el hover quedaron sin emisor.) */

/* ── El select de ROL: hundido, y el que MANDA (Admin) en HUESO ──
   Quién es admin se lee del propio <select> nativo, que el Select Custom deja
   en el DOM: option[value="admin"]:checked. Cero JS. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .cs-trigger {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 10px;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .cs-wrap:has(> select.select-rol option[value="admin"]:checked) .cs-trigger {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    color: var(--rc-hueso-ink);
    font-weight: 800;
    box-shadow: none;
}

/* El select NATIVO, para el caso en que el Select Custom no se haya montado
   (es el mismo material). */
:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .select-rol:not(.cs-native) {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

/* (Los chips .tag-tipo, los .btn-action y el "Tu cuenta" inline tambien se
   fueron con la tabla: la tarjeta trae sus propios .eq-estado y .eq-btn-*, que
   se visten en el bloque TANDA EQUIPO EN TARJETAS con los mismos materiales.) */

/* ── P4 · EL MODAL DE INVITAR: MARCO ── */
:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .modal-box {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 26px;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .modal-title {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.02em;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .form-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .form-group input,
:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .form-group select,
:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .cs-trigger {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 12px;
    color: var(--text);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .form-group input::placeholder {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .modal-footer .btn-ghost {
    background: var(--rc-sup);
    border-color: var(--rc-borde);
    color: var(--text);
    border-radius: 14px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .modal-footer .btn-primary {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-color: var(--rc-lima);
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none;
}

/* ============================================================================
   REGISTRO BENTO — EL FLUJO DE ENTRADA, VESTIDO
   La última zona con la ropa vieja clara. Login, alta de restaurante (los 6
   pasos), invitación, "Completá tu perfil" y sin acceso pasan a la MISMA
   gramática sellada en t9-t13: HUNDIDO donde se escribe · LIMA lo vivo ·
   HUESO lo elegido · PLANO el contenido · MARCO la tarjeta con luz.
   Los materiales NO se redeclaran: las cinco vistas entran al §0 de BENTO 9.
   P1 (el arreglo del botón inalcanzable) vive arriba, en su propio bloque:
   acá no hay ni una regla de layout que lo pueda pisar.
   ============================================================================ */

/* ── §E0 · EL ESCENARIO COMÚN ───────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #view-login,
:root[data-theme="dark"][data-paleta="tierra"] #view-onboarding,
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion,
:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup,
:root[data-theme="dark"][data-paleta="tierra"] #view-sin-acceso {
    background-color: #0E1013;
    background-image:
        radial-gradient(60% 50% at 80% 0%, rgba(201, 192, 90, .08), transparent 60%),
        radial-gradient(50% 60% at 8% 100%, rgba(143, 169, 143, .06), transparent 55%);
}

/* El wrap del onboarding y el del perfil no pueden tapar la luz con su --bg. */
:root[data-theme="dark"][data-paleta="tierra"] #view-onboarding .onb-wrap,
:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup .onb-wrap {
    background: transparent;
}

/* El logo "B" / BRILLAT queda, en la tinta principal.
   (El mockup lo nombra --tx-1; en esta hoja ese token no existe: es var(--text).) */
:root[data-theme="dark"][data-paleta="tierra"] .onb-logo,
:root[data-theme="dark"][data-paleta="tierra"] .login-logo-mark {
    font-family: var(--font-titulo);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--text);
    line-height: 1;
}

/* ── §E1 · LA TARJETA DE CADA PASO: MARCO ───────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] #view-login .login-box,
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion .login-box,
:root[data-theme="dark"][data-paleta="tierra"] #view-sin-acceso .login-box {
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 32px;
    box-shadow: none;
}

/* En el onboarding la "tarjeta central" es el contenido del paso. Deja de
   estirarse a toda la altura (flex:1) para poder ser una tarjeta de verdad;
   la centra su pantalla, que sigue creciendo con el contenido — así el scroll
   de P1 no se pisa y nada queda recortado arriba. */
:root[data-theme="dark"][data-paleta="tierra"] .onb-screen.active {
    justify-content: center;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-content {
    flex: 0 1 auto;
    background-color: var(--rc-marco);
    background-image: var(--rc-marco-luz);
    border: 1px solid var(--rc-borde);
    border-radius: 32px;
    box-shadow: none;
    padding: 34px 30px calc(34px + env(safe-area-inset-bottom)) 30px;
    margin: 12px auto;
}

/* ── §E2 · TIPOGRAFÍA ───────────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-title,
:root[data-theme="dark"][data-paleta="tierra"] .login-heading {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: -.02em;
    line-height: 1.18;
    color: var(--text);
}

/* Los kickers: "PASO 1 DE 6", "ÚLTIMO PASO", "¿Ya tenés cuenta?"… */
:root[data-theme="dark"][data-paleta="tierra"] .onb-step-label,
:root[data-theme="dark"][data-paleta="tierra"] .login-box-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--rc-lima-tx);
    margin-bottom: 12px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-sub,
:root[data-theme="dark"][data-paleta="tierra"] .login-sub,
:root[data-theme="dark"][data-paleta="tierra"] .onb-preview {
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-sub {
    font-size: 14.5px;
    margin-bottom: 26px;
}

/* Los pies de tarjeta y el separador. */
:root[data-theme="dark"][data-paleta="tierra"] #view-login .login-disclaimer,
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion .login-disclaimer,
:root[data-theme="dark"][data-paleta="tierra"] .login-divider span {
    color: var(--text-2);
}

/* ── §E3 · CAMPOS HUNDIDOS ──────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-input {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    border-radius: 12px;
    box-shadow: var(--rc-hundido-in);
    color: var(--text);
    font-size: 17px;
    font-weight: 600;
    padding: 15px 16px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-input:focus {
    border-color: var(--rc-lima-tx);
    box-shadow: 0 0 0 3px rgba(201, 192, 90, .16);
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-input::placeholder {
    color: var(--text-2);
    font-weight: 400;
}

/* Los rótulos del perfil llevan su color INLINE (rgba blanco al 60%), así que
   se los alcanza por su propio atributo — el mismo recurso que t9 usó con el
   guión del food cost. Además de la gramática, es contraste. */
:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup label[style*="rgba(255,255,255,0.6)"] {
    color: var(--text-2) !important;
    font-size: 12px;
    font-weight: 600;
}

:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup p[style*="rgba(255,255,255,0.4)"],
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion p[style*="rgba(255,255,255,0.6)"] {
    color: var(--text-2) !important;
}

/* ── §E4 · LOS BOTONES ──────────────────────────────────────────────────── */
/* EL BOTÓN DE ACCIÓN DE CADA PASO: LIMA. Imposible no verlo. */
:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-next,
:root[data-theme="dark"][data-paleta="tierra"] #view-login .btn-crear-cuenta {
    background: var(--rc-lima) !important;
    color: var(--rc-lima-ink) !important;
    border: 1px solid var(--rc-lima) !important;
    border-radius: 14px;
    font-weight: 800;
    box-shadow: none !important;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-next {
    padding: 15px 26px;
    font-size: 15.5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-next:hover,
:root[data-theme="dark"][data-paleta="tierra"] #view-login .btn-crear-cuenta:hover {
    background: #E6DF63 !important;
    border-color: #E6DF63 !important;
    transform: translateY(-1px);
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-next:disabled {
    background: var(--rc-borde) !important;
    color: var(--text-2) !important;
    border-color: var(--rc-borde) !important;
    box-shadow: none !important;
    opacity: 1;
    transform: none;
}

/* Secundarios: sólidos planos. */
:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-back {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 14px;
    color: var(--text);
    font-weight: 700;
    font-size: 14px;
    padding: 13px 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-back:hover {
    background: var(--rc-hover);
    color: var(--text);
}

/* "Cerrar sesión" de sin-acceso llevaba su verde INLINE. */
:root[data-theme="dark"][data-paleta="tierra"] #view-sin-acceso .btn-google-login[style*="1a3a28"] {
    background: var(--rc-sup) !important;
    border: 1px solid var(--rc-borde) !important;
    color: var(--text) !important;
    border-radius: 14px;
    font-weight: 700;
    box-shadow: none !important;
}

/* El botón de Google conserva su blanco (es la marca de Google) y sólo se le
   empareja el radio con el resto del flujo. */
:root[data-theme="dark"][data-paleta="tierra"] #view-login .btn-google-login,
:root[data-theme="dark"][data-paleta="tierra"] #view-invitacion .btn-google-login {
    border-radius: 14px;
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] .login-divider::before,
:root[data-theme="dark"][data-paleta="tierra"] .login-divider::after {
    background: var(--rc-sep-luz);
}

/* ── §E5 · LA TIRA DE PASOS (§Barras) ───────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-progress {
    gap: 6px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-step {
    width: 26px;
    height: 6px;
    background: var(--rc-carril);
    box-shadow: var(--rc-carril-in);
    border-radius: 99px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-step.active {
    background: var(--rc-lima-tx);
    box-shadow: var(--rc-relleno-in);
}

/* ── §E6 · TARJETAS DE OPCIÓN: LO ELEGIDO EN HUESO ──────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-card {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 18px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-card span {
    color: var(--text-2);
    font-weight: 700;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-card:hover {
    background: var(--rc-sup);
    border-color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-card.selected {
    background: var(--rc-hueso);
    border-color: var(--rc-hueso);
    /* La tinta se da vuelta en TODA la tarjeta, no solo en su rotulo: el emoji
       es texto propio de este nodo y heredaba la tinta clara sobre el hueso
       (1,12:1). Hoy no se ve porque se pinta con sus colores de emoji, pero
       con un glifo monocromo desapareceria. Es el MISMO caso que BENTO 11 ya
       cazo en la baldosa de tema elegida, con el mismo numero. */
    color: var(--rc-hueso-ink);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-card.selected span {
    color: var(--rc-hueso-ink);
    font-weight: 800;
}

/* ── §E7 · EL STEPPER DE SUCURSALES ─────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-stepper-box {
    background: var(--rc-hundido);
    border: 1px solid var(--rc-hundido-bd);
    box-shadow: var(--rc-hundido-in);
    border-radius: 18px;
    padding: 18px 24px;
    gap: 20px;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-step-btn {
    background: var(--rc-lima);
    color: var(--rc-lima-ink);
    border-radius: 12px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-stepper-val {
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 40px;
    color: var(--text);
}

/* ── §E8 · EL RECUADRO DE CARGA DEL LOGO ────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-logo-upload {
    background: var(--rc-hundido);
    /* El punteado de la casa (el mismo #2E3540 de t10/t13), que es el mas visible
       de los tres candidatos sobre el hundido: 1,54:1 contra 1,21 del borde
       hundido y 1,32 de --rc-borde. NINGUNO llega a la vara 3 de no-texto, y
       HEAD medía 1,21: no es una regresion. Lo que identifica al recuadro es su
       contenido (el icono y "Toca para subir imagen", los dos medidos y en
       verde), no el borde solo. Anotado con su lever. */
    border: 1px dashed #2E3540;
    box-shadow: var(--rc-hundido-in);
    border-radius: 18px;
    max-width: 240px;
    margin: 0 auto;
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-logo-upload:hover {
    background: var(--rc-hundido);
    border-color: var(--rc-lima-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .onb-logo-placeholder p {
    color: var(--text-2);
    font-weight: 600;
}

/* ── §E9 · EL PASO FINAL ────────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-check-item {
    background: var(--rc-sup);
    border: 1px solid var(--rc-borde);
    border-radius: 14px;
    color: var(--text);
}

/* ── §E10 · COMPLETÁ TU PERFIL ──────────────────────────────────────────── */
/* El anillo lima de la casa. Muere el dorado viejo (--gold) acá. */
:root[data-theme="dark"][data-paleta="tierra"] #view-perfil-setup .perfil-avatar-preview {
    background: var(--rc-sup);
    border: 2px solid var(--rc-lima-tx);
    color: var(--rc-lima-tx);
    font-family: var(--font-titulo);
    font-weight: 800;
}

/* Aca vivia el campo del PIN del perfil (#perfil-pin) y su "(opcional)": el PIN se fue. */

/* ── §E11 · EL PIE DEL ONBOARDING ───────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .onb-footer {
    border-top: 1px solid var(--rc-sep-luz);
}

/* ── §E12 · CELULAR ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {

    :root[data-theme="dark"][data-paleta="tierra"] .onb-title,
    :root[data-theme="dark"][data-paleta="tierra"] .login-heading {
        font-size: 26px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .onb-content {
        padding: 26px 20px calc(26px + env(safe-area-inset-bottom)) 20px;
        margin: 10px auto;
        border-radius: 26px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] #view-login .login-box,
    :root[data-theme="dark"][data-paleta="tierra"] #view-invitacion .login-box,
    :root[data-theme="dark"][data-paleta="tierra"] #view-sin-acceso .login-box {
        border-radius: 26px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .onb-stepper-box {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   TANDA DE CAMPO 1 · P3 — EL AVISO DE FILTRADO
   Cuando el filtro deja tarjetas afuera, la barra lo dice. Pildora tocable en la
   familia de lo vivo (--terra), con la tinta que se lee sobre ella (--vivo-ink),
   el mismo par ya sellado para todo lo activo de esta pantalla.
   ============================================================ */
/* El aire lo pone el BOTON, no el contenedor: asi el hueco vacio no ocupa ni un pixel
   aunque alguien le saque el `hidden` (el A/B lo destapa todo y lo canto: 8px de alto
   heredados en el modal entero). */
.prodhead-filtrado:empty {
    display: none;
}

.ph-filtrado {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 9px 13px;
    border: 1px solid var(--terra);
    border-radius: 999px;
    background: var(--terra);
    color: var(--vivo-ink);
    font-family: var(--font-titulo);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: none;
}

.ph-filtrado i {
    font-size: 15px;
    flex: none;
}

.ph-filtrado span {
    flex: 1;
    text-align: left;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ph-filtrado b {
    flex: none;
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ============================================================================
   TANDA BARRA DE AVISOS — la cabecera del HUB se vuelve inteligente
   ============================================================================
   Mockup MOCKUP-barra-avisos, con el ajuste sellado de Facu: EL CHIP DEL TURNO
   SE VUELVE SUTIL — las luces y los colores se los lleva la informacion
   importante, no el turno.

   La barra pasa a:  [turno sutil] [hora] | [rio de avisos] [campanita] [rosca]

   Todo esto PISA a proposito las reglas de BENTO t4 · B3 y t6 · P1.1 sobre la
   misma barra (su chip de colores y su punto lima de 12px de glow): por eso el
   bloque va al final del archivo, que es donde gana por orden.
   ============================================================================ */

/* ── La barra: marco con su luz, el material de los cabezales ── */
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip {
    background: #12151A;
    background-image: radial-gradient(40% 120% at 96% 50%, rgba(201, 192, 90, .09), transparent 60%);
    border: 1px solid #252A31;
    border-radius: 20px;
    box-shadow: none;
    gap: 10px;
    padding: 9px 10px 9px 12px;
    flex-wrap: nowrap;
}

/* ── El turno, SUTIL ── */
:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip {
    background: #171A1F;
    border: 1px solid #252A31;
    border-radius: 99px;
    padding: 6px 12px;
    gap: 7px;
    flex: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b,
:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b.hub-turno-off {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    /* #8C94A0 sobre #171A1F = 5,70:1. Es var(--text-2) de la paleta. */
    color: #8C94A0;
    white-space: nowrap;
}

/* El puntito lima con su glow es la UNICA luz del chip. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip .hub-strip-dot {
    width: 7px;
    height: 7px;
    background: #C9C05A;
    box-shadow: 0 0 8px rgba(201, 192, 90, .9);
}

/* Fuera de turno / sin turnos: el puntito se apaga, sin glow. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip:has(.hub-turno-off) {
    background: #171A1F;
    border-color: #252A31;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip:has(.hub-turno-off) .hub-strip-dot {
    background: #252A31;
    box-shadow: none;
}

/* La hora, al lado del chip. El item no crece: el rio se queda el sobrante. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip>.hub-strip-item {
    flex: none;
    gap: 7px;
    font-size: 11.5px;
    color: #8C94A0;
    white-space: nowrap;
}

/* ── El rio ──
   Se queda el ancho sobrante y scrollea en horizontal. Vacio no ocupa lugar
   (ni el gap de su padre): sin avisos la barra queda solo con el turno. */
.hub-rio {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* El separador "|" del mockup: vive en el borde izquierdo del rio, asi
       aparece y desaparece con el (un rio vacio no deja una barrita sola). */
    border-left: 1px solid #252A31;
    padding-left: 10px;
}

.hub-rio::-webkit-scrollbar {
    display: none;
}

.hub-rio:empty {
    display: none;
}

/* Un chip del rio */
.hub-av {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    max-width: 260px;
    padding: 6px 13px;
    border-radius: 99px;
    background: #171A1F;
    border: 1px solid #252A31;
    color: var(--text);
    font-family: var(--font-cuerpo, 'DM Sans', sans-serif);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}

.hub-av:hover,
.hub-av.is-active {
    background: #1C2027;
}

.hub-av-tx {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* La lucecita por categoria: el color VIVE en el punto, no en la letra. */
.hub-av-luz {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.hub-av--coral {
    border-color: rgba(240, 83, 45, .4);
}

.hub-av--coral .hub-av-luz {
    background: #F0532D;
    box-shadow: 0 0 8px rgba(240, 83, 45, .8);
}

.hub-av--lima .hub-av-luz {
    background: #C9C05A;
    box-shadow: 0 0 8px rgba(201, 192, 90, .8);
}

.hub-av--salvia .hub-av-luz {
    background: #8FA98F;
    box-shadow: 0 0 8px rgba(143, 169, 143, .8);
}

.hub-av--hueso .hub-av-luz {
    background: #E8E6DC;
    box-shadow: 0 0 8px rgba(232, 230, 220, .6);
}

/* ── La campanita ── */
.hub-bell-btn {
    position: relative;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 12px;
    border: 1px solid #252A31;
    background: #171A1F;
    color: #8C94A0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color .15s, background .15s;
}

.hub-bell-btn:hover,
.hub-bell-btn.is-active {
    background: #1C2027;
    color: var(--text);
}

.hub-bell-n {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: #DBD455;
    color: #1A1A10;
    font-family: var(--font-titulo);
    font-size: 9px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    box-shadow: 0 0 10px rgba(201, 192, 90, .5);
}

.hub-bell-n:empty {
    display: none;
}

/* Los botones de la derecha, al tono de la barra nueva. */
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-gear-btn,
:root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-avatar-btn {
    width: 36px;
    height: 36px;
    background: #171A1F;
    border: 1px solid #252A31;
    box-shadow: none;
    /* El margin-left:auto de siempre NO se pisa: con el rio lleno no sobra espacio
       (el rio se lo queda con su flex-grow) y los botones caen pegados a el; con el
       dia limpio —el rio en display:none— es lo que mantiene la rosca contra el
       borde derecho en vez de dejarla suelta al lado de la hora. */
}

/* ── Celular: el turno y la campanita quedan FIJOS y los chips scrollean ──
   MEDIDO, no supuesto: en 360px el renglon util son 286px y el item del turno
   pide 250 ("TURNO MAÑANA · ACTIVO" + la hora). Con el turno, la campanita y la
   rosca en la misma linea hacen falta 315: NO ENTRAN. Con flex-wrap el navegador
   partia donde le tocaba y dejaba la campanita SOLA en un renglon del medio —
   tres filas, y la del medio con un boton de 36px.
   Por eso el celular pasa a GRILLA: dos filas exactas y siempre las mismas,
   sin depender de cuanto mida el nombre del turno.
       fila 1:  [turno + hora]  [campanita]  [rosca o avatar]
       fila 2:  [ el rio, a lo ancho, scrolleando de costado ]
   El item del turno vive en una columna 1fr con min-width 0, asi un nombre de
   turno largo se recorta con puntos suspensivos en vez de romper la fila. */
@media (max-width: 640px) {
    :root[data-theme="dark"][data-paleta="tierra"] .hub-strip {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 9px 10px;
        padding: 9px 10px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-strip>.hub-strip-item {
        grid-area: 1 / 1;
        min-width: 0;
        overflow: hidden;
    }

    /* El rio ocupa la fila 2 entera. Vacio sigue en display:none, y la grilla
       colapsa su fila sola: sin avisos la barra queda de una sola linea. */
    .hub-rio {
        grid-area: 2 / 1 / 3 / -1;
        border-left: none;
        border-top: 1px solid #252A31;
        padding-left: 0;
        padding-top: 9px;
    }

    .hub-bell-btn {
        grid-area: 1 / 2;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-gear-btn,
    :root[data-theme="dark"][data-paleta="tierra"] .hub-strip .hub-avatar-btn {
        grid-area: 1 / 3;
    }

    /* La red de seguridad: el nombre del turno se recorta antes que romper nada. */
    :root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip {
        min-width: 0;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hub-av {
        max-width: 220px;
    }
}

/* En el celular mas angosto del equipo el turno afloja un punto para entrar
   ENTERO (sin recorte) al lado de los dos botones: medido en 360px.
   Y LA HORA SE ESCONDE, que es la desviacion declarada de esta tanda. Medido
   en la captura de 360: los cuatro fijos (turno + hora + campanita + rosca)
   piden ~301px en 286, y la hora quedaba CORTADA a la mitad — decia "01" en
   vez de "01:35 p. m.". De los cuatro es el unico dato redundante: el reloj
   del sistema esta dos centimetros mas arriba, en la barra de estado del
   telefono. Se esconde el dato entero (y su separador), nunca a medias. */
@media (max-width: 420px) {
    :root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip {
        padding: 6px 10px;
        gap: 6px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b,
    :root[data-theme="dark"][data-paleta="tierra"] .hub-turno-chip b.hub-turno-off {
        font-size: 9.5px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-strip>.hub-strip-item {
        gap: 6px;
        /* El " · " que separa el turno de la hora es un nodo de TEXTO suelto del
           item: no se puede esconder por separado. Se apaga la fuente del
           contenedor —el chip y la hora traen la suya— y con eso se va solo. */
        font-size: 0;
    }

    :root[data-theme="dark"][data-paleta="tierra"] #hub-hora {
        display: none;
    }
}

/* ============================================================================
   P2 · EL SKIN DE LOS CARTELITOS
   ============================================================================
   Son el MISMO nodo .help-pop de siempre (mismos oidos: cerrar al tocar afuera,
   Escape, re-anclar en scroll/resize). Aca solo cambia la ropa.
   ============================================================================ */
:root[data-theme="dark"][data-paleta="tierra"] .help-pop {
    background: #171A1F;
    background-image: radial-gradient(60% 40% at 85% 0%, rgba(201, 192, 90, .08), transparent 60%);
    border: 1px solid #2E3540;
    border-radius: 18px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

:root[data-theme="dark"][data-paleta="tierra"] .help-pop-title {
    font-size: 12.5px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-pop-row {
    font-size: 12.5px;
    border-bottom-color: rgba(255, 255, 255, .05);
}

:root[data-theme="dark"][data-paleta="tierra"] .hp-pop-btn {
    background: #E8E6DC;
    color: #1B1E16;
    font-weight: 800;
    border-radius: 12px;
    box-shadow: none;
}

/* Los puntitos del cartelito toman el color de SU categoria. */
.hp-pop-dot.hub-dot--coral {
    background: #F0532D;
}

.hp-pop-dot.hub-dot--lima {
    background: #C9C05A;
}

.hp-pop-dot.hub-dot--salvia {
    background: #8FA98F;
}

.hp-pop-dot.hub-dot--hueso {
    background: #E8E6DC;
}

/* La meta de la derecha: lo urgente, en lima. */
.hp-pop-est.hub-meta--urg {
    color: #C9C05A;
    font-weight: 800;
}

/* ============================================================================
   P3 · APLANADO PUNTUAL — "lo excesivo no" (pedido de Facu)
   ============================================================================ */

/* 1 · La botonera del Menu del dia (Plantilla / Duplicar / Guardar) pierde el
   3D: planos, solidos, sin insets ni sombras externas. Guardar conserva su
   lima, tambien plano. */
:root[data-theme="dark"][data-paleta="tierra"] .md-ghost {
    background: #171A1F;
    border: 1px solid #252A31;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .md-save {
    background: var(--terra);
    color: var(--vivo-ink);
    box-shadow: none;
}

/* 2 · Los campos del asistente de recetas (Nueva / Editar) suavizan el pozo.
   Se reapunta el TOKEN dentro de ese modal, no las 21 reglas que lo leen: el
   resto de la app (recetario, ingredientes, configuracion, panel, presupuestos,
   equipo y el flujo de entrada) conserva su hundido de siempre. */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta {
    --rc-hundido-in: none;
}


/* ============================================================================
   TANDA APLANADO GLOBAL — UN SOLO BOTON DE ICONO, PLANO, EN TODA LA APP
   ============================================================================
   Doctrina sellada de Facu: el 3D es un factor que vive en los WIDGETS del HUB
   y en las BARRAS con profundidad (§Barras). Los BOTONES de icono y navegacion
   van PLANOS. Hasta hoy habia un zoologico: unos con inset, otros con glow,
   otros planos pero cada uno con su piel.

   EL BOTON DE ICONO OFICIAL, definido UNA vez y reusado:
     fondo --bi-sup #171A1F  ·  borde 1px --bi-borde #252A31  ·  SIN box-shadow
     hover: borde --bi-borde-hover #2E3540   ·   :active: fondo --bi-activo #1F242B

   DOS COSAS QUE NO CAMBIAN, a proposito:
   · LA GEOMETRIA. Ni un tamano, ni un padding. Solo la piel.
   · LA FORMA. Cada boton conserva SU radio — el mockup lo dice con todas las
     letras ("los redondos existentes pueden conservar su radio 99: la forma no
     cambia, la piel si"), asi que las × redondas siguen redondas y las cuadradas
     siguen con el radio que tenian. No se normaliza ningun radio.

   LA TINTA, POR ROL (decidido y listado, como pedia el prompt):
   · --text (#F0F2F5) para lo que se TOCA para ir o cerrar: volver, ×, ‹ ›.
   · #8C94A0 (--text-2) para la accion secundaria PASIVA: la rosca, la campanita,
     el embudo, el ✓ de terminados, el filtro de ingredientes y el ⋯.
   ============================================================================ */

:root[data-theme="dark"][data-paleta="tierra"] {
    --bi-sup: #171A1F;
    --bi-borde: #252A31;
    --bi-borde-hover: #2E3540;
    --bi-activo: #1F242B;
    --bi-ink: var(--text);
    --bi-ink-pasivo: #8C94A0;
}

/* ── A · LA PIEL OFICIAL ───────────────────────────────────────────────────
   Las mismas superficies que casi todos ya tenian (var(--card) ES #171A1F y
   var(--card-border) ES #252A31): lo que se va es el RELIEVE. Los que estaban
   dispares —las × en --accent-soft y los botones del visor en blanco al 17%—
   entran a la misma piel.
   Los selectores repiten EXACTAMENTE el prefijo de la regla que pisan: varias
   viven bajo un #id y una regla mas corta no les ganaria. Cero !important.  */

/* comanda de Produccion (encabezado) · ⋯ de las tarjetas · cabecera de Produccion */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-back,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-top .cmd-nav-arrow,
:root[data-theme="dark"][data-paleta="tierra"] .prod-kebab:not(.prod-kebab--sm),
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn,
/* × y volver de los modales: seccion de Biblioteca, ajustes de cocina, el lab,
   el apartado Menu del dia, la ficha del cocinero y la ficha del Recetario admin */
:root[data-theme="dark"][data-paleta="tierra"] .x-btn,
:root[data-theme="dark"][data-paleta="tierra"] .md-head .x-btn,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-back,
:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-close,
/* volver de Biblioteca y de la vista rapida del ingrediente */
:root[data-theme="dark"][data-paleta="tierra"] .pub-bib-head .pub-back-btn,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .back-btn,
/* filtros de ingredientes (los neutros; el + lima conserva su color mas abajo) */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn,
/* el visor de fotos: era el unico con sombra EXTERNA */
:root[data-theme="dark"][data-paleta="tierra"] .visor-x,
:root[data-theme="dark"][data-paleta="tierra"] .visor-nav {
    background: var(--bi-sup);
    border: 1px solid var(--bi-borde);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-back:hover,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-top .cmd-nav-arrow:hover,
:root[data-theme="dark"][data-paleta="tierra"] .prod-kebab:not(.prod-kebab--sm):hover,
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .x-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-back:hover,
:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-close:hover,
:root[data-theme="dark"][data-paleta="tierra"] .pub-bib-head .pub-back-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .back-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .visor-x:hover,
:root[data-theme="dark"][data-paleta="tierra"] .visor-nav:hover,
:root[data-theme="dark"][data-paleta="tierra"] .hub-gear-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .hub-bell-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .hub-avatar-btn:hover {
    border-color: var(--bi-borde-hover);
}

/* El gesto de apretar, igual en todos. (El giro de la × al pasar por encima NO
   se toca: es su hover de siempre y esta regla solo fija el fondo.) */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-back:active,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-top .cmd-nav-arrow:active,
:root[data-theme="dark"][data-paleta="tierra"] .prod-kebab:not(.prod-kebab--sm):active,
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .x-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-back:active,
:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-close:active,
:root[data-theme="dark"][data-paleta="tierra"] .pub-bib-head .pub-back-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .back-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .visor-x:active,
:root[data-theme="dark"][data-paleta="tierra"] .visor-nav:active,
:root[data-theme="dark"][data-paleta="tierra"] .hub-gear-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .hub-bell-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .hub-avatar-btn:active {
    background: var(--bi-activo);
}

/* ── La tinta, por rol ── */
/* Lo que se toca para IR o CERRAR: tinta principal. */
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-back,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-hero-top .cmd-nav-arrow,
:root[data-theme="dark"][data-paleta="tierra"] .x-btn,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .rec-hero-back,
:root[data-theme="dark"][data-paleta="tierra"] #modal-pase .modal-close,
:root[data-theme="dark"][data-paleta="tierra"] .pub-bib-head .pub-back-btn,
:root[data-theme="dark"][data-paleta="tierra"] #ing-detalle .back-btn,
:root[data-theme="dark"][data-paleta="tierra"] .visor-x,
:root[data-theme="dark"][data-paleta="tierra"] .visor-nav {
    color: var(--bi-ink);
}

/* La accion secundaria PASIVA. El ⋯ entra aca y de paso salda un contraste real:
   venia de var(--text-3), que sobre esta superficie mide 3,33:1. */
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn,
:root[data-theme="dark"][data-paleta="tierra"] .prod-kebab:not(.prod-kebab--sm),
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn,
:root[data-theme="dark"][data-paleta="tierra"] .hub-gear-btn,
:root[data-theme="dark"][data-paleta="tierra"] .hub-bell-btn {
    color: var(--bi-ink-pasivo);
}

/* ── B · LOS BOTONES DE ACCION: SU COLOR, PLANOS ───────────────────────────
   Solo se les apaga la sombra (el inset del brillito y el halo lima externo).
   Ni el fondo, ni la tinta, ni el tamano: el lima sigue lima y el hueso, hueso.
   Es lo que la tanda pasada ya le hizo a Guardar del Menu del dia; aca se
   unifican los que faltaban.                                                */
.btn-google-login,
.btn-google-login:hover,
.btn-primary:hover,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #tab-recetario .btn-ghost,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-next-step,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-filter-btn[style*="--btn-bg"],
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .empty-state .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .admin-topbar .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #modal-ingrediente .modal-footer .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary:last-of-type,
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary[onclick*="presuAbrirGuardar()"],
:root[data-theme="dark"][data-paleta="tierra"] #tab-presupuestos .presu-actions .presu-btn-primary[onclick*="Receta"],
:root[data-theme="dark"][data-paleta="tierra"] #tab-equipo .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] #modal-invitar .modal-footer .btn-primary,
:root[data-theme="dark"][data-paleta="tierra"] .onb-step-btn,
:root[data-theme="dark"][data-paleta="tierra"] .cmd-foot-btn,
:root[data-theme="dark"][data-paleta="tierra"] .pase-btn-pasa,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-btn,
:root[data-theme="dark"][data-paleta="tierra"] .pase-plan-box .pase-add-btn:first-child,
:root[data-theme="dark"][data-paleta="tierra"] .md-plant-btn,
/* La barrita ‹ semana › del apartado Menu del dia: es el grupo de dos flechas,
   no una barra de progreso. Se le apaga el relieve y queda plana como todo. */
:root[data-theme="dark"][data-paleta="tierra"] .md-week-nav {
    box-shadow: none;
}

/* Los DOS del flujo de entrada van aparte: su regla (REGISTRO BENTO) declara el
   box-shadow con !important —tuvo que ganarle a la hoja vieja del login—, asi que
   apagarlo pide la misma arma. Es el UNICO !important de la tanda, y solo sobre
   estos dos selectores. */
:root[data-theme="dark"][data-paleta="tierra"] .onb-btn-next,
:root[data-theme="dark"][data-paleta="tierra"] #view-login .btn-crear-cuenta {
    box-shadow: none !important;
}


/* ============================================================================
   TANDA CONSOLIDAR SUTIL — el cartel muere, los ⋯ avisan con luz
   ============================================================================
   Idea de Facu. El cartel amarillo "También lo necesita… / Consolidar" que se
   metía ADENTRO de la comanda murió (P1, en el JS): la fila queda limpia. La
   oportunidad vive ahora en el ⋯ de esa fila — con una LUCECITA que parpadea —
   y su opción abre un PANEL flotante con la MISMA tarjeta del bloque "Para
   juntar hoy", que además pasa del verde musgo al LIMA.
   ============================================================================ */

/* ── P2 · LA LUCECITA DEL ⋯ ────────────────────────────────────────────────
   Un puntito lima arriba a la derecha del botón, como el contador de la
   campanita. Va en position:absolute, así que NO cambia la geometría del ⋯
   (el A/B lo mide en 0 movidos). El único cambio en el botón es el
   position:relative, que sin offsets tampoco mueve nada.                    */
.prod-kebab--luz {
    position: relative;
}

.prod-kebab-luz {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C9C05A;
    box-shadow: 0 0 8px rgba(201, 192, 90, .8);
    animation: prodKebabLuz 1.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes prodKebabLuz {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Quien pidió menos movimiento no recibe un parpadeo: el puntito se queda fijo
   —la información es que ESTÁ, no que late—. */
@media (prefers-reduced-motion: reduce) {
    .prod-kebab-luz { animation: none; }
}

/* TANDA CONSOLIDAR 2 · P4 — el ⋯ del ENCABEZADO de la comanda, AL LADO de las ‹ ›. La barra era
   space-between con dos hijos (volver · flechas); con un tercero, las flechas quedarían al medio: el
   margin-left:auto las manda a la derecha y el ⋯ va pegado a ellas. Con dos hijos no mueve nada.
   32×32, con la piel oficial del ⋯ (fondo, borde, tinta pasiva) que ya le da la regla de siempre. */
.cmd-hero-top .cmd-nav {
    margin-left: auto;
}

.cmd-hero-top .prod-kebab--hd {
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 11px;
    font-size: 17px;
}

/* TANDA CONSOLIDAR 2 · P3 — la opción que trae la lucecita, DESTACADA en el menú del ⋯ (tarjeta,
   olla y encabezado de la comanda): su fila en lima suave y, al final, el MISMO puntito lima con su
   glow. Quieto: la que late es la del ⋯; acá ya la encontraste. */
.pmenu .pmenu-item.pmenu-item--luz {
    background: rgba(201, 192, 90, .10);
}

.pmenu-luz {
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: #C9C05A;
    box-shadow: 0 0 8px rgba(201, 192, 90, .8);
}

/* ── P3 · EL PANEL FLOTANTE ────────────────────────────────────────────────
   El molde de los cartelitos de la casa. Adentro va la MISMA tarjeta del
   fichero, así que hereda TODO su skin sin una regla propia.               */
.cons-panel-box {
    padding: 14px;
}

.cons-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cons-panel-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--font-titulo);
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* TANDA DE CONFIANZA · P4 — "⚭ Juntar todo", al lado de la ✕ (mockup aprobado): lima tenue en píldora. */
.cons-todo-btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 15px;
    border-radius: 99px;
    border: 1px solid rgba(216, 226, 74, .4);
    background: rgba(216, 226, 74, .1);
    color: #D8E24A;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}
.cons-todo-btn[hidden] { display: none; }
.cons-todo-btn:disabled { opacity: .6; cursor: default; }

/* Sin mazo: una sola tarjeta, en flujo. El padding de arriba que el fichero usa
   para que asomen los lomos acá no tiene sentido. */
.cons-panel-body {
    padding-top: 0;
}

/* TANDA CONSOLIDAR 2 · P1 — el panel ES la caja de la ficha: #171A1F, borde
   #2E3540, radio 20, la sombra de las capas que flotan y la misma luz lima tenue. */
:root[data-theme="dark"][data-paleta="tierra"] .cons-panel-box {
    background: #171A1F;
    background-image: radial-gradient(60% 40% at 85% 0%, rgba(201, 192, 90, .07), transparent 60%);
    border: 1px solid #2E3540;
    border-radius: 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

/* Adentro del panel la tarjeta NO dibuja una segunda caja: borde, fondo, luz y
   sombra ya los pone el panel. Es el mismo componente con una sola caja. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich.cons-panel-body .prod-fich-card {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* ── P4 · (CONSOLIDAR SUTIL) el fichero había pasado a LIMA pleno ──────────
   TANDA CONSOLIDAR 2 · P1 — y el lima pleno MUERE. Doctrina reafirmada por Facu:
   "el lima es ACENTO, no fondo". La ficha —el bloque "Para juntar hoy" Y el panel
   flotante, que son el MISMO componente (prodFichCardHTML)— pasa a OSCURO: caja
   #171A1F con borde #2E3540, radio 20 y una luz lima tenue arriba a la derecha.
   El lima queda en DOS lugares: los kilos y el botón "Juntar en una olla".
   Se REAPUNTAN los mismos tokens --fi-*: la ropa se cambia UNA vez y la leen las
   dos cajas. Los DEFAULT de la ficha ámbar de siempre siguen sin tocarse.     */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich {
    --fi-sup: #171A1F;                     /* la caja                              */
    --fi-base: #171A1F;                    /* la capa de abajo del mazo: opaca     */
    --fi-bd: #2E3540;
    --fi-hilo: #2E3540;                    /* sin hilito: el borde es parejo       */
    --fi-sep: rgba(255, 255, 255, .05);    /* separadores internos                 */
    --fi-tx: #F0F2F5;                      /* nombre, filas de platos, chips       */
    --fi-tx-2: #8C94A0;                    /* rótulos y la unidad                  */
    --fi-plato: #F0F2F5;
    --fi-linea: #2E3540;                   /* bordes de chips y del fantasma       */
    --fi-hueco: #0D1014;                   /* lo cavado: desplegable y chips       */
    --fi-num: #C9C05A;                     /* los KILOS: el primer acento lima     */
    --fi-btn: #DBD455;                     /* "Juntar": el ÚNICO lima de fondo     */
    --fi-btn-tx: #1A1A10;
    --fi-dot: #C9C05A;                     /* el puntito del mazo, fuera de la caja */
    --fi-foco: #C9C05A;
    --fi-radio: 20px;
}

/* LA CAJA, con su luz. Va apilada sobre la capa plana del mazo (la que hace opaca
   a la carta de adelante): un gradiente adentro de otro no es css válido, así que
   son dos capas. Sin sombra acá: la sombra es del flotante (ver .cons-panel-box). */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-card {
    border: 1px solid #2E3540;
    border-radius: 20px;
    box-shadow: none;
    background-image:
        radial-gradient(60% 40% at 85% 0%, rgba(201, 192, 90, .07), transparent 60%),
        linear-gradient(var(--fi-sup), var(--fi-sup));
}

/* Arriba: el corte a la izquierda y los KILOS a la derecha, en Sora y en lima. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-nm {
    font-size: 15.5px;
    font-weight: 800;
    color: #F0F2F5;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-cant {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    color: #C9C05A;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-cant .fi-u {
    font-size: 11px;
    color: #8C94A0;
}

/* LOS PLATOS, EN FILAS: el puntito del color del plato (la gama de SIN ECOS), el
   nombre, y los kilos contra el borde derecho, con su separador. El JS que arma
   las filas NO se toca (es el prodConsContrapartesHTML de siempre): acá cada ítem
   se vuelve un renglón. Muere el "·" del renglón corrido de PIZARRA. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-quien {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-quien .prod-sug-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-top: 1px solid rgba(255, 255, 255, .05);
    font-size: 12.5px;
    font-weight: 600;
    color: #F0F2F5;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-quien .prod-sug-item::before {
    content: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-quien .prod-sug-item b {
    margin-left: auto;
    font-weight: 800;
    color: #F0F2F5;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-sug-dot {
    flex: none;
    width: 8px;
    height: 8px;
    margin-right: 0;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-quien .prod-desg-para {
    color: #8C94A0;
}

/* "¿QUIÉN LA HACE?" y el desplegable, cavado. Su mecánica no se toca. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-dueno-lb {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8C94A0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-dueno-in {
    border: 1px solid #1E232A;
    border-radius: 12px;
    background-color: #0D1014;
    box-shadow: none;
    color: #F0F2F5;
}

/* Los dos botones: "Juntar en una olla" es el ÚNICO lima de fondo de la caja, y
   va PLANO; "Cada uno el suyo", transparente con el borde de la caja. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-sug-yes {
    background: #DBD455;
    color: #1A1A10;
    border-radius: 13px;
    font-weight: 800;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-sug-no {
    border-radius: 13px;
    background: transparent;
    border: 1px solid #2E3540;
    color: #F0F2F5;
    font-weight: 700;
    box-shadow: none;
}

/* El chip "ya la tengo", cavado como el desplegable; su ✓ en salvia (es "listo"). */
:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-tengo {
    background: #0D1014;
    border-color: #2E3540;
    color: #F0F2F5;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-tengo b {
    color: #F0F2F5;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich .prod-fich-tengo i {
    color: var(--salvia);
}

/* ── P5 · LAS 8 FAMILIAS QUE QUEDABAN, AL BOTÓN OFICIAL ────────────────────
   Las que el reporte del APLANADO GLOBAL dejó anotadas: ya eran planas, pero
   cada una con su piel. Facu aprobó unificarlas. Misma regla de siempre: solo
   la piel, la geometría y la forma no se tocan (cada una conserva SU radio).  */
:root[data-theme="dark"][data-paleta="tierra"] .hub-hide-btn,
:root[data-theme="dark"][data-paleta="tierra"] .mi-iconbtn,
:root[data-theme="dark"][data-paleta="tierra"] .ing-panel-close,
:root[data-theme="dark"][data-paleta="tierra"] .btn-nav,
:root[data-theme="dark"][data-paleta="tierra"] .prod-date-nav,
:root[data-theme="dark"][data-paleta="tierra"] .tb-toolbar .prod-date-nav,
:root[data-theme="dark"][data-paleta="tierra"] .pin-key,
:root[data-theme="dark"][data-paleta="tierra"] .pin-key.pin-key-del,
:root[data-theme="dark"][data-paleta="tierra"] .pub-step-btn,
:root[data-theme="dark"][data-paleta="tierra"] .tk-rep-btn,
:root[data-theme="dark"][data-paleta="tierra"] .receta-video-btn-quitar {
    background: var(--bi-sup);
    border: 1px solid var(--bi-borde);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-hide-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .mi-iconbtn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .ing-panel-close:hover,
:root[data-theme="dark"][data-paleta="tierra"] .btn-nav:hover,
:root[data-theme="dark"][data-paleta="tierra"] .prod-date-nav:hover,
:root[data-theme="dark"][data-paleta="tierra"] .pin-key:hover,
:root[data-theme="dark"][data-paleta="tierra"] .pub-step-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .tk-rep-btn:hover,
:root[data-theme="dark"][data-paleta="tierra"] .receta-video-btn-quitar:hover {
    border-color: var(--bi-borde-hover);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-hide-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .mi-iconbtn:active,
:root[data-theme="dark"][data-paleta="tierra"] .ing-panel-close:active,
:root[data-theme="dark"][data-paleta="tierra"] .btn-nav:active,
:root[data-theme="dark"][data-paleta="tierra"] .prod-date-nav:active,
:root[data-theme="dark"][data-paleta="tierra"] .pin-key:active,
:root[data-theme="dark"][data-paleta="tierra"] .pub-step-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .tk-rep-btn:active,
:root[data-theme="dark"][data-paleta="tierra"] .receta-video-btn-quitar:active {
    background: var(--bi-activo);
}

/* La tinta, por rol — la misma tabla del aplanado. Lo que se toca para navegar
   o actuar va en la tinta principal; el ojo de ocultar (que asoma sobre un
   widget) y el ⋯ del menú inmersivo son secundarios y van en la pasiva.
   EXCEPCIÓN declarada: la × de quitar el video conserva su ROJO — es un botón
   de peligro y su color ES la señal. */
:root[data-theme="dark"][data-paleta="tierra"] .ing-panel-close,
:root[data-theme="dark"][data-paleta="tierra"] .btn-nav,
:root[data-theme="dark"][data-paleta="tierra"] .prod-date-nav,
:root[data-theme="dark"][data-paleta="tierra"] .tb-toolbar .prod-date-nav,
:root[data-theme="dark"][data-paleta="tierra"] .pin-key,
:root[data-theme="dark"][data-paleta="tierra"] .pub-step-btn,
:root[data-theme="dark"][data-paleta="tierra"] .tk-rep-btn {
    color: var(--bi-ink);
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-hide-btn,
:root[data-theme="dark"][data-paleta="tierra"] .mi-iconbtn {
    color: var(--bi-ink-pasivo);
}


/* ============================================================================
   🌙 LA NOCHE DE LA DESTILACIÓN · FASE 2 — PRODUCCIÓN DEL DÍA (mockup
   MOCKUP-produccion-dia-movil, valores verbatim; 11-sep)
   ============================================================================
   Doctrina: CERO 3D · "una fila, dos pisos" en lo operativo · aire y un hilito
   en vez de cajas anidadas · el color como acento (el del plato SOLO en el filete,
   el número y la barra). Todo lo de acá PISA lo que quedó de PRODUCCIÓN 360,
   BENTO t2·B, SIN ECOS y RETOQUES: es el diseño definitivo de esta pantalla.
   La mecánica (filtros, hojitas, tildado, consolidar, ⋯, terminados, el motor)
   NO se toca: cambia qué se pinta y dónde.
   ---------------------------------------------------------------------------- */

/* ── 1 · LA CABECERA, EN UNA LÍNEA: título · pildorita · + Cargar ───────────
   Los dos botones de ícono (embudo y ✓) bajan a la FILA DE DÍAS. La pildorita
   (SIN ECOS) queda; en un celular baja a su renglón, como quedó. */
.prodhead-top {
    gap: 10px;
    margin-bottom: 12px;
}

.prodhead-tt {
    font-family: var(--font-titulo);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* "+ Cargar": lima PLANO, contra el borde derecho (el empuje que antes tenían
   los tres botones lo lleva él solo, así ya no se pasa del borde en 360). */
.ph-cargar {
    margin-left: auto;
    padding: 11px 16px;
    border-radius: 13px;
    border: none;
    background: var(--terra);
    color: var(--vivo-ink);
    font-family: var(--font-titulo);
    font-size: 13.5px;
    font-weight: 800;
    box-shadow: none;
}

@media (max-width: 600px) {
    .prodhead-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) max-content;
        justify-content: space-between;
        row-gap: 8px;
    }

    .ph-cargar {
        grid-column: 2;
        grid-row: 1;
        margin-left: 0;
    }
}

/* ── 2 · LA FILA DE DÍAS: los chips a la izquierda (scrollean), el calendario
   al final del riel, y los dos botones de ícono fijos a la derecha ─────────── */
.prodhead-dias {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.prodhead-sem {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    gap: 6px;
    padding: 2px 0;             /* aire para que el foco del chip no se recorte */
    scroll-snap-type: x proximity;
}

.prodhead-acts {
    flex: none;
    margin-left: 0;
    gap: 7px;
}

/* El chip de un día: 46px de dedo, radio 13, número en Sora 15 y etiqueta 9/800.
   Plano: superficie sólida, borde fino, sin relieve. */
.ph-dia {
    flex: 1 0 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 5px 4px;
    gap: 3px;
    justify-content: center;
    border-radius: 13px;
    border: 1px solid var(--card-border);
    background: var(--card);
    box-shadow: none;
    scroll-snap-align: start;
}

.ph-dia-d {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .04em;
}

.ph-dia-n {
    font-family: var(--font-titulo);
    font-size: 15px;
    font-weight: 800;
}

.ph-dia.act {
    background: var(--terra);
    border-color: var(--terra);
    box-shadow: none;
}

.ph-dia.act .ph-dia-d,
.ph-dia.act .ph-dia-n {
    color: var(--vivo-ink);
}

@media (max-width: 420px) {
    .ph-dia {
        min-width: 46px;
    }
}

/* El calendario, como un botón de ícono más (la piel oficial del aplanado),
   al final del riel. */
.ph-cal {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    border: 1px solid var(--bi-borde, #252A31);
    background: var(--bi-sup, #171A1F);
    color: #8C94A0;
    scroll-snap-align: end;
}

.ph-cal:hover {
    color: var(--text);
    border-color: var(--bi-borde-hover, #2E3540);
}

/* Los dos botones de ícono, con la piel oficial (ya eran planos desde el
   APLANADO GLOBAL): acá solo se igualan al tamaño de los chips de la fila. */
:root[data-theme="dark"][data-paleta="tierra"] .ph-btn {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

/* ── 3 · "PARA JUNTAR": de carrusel a UNA fila ──────────────────────────────
   El mazo de cartas (tanda 1e) y sus puntitos MURIERON. Queda una fila plana
   con la lucecita lima, "Para juntar · N preparaciones" y un ›. Tocarla abre
   el panel de juntar (la bandeja de la FASE 4). */
.prod-fich {
    margin-bottom: 14px;
}

.prod-fich-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #252A31;
    border-radius: 16px;
    background: #171A1F;
    color: var(--text);
    font-family: var(--font-titulo);
    font-size: 13.5px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .15s;
}

.prod-fich-fila:hover {
    border-color: #2E3540;
}

.prod-fich-luz {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C9C05A;
    box-shadow: 0 0 8px rgba(201, 192, 90, .8);
    animation: prodKebabLuz 1.6s ease-in-out infinite;
}

.prod-fich-fila-tx {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prod-fich-fila-chev {
    flex: none;
    font-size: 17px;
    color: #8C94A0;
}

@media (prefers-reduced-motion: reduce) {
    .prod-fich-luz {
        animation: none;
    }
}

/* El panel de juntar con VARIAS preparaciones: una tarjeta debajo de la otra,
   separadas por el hilito (la bandeja con acordeón llega en la FASE 4). */
.cons-panel-body {
    max-height: min(72vh, 640px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* (🌙 FASE 4: acá vivían las reglas `.varias` de la FASE 2 —las tarjetas apiladas con un
   hilito entre sí—; murieron con el acordeón de la bandeja, al final del archivo.) */

/* ── 4 · LAS TARJETAS DE PLATO: "una fila, dos pisos" (todas las plataformas) ─
   Piso 1: nombre 15.5/800 (+ el renglón chico) y la CANTIDAD en Sora 22 con el
   color del plato. Piso 2: el ⋯ (con su lucecita si aplica), la barra de 6px con
   el relleno del color (y su glow finito) y "X/Y listas". El color del plato vive
   SOLO en el filete izquierdo de 4px, el número y la barra: el velo de SIN ECOS
   (el ::before al 14%) MUERE — sobrio, operativo. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card {
    padding: 14px 15px 13px;
    border: 1px solid #252A31;
    border-left: 4px solid var(--pc, #252A31);
    background: #171A1F;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card::before {
    content: none;
}

.prod-plato-p1 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.prod-plato-tit {
    flex: 1 1 auto;
    min-width: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-nm {
    display: block;
    font-family: var(--font-titulo);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}

.prod-plato-p1 .prod-turno-chip {
    margin-top: 5px;
}

.prod-plato-sub {
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-2);
    overflow-wrap: anywhere;
}

.prod-plato-sub .prod-plato-asig {
    margin-left: 6px;
}

/* TANDA BÁSCULA · PIEZA 3 — la UNIDAD al lado del número grande ("5 kg", "12 porciones"):
   chica y gris, para que el protagonista siga siendo el número y el color del plato. */
.prod-plato-num .prod-plato-uni {
    margin-left: 4px;
    font-family: var(--font-cuerpo);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-num {
    flex: none;
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--pc, var(--text));
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.prod-plato-p2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 11px;
    min-width: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-p2 .prod-kebab {
    width: 36px;
    height: 36px;
    margin: 0;
    border-radius: 13px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .32);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);   /* el carril suave de doctrina */
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-bar-fill {
    background: var(--pc, var(--text-2));
    box-shadow: 0 0 6px var(--pc-glow, transparent);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-bar-fill.full {
    background: var(--salvia);
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-plato-card .prod-plato-count {
    flex: none;
    margin-left: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-2);
}

.prod-plato-card .prod-plato-curso {
    margin-top: 8px;
}

/* ── 5 · LOS RÓTULOS DE SECCIÓN: etiqueta 10/800 + el hilito ────────────────
   Acotado a #prod-lista: .prod-grupo-h la comparte el widget viejo del pool del HUB. */
:root[data-theme="dark"][data-paleta="tierra"] #prod-lista .prod-grupo-h {
    font-size: 10px;
    letter-spacing: .08em;
}

:root[data-theme="dark"][data-paleta="tierra"] #prod-lista .prod-grupo-ln {
    background: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"][data-paleta="tierra"] #prod-lista .prod-grupo-hint {
    color: var(--text-2);
}

/* ── 6 · LAS OLLAS DEL CATÁLOGO pierden el borde DORADO (cierre (a) de la
   tanda CONSOLIDAR 2): toman la piel pareja — sólido, borde fino, el "consolidado"
   como chip lima tenue y la cantidad en lima (el mismo acento de los kilos del
   fichero). También el cartel de consolidar y su botón "Consolidar todo". */
:root[data-theme="dark"][data-paleta="tierra"] .prod-sub.prod-cons {
    border: 1px solid #252A31;
    border-radius: 18px;
    background: #171A1F;
    padding: 12px 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-sub.prod-cons .prod-sub-nm {
    font-family: var(--font-titulo);
    font-size: 15.5px;
    font-weight: 800;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-sub.prod-cons .prod-sub-q {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-sub.prod-cons.done .prod-sub-q {
    color: var(--text-3);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-cons-tag {
    background: rgba(201, 192, 90, .12) !important;
    color: #C9C05A !important;
    border-radius: 999px;
    padding: 3px 8px;
    letter-spacing: .04em;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-cons-filas {
    border: 1px solid #252A31;
    border-radius: 18px;
    background: #171A1F;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-cons-fila {
    border-bottom-color: rgba(255, 255, 255, .05);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-cons-fila-q {
    font-family: var(--font-titulo);
    font-weight: 800;
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .consolidar-cortes {
    border: 1px solid #252A31;
    border-radius: 14px;
    background: #171A1F;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-cons-todo-btn {
    border: 1px solid rgba(201, 192, 90, .35);
    background: rgba(201, 192, 90, .12);
    color: #C9C05A;
}

/* ── 7 · CONTRASTE en la propia pantalla (lo que la ronda cazó bajo 4,5) ────
   La regla del contraste manda: los tenues de --text-3 pasan a --text-2. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-desg-manual,
:root[data-theme="dark"][data-paleta="tierra"] #prod-lista .prod-det-sec-h.prod-cons-sub-h,
:root[data-theme="dark"][data-paleta="tierra"] .ph-hoja-lb,
:root[data-theme="dark"][data-paleta="tierra"] .cal-day.fut,
:root[data-theme="dark"][data-paleta="tierra"] .cal-dows span,
:root[data-theme="dark"][data-paleta="tierra"] .cal-legend {
    color: var(--text-2);
}

/* "Hoy" del calendario: 22px de dedo como mínimo. */
.cal-hoy {
    min-height: 26px;
    padding: 4px 8px;
}


/* ============================================================================
   🌙 LA NOCHE DE LA DESTILACIÓN · FASE 3 — LA COMANDA "UNA FILA, DOS PISOS"
   (mockup MOCKUP-comanda-movil-respirada, valores verbatim; 11-sep)
   ============================================================================
   Doctrina: cada fila de ingrediente tiene una anatomía FIJA en grid
   (26px · 1fr · auto): el casillero de 22, el nombre grande con su piso 2 de
   detalles (chip de corte · ? · quién · "en crudo X · merma Y%" · el ⋯ chico),
   y la cantidad Sora 17 a la derecha. Nada flota, nada parte raro. Sin cajas
   anidadas: las filas viven directo sobre el modal, separadas por un hilito.
   Las S.R.E ("se hace aparte") y las filas de estado ("Cocinar · esperando")
   son filas de la casa (#171A1F · #252A31 · radio 14). MISMA anatomía en
   escritorio y tablet. Todo lo de acá PISA lo que quedó de BENTO t4·B2 y de
   CONSOLIDAR 2 en la comanda (por eso lleva el prefijo del skin: le gana con
   la misma arma). La mecánica NO se toca: cambia qué se pinta y dónde.
   ---------------------------------------------------------------------------- */

/* ── 0 · EL MARCO MUERE: la comanda se apoya directo sobre el modal ─────────── */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-body {
    padding: 4px 0 0;
}

/* ── 1 · LA CABECERA, COMPACTA: ← y ‹ › ⋯ en UNA línea · título 22 · el renglón
   "12 porciones · turno Tarde" · los chips abajo. El ícono en cajita murió. ── */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero {
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    padding-bottom: 14px;
    margin-bottom: 4px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-top {
    padding: 0 0 12px;
    gap: 8px;
}

/* el ⋯ del encabezado se empareja con los otros tres botones de la línea (40) */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-top .prod-kebab--hd {
    width: 40px;
    height: 40px;
    border-radius: 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-main {
    padding: 0;
    gap: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-tt h2 {
    font-family: var(--font-titulo);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
    overflow-wrap: anywhere;
}

.cmd-hero-sub {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-para {
    font-size: 12px;
    margin-top: 4px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-chips {
    margin-top: 9px;
    gap: 6px;
}

/* ── 2 · "INGREDIENTES | PRODUCÍS X": deja de ser caja — una línea con hilito ── */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-panel {
    margin: 0 0 18px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-panel-h {
    padding: 12px 0 10px;
    background: none;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    align-items: center;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-panel-tt {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-prod-pill {
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    font-family: var(--font-titulo);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-panel-body {
    padding: 12px 0 0;
}

/* ── 3 · LA FILA: grid 26px · 1fr · auto ─────────────────────────────────────── */
/* TANDA BÁSCULA · PIEZA 2 — LA PLACA. Cada ingrediente deja la fila de dos pisos y pasa a
   ser una PLACA: el CAJÓN de la cantidad (la báscula) a la izquierda y el cuerpo a la
   derecha. Las placas se separan con AIRE (9px), no con hilitos.
   El ancho del cajón es una VARIABLE y no el valor fijo del mockup: el mockup define
   ESCRITORIO (700px) y en un celular de 360 dos cajones de 96 dejarían al cuerpo sin
   nada. Se achica por ancho, MEDIDO — la regla de la TANDA DE CAMPO 1 manda: nada se
   recorta contra el borde. */
.cmd-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    --cmd-caj: 100px;
    --cmd-caj2: 96px;
}

.cmd-rows > .cmd-row {
    display: flex;
    align-items: stretch;
    min-width: 0;
    border: 1px solid #252A31;
    border-radius: 14px;
    background: #171A1F;
    overflow: hidden;
}

/* EL CAJÓN: conserva la clase `cmd-c-qty` porque sigue siendo la cantidad de la fila —
   es la que miden los controles de campo.js ("la columna de cantidades se ve entera"). */
.cmd-rows > .cmd-row > .cmd-c-qty {
    flex: none;
    display: flex;
    min-width: 0;
    background: #0F1216;
    border-right: 1px solid #252A31;
}

.cmd-caj-c {
    flex: none;
    width: var(--cmd-caj);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 6px;
    text-align: center;
}

/* cajón DOBLE: dos gemelos del MISMO tamaño, separados por una línea punteada */
.cmd-caj--2 .cmd-caj-c {
    width: var(--cmd-caj2);
}

.cmd-caj--2 .cmd-caj-c + .cmd-caj-c {
    border-left: 1px dashed #2A3037;
    background: #12161B;
}

/* EL CUERPO */
.cmd-b {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 12px 14px;
    min-width: 0;
}

.cmd-c-chk {
    flex: none;
    min-width: 0;
}

.cmd-rows > .cmd-row > .cmd-b > .cmd-c-main {
    flex: 1 1 120px;
    min-width: 0;
}

.cmd-row.done .cmd-c-qty {
    opacity: .55;
}

/* NADA SE RECORTA — la regla de la TANDA DE CAMPO 1, medida otra vez acá.
   En 360px el DOM cantó DOS culpables: el chip "se hace aparte → pendiente" pedía
   210,8px en un cuerpo de 209 (la regla de la comanda le dio `white-space: normal` y
   `max-width: none`: no se corta NI se achica) y la fila de chips de un corte pedía
   107 en 89. Se arreglan por separado, y los dos hacen falta: ni las acciones ni los
   chips pueden pedir más ancho que el cuerpo que los contiene, y el cajón cede lugar
   en una pantalla angosta. MEDIDO: desborde en 360 de 16px → 0 (en 390 ya era 0). */
.cmd-r2-det,
.cmd-r2-acts {
    max-width: 100%;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-chain {
    max-width: 100%;
}

/* El mockup define ESCRITORIO: sus 100/96 px de cajón dejan al cuerpo con 117px en un
   celular de 360. Estos dos valores salen de probar candidatos contra el DOM real. */
@media (max-width: 420px) {
    .cmd-rows {
        --cmd-caj: 84px;
        --cmd-caj2: 76px;
    }
}

/* el casillero: 22×22, radio 7; tildado, lima pleno con el ✓ en su tinta */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row .cmd-chk {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid #3A424C;
    background: transparent;
    color: var(--vivo-ink);
    font-size: 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row .cmd-chk:hover {
    border-color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row .cmd-chk.on {
    background: var(--terra);
    border-color: var(--terra);
    color: var(--vivo-ink);
}

/* piso 1: el nombre, grande (nunca se corta: cede en vez de desbordar) */
.cmd-r1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-nm {
    font-family: var(--font-titulo);
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--text);
    min-width: 0;
    overflow-wrap: anywhere;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row.done .cmd-nm {
    text-decoration: line-through;
    color: var(--text-2);
}

/* la merma, chiquita bajo el nombre: el "en crudo X" se mudó al cajón, así que acá
   queda SOLO "merma 3%" */
.cmd-sub {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-2);
    min-width: 0;
}

/* los chips (forma, "?", quién) al lado del nombre y las acciones ANCLADAS a la derecha */
.cmd-r2-det {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

.cmd-r2-acts {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin-left: auto;
}

/* la banda "¿Contás con esta preparación?" vive DENTRO de la placa, a todo lo ancho del
   cuerpo y bajo una línea punteada */
.cmd-banda {
    flex-basis: 100%;
    width: 100%;
    min-width: 0;
    margin-top: 3px;
    padding-top: 10px;
    border-top: 1px dashed rgba(201, 192, 90, .22);
}

/* el nombre, dentro de la placa: 14/700 como el mockup. Scopeado a `.cmd-rows` a
   propósito — `.cmd-nm` lo comparte la tabla de MISE (el detalle clásico y la comanda
   de un corte suelto), que esta tanda NO toca. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-nm {
    font-family: var(--font-cuerpo);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .mrec-corte-pill {
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--terra);
    background: rgba(201, 192, 90, .12);
    white-space: normal;
    overflow-wrap: anywhere;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row.done .mrec-corte-pill,
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-row.done .mrec-q-num {
    opacity: .55;
}

/* el "?" con 22px de dedo y legible (cierre c) */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-help {
    width: 22px;
    height: 22px;
    border: 1px solid #3A424C;
    color: var(--text-2);
    font-size: 11px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-help:hover {
    color: var(--text);
    border-color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .mrec-crudo {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    line-height: 1.3;
}

/* el ⋯ chico de la fila: 26×26, piel oficial plana, con su lucecita */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .prod-kebab--sm {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 9px;
    font-size: 15px;
    background: var(--bi-sup, #171A1F);
    border: 1px solid var(--bi-borde, #252A31);
    color: #8C94A0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .prod-kebab-luz {
    top: 1px;
    right: 1px;
}

/* los botones de acción y los chips de cadena, en píldora dentro del piso 2 */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-act {
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-act.ghost {
    padding: 4px 10px;
    font-size: 14px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-act.cmd-wait {
    border: none;
    white-space: normal;
    /* CONFIANZA · P5 — su borde lima como outline hacia adentro: el color del mockup sin mover un px */
    outline: 1px solid rgba(216, 226, 74, .35);
    outline-offset: -1px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-rows .cmd-chain {
    margin: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
}

/* el número del cajón: Sora 20 tabular (18 en el doble, los DOS del mismo tamaño) y su
   unidad en mayúscula chica debajo.
   DESVÍO MEDIDO del mockup: la unidad va en --text-2 y no en el #6B7280 del mockup —
   sobre el #0F1216 del cajón ése da 4,06:1 y la regla de contraste manda (4,5). */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-c-qty .mrec-q-num {
    font-family: var(--font-titulo);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-caj--2 .mrec-q-num {
    font-size: 18px;
}

/* Un número LARGO se achica en vez de partirse. Las dos reglas van DESPUÉS de la del
   cajón doble a propósito: empatan en especificidad, así que gana la última y una pizca
   dentro de un cajón doble también se achica. */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-caj--lg .mrec-q-num {
    font-size: 15px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-caj--xl .mrec-q-num {
    font-size: 12.5px;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-c-qty .mrec-q-un {
    margin: 0;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text-2);
}

/* ── 4 · LAS S.R.E: la MISMA placa, con el borde en la familia de lo vivo ───── */
.cmd-rows > .cmd-row-sub {
    border-color: rgba(201, 192, 90, .3);
}

.cmd-rows > .cmd-row-sub > .cmd-c-qty {
    border-right-color: rgba(201, 192, 90, .2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .mrec-sub-pill {
    margin: 0;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-curso {
    margin-top: 0;
    font-size: 12px;
}

/* la banda ya no es una caja aparte: es el renglón de abajo de la placa */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-banda .prod-tenes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-banda .prod-tenes-txt {
    flex: 1 1 auto;
    min-width: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-banda .prod-tenes-acts {
    margin: 0;
}

/* la barra "Cocinar" ya es fila de la casa (CONSOLIDAR 2): solo se empareja el aire */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-cook {
    margin: 14px 0 6px;
    border-radius: 14px;
}

/* la nota de "producto limpio", legible (cierre c) */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-nota {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-empty {
    padding: 14px 0;
    font-size: 13px;
    color: var(--text-2);
}

/* ── 5 · PROCEDIMIENTO y PIE: los mismos materiales planos ──────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-panel-proc .rec-proc-card {
    background: #171A1F;
    border: 1px solid #252A31;
    border-radius: 14px;
    box-shadow: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-foot {
    padding: 14px 0 4px;
    background: none;
    border-top: 1px solid rgba(255, 255, 255, .05);
}

/* ── 6 · Lo de la TABLA vieja que ya no aplica acá (la vista clásica y la
   comanda de un corte suelto siguen con su cmd-mise-table, intactas) ─────────── */
@media (max-width: 640px) {
    :root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-main {
        padding: 0;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .prod-comanda .cmd-hero-tt h2 {
        font-size: 22px;
    }
}


/* ============================================================================
   🌙 LA NOCHE DE LA DESTILACIÓN · FASE 4 — LA BANDEJA "PARA JUNTAR"
   (mockup MOCKUP-parajuntar-5preps, valores verbatim; 11-sep)
   ============================================================================
   En un celular o tablet (≤768) el panel compartido de juntar (#modal-consolidar-panel)
   es un BOTTOM SHEET: sube desde abajo, con su asita, radios de 22 arriba y el velo
   al .45; cierra tocando el velo, la ✕ o deslizándolo hacia abajo (arranque.js).
   En escritorio sigue siendo el panel flotante de siempre. Con VARIAS preparaciones
   la bandeja es un ACORDEÓN: una abierta a la vez (la abierta flota: borde #3a3f2a
   + la sombra de lo que flota), la decisión es por preparación —no existe "juntar
   todas"— y lo resuelto queda en su fila al .55 con su chip. El componente es el
   MISMO (prodFichCardHTML): cambia la caja, no la maquinaria.
   ---------------------------------------------------------------------------- */

/* El cartel de consolidar viene ANTES que la bandeja en el DOM y comparte su z:
   sin esto la bandeja lo taparía. Flota encima, y la bandeja sigue abajo. */
#modal-consolidar {
    z-index: 1001;
}

/* ── 1 · ≤768: EL BOTTOM SHEET ───────────────────────────────────────────────── */
@media (max-width: 768px) {
    #modal-consolidar-panel {
        align-items: flex-end;
        padding: 0;
        background: rgba(0, 0, 0, .45);
    }

    #modal-consolidar-panel .cons-panel-box {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        max-height: 88dvh;
        margin: 0;
        padding: 8px 14px calc(14px + env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
        border-bottom: none;
        animation: none;
    }

    /* la asita: 44×4, #2E3540 */
    #modal-consolidar-panel .cons-panel-box::before {
        content: '';
        display: block;
        flex: none;
        width: 44px;
        height: 4px;
        margin: 0 auto 10px;
        border-radius: 99px;
        background: #2E3540;
    }

    #modal-consolidar-panel .cons-panel-head {
        flex: none;
        touch-action: none;       /* el deslizamiento hacia abajo lo escucha arranque.js */
        cursor: grab;
        user-select: none;        /* es un asa: arrastrarla no selecciona el título */
        -webkit-user-select: none;
    }

    #modal-consolidar-panel .cons-panel-body {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
    }
}

/* ── 2 · EL ACORDEÓN (solo con varias preparaciones) ─────────────────────────── */
.fich-acc {
    margin-bottom: 8px;
    border: 1px solid #252A31;
    border-radius: 16px;
    background: #171A1F;
    overflow: hidden;
}

.fich-acc:last-child {
    margin-bottom: 0;
}

.fich-acc-h {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-titulo);
    text-align: left;
    cursor: pointer;
}

.fich-acc-nm {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.fich-acc-kg {
    flex: none;
    font-size: 15px;
    font-weight: 800;
    color: var(--terra);
    font-variant-numeric: tabular-nums;
}

.fich-acc-kg .fi-u {
    margin-left: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-2);
}

/* LA LEY DEL FUEGO · PIEZA 2 — "de cuánto a cuánto": cuando la juntada SUMA a una olla que ya
   existe, los kilos dicen "<antes> → <después>". El antes, apagado; la flecha, fina; el después
   conserva el peso de siempre (hereda del contenedor). Vale en la fila cerrada de la bandeja y en
   la cabecera de la tarjeta. El antes va en --text-2 y no en --text-3: sobre la bandeja
   (#171A1F) --text-3 mide 3,3:1 y es un dato que se lee. */
.fich-acc-kg,
.prod-fich-cant { white-space: nowrap; }
.fi-antes {
    font-weight: 700;
    color: var(--text-2);
}
.fi-flecha {
    margin: 0 4px;
    font-weight: 400;
    color: var(--text-2);
}

.fich-acc-chev {
    flex: none;
    font-size: 16px;
    color: var(--text-2);
    transition: transform .15s;
}

.fich-acc-b {
    display: none;
    padding: 0 14px 14px;
}

/* la abierta FLOTA: borde #3a3f2a y la sombra de lo que flota (lo declara el mockup) */
.fich-acc.open {
    border-color: #3a3f2a;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
}

.fich-acc.open .fich-acc-chev {
    transform: rotate(180deg);
}

.fich-acc.open .fich-acc-b {
    display: block;
}

.fich-acc.open .fich-acc-h {
    padding-bottom: 6px;
}

/* la cabecera del acordeón ya dice nombre + kg: la tarjeta de adentro no lo repite, y
   tampoco dibuja su propia caja */
.fich-acc .prod-fich-top {
    display: none;
}

:root[data-theme="dark"][data-paleta="tierra"] .prod-fich.cons-panel-body .fich-acc .prod-fich-card {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* ── 3 · LO RESUELTO: la fila al .55 con su chip ─────────────────────────────── */
.fich-acc.resuelta {
    opacity: .55;
}

.fich-acc.resuelta .fich-acc-h {
    cursor: default;
}

.fich-acc-res {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border-radius: 99px;
    background: rgba(143, 169, 143, .14);
    color: var(--salvia);
    font-family: var(--font-cuerpo);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.fich-acc-res.aparte {
    background: rgba(255, 255, 255, .06);
    color: var(--text-2);
}

.cons-panel-fin {
    padding: 12px 2px 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    text-align: center;
}


/* ============================================================================
   🌙 LA NOCHE DE LA DESTILACIÓN · FASE 5 — LOS FLECOS (11-sep)
   ============================================================================
   Lo que quedó suelto después de las cuatro fases: el pulso del HUB en UNA línea
   (datos · barra · avisos; en celular los avisos bajan a su renglón), el aire del
   HUB en celular, y todo lo que la ronda cazó fuera de Producción y la comanda —
   contrastes bajo 4,5, blancos de toque menores a 22px, los dos ámbar que quedaban
   sin casa (el "en curso" del pase y el ámbar del panel admin), un recorte en
   tablet y el último `inset` que no era ni carril ni widget. Solo pintura.
   ---------------------------------------------------------------------------- */

/* ── 1 · EL PULSO EN UNA LÍNEA: datos a la izquierda · barra al centro · avisos a la
   derecha, CUANDO ENTRAN. Si no entran (tablet, o un día con muchos avisos) los avisos
   bajan ENTEROS a su renglón —nunca partidos en dos filas— y la barra se estira. No
   depende de un ancho de pantalla fijo: con un corte en 1024 se medía 102px en 1024 y
   144px en 768 porque los avisos envolvían dentro de su columna. En celular (≤640), una
   columna: datos, barra, avisos. Sin tocar el HTML (`.hp-centro { display: contents }`). */
:root[data-theme="dark"][data-paleta="tierra"] .hub-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 18px;
    row-gap: 10px;
    padding: 12px 18px;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-centro {
    display: contents;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-datos {
    flex: none;
    margin: 0;
    gap: 16px;
    flex-wrap: nowrap;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-bar {
    flex: 1 1 160px;
    min-width: 120px;
    margin: 0;
}

:root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-chips {
    flex: 0 1 auto;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 0 auto;
}

@media (max-width: 640px) {
    :root[data-theme="dark"][data-paleta="tierra"] .hub-panel {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 9px;
        padding: 12px 14px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-datos {
        flex-wrap: wrap;
        gap: 6px 14px;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-bar {
        min-width: 0;
    }

    :root[data-theme="dark"][data-paleta="tierra"] .hub-panel .hp-chips {
        justify-content: flex-start;
        margin: 0;
    }
}

/* ── 1b · EL AIRE DEL HUB EN CELULAR: la barra de avisos arrancaba 48px debajo del
   encabezado y el ritmo era barra →16→ pulso →16→ bloques (que entre sí van a 10).
   En una columna todo va a 10, el mismo aire que los bloques y los costados. ── */
@media (max-width: 640px) {
    #pub-home {
        padding-top: 0;
    }

    .hub-strip,
    .hub-panel {
        margin-bottom: 10px;
    }
}

/* el rótulo de cada dato sobre el hueso: el #5a5d52 del mockup daba 3,85 */
:root[data-theme="dark"][data-paleta="tierra"] .hp-dato-l {
    color: #4A4D43;
}

/* ── 2 · CONTRASTE: la regla manda. Los tenues (--text-3, 3,05) que la ronda cazó fuera de
   Producción pasan a --text-2; los que llevan su propio tono, a uno legible de la misma familia. */
:root[data-theme="dark"][data-paleta="tierra"] .ajc-go,
:root[data-theme="dark"][data-paleta="tierra"] .turno-flecha,
:root[data-theme="dark"][data-paleta="tierra"] .hub-tray-t,
:root[data-theme="dark"][data-paleta="tierra"] .hub-tray-empty,
:root[data-theme="dark"][data-paleta="tierra"] .hp-pop-mas,
:root[data-theme="dark"][data-paleta="tierra"] .tk-reg-rango,
:root[data-theme="dark"][data-paleta="tierra"] .tk-reg-toma-lbl,
:root[data-theme="dark"][data-paleta="tierra"] .tk-reg-meta,
:root[data-theme="dark"][data-paleta="tierra"] .mi-prox-lbl,
:root[data-theme="dark"][data-paleta="tierra"] .carga-empty,
:root[data-theme="dark"][data-paleta="tierra"] .tg-item-desc,
:root[data-theme="dark"][data-paleta="tierra"] .tg-panel-n,
:root[data-theme="dark"][data-paleta="tierra"] .tg-help-p,
:root[data-theme="dark"][data-paleta="tierra"] .tgf-group > label,
/* (los del día ELEGIDO no: van en --vivo-ink sobre el lima — la trampa ya anotada en bento t4·A6) */
:root[data-theme="dark"][data-paleta="tierra"] .md-day:not(.sel) .md-day-cub,
:root[data-theme="dark"][data-paleta="tierra"] .md-day:not(.sel) .md-day-asignar,
:root[data-theme="dark"][data-paleta="tierra"] .turno-btn-del,
:root[data-theme="dark"][data-paleta="tierra"] .estcoc-btn-arch,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .mrec-limpia {
    color: var(--text-2);
}

/* la × de archivar una familia trae su color INLINE: se la alcanza por su propio atributo */
:root[data-theme="dark"][data-paleta="tierra"] #fam-lista button[onclick^="archivarFamilia"] {
    color: var(--text-2) !important;
}

/* Estaciones de cocina: la × de QUITAR a una persona de la estación (el botoncito suelto adentro de su
   chip: 2,73 y 13×16px) y el "Nadie vinculado todavía." (3,33) */
:root[data-theme="dark"][data-paleta="tierra"] .estcoc-chip > button {
    min-width: 22px;
    min-height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    color: var(--text-2);
}

:root[data-theme="dark"][data-paleta="tierra"] .estcoc-sin {
    color: var(--text-2);
}

/* sobre el hueso de la ficha del cocinero y del menú: el alpha sube un paso (4,12 / 4,38 → ≥4,5) */
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-lbl,
:root[data-theme="dark"][data-paleta="tierra"] #modal-receta-cocina .scale-unit,
:root[data-theme="dark"][data-paleta="tierra"] .md-opt {
    color: rgba(27, 30, 22, .78);
}

/* el % del hero de Tareas y los números de las estaciones: el #8F862E daba 2,99 (vara 3);
   el lever ya sellado en bento t6·P4 / t9 / t10 es #6E6722 */
:root[data-theme="dark"][data-paleta="tierra"] .pub-st-n,
:root[data-theme="dark"][data-paleta="tierra"] .tb-av-pct {
    color: #6E6722;
}

/* "Guardar" de la barra de edición del HUB: #fff sobre lima daba 1,88 (bug real) */
:root[data-theme="dark"][data-paleta="tierra"] .hub-eb-primary {
    color: var(--vivo-ink);
}

/* "acá estás" del menú inmersivo: tinta oscura sobre fondo oscuro (1,32) → lima con su tinta */
:root[data-theme="dark"][data-paleta="tierra"] .mi-badge {
    background: var(--terra);
    color: var(--vivo-ink);
}

/* EMPAREJADO ADMIN — el semáforo de precios de Ingredientes deja los rojos y verdes de la
   paleta vieja: "sube" en el borgoña de la casa (2,99 → legible) y "baja" en salvia */
:root[data-theme="dark"][data-paleta="tierra"] .variacion-badge.var-sube {
    background: var(--borg-suave);
    color: var(--borg-tx);
}

:root[data-theme="dark"][data-paleta="tierra"] .variacion-badge.var-baja {
    background: var(--salvia-suave);
    color: var(--salvia);
}

/* (La píldora "PRÓXIMAMENTE" de las vitrinas —4,11— y "v1.0 · BRILLAT" —3,04— NO se tocan:
   son de las vitrinas/el pie del HUB, previas a la noche. Quedan como duda anotada.) */

/* el tag R.G.E de las tarjetas de sección y del menú: el fondo un paso más oscuro (4,36 / 4,45) */
:root[data-theme="dark"][data-paleta="tierra"] .tag-rge {
    background: rgba(129, 199, 132, .12);
}

/* ── 3 · LOS DOS ÁMBAR QUE QUEDABAN SIN CASA ─────────────────────────────────
   El "en curso" del Pase y el "tiempo vs histórico" del panel admin: la familia de lo VIVO. */
:root[data-theme="dark"][data-paleta="tierra"] .pase-estado.curso {
    background: rgba(201, 192, 90, .12);
    color: var(--terra);
}

:root[data-theme="dark"][data-paleta="tierra"] #tab-panel .panel-amber {
    color: var(--terra);
}

/* ── 4 · BLANCOS DE TOQUE ≥ 22px ─────────────────────────────────────────────── */
:root[data-theme="dark"][data-paleta="tierra"] .help-pop-close {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
}

:root[data-theme="dark"][data-paleta="tierra"] .presu-tab .presu-x {
    width: 24px;
    height: 24px;
}

:root[data-theme="dark"][data-paleta="tierra"] .presu-blkhead .presu-x,
:root[data-theme="dark"][data-paleta="tierra"] .turno-btn-del,
:root[data-theme="dark"][data-paleta="tierra"] .estcoc-btn-arch,
:root[data-theme="dark"][data-paleta="tierra"] #fam-lista button[onclick^="archivarFamilia"] {
    min-width: 28px;
    min-height: 28px;
    display: inline-grid;
    place-items: center;
    padding: 0 6px !important;
    border-radius: 8px;
}

/* "Ver archivadas" (familias, estaciones, turnos): 17px de alto con su padding inline en 0 */
:root[data-theme="dark"][data-paleta="tierra"] #fam-toggle-arch,
:root[data-theme="dark"][data-paleta="tierra"] #estcoc-toggle-arch,
:root[data-theme="dark"][data-paleta="tierra"] #turnos-toggle-arch {
    min-height: 28px !important;
    padding: 0 6px !important;
    border-radius: 8px;
}

:root[data-theme="dark"][data-paleta="tierra"] #presu-cnt {
    min-height: 30px;
}

/* ── 5 · RECORTE: la lista de ingredientes en tablet pedía 17–21px más de ancho y los
   escondía (overflow hidden). Scrollea a lo ancho, como la papelera (t13·P5.3). ─────── */
:root[data-theme="dark"][data-paleta="tierra"] #tab-ingredientes .ing-list-wrap {
    overflow-x: auto;
}

/* ── 6 · (El anillo de edición del HUB viejo —el último inset que no era ni carril ni
   widget— se arregló EN SU LUGAR: body.hub-editing .hub-wcard>.hub-w pasó a outline.) ── */


/* ============================================================
   TANDA EQUIPO EN TARJETAS — cada persona es una TARJETA
   Mockup mockup-equipo-v2.html, aprobado por Facu. Reemplaza a la tabla
   genérica del recetario en #tab-equipo (sus reglas quedaron sin emisor y se
   fueron con ella).

   LOS COLORES SALEN DE LOS TOKENS DE LA CASA, no de los hex del mockup: ese
   archivo es una página suelta y declara su propio :root, así que sus valores
   son aproximaciones de los que ya viven en el §0 (mismo criterio que t9-t13).
   Van con fallback por si la tarjeta se pinta fuera del scope de #tab-equipo.

   LA TARJETA DE BAJA NO USA `opacity`, y es una desviación MEDIDA del mockup:
   con el .62 que pide, el mail (--text-2) cae a 2,98:1 — por debajo de la vara.
   La distinción "de un vistazo" la dan el borde PUNTEADO y la superficie hueca
   (la tarjeta viva es sólida), que se leen sin leer y no hunden ni un texto:
   sobre el lienzo el mail mide 6,24:1.
   ============================================================ */

.eq-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 768px) {
    .eq-lista {
        grid-template-columns: 1fr 1fr;
    }
}

.eq-card {
    background: var(--rc-sup, var(--card));
    border: 1px solid var(--rc-borde, var(--card-border));
    border-radius: 15px;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
}

.eq-card.inactivo {
    background: transparent;
    border-style: dashed;
}

.eq-top {
    display: flex;
    align-items: center;
    gap: 11px;
}

.eq-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--relieve);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 14px;
}

.eq-card.inactivo .eq-avatar {
    background: transparent;
    border: 1px dashed var(--rc-borde, var(--card-border));
}

.eq-quien {
    flex: 1;
    min-width: 0;
}

.eq-nm {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
}

/* De baja: el nombre baja un escalón de jerarquía (5,7:1, muy por encima de la
   vara) en vez de atenuarse con opacity. */
.eq-card.inactivo .eq-nm {
    color: var(--text-2);
}

.eq-mail {
    font-size: 11.5px;
    color: var(--text-2);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eq-vos {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--rc-lima-ink, #1A1A10);
    background: var(--rc-lima, #DBD455);
    border-radius: 5px;
    padding: 2px 7px;
    vertical-align: middle;
    margin-left: 6px;
}

.eq-abajo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* El ROL ocupa el ancho que sobra; los demás no se encogen. Con el mínimo,
   en una pantalla angosta el botón baja a su renglón en vez de apretarse. */
.eq-abajo .cs-wrap {
    flex: 1 1 130px;
    min-width: 0;
}

/* El "cambiar" del mockup: va por CSS, delante de la flecha que el Select
   Custom ya dibuja. El JS del Select Custom no se toca.
   MEDIDO en 390px: con la palabra puesta, el rol se queda con 141px y "Cocinero"
   sale cortado ("Cocin…"). En pantalla angosta se esconde — la flecha ya dice
   que se abre, y el dato que importa es el ROL. */
.eq-abajo .cs-trigger::after {
    content: '';
    order: 1;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-3);
    white-space: nowrap;
}

/* La palabra va DESPUÉS de la regla de arriba a propósito: empatan en
   especificidad, así que manda la última. (Al revés no se veía nunca.) */
@media (min-width: 481px) {
    .eq-abajo .cs-trigger::after {
        content: 'cambiar';
    }
}

.eq-abajo .cs-trigger .cs-arrow {
    order: 2;
}

.eq-abajo .cs-trigger .cs-trigger-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El rol de la cuenta PROPIA: el mismo marco, sin nada que abrir. */
.eq-rol--fijo {
    flex: 1 1 130px;
    min-width: 0;
    background: var(--rc-hundido, var(--relieve));
    border: 1px solid var(--rc-hundido-bd, var(--border));
    border-radius: 10px;
    padding: 7px 11px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.eq-estado {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    border-radius: 999px;
    padding: 7px 12px;
}

.eq-estado.on {
    color: var(--rc-salvia-tx, var(--salvia));
    background: var(--rc-salvia-bg, rgba(143, 169, 143, .16));
}

.eq-estado.on::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Los dos botones de estado. Alto ≥ 30px: se tocan con el dedo. */
.eq-btn-act,
.eq-btn-baja {
    flex: none;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 11px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.2;
}

/* "Activar": lima tenue — invita a prender (el mismo material que tenía el
   botón de la tabla vieja). */
.eq-btn-act {
    background: var(--rc-lima-bg, rgba(201, 192, 90, .14));
    border: 1px solid transparent;
    color: var(--rc-lima-tx, var(--terra));
}

/* "Dar de baja": fantasma. EL MOCKUP NO DIBUJA ESTE BOTÓN — sus tarjetas
   activas no tienen ninguna acción—, pero sin él no hay forma de dar de baja
   a nadie y la papelera queda inalcanzable (el borrado pide la baja primero).
   Va discreto a propósito: la acción de esta pantalla es invitar. */
.eq-btn-baja {
    background: transparent;
    border: 1px solid var(--rc-borde, var(--card-border));
    color: var(--text-2);
    font-weight: 700;
}


/* ── LA PAPELERA DEL EQUIPO ──────────────────────────────────
   El botón de borrar vive SOLO en una tarjeta ya de baja (dos pasos, sin
   accidentes) y nunca en la cuenta propia: eso lo decide eqPuedeBorrar().
   El bloque de abajo está plegado, como la papelera del recetario.
   Los colores de peligro son los de la casa (--red / --borg), no el coral del
   mockup: el coral está reservado al 86 y a las alarmas. */

.eq-btn-del {
    flex: none;
    width: 34px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid rgba(200, 106, 128, .35);
    background: rgba(200, 106, 128, .07);
    color: var(--red);
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.eq-pap-link {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    margin-top: 14px;
    background: var(--rc-sup, var(--card));
    border: 1px solid var(--rc-borde, var(--card-border));
    border-radius: 13px;
    padding: 12px 15px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    color: var(--text-2);
    text-align: left;
    cursor: pointer;
}

.eq-pap-link i {
    font-style: normal;
}

.eq-pap-n {
    font-weight: 400;
    color: var(--text-2);
}

.eq-pap-flecha {
    margin-left: auto;
    color: var(--text-2);
}

.eq-pap {
    margin-top: 12px;
    background: var(--rc-hundido, var(--bg-2));
    border: 1px dashed var(--rc-borde, var(--card-border));
    border-radius: 15px;
    padding: 13px 15px;
}

.eq-pap h3 {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: var(--text-2);
    text-transform: uppercase;
    margin: 0 0 10px;
}

.eq-pap-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 9px 0;
    border-top: 1px solid var(--rc-sep, rgba(255, 255, 255, .05));
}

.eq-pap-item:first-of-type {
    border-top: none;
}

.eq-pap-av {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--relieve);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-titulo);
    font-weight: 800;
    font-size: 12px;
    color: var(--text-2);
}

/* El nombre TACHADO: la marca de "esto ya no está" (mockup). */
.eq-pap-nm {
    font-size: 13px;
    font-weight: 700;
    text-decoration: line-through;
    color: var(--text-2);
}

.eq-pap-item .eq-mail {
    font-size: 10.5px;
}

.eq-b-rest,
.eq-b-def {
    flex: none;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 10.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    line-height: 1.3;
}

.eq-b-rest {
    background: var(--rc-salvia-bg, rgba(143, 169, 143, .16));
    border: 1px solid rgba(143, 169, 143, .35);
    color: var(--rc-salvia-tx, var(--salvia));
}

.eq-b-def {
    background: transparent;
    border: 1px solid rgba(200, 106, 128, .3);
    color: var(--red);
}

/* ============================================================
   TANDA NOCTURNA D — PINTURA (17-sep). CSS/HTML solamente, cero lógica.
   ============================================================ */

/* D1 · LA BÚSQUEDA DEL RECETARIO EN CELULAR. Causa: en ≤768 la .filter-bar pasa a columna
   y el `flex: 1` del buscador (base 0) le aplastaba el alto de 42px al del texto: quedaba
   una tira de 20px. Se lo saca del reparto y conserva la medida de la referencia
   (#ing-search: 42px, hundido, radio 14, a lo ancho de su caja). Solo #tab-recetario. */
@media (max-width: 768px) {
    #tab-recetario .filter-bar > .search-wrap {
        flex: none;
        height: 42px;
    }

    /* La de la Biblioteca (#pub-search), con la MISMA estética que #ing-search: hundido
       #0D1014 con borde #1E232A, radio 14, 42px de alto, letra 14/400 y la lupa de 16px en
       el tono tenue. Mismo ancho: el de su fila. Nada más de la cabecera cambia. */
    :root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-bib-head .pub-search-wrap {
        height: 42px;
        padding: 0 14px;
        border-radius: 14px;
        background: #0D1014;
        border-color: #1E232A;
    }
    :root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input {
        font-size: 14px;
        font-weight: 400;
    }
    :root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap input::placeholder {
        font-size: 14px;
        font-weight: 400;
        color: #8C94A0;
    }
    :root[data-theme="dark"][data-paleta="tierra"] #pub-biblioteca .pub-search-wrap > svg {
        width: 16px;
        height: 16px;
        color: #8C94A0;
    }
}

/* D3 · TOURS DE LA APP — de chips desordenados a una lista de filas tocables, con el
   lenguaje de la portada: cada tour es una fila hundida (se navega) de 48px, con su ícono
   en cajita, el nombre y la flecha. Una columna en celular; en pantalla ancha, las que
   entren. La sangría que faltaba (anotada en BENTO 11, duda 3) la pone el contenedor. */
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    margin-top: 0;
    padding: 14px 16px 16px;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 12px 8px 8px;
    border-radius: 14px;
    background: #0D1014;
    border: 1px solid #1E232A;
    color: #F0F2F5;
    font-size: 13.5px;
    font-weight: 700;
    text-align: left;
    box-shadow: none;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones button:hover {
    border-color: #2E3540;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones button:active {
    background: #1F242B;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones .tour-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #252A31;
    color: #C9C05A;
    font-size: 17px;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones .tour-nm {
    flex: 1;
    min-width: 0;
}
:root[data-theme="dark"][data-paleta="tierra"] #tab-configuracion .tour-config-botones .tour-flecha {
    flex: none;
    color: #8C94A0;
    font-size: 16px;
}

/* D4 · LOS DOS MODALES DE CONTENIDO QUE DEJABAN LEER LO DE ATRÁS. El modal de sección y
   el de la ESTACIÓN/ajustes de cocina (.est-modal, 95%) y la ficha de receta — del
   cocinero y del recetario admin — (.rec-modal, 96%): sobre la pantalla de atrás se
   distinguían sus textos (medido por píxel: 5 a 9 niveles). Pasan a SÓLIDOS con el MISMO
   color que ya tenían: solo se va la transparencia. El velo oscuro de atrás, igual. */
:root[data-theme="dark"][data-paleta="tierra"] .est-modal {
    background: rgb(22, 22, 22);
}
:root[data-theme="dark"][data-paleta="tierra"] .rec-modal {
    background: rgb(20, 20, 20);
}

/* ============================================================
   🌙 PAQUETE NOCTURNO — LA FILA DEL COLCHÓN EN EL BLOQUE DEL MENÚ (mockup aprobado)
   ============================================================
   (estructura, las dos paletas: el bloque es oscuro en las dos). Plano, sin sombras. Vive
   entre la fila del rótulo y la del título, solo antes de generar. */
.bt-menu-colchon {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 10px;
    min-width: 0;
}

.bt-menu-colchon-l {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(240, 242, 245, .82);
}

.bt-menu-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 99px;
    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(255, 255, 255, .12);
}

.bt-menu-sgb {
    min-height: 24px;
    min-width: 30px;
    padding: 3px 10px;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: #D5D9DE;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: none;
}

.bt-menu-sgb.on {
    background: #DBD455;
    color: #1A1A10;
}

.bt-menu-sgb:disabled {
    cursor: default;
}

.bt-menu-sgb--otro {
    display: inline-flex;
    align-items: center;
}

.bt-menu-colchon-c {
    font-size: 11.5px;
    font-weight: 700;
    color: #E8E6DC;
    white-space: nowrap;
}

/* PAQUETE NOCTURNO — el ✓ del chip "¿alguna ya está hecha?" aparece SOLO al elegir (el cartel
   abierto marca el chip con .elegido; también mientras el dedo lo aprieta). Las dos paletas. */
.prod-fich-tengo i {
    display: none;
}

.prod-fich-tengo.elegido i,
.prod-fich-tengo:active i {
    display: inline-block;
}

/* CÁLCULO A — "LO QUE FALTA SE DICE". La nota de un costo incompleto («costo incompleto · 1 sin
   precio») junto al número, en el listado del recetario, la ficha y el editor; y el food cost
   incompleto que NO pinta verde. Neutra a propósito (tinta secundaria + ⚠): el coral queda para el
   86 y las alarmas. Tokens con respaldo: se ve igual en las dos paletas. */
.costo-inc {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-2);
    white-space: normal;
}

.costo-inc::before {
    content: '⚠ ';
}

.costo-inc-ciclo::before {
    content: '';
}

.fr-costo-inc {
    grid-column: 1 / -1;
    padding: 2px 4px 0;
}

.costo-incompleto {
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-2);
}

.costo-incompleto::before {
    content: '⚠ ';
}

.food-cost-inc {
    color: var(--text-2) !important;
}

/* CÁLCULO B — el nivel "incompleto" del semáforo único (foodCostNivel) en Presupuestos: neutro, como
   en el recetario (un costo incompleto nunca pinta verde). Y la fila con UNIDAD DISTINTA (Q10): el
   selector de unidad marcado, que es donde se corrige. */
.presu-fc b.presu-inc {
    background: var(--relieve, var(--accent-soft));
    color: var(--text-2);
}

.presu-plato-fc.presu-inc,
.presu-plato-stat b.presu-inc {
    color: var(--text-2);
}

.ing-fila-unidad-mala .ing-unidad-input {
    border-color: var(--text-2);
    border-style: dashed;
}

.ing-fila-unidad-mala .ing-col-importe {
    color: var(--text-2);
    font-size: 11px;
    font-weight: 700;
}

/* ============================================================
   🌾 TANDA DE LA COSECHA — lo que encontró el agente en su estreno (celular + pasos + textos)
   ============================================================ */

/* P1 · EL BANNER "INSTALÁ BRILLAT" NO SE COME LA ÚLTIMA FILA. En el celular flota sobre la barra
   (z 900) y tapaba el final de lo que scrollea debajo: la pantalla y la comanda de Producción (que
   en ≤640 vive debajo de la barra, z 120). Con el banner visible, esas dos ganan el colchón de su
   alto: la última fila SIEMPRE se puede ver. Los modales de edición (z 1000+) lo tapan: no lo necesitan.
   (El aviso, el toast, se apoya por encima de los dos por JS: toastUbicar.) */
@media (max-width: 640px) {
    body:has(#banner-instalar:not(.hidden)) .admin-main {
        padding-bottom: calc(76px + 72px + env(safe-area-inset-bottom));
    }

    body:has(#banner-instalar:not(.hidden)) #modal-produccion .modal-body {
        padding-bottom: calc(24px + 88px + env(safe-area-inset-bottom));
    }
}

/* P2 · LOS PASOS SE TILDAN EN LA COMANDA EN CURSO. La MISMA checklist de la ficha
   (pasosChecklistHTML), con la piel de la comanda: casillero de dedo (22px, doctrina ≥22), el
   tilde y la barra en lo vivo, y lo hecho tachado. La barra de pasos es AVANCE INTERNO: no toca el
   X/Y del día. */
.prod-comanda .chk-row .chk-cb {
    width: 22px;
    height: 22px;
    accent-color: var(--terra, var(--orange));
}

.prod-comanda .chk-prog-head span:last-child {
    color: var(--terra, var(--orange));
    font-weight: 800;
}

.prod-comanda .chk-track {
    height: 8px;
    background: #0F1216;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
}

.prod-comanda .chk-bar {
    background: var(--terra, var(--orange));
}

.prod-comanda .chk-row.done .rec-proc-txt {
    opacity: .75;
}

/* P3·7 · EL 86 TAMBIÉN DICE "PRÓXIMAMENTE". Es una muestra y parecía real. La píldora va con la
   tinta del propio bloque sobre el coral (la lima de las otras vitrinas no se lee ahí). */
:root[data-theme="dark"][data-paleta="tierra"] .hub-bt[data-w="ochoseis"] .bt-pill {
    color: #2A0D06;
    background: rgba(42, 13, 6, .12);
    border-color: rgba(42, 13, 6, .45);
}

/* P3·8 · EL CALENDARIO NO SE APLASTA. En el riel de días el botón se encogía hasta ser una rayita
   (flex-shrink de fábrica) o quedaba comido por el scroll. Ahora conserva sus 46px y se queda
   pegado al borde derecho del riel mientras los días scrollean por debajo. */
.ph-cal {
    flex: none;
    min-width: 46px;
    position: sticky;
    right: 0;
    z-index: 1;
}