/* Panel de Mi Negocio 24 (y la plataforma y las páginas de error, que comparten
   esta hoja). Es la herramienta del dueño y su equipo, así que lleva la marca de
   Mi Negocio 24 (marca/LEEME.md), no la de cada negocio: el negocio es el
   contenido, nosotros el marco. El lenguaje es el del software de Square:
   mucho blanco, tinta casi negra, un solo azul de acento, bordes de 1 px y
   sombra sólo en lo que flota. Lo activo se marca con un fondo suave y tinta,
   no con bloques de color: el azul se reserva para la acción principal.
   Geist es la letra del logotipo (OFL); si tarda, entra la del sistema. */

@font-face { font-family: Geist; src: url("/recursos/portada/fuentes/geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Geist; src: url("/recursos/portada/fuentes/geist-SemiBold.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: Geist; src: url("/recursos/portada/fuentes/geist-Bold.woff2") format("woff2"); font-weight: 650 800; font-display: swap; }

:root {
    --fondo: #FFFFFF;
    --superficie: #FFFFFF;
    /* El «fondo suave» de la marca: el lateral, filas al pasar, notas. */
    --superficie-2: #F6F7F9;
    /* Relleno de fichas, filtros y el buscador: un paso más que el suave para
       que se distinga sobre blanco sin necesitar borde. */
    --relleno: #EEF0F3;
    /* Lo elegido en el lateral y en las pestañas: fondo apenas más oscuro y tinta. */
    --activo: #E8EBEF;
    --texto: #111214;
    --cuerpo: #4B5563;
    /* 5.9:1 sobre blanco, 5.5 sobre el suave y 5.1 sobre el relleno de las fichas. */
    --tenue: #5B6472;
    --borde: #E5E7EB;
    /* Para lo decorativo que pide un poco más (ejes, conectores, botones
       secundarios). El borde de un campo es otro: --borde-campo. */
    --borde-fuerte: #D1D5DB;
    /* El contorno de lo que se escribe o se marca tiene que verse (3.5:1 sobre
       blanco): un campo que sólo se adivina no invita a escribir. */
    --borde-campo: #7A8390;
    --acento: #0A62F5;
    --acento-texto: #FFFFFF;
    --acento-suave: #EBF2FF;
    /* En claro el azul ya da 5.2:1 sobre blanco y 4.8 sobre su propio tinte;
       en oscuro el texto azul cambia (abajo), por eso existe esta variable. */
    --acento-tinta: #0A62F5;
    --anillo: #0A62F5;
    --exito: #0F766E;
    --exito-suave: #E6F4F2;
    --alerta: #B45309;
    --alerta-suave: #FEF5E7;
    --error: #B91C1C;
    --error-suave: #FDEDED;
    /* El rojo del botón lleno no es el del texto: en oscuro el texto de error
       es salmón (legible sobre negro) y con letra blanca encima no se leía. */
    --error-relleno: #B91C1C;
    /* Colores de los pasos de un flujo (condición, aviso al equipo). */
    --morado: #7C3AED;
    --azul: #0369A1;
    /* Las tarjetas no flotan: se separan con su borde. La sombra queda para
       menús, hojas y avisos, que sí están encima de algo. */
    --sombra: none;
    --sombra-alta: 0 2px 6px rgb(17 18 20 / .06), 0 16px 40px rgb(17 18 20 / .12);
    --radio: 16px;
    --radio-chico: 12px;
    --alto-control: 44px;
    --lateral: 256px;
    /* La opción elegida de un control segmentado: blanca sobre el riel suave. */
    --segmento-elegido: var(--superficie);
    color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #111214;
        --superficie: #111214;
        --superficie-2: #1A1C20;
        --relleno: #24272C;
        --activo: #2A2D33;
        --segmento-elegido: #2A2D33;
        --texto: #F5F6F8;
        --cuerpo: #C9CFD8;
        --tenue: #9AA3AF;
        --borde: #2A2D33;
        --borde-fuerte: #3A3E46;
        --borde-campo: #6E7783;
        /* El azul de marca sobre tinta da 3.6:1: sirve de relleno (botón con
           letra blanca) y para íconos, pero el texto azul va en #7FA9FF. */
        --acento-suave: #14264A;
        --acento-tinta: #7FA9FF;
        --anillo: #7FA9FF;
        --exito: #2DD4BF;
        --exito-suave: #0E2A28;
        --alerta: #FBBF24;
        --alerta-suave: #33270D;
        --error: #F87171;
        --error-suave: #3A1618;
        --error-relleno: #B91C1C;
        --morado: #A78BFA;
        --azul: #38BDF8;
        --sombra-alta: 0 0 0 1px #2A2D33, 0 16px 40px rgb(0 0 0 / .55);
    }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.5 Geist, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

a { color: var(--acento-tinta); text-underline-offset: 3px; }

h1 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -.03em; font-weight: 700; margin: 0 0 20px; }
h2 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; margin: 32px 0 12px; }
h3 { font-size: 1rem; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; margin: 0 0 8px; }
p { margin: 0 0 12px; }
/* Las explicaciones no corren de lado a lado en un monitor ancho: pasando de
   ~75 caracteres el ojo pierde el renglón al regresar. */
main > p:not([class]), main > p.tenue, .tarjeta > p:not([class]), .tarjeta > p.tenue { max-width: 72ch; }

.icono { width: 18px; height: 18px; flex: none; }

/* ——— Armazón: menú lateral fijo en la computadora, cajón en el teléfono ——— */

main { max-width: 1080px; margin: 0 auto; padding: 32px 28px 80px; }
.con-menu main { margin-left: var(--lateral); max-width: none; padding-left: max(28px, calc((100vw - var(--lateral) - 1080px) / 2)); padding-right: max(28px, calc((100vw - var(--lateral) - 1080px) / 2)); }

.lateral {
    position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 20;
    display: flex; flex-direction: column; gap: 8px;
    padding: 20px 12px 12px;
    background: var(--superficie-2); border-right: 1px solid var(--borde);
    overflow-y: auto;
}
/* El logo de Mi Negocio 24 arriba, siempre en su caja y con su nombre: dice de
   quién es la herramienta. Debajo, el negocio en el que estás. */
.logo-mn24 { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; align-self: flex-start; border-radius: var(--radio-chico); }
.logo-mn24 img { display: block; height: 44px; width: auto; }
.negocio-actual {
    display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; padding: 8px 12px 8px 8px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-chico);
    color: var(--texto); text-decoration: none; line-height: 1.25;
}
.negocio-actual:hover { border-color: var(--borde-fuerte); }
.negocio-actual img, .negocio-actual .inicial { width: 32px; height: 32px; border-radius: 8px; flex: none; }
.negocio-actual > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.negocio-actual strong { font-weight: 600; font-size: .94rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.negocio-actual small { color: var(--tenue); font-size: .8rem; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); text-decoration: none; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.marca img { border-radius: 8px; }
/* La inicial del negocio, cuando no tiene logo: en tinta, no en un color que compita con el botón. */
.inicial { display: grid; place-items: center; background: var(--texto); color: var(--fondo); font-weight: 700; }
.marca .inicial { width: 32px; height: 32px; border-radius: 8px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral .grupo { margin: 16px 12px 4px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--tenue); }
.lateral nav a {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 10px;
    color: var(--cuerpo); text-decoration: none; font-weight: 500; font-size: .94rem;
}
.lateral nav a .icono { color: var(--tenue); }
.lateral nav a:hover { background: var(--relleno); color: var(--texto); }
.lateral nav a[aria-current] { background: var(--activo); color: var(--texto); font-weight: 600; }
.lateral nav a[aria-current] .icono { color: var(--texto); }

.quien { display: flex; align-items: center; gap: 12px; padding: 12px 8px 2px; border-top: 1px solid var(--borde); margin: 0; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--relleno); border: 1px solid var(--borde); color: var(--texto); font-weight: 600; font-size: .9rem; }
.quien .nombre { display: block; min-height: 44px; padding: 4px 0; color: var(--texto); text-decoration: none; border-radius: var(--radio-chico); flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { display: block; color: var(--tenue); font-weight: 400; font-size: .8rem; }

.boton-icono {
    display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; flex: none;
    border-radius: var(--radio-chico); background: transparent; color: var(--tenue); border: 0; cursor: pointer;
}
.boton-icono:hover { background: var(--relleno); color: var(--texto); }

.cabecera-movil, .velo, .pestanas-app { display: none; }

/* ——— En el teléfono se comporta como app de iPhone: barra de arriba de vidrio
   esmerilado, título grande en el contenido, pestañas abajo al alcance del
   pulgar, y «Más» abre todo lo demás en un panel que sube desde abajo. ——— */
@media (max-width: 900px) {
    .con-menu main { margin-left: 0; padding: 12px 16px calc(96px + env(safe-area-inset-bottom)); }
    .cabecera-movil {
        display: flex; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 10;
        padding: calc(8px + env(safe-area-inset-top)) 16px 8px;
        background: color-mix(in srgb, var(--fondo) 85%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--borde);
    }
    .cabecera-movil .marca { font-size: .95rem; min-width: 0; }
    .cabecera-movil .marca span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cabecera-movil .marca img, .cabecera-movil .marca .inicial { width: 28px; height: 28px; border-radius: 7px; font-size: .85rem; }
    /* Se ve de 32 px pero se toca en 44: el relleno transparente es área de toque. */
    .avatar-boton { cursor: pointer; width: 44px; height: 44px; padding: 6px; margin: -6px; background-clip: content-box; font-size: .85rem; background-color: var(--relleno); border: 0; }

    .pestanas-app {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
        padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--fondo) 88%, transparent);
        -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
        border-top: 1px solid var(--borde);
    }
    .pestanas-app a, .pestanas-app label {
        flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 48px; padding: 4px 2px 0;
        color: var(--tenue); text-decoration: none; font-size: .75rem; font-weight: 550; letter-spacing: .01em; margin: 0; cursor: pointer;
    }
    .pestanas-app span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pestanas-app .icono { width: 25px; height: 25px; stroke-width: 1.8; }
    .pestanas-app a[aria-current], .pestanas-app label.activa { color: var(--texto); font-weight: 650; }
    .pestanas-app a[aria-current] .icono, .pestanas-app label.activa .icono { color: var(--acento-tinta); }

    /* «Más»: el menú completo sube como hoja desde abajo, con su agarradera. */
    .lateral {
        inset: auto 0 0 0; width: auto; max-height: 86vh; z-index: 20;
        border-right: 0; border-radius: 22px 22px 0 0; padding: 24px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--fondo); transform: translateY(105%); transition: transform .32s cubic-bezier(.32, .72, 0, 1);
        box-shadow: var(--sombra-alta);
    }
    .lateral::before { content: ""; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--borde-fuerte); }
    .abrir-menu:checked ~ .lateral { transform: none; }
    .abrir-menu:checked ~ .velo { display: block; position: fixed; inset: 0; z-index: 15; background: rgb(0 0 0 / .32); }
    .lateral nav a { min-height: 46px; font-size: 1rem; }

    /* Título grande, como las apps de iOS. */
    h1 { font-size: 1.85rem; letter-spacing: -.03em; }
    .encabezado { margin-top: 8px; }
}

/* ——— Encabezado de página: título, explicación y acciones a la derecha ——— */

.encabezado { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 24px; }
.encabezado h1 { margin: 0; }
.encabezado p { margin: 4px 0 0; color: var(--tenue); max-width: 60ch; }
.encabezado .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.volver { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--tenue); text-decoration: none; font-size: .92rem; }
.volver:hover { color: var(--texto); }
.volver .icono { width: 16px; height: 16px; }

/* ——— Tarjetas ——— */

.tarjeta {
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 24px; margin: 0 0 20px;
}
.tarjeta > h2:first-child, .tarjeta > h3:first-child { margin-top: 0; }
.tarjeta-titulo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.tarjeta-titulo h2, .tarjeta-titulo h1 { margin: 0; }
/* Una sección de ajustes en su pantalla: el título va dentro de la tarjeta, como en iOS. */
.tarjeta > h1:first-child, .tarjeta-titulo h1 { font-size: 1.5rem; margin-bottom: 8px; }
.angosta { max-width: 420px; margin: 12vh auto; }
.rejilla-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px; }
.rejilla-tarjetas > .tarjeta { margin: 0; }

/* ——— Formularios ——— */

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
/* La etiqueta va arriba, chica y firme; el campo se lleva la atención. */
label { display: block; margin: 0 0 20px; font-weight: 600; font-size: .875rem; color: var(--texto); }
/* La ayuda se lee (dice qué poner y por qué): va a 16 px y se distingue por el color, no por ser chica.
   Con un tope de largo: en escritorio llegaba a 137 caracteres por renglón. */
label .ayuda, .ayuda { display: block; font-weight: 400; color: var(--tenue); font-size: 1rem; line-height: 1.5; margin-top: 8px; max-width: 64ch; }
/* 64ch, no 72: «ch» mide el cero, y el texto de verdad cabe ~15 % más por renglón (72ch daba ~85 caracteres). */
.tarjeta p, form p, .nota, main > p.tenue { max-width: 64ch; }
label.casilla { display: flex; gap: 12px; align-items: center; font-weight: 450; font-size: .94rem; min-height: 32px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--acento); margin: 0; flex: none; }

input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea {
    display: block; width: 100%; margin-top: 8px; min-height: var(--alto-control); padding: 8px 12px;
    font: inherit; font-size: 1rem; font-weight: 400; color: inherit; background: var(--superficie);
    border: 1px solid var(--borde-campo); border-radius: var(--radio-chico);
    transition: border-color .15s, box-shadow .15s;
}
::placeholder { color: var(--tenue); opacity: 1; }
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
/* El campo del ancho de lo que cabe: un nombre, un precio o una hora no piden 928 px. Los mensajes, un poco más. */
form input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]), form select { max-width: 560px; }
form textarea { max-width: 720px; }
input:hover:not(:focus), select:hover:not(:focus), textarea:hover:not(:focus) { border-color: var(--texto); }
/* El anillo de la marca: 3 px sólidos con 2 px de aire, igual en campos, botones y enlaces. */
input:focus, select:focus, textarea:focus { outline: 3px solid var(--anillo); outline-offset: 2px; border-color: var(--acento); }
:focus-visible { outline: 3px solid var(--anillo); outline-offset: 2px; }

button, a.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-weight: 600; font-size: .94rem; cursor: pointer; text-decoration: none;
    min-height: var(--alto-control); padding: 8px 20px; border: 1px solid transparent; border-radius: var(--radio-chico);
    background: var(--acento); color: var(--acento-texto);
    transition: background .15s, border-color .15s;
}
/* Más oscuro al pasar, no más claro: aclarar el azul le bajaba el contraste con la letra blanca. */
button:hover, a.boton:hover { background: color-mix(in srgb, var(--acento) 86%, #000000); }
/* El secundario es blanco con borde fino y tinta: el azul queda sólo en la acción principal. */
button.secundario, a.boton.secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-fuerte); }
button.secundario:hover, a.boton.secundario:hover { background: var(--superficie-2); border-color: var(--borde-campo); }
button.peligro { background: var(--error-relleno); color: #fff; }
button.peligro:hover { background: color-mix(in srgb, var(--error-relleno) 86%, #000000); }
button.enlace:hover { background: none; }
button.enlace { background: none; padding: 0; border: 0; min-height: 0; color: var(--acento-tinta); font-weight: 500; }
button .icono, a.boton .icono { width: 17px; height: 17px; }

/* Contraseña con «Mostrar» (app.js): el botón vive dentro del campo, a la derecha. */
.campo-clave { position: relative; display: block; }
.campo-clave:has(input.corto) { max-width: 220px; }
.campo-clave input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { padding-right: 88px; }
/* Pegado abajo y del alto del campo: se toca en 44 px (antes medía 36) y queda centrado con el texto. */
.campo-clave button.enlace { position: absolute; bottom: 0; right: 4px; display: flex; align-items: center; height: var(--alto-control); min-height: 0; margin: 0; padding: 0 12px; line-height: 1; font-size: .9rem; }

/* Interruptor: un checkbox de verdad con forma de switch (se envía con el formulario). */
.interruptor { display: inline-flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; font-weight: 600; }
.interruptor input { appearance: none; width: 46px; height: 28px; border-radius: 999px; background: var(--borde-campo); position: relative; cursor: pointer; transition: background .2s; }
.interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 0 0 .5px rgb(0 0 0 / .04); transition: transform .2s cubic-bezier(.3, .7, .4, 1); }
.interruptor input:checked { background: var(--acento); }
.interruptor input:checked::after { transform: translateX(18px); }

/* Opciones como fichas que se marcan (canales, grupos). */
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }
.ficha { position: relative; margin: 0; }
.ficha input { position: absolute; opacity: 0; pointer-events: none; }
.ficha > span {
    display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--borde-fuerte); background: var(--superficie); font-weight: 500; font-size: .92rem; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.ficha .cuenta { color: var(--tenue); font-weight: 500; font-variant-numeric: tabular-nums; }
.ficha input:checked + span { border-color: var(--acento); background: var(--acento-suave); }
.ficha input:checked + span .icono { color: var(--acento-tinta); }
.ficha input:focus-visible + span { outline: 3px solid var(--anillo); outline-offset: 2px; }
.ficha input:disabled + span { opacity: .5; cursor: not-allowed; }

.en-linea { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.en-linea input { flex: 1; min-width: 200px; margin: 0 !important; }
/* Una o dos palabras no piden mil píxeles. */
.buscador { position: relative; flex: 1; min-width: 220px; max-width: 480px; }
.buscador .icono { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tenue); }
/* El buscador es un campo como los demás, con su borde: gris y sin contorno no se veía que se escribe ahí. */
.buscador input:not([type=checkbox]):not([type=radio]):not([type=hidden]) { padding-left: 40px; margin-top: 0; }

/* ——— Tablas ——— */

.tabla { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; overflow-x: auto; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; background: var(--superficie); }
/* border-collapse: separate para que el borde siga el radio de la esquina. */
main > table, .tarjeta + table, .tabla-desliza > table { border: 1px solid var(--borde); border-collapse: separate; border-spacing: 0; border-radius: var(--radio); overflow: hidden; margin-bottom: 20px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--superficie-2); }
th { font-size: .8125rem; color: var(--tenue); font-weight: 600; background: var(--superficie); }
/* Encabezados chicos, en versales y espaciados: se leen como rótulo y no compiten con los datos. */
thead th { padding-top: 14px; padding-bottom: 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
table { font-size: .9375rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* En una lista, el nombre es texto que se puede tocar, no un enlace azul: el azul es para acciones. */
td a { font-weight: 600; text-decoration: none; color: var(--texto); }
td a:hover { color: var(--acento-tinta); }
tr.inactivo td { color: var(--tenue); }

/* ——— Avisos, etiquetas y textos ——— */

.tenue { color: var(--tenue); }
.error { color: var(--error); font-weight: 550; }
/* Un error de formulario (entrar, contraseña) no es sólo letra roja: va en su
   caja con un «!» para que se note sin distinguir colores, y el texto en el
   color normal para que se lea completo. */
p.error, div.error {
    display: flex; gap: 12px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px;
    border-radius: var(--radio-chico); background: var(--error-suave); color: var(--texto); font-weight: 500;
}
p.error::before, div.error::before {
    content: "!"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 2px;
    border-radius: 50%; background: var(--error-relleno); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1;
}
div.error p { margin: 0; }
.aviso, .nota {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--exito-suave); color: var(--texto); border-radius: var(--radio-chico); padding: 12px 16px; margin: 0 0 20px;
}
/* «Guardado»: una píldora que baja, se queda tres segundos y se va. No empuja el contenido. */
.aviso.flotante {
    position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 50%; z-index: 30; margin: 0;
    width: max-content; max-width: min(92vw, 520px); align-items: center;
    padding: 12px 20px 12px 16px; border-radius: 999px; font-weight: 550; font-size: .92rem;
    background: color-mix(in srgb, var(--superficie) 88%, transparent); color: var(--texto);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 10px 34px rgb(0 0 0 / .16), 0 0 0 .5px rgb(0 0 0 / .06);
    animation: aviso-entra .45s cubic-bezier(.32, .72, 0, 1) both, aviso-sale .35s ease 3.6s forwards;
    pointer-events: none;
}
.aviso.flotante .icono { margin: 0; }
@keyframes aviso-entra { from { opacity: 0; transform: translate(-50%, -16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes aviso-sale { to { opacity: 0; transform: translate(-50%, -10px) scale(.98); visibility: hidden; } }
.aviso .icono { color: var(--exito); margin-top: 2px; }
.nota { background: var(--superficie-2); border: 0; }
.nota .icono { color: var(--tenue); margin-top: 2px; }
.nota.alerta { background: var(--alerta-suave); border-color: transparent; }
.nota.alerta .icono { color: var(--alerta); }
.nota p:last-child { margin: 0; }
code.temporal { font-size: 1.15rem; font-weight: 700; letter-spacing: .05em; user-select: all; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9em; background: var(--superficie-2); padding: 1px 4px; border-radius: 5px; }

.etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--relleno); color: var(--tenue); border: 0; white-space: nowrap; }
.etiqueta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiqueta.exito { background: var(--exito-suave); color: var(--exito); border-color: transparent; }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: transparent; }
.etiqueta.error { background: var(--error-suave); color: var(--error); border-color: transparent; }
.etiqueta.acento { background: var(--acento-suave); color: var(--acento-tinta); border-color: transparent; }

.vacio { text-align: center; padding: 48px 20px; }
.vacio > .icono { width: 40px; height: 40px; color: var(--acento-tinta); margin-bottom: 12px; }
.vacio h2 { margin: 0 0 8px; }
.vacio p { color: var(--tenue); max-width: 46ch; margin: 0 auto 20px; }

.falla { max-width: 520px; margin: 15vh auto; padding: 0 16px; }
.falla .logo-mn24 { padding: 0; margin-bottom: 32px; }
.falla .logo-mn24 img { height: 30px; }
.falla p { color: var(--cuerpo); }
.lista { list-style: none; padding: 0; margin: 0; }
.lista li { padding: 12px 0; border-bottom: 1px solid var(--borde); }
.lista li:last-child { border-bottom: 0; }

/* ——— Cifras ——— */

.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.cifras > div {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px 20px;
}
.cifras > div > .tenue:first-child, .cifras .rotulo { font-size: .82rem; font-weight: 600; color: var(--tenue); }
/* Comentarios de las calificaciones en el inicio: los malos primero, con su sucursal. */
.comentarios { list-style: none; padding: 0; margin: 0; }
.comentarios li { padding: 12px 0; border-top: 1px solid var(--borde); }
.comentarios strong { color: var(--alerta); letter-spacing: .05em; margin-right: 4px; }
.cifra { display: block; font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
/* La tendencia es una pastilla: se lee de reojo sin leer el número. */
.sube, .baja { display: inline-flex; align-items: center; gap: 3px; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-weight: 650; font-size: .8rem; }
.sube { color: var(--exito); background: var(--exito-suave); }
.baja { color: var(--error); background: var(--error-suave); }

/* ——— Pestañas ——— */

/* Control segmentado de Apple: un riel gris y la opción elegida flota en blanco. */
.pestanas { display: inline-flex; gap: 2px; margin: 0 0 24px; padding: 3px; border-radius: var(--radio-chico); background: var(--superficie-2); border: 1px solid var(--borde); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pestanas a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 9px; text-decoration: none; color: var(--cuerpo); font-weight: 500; font-size: .9rem; white-space: nowrap; }
.pestanas a .icono { color: var(--tenue); }
.pestanas a:hover { color: var(--texto); }
/* La elegida: blanca con su borde fino y en negritas; se distingue sin depender del color. */
.pestanas a[aria-current] { background: var(--segmento-elegido); color: var(--texto); font-weight: 600; box-shadow: 0 0 0 1px var(--borde-fuerte); }
.pestanas a[aria-current] .icono { color: var(--acento-tinta); }
/* Ventas | Cortes es a dónde ir; los periodos, qué ver: en su propio renglón, o parecían una sola barra. */
.pestanas-seccion { display: flex; width: fit-content; }
/* El selector de periodo va justo antes de las cifras: con su aire, no pegado a ellas. */
.pestanas.sin-margen + .cifras, .pestanas.sin-margen ~ .cifras { margin-top: 16px; }
.pestanas a .icono { width: 16px; height: 16px; }

/* ——— Formularios largos (lealtad): campos en rejilla y filas repetibles ——— */

.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 16px; margin-top: 12px; }
table.filas { background: transparent; border: 0; box-shadow: none; }
table.filas td, table.filas th { padding: 8px 8px 8px 0; border: 0; background: transparent; }
table.filas tbody tr:hover td { background: transparent; }
table.filas input, table.filas select { margin: 0; }
.fila-promo { display: grid; grid-template-columns: 1.4fr 2.6fr .8fr .8fr .6fr; gap: 8px; align-items: center; margin: 8px 0; }
.fila-promo input { margin: 0 !important; }
.dias { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.dias label.casilla { margin: 0; gap: 4px; font-size: .9rem; }
details summary { cursor: pointer; color: var(--acento-tinta); margin: 4px 0 8px; font-weight: 550; }
.opciones-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.resumen ul { margin: 0; padding-left: 20px; }
.resumen li { margin: 4px 0; }
.dos-columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 20px; }
fieldset legend { margin-bottom: 8px; font-weight: 600; }

/* ——— Gráficas: barras de una sola serie. Delgadas, 4px redondeadas arriba,
   cuadradas en la base, 2px de aire entre ellas; el valor va en el tooltip. ——— */

.grafica { display: flex; align-items: flex-end; gap: 2px; height: 170px; border-bottom: 1px solid var(--borde-fuerte); }
.columna { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; position: relative; outline: none; }
.columna.futuro { border-bottom: 2px dashed var(--borde-fuerte); }
.columna span { display: block; width: 100%; max-width: 26px; min-height: 2px; background: var(--acento); border-radius: 4px 4px 0 0; transition: opacity .12s; }
.grafica:hover .columna span { opacity: .45; }
.grafica .columna:hover span, .columna:focus span { opacity: 1; }
.columna:hover::after, .columna:focus::after {
    content: attr(data-texto); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--texto); color: var(--fondo); font-size: .8rem; font-weight: 600; padding: 4px 8px; border-radius: 7px; white-space: nowrap; z-index: 2;
}
.grafica-eje { display: flex; justify-content: space-between; font-size: .8rem; color: var(--tenue); margin-top: 8px; }

/* ——— Pantallas sin menú (entrar, contraseña, baja) ——— */

.sin-menu main { min-height: 100vh; display: grid; place-items: center; align-content: center; padding: 24px 16px; }
/* La tarjeta blanca sobre el fondo suave: se lee como una sola cosa que llenar. */
body.sin-menu { background: var(--superficie-2); }
.sin-menu .angosta { margin: 0; width: 100%; }
.entrada-marca { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; text-align: center; }
.entrada-marca .logo-mn24 { align-self: center; padding: 0; margin-bottom: 12px; }
.entrada-marca .logo-mn24 img { height: 40px; }
.entrada-marca .negocio { display: flex; align-items: center; gap: 12px; }
.entrada-marca .negocio img, .entrada-marca .negocio .inicial { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.entrada-marca h1 { margin: 0; font-size: 1.375rem; text-align: left; }
.entrada-marca h1 small { display: block; font-size: .875rem; font-weight: 500; color: var(--tenue); letter-spacing: 0; }
.angosta button[type=submit] { width: 100%; min-height: 48px; margin-top: 4px; padding: 12px; font-size: 1rem; }

@media (max-width: 600px) {
    h1 { font-size: 1.45rem; }
    th, td { padding: 12px 12px; }
    table { font-size: .94rem; }
    .tarjeta { padding: 20px; }
    .cifra { font-size: 1.55rem; }
    .fila-promo { grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--borde); padding-bottom: 12px; }
    .fila-promo .dias { grid-column: 1 / -1; }
}

/* ——— Plataforma (equipo de Mi Negocio 24): barra arriba, mismo lenguaje ——— */

.barra {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    padding: 8px 24px; background: var(--fondo); border-bottom: 1px solid var(--borde);
}
.barra .logo-mn24 { padding: 0; }
.barra .logo-mn24 img { height: 34px; }
.barra .zona { font-size: .75rem; font-weight: 600; color: var(--tenue); text-transform: uppercase; letter-spacing: .06em; padding-left: 16px; border-left: 1px solid var(--borde); }
.barra nav { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.barra nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--cuerpo); text-decoration: none; font-weight: 500; }
.barra nav a:hover { background: var(--relleno); color: var(--texto); }
.barra nav a[aria-current] { background: var(--activo); color: var(--texto); font-weight: 600; }
.barra .salir { display: flex; gap: 12px; align-items: center; color: var(--tenue); font-size: .9rem; margin: 0; }

/* ——— Inicio ——— */

.rejilla-inicio { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.rejilla-inicio > .tarjeta { margin: 0; }
@media (max-width: 1100px) { .rejilla-inicio { grid-template-columns: 1fr; } }
.grafica .columna.hoy span { background: var(--acento); opacity: 1; }
.grafica .columna:not(.hoy) span { background: color-mix(in srgb, var(--acento-tinta) 55%, var(--superficie)); }
.separado { margin-top: 24px; }
.barra-h { display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; margin: 8px 0; font-size: .92rem; }
.barra-h-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-h-pista { height: 8px; border-radius: 0 4px 4px 0; background: var(--superficie-2); overflow: hidden; }
.barra-h-pista span { display: block; height: 100%; background: var(--acento); border-radius: 0 4px 4px 0; }
.barra-h .num { font-variant-numeric: tabular-nums; font-weight: 600; }
.oportunidades { list-style: none; margin: 0; padding: 0; }
.oportunidades li { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--borde); }
.oportunidades li:first-child { padding-top: 2px; }
.oportunidades li > div { flex: 1; min-width: 0; }
.burbuja { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--acento-suave); color: var(--acento-tinta); }
.burbuja .icono { width: 20px; height: 20px; }
a.boton.chico, button.chico { padding: 8px 12px; font-size: .86rem; }
.resultado-campana { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; padding: 16px 16px; border-radius: var(--radio-chico); background: var(--superficie-2); border: 1px solid var(--borde); color: var(--texto); text-decoration: none; font-size: .94rem; }
.resultado-campana:hover { border-color: var(--borde-fuerte); }
.resultado-campana .tenue { font-size: .82rem; }

/* ——— Campañas ——— */

.con-js .sin-js { display: none; }
input.corto { max-width: 220px; }
.plantillas { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 16px; margin: 0 0 8px; scrollbar-width: thin; }
.plantilla {
    display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 12px 16px; border-radius: 12px;
    background: var(--superficie); border: 1px solid var(--borde);
    color: var(--texto); text-decoration: none; font-weight: 600; font-size: .92rem;
}
.plantilla .icono { color: var(--acento-tinta); }
.plantilla:hover { border-color: var(--borde-fuerte); }
.plantilla[aria-current] { border-color: var(--acento); background: var(--acento-suave); }

.editor-campana { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.editor-pasos > .tarjeta:last-child { margin-bottom: 0; }
.editor-previa { position: sticky; top: 24px; }
@media (max-width: 1100px) { .editor-campana { grid-template-columns: 1fr; } .editor-previa { position: static; } }
.paso { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 12px; border-radius: 50%; background: var(--texto); color: var(--fondo); font-size: .82rem; vertical-align: 1px; }
.alcance { padding: 12px 16px; border-radius: var(--radio-chico); background: var(--superficie-2); border: 1px solid var(--borde); transition: opacity .15s; }
.alcance p { margin: 0; }
.alcance strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.alcance.cargando { opacity: .55; }
.bajo-mensaje { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: -8px 0 16px; font-size: .86rem; color: var(--tenue); }
.variables { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
button.ficha-mini { padding: 3px 12px; border-radius: 999px; font-size: .82rem; font-weight: 600; background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
button.ficha-mini:hover { border-color: var(--borde-campo); background: var(--superficie-2); }
.contador { font-variant-numeric: tabular-nums; }
/* Pasarse del largo de una notificación se dice con palabras, no sólo en rojo. */
.contador.error::after { content: " · se corta en la notificación"; }
button.grande { width: 100%; padding: 12px; font-size: 1rem; margin-top: 4px; }
.canales-iconos { display: inline-flex; gap: 8px; color: var(--tenue); }
.canales-alcance { list-style: none; padding: 0; margin: 0 0 16px; }
.canales-alcance li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.canales-alcance li > span:first-of-type { flex: 1; }
.canales-alcance li .icono { color: var(--acento-tinta); }
.canales-alcance strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; min-width: 3ch; text-align: right; }
h1 .etiqueta { vertical-align: 5px; margin-left: 8px; font-size: .78rem; letter-spacing: 0; }

.embudo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.embudo > div { flex: 1; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.embudo-flecha { color: var(--borde-fuerte); }
.medidor { height: 10px; border-radius: 999px; background: var(--superficie-2); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--borde); }
.medidor span { display: block; height: 100%; background: var(--acento); border-radius: 999px; }

/* Vista previa: un teléfono con la notificación, el chat o el correo. */
.previa-pestanas { display: flex; margin-bottom: 16px; }
.previa-pestanas a { flex: 1; justify-content: center; }
.telefono {
    position: relative; aspect-ratio: 9 / 17.5; max-height: 640px; margin: 0 auto; width: 100%; max-width: 330px;
    border-radius: 44px; padding: 12px; background: #0E0E0F; box-shadow: var(--sombra-alta), inset 0 0 0 2px #2A2A2C;
}
.telefono::before { content: ""; position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 20px; background: #000; z-index: 2; }
.pantalla { height: 100%; border-radius: 33px; overflow: hidden; position: relative; }
.pantalla[hidden] { display: none !important; }
.pantalla.push {
    background: radial-gradient(120% 80% at 30% 10%, color-mix(in srgb, var(--acento) 70%, #fff) 0%, color-mix(in srgb, var(--acento) 85%, #000) 55%, #1a1410 100%);
    color: #fff; padding: 64px 12px 12px;
}
.hora-bloqueo { text-align: center; margin-bottom: 28px; }
.hora-bloqueo span { display: block; font-size: 4rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.hora-bloqueo small { font-size: 1rem; font-weight: 500; opacity: .85; text-transform: capitalize; }
.notificacion { display: flex; gap: 12px; padding: 12px; border-radius: 20px; background: rgb(250 250 250 / .78); backdrop-filter: blur(16px); color: #111; box-shadow: 0 6px 20px rgb(0 0 0 / .18); }
.notificacion img, .notificacion .inicial { border-radius: 8px; flex: none; }
.notificacion .inicial { width: 34px; height: 34px; display: grid; place-items: center; background: var(--acento); color: var(--acento-texto); font-weight: 700; }
.notificacion > div { min-width: 0; flex: 1; }
.notificacion-cabeza { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; }
.notificacion-cabeza strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notificacion-cabeza span { color: #666; font-size: .78rem; flex: none; }
.notificacion p { margin: 2px 0 0; font-size: .88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.notificacion p.tenue, .wa-burbuja p.tenue { color: #888; }
.pantalla.whatsapp { background: #EFE7DD; display: flex; flex-direction: column; }
.wa-cabeza { display: flex; align-items: center; gap: 12px; padding: 52px 16px 12px; background: #F6F6F6; color: #111; border-bottom: 1px solid #ddd; }
.wa-cabeza img { border-radius: 50%; }
.wa-cabeza small { display: block; color: #667; font-size: .75rem; }
.wa-cabeza strong { font-size: .92rem; }
.wa-chat { flex: 1; padding: 16px 12px; background-image: radial-gradient(rgb(0 0 0 / .045) 1px, transparent 1px); background-size: 14px 14px; }
.wa-burbuja { position: relative; max-width: 88%; padding: 8px 12px 20px; border-radius: 4px 12px 12px 12px; background: #fff; color: #111; box-shadow: 0 1px 1px rgb(0 0 0 / .12); font-size: .9rem; line-height: 1.4; }
.wa-burbuja p { margin: 0 0 8px; }
.wa-hora { position: absolute; right: 8px; bottom: 4px; font-size: .75rem; color: #888; }
.wa-nota { margin-top: 12px; font-size: .75rem; color: #6d6458; text-align: center; padding: 0 8px; }
.pantalla.correo { background: #fff; padding-top: 48px; }
.pantalla.correo iframe { width: 100%; height: 100%; border: 0; }
.previa-pie { text-align: center; font-size: .86rem; margin: 16px 0 0; }



/* ——— Clientes ——— */

/* Filtros como en Fotos o Música: pastillas grises; la elegida se llena de tinta. En el teléfono se deslizan. */
.filtros { display: flex; gap: 8px; margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.filtros a { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde-fuerte); color: var(--cuerpo); text-decoration: none; font-weight: 500; font-size: .9rem; }
.filtros a:hover { border-color: var(--borde-campo); color: var(--texto); }
/* El filtro elegido en tinta, no en azul: el azul es del botón principal (Nuevo producto). */
.filtros a[aria-current] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.persona { display: flex; align-items: center; gap: 12px; }
.persona > div { display: flex; flex-direction: column; min-width: 0; }
.persona .avatar { width: 34px; height: 34px; }
/* Lo chico es dato de apoyo (fechas, conteos), no texto que se lee de corrido: 14 px, no 13.4. */
.chico { font-size: .875rem; }
.permisos { display: inline-flex; gap: 8px; color: var(--acento-tinta); }
.permisos .icono { width: 16px; height: 16px; }
/* Canal apagado: además del gris, una diagonal que lo tacha. Antes sólo cambiaba
   el color (gris claro a 1.5:1), y quien no distingue colores no veía la diferencia. */
.permisos .apagado { position: relative; display: inline-flex; color: var(--tenue); opacity: .7; }
.permisos .apagado::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; border-radius: 1px; background: currentColor; transform: rotate(-45deg); }
.centrado { text-align: center; }
.grande-inicial { width: 72px !important; height: 72px !important; border-radius: 18px !important; font-size: 2rem; }
.angosta { padding: 32px 28px; }
.persona.grande .avatar { width: 56px; height: 56px; font-size: 1.4rem; }
.persona.grande h1 { margin: 0; }
.persona.grande p { margin-top: 4px; }
.permisos.grandes { gap: 12px; padding: 8px 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); }
.permisos.grandes .icono { width: 20px; height: 20px; }
.cifras .medidor { margin: 8px 0 0; height: 8px; }
.separado-abajo { display: flex; margin-bottom: 16px; }
.dos-columnas > section > h2:first-child { margin-top: 8px; }
.dos-columnas .tarjeta { margin-top: 8px; }
.pestanas.sin-margen { margin: 0; }
@media (max-width: 600px) {
    .cifras { grid-template-columns: 1fr 1fr; gap: 12px; }
    .cifras > div { padding: 16px; }
    .cifra { font-size: 1.3rem; }
    .cifras .sube + .tenue, .cifras .baja + .tenue { display: none; }
    .encabezado .acciones { width: 100%; }
    .encabezado .acciones .boton { flex: 1; }
}
/* La firma va debajo de la tarjeta, no fija abajo: en un teléfono chico se encimaba en el botón. */
.firma { text-align: center; font-size: .8125rem; color: var(--tenue); margin: 16px auto 0; max-width: 420px; }
.titulo-esquema { font-size: 1.05rem; margin-bottom: 16px; display: flex; }

/* ——— Flujos: lista ——— */

.lista-flujos { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; margin-bottom: 8px; }
.flujo-tarjeta { display: block; margin: 0; color: var(--texto); text-decoration: none; transition: border-color .15s, transform .15s; }
.flujo-tarjeta:hover { border-color: var(--borde-fuerte); transform: translateY(-1px); }
.flujo-tarjeta.prendido { border-color: color-mix(in srgb, var(--acento) 40%, var(--borde)); }
.flujo-tarjeta:not(.prendido) .burbuja { background: var(--superficie-2); color: var(--tenue); }
.flujo-cabeza { display: flex; gap: 16px; align-items: flex-start; }
.flujo-cabeza > div { flex: 1; min-width: 0; }
.flujo-cabeza h2 { margin: 0 0 2px; }
.flujo-cabeza p { margin: 0; font-size: .9rem; }
.camino-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 16px 0 4px; }
.camino-paso { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--superficie-2); border: 1px solid var(--borde); color: var(--tenue); }
.camino-paso .icono { width: 15px; height: 15px; }
.camino-linea { width: 10px; height: 2px; background: var(--borde-fuerte); }
.automatico-cifras { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--borde); }
.automatico-cifras div { display: flex; flex-direction: column; }
.automatico-cifras strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.automatico-cifras .tenue { font-size: .8rem; }
.automatico-cifras .chico { margin-left: auto; font-size: .76rem; }
.plantillas-flujo { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.plantilla-flujo { display: flex; flex-direction: column; gap: 8px; margin: 0; color: var(--texto); text-decoration: none; }
.plantilla-flujo:hover { border-color: var(--acento); }
.plantilla-flujo h3 { margin: 8px 0 0; }
.plantilla-flujo p { font-size: 1rem; margin: 0; flex: 1; }
.plantilla-flujo .camino-mini { margin-top: 12px; }

/* ——— Flujos: editor ——— */

.editor-flujo { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; align-items: start; margin-bottom: 20px; }
.editor-flujo > .tarjeta { margin: 0; }
.inspector { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; }
@media (max-width: 1100px) { .editor-flujo { grid-template-columns: 1fr; } .inspector { position: static; max-height: none; } }
.lienzo { overflow-x: auto; background: var(--superficie-2); background-image: radial-gradient(var(--borde) 1px, transparent 1px); background-size: 18px 18px; padding: 28px 20px 32px; }
.arbol { display: flex; flex-direction: column; align-items: center; min-width: max-content; }
.nodo { display: flex; flex-direction: column; align-items: center; }
.nodo-inicio, .nodo-fin { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: 999px; font-size: .92rem; }
.nodo-inicio { background: var(--texto); color: var(--fondo); }
.nodo-inicio .paso-tipo { color: inherit; opacity: .8; }
.nodo-inicio > span { display: flex; flex-direction: column; line-height: 1.25; }
.nodo-fin { background: var(--superficie); border: 1px dashed var(--borde-fuerte); color: var(--tenue); font-weight: 600; }
.conector { position: relative; display: flex; flex-direction: column; align-items: center; height: 44px; justify-content: center; }
.conector::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: var(--borde-fuerte); transform: translateX(-50%); }
span.conector { height: 28px; }
button.agregar {
    position: relative; z-index: 1; width: 26px; height: 26px; padding: 0; border-radius: 50%;
    background: var(--superficie); color: var(--tenue); border: 1.5px solid var(--borde-fuerte); opacity: .75; transition: opacity .15s, transform .15s, color .15s;
}
button.agregar .icono { width: 15px; height: 15px; }
button.agregar:hover, button.agregar:focus-visible { opacity: 1; color: var(--acento-tinta); border-color: var(--acento); transform: scale(1.12); background: var(--superficie); }
.paso-flujo {
    display: flex; align-items: flex-start; gap: 12px; width: 300px; padding: 12px 16px; text-align: left;
    background: var(--superficie); color: var(--texto); border: 1.5px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
    font-weight: 400; font-size: .92rem; cursor: pointer;
}
.paso-flujo:hover { border-color: var(--borde-fuerte); background: var(--superficie); }
.paso-flujo.elegido { border-color: var(--acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent); }
.paso-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--acento-suave); color: var(--acento-tinta); }
.nodo-espera > .paso-flujo .paso-icono { background: var(--superficie-2); color: var(--tenue); }
.nodo-si > .paso-flujo .paso-icono, .nodo-ab > .paso-flujo .paso-icono { background: color-mix(in srgb, var(--morado) 14%, var(--superficie)); color: var(--morado); }
.nodo-equipo > .paso-flujo .paso-icono { background: color-mix(in srgb, var(--azul) 14%, var(--superficie)); color: var(--azul); }
.nodo-salir > .paso-flujo .paso-icono { background: var(--superficie-2); color: var(--tenue); }
.paso-texto { display: flex; flex-direction: column; min-width: 0; gap: 1px; line-height: 1.35; }
.paso-texto strong { font-weight: 650; overflow-wrap: anywhere; }
.paso-texto .tenue { font-size: .82rem; }
.paso-tipo { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--tenue); }
.paso-cifras { margin-top: 4px; font-size: .78rem; color: var(--tenue); }
.paso-cifras strong { color: var(--acento-tinta); font-weight: 650; }
.ramas { display: flex; gap: 28px; align-items: flex-start; position: relative; padding-top: 16px; margin-top: 16px; }
.ramas::before { content: ""; position: absolute; top: -14px; left: 50%; width: 2px; height: 14px; background: var(--borde-fuerte); }
.ramas::after { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--borde-fuerte); }
.rama { display: flex; flex-direction: column; align-items: center; min-width: 300px; padding: 8px 12px 12px; border-radius: 16px; border: 1.5px dashed var(--borde); background: color-mix(in srgb, var(--superficie) 60%, transparent); }
.rama-etiqueta { font-size: .78rem; font-weight: 700; padding: 3px 12px; border-radius: 999px; background: var(--superficie); border: 1px solid var(--borde); }
.rama-si .rama-etiqueta, .rama-a .rama-etiqueta { color: var(--exito); }
.rama-no .rama-etiqueta, .rama-b .rama-etiqueta { color: var(--morado); }
.rama-vacia { font-size: .8rem; margin-top: -4px; }
.menu-pasos {
    position: absolute; top: calc(50% + 18px); left: 50%; transform: translateX(-50%); z-index: 30; width: 320px;
    display: flex; flex-direction: column; padding: 8px; border-radius: 14px; background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
}
.menu-pasos button { display: flex; align-items: flex-start; gap: 12px; padding: 8px 12px; background: none; color: var(--texto); border: 0; border-radius: 10px; text-align: left; font-weight: 400; }
.menu-pasos button:hover, .menu-pasos button:focus-visible { background: var(--superficie-2); }
.menu-pasos button > span { display: flex; flex-direction: column; font-size: .9rem; line-height: 1.3; }
.menu-pasos button .tenue { font-size: .8rem; }
.menu-pasos .icono { color: var(--acento-tinta); margin-top: 2px; }
.inspector-cabeza { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.inspector-cabeza > div { display: flex; flex-direction: column; line-height: 1.3; }
.inspector-cabeza .tenue { font-size: .875rem; }
.inspector-acciones { display: flex; gap: 8px; align-items: center; padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--borde); }
.inspector-acciones [data-borrar] { margin-left: auto; }
.peligro-texto { color: var(--error) !important; }
.fila-condicion { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.fila-condicion select[data-ck=campo] { flex: 1; min-width: 180px; }
.fila-condicion select, .fila-condicion input { margin: 0 !important; }
.fila-condicion select:first-child { width: 80px; flex: none; }
.previa-mini { margin-top: 20px; padding: 16px; border-radius: 14px; background: radial-gradient(120% 90% at 30% 0%, color-mix(in srgb, var(--acento) 60%, #fff), color-mix(in srgb, var(--acento) 80%, #000)); }
.previa-mini > .tenue { color: rgb(255 255 255 / .85); display: block; margin-bottom: 8px; }
.guardar-fijo { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 16px 0; margin-top: 4px; background: linear-gradient(transparent, var(--fondo) 35%); }
.zona-borrar { margin-top: 28px; }
.arbol > *, .rama > *, .nodo > * { flex-shrink: 0; }

/* ——— Ajustes: cobros con tarjeta ——— */
.proveedor-pago { padding: 20px 0 4px; border-top: 1px solid var(--borde); margin-top: 8px; }
.proveedor-pago h3 { margin: 0; }
.rotulo-chico { font-weight: 600; font-size: .94rem; margin: 4px 0 0; }
.casilla-chica { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 400; font-size: .85rem; color: var(--tenue); }
.casilla-chica input { width: 15px !important; height: 15px; }
.campo { margin: 0 0 16px; }
.campo > label { margin: 0; }

/* ——— Exportar ——— */
.exportar { position: relative; }
.exportar summary { list-style: none; color: var(--texto); margin: 0; }
.exportar summary::-webkit-details-marker { display: none; }
.exportar-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 340px; box-shadow: var(--sombra-alta); }
.encabezado:has(.exportar) { align-items: center; }
.legal { max-width: 720px; margin: 32px auto; line-height: 1.65; }
.legal h2 { margin: 8px 0 24px; }
.sin-menu main:has(.legal) { display: block; }

/* Horario de la sucursal: siete renglones con dos turnos; en teléfono la tabla se desliza. */
.horario { display: block; overflow-x: auto; margin: 8px 0 12px; }
.horario th[scope="row"] { text-align: left; padding-right: 12px; font-weight: 600; white-space: nowrap; }
.horario td { padding: 3px 4px; }
.horario input[type="time"] { margin: 0; min-width: 110px; }

/* Foto del producto: la vista previa junto al campo para cambiarla. */
.foto-producto { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.foto-producto img { width: 120px; height: 120px; object-fit: cover; border-radius: 12px; border: 1px solid var(--borde); flex-shrink: 0; }
.foto-producto > div { flex: 1; min-width: 0; }

/* Tablas anchas (una columna por sucursal): se deslizan dentro de la página en vez de ensancharla. */
.tabla-desliza { overflow-x: auto; margin-bottom: 20px; }
.tabla-desliza table { min-width: 100%; }
td.alerta { color: var(--alerta); font-weight: 700; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Una casilla dentro de una fila de búsqueda no se estira como los campos de texto. */
.en-linea input[type="checkbox"] { flex: 0 0 auto; min-width: 0; }
.en-linea label.casilla { margin: 0; }

/* Pedidos del día: una tarjeta por pedido, la de «nuevo» resalta. */
.lista-pedidos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.lista-pedidos .pedido { margin: 0; }
.pedido header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pedido header h2 { margin: 0; font-size: 1.1rem; }
.pedido.estado-nuevo { border-color: var(--alerta); box-shadow: 0 0 0 2px var(--alerta-suave); }
.pedido.estado-entregado, .pedido.estado-rechazado, .pedido.estado-cancelado { opacity: .65; }
.renglones-pedido { padding-left: 20px; margin: 8px 0; }

.punto-color { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.nota-cliente { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--acento); background: var(--superficie-2); border-radius: 0 8px 8px 0; }
.nota-cliente p { margin: 0 0 4px; }
.nota-cliente footer { font-size: .85rem; }
/* Corregir una nota se abre en su lugar: sin JavaScript y sin perder de vista las demás. */
.nota-editar { margin-top: 8px; }
.nota-editar summary { cursor: pointer; color: var(--acento-tinta); font-size: .85rem; }
.nota-editar form { margin-top: 8px; }

/* ——— Pantallas táctiles (la tableta de la caja, el teléfono del dueño):
   todo lo que se toca mide al menos 44 px, como pide Apple. ——— */
@media (pointer: coarse) {
    :root { --alto-control: 44px; }
    .lateral nav a { min-height: 44px; }
    label.casilla { min-height: 44px; }
    .pestanas a { min-height: 44px; }
    /* Lo que antes medía 26–36 px: íconos sueltos, flechas de ordenar, filtros,
       fichas y botones de texto («Borrar», «Quitar»). Crecen el área, no el dibujo. */
    .boton-icono, .mover .boton-icono { width: 44px; height: 44px; }
    .filtros a, .ficha > span, button.ficha-mini, .plantilla { display: inline-flex; align-items: center; min-height: 44px; }
    button.enlace { min-height: 44px; }
    /* Enlaces sueltos que se tocan («Ver estadísticas →», «6 productos») y los encabezados para ordenar. */
    .enlace-tocable, a.ordenar { display: inline-flex; align-items: center; min-height: 44px; }
    button.agregar { width: 44px; height: 44px; }
    a.boton.chico, button.chico { min-height: 44px; }
    input[type=checkbox], input[type=radio], td.marcar input, th.marcar input { width: 22px; height: 22px; }
    .volver, .tarjeta-titulo a { display: inline-flex; align-items: center; min-height: 44px; }
    /* Con padding y no con flex: un summary en flex pierde su triángulo. */
    details summary:not(.boton) { padding-block: 10px; }
}
/* En pantalla angosta, aunque se use con mouse (o un emulador), igual crecen: casi siempre es un teléfono. */
@media (max-width: 720px) {
    .enlace-tocable, a.ordenar, button.enlace, .tarjeta-titulo a, .volver { display: inline-flex; align-items: center; min-height: 44px; }
    details summary:not(.boton) { padding-block: 12px; }
}

/* ——— Grupos tipo Ajustes del iPhone: filas con ícono, título, estado y flecha ——— */
.grupo-filas { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin: 0 0 24px; padding: 0; list-style: none; }
.grupo-filas li + li .fila-ajuste::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--borde); }
.fila-ajuste { position: relative; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 16px; color: var(--texto); text-decoration: none; }
.fila-ajuste:hover { background: var(--superficie-2); }
/* El ícono de cada fila en suave: veinte cuadros azules gritaban más que el botón de guardar. */
.fila-ajuste .burbuja { width: 32px; height: 32px; border-radius: 8px; background: var(--relleno); color: var(--texto); }
.fila-ajuste .burbuja .icono { width: 17px; height: 17px; }
.fila-ajuste .titulo { flex: 1; min-width: 0; font-weight: 550; }
.fila-ajuste .titulo small { display: block; color: var(--tenue); font-weight: 400; font-size: .875rem; }
/* Dice que la fila se toca: es un ícono con significado y pide 3:1; el gris de borde daba 1.86. */
.fila-ajuste .chevron { color: var(--tenue); font-size: 1.4rem; line-height: 1; }

/* Filas de dos renglones (UXPeak): lo importante arriba, el contexto chico abajo. */
.fila-titulo { display: block; font-weight: 550; }
.fila-detalle { display: block; color: var(--tenue); font-size: .875rem; }
.cantidad-sube { color: var(--exito); font-weight: 650; }
.cantidad-baja { color: var(--error); font-weight: 650; }

/* Un <details> que abre opciones (Exportar) se ve como botón gris, sin el triángulo. */
summary.boton { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--alto-control); padding: 8px 16px; border-radius: var(--radio-chico); font-weight: 600; font-size: .94rem; cursor: pointer; margin: 0; }
summary.boton::-webkit-details-marker { display: none; }
summary.boton.secundario { background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte); }
summary.boton .icono { width: 17px; height: 17px; }

/* En el teléfono una tabla ancha se vuelve lista: quedan el nombre y lo más útil;
   lo secundario se ve en la ficha. Mejor que una tabla cortada a la derecha. */
@media (max-width: 700px) {
    th.secundaria, td.secundaria { display: none; }
    .contacto { display: block; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}


/* ——— Sensación de app ———
   Cambiar de pantalla se desvanece en vez de parpadear (View Transitions, en
   Safari y Chrome recientes), el menú y las pestañas se quedan quietos, tocar
   no deja el destello gris del navegador ni espera el doble toque, y un campo
   de 16 px no hace que el iPhone se acerque al escribir. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
.lateral { view-transition-name: lateral; }
.pestanas-app { view-transition-name: pestanas; }
.cabecera-movil { view-transition-name: cabecera; }
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, select { touch-action: manipulation; }
button:active, a.boton:active, summary.boton:active { transform: scale(.97); }
button, a.boton { transition: background .15s, border-color .15s, transform .12s; }
@media (pointer: coarse) {
    input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea { font-size: 16px; }
}
/* Instalada en la pantalla de inicio: lo que es interfaz no se selecciona como texto. */
@media (display-mode: standalone) {
    .lateral, .pestanas-app, .cabecera-movil, .pestanas, .filtros, button, .boton { -webkit-user-select: none; user-select: none; }
}
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .aviso.flotante { animation: aviso-sale .01s 4s forwards; }
    .lateral { transition: none; }
}

/* Citas de hoy en Inicio: la hora en una columna fija, como el Calendario del iPhone. */
.cita-hoy { display: flex; align-items: center; gap: 16px; }
.cita-hoy .hora { width: 3.2em; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--acento-tinta); }
.cita-hoy > span:nth-child(2) { flex: 1; min-width: 0; }
.cita-hoy.pasada { opacity: .5; }
.tarjeta-titulo a { font-size: .9rem; text-decoration: none; }

/* ——— Teléfono: tablas como celdas y encabezados que no se parten ——— */
@media (max-width: 700px) {
    /* Los botones del encabezado se reparten el ancho y no parten su texto. */
    .encabezado { flex-direction: column; align-items: stretch; }
    .encabezado .acciones { display: flex; gap: 8px; }
    .encabezado .acciones > * { flex: 1; white-space: nowrap; }

    table.celdas, table.celdas tbody { display: block; }
    table.celdas thead { display: none; }
    table.celdas tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
    table.celdas tbody tr:last-child { border-bottom: 0; }
    table.celdas td { display: flex; justify-content: flex-end; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding: 3px 0; border: 0; text-align: right; }
    table.celdas td::before { content: attr(data-etiqueta); color: var(--tenue); font-size: .86rem; text-align: left; flex: none; margin-right: auto; padding-right: 12px; }
    /* La primera columna es el título de la celda: sin etiqueta, grande y a la izquierda. */
    table.celdas td:first-child { display: block; text-align: left; font-size: 1rem; padding-bottom: 8px; }
    table.celdas td:first-child::before { content: none; }
    table.celdas td:empty, table.celdas td.vacia { display: none; }
    table.celdas td.secundaria { display: none; }
    table.celdas tbody tr:hover td { background: transparent; }
    .tabla-desliza:has(table.celdas) { overflow: visible; }
}

/* ——— Plano de mesas (vistas/plano.php + plano.js) ———
   Un piso con cuadrícula tenue y las mesas como piezas blancas: se entiende
   como el local visto desde arriba sin que la cuadrícula grite. */

.plano-barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plano-barra .pestanas { margin: 0; }
.plano-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px; align-items: start; margin-top: 16px; }
.plano-lienzo {
    position: relative; border-radius: var(--radio); background-color: var(--superficie-2); box-shadow: inset 0 0 0 1px var(--borde);
    background-image: radial-gradient(circle, var(--borde-fuerte) 1px, transparent 1.5px);
    background-size: var(--celda, 32px) var(--celda, 32px); background-position: calc(var(--celda, 32px) / -2) calc(var(--celda, 32px) / -2);
    overflow: hidden; touch-action: pan-y; outline: none;
}
.plano-pieza {
    position: absolute; box-sizing: border-box; padding: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--superficie); border-radius: 10px; box-shadow: var(--sombra), 0 0 0 1px var(--borde); cursor: grab; touch-action: none; user-select: none;
    transition: box-shadow .15s ease;
}
.plano-pieza b { font-size: .95rem; line-height: 1.1; text-align: center; overflow: hidden; text-overflow: ellipsis; max-width: 100%; white-space: nowrap; }
.plano-pieza small { color: var(--tenue); font-size: .75rem; }
.plano-pieza.forma-redonda { border-radius: 50%; }
.plano-pieza.forma-barra { border-radius: 6px; background: color-mix(in srgb, var(--superficie) 85%, var(--texto) 15%); flex-direction: row; gap: 8px; }
.plano-pieza.elegida { box-shadow: 0 0 0 2.5px var(--acento), var(--sombra-alta); z-index: 2; }
.plano-pieza.moviendo { cursor: grabbing; opacity: .9; }
.plano-pieza.encimada { box-shadow: 0 0 0 2.5px var(--error); }
.plano-pieza:focus-visible { outline: 3px solid color-mix(in srgb, var(--acento) 45%, transparent); outline-offset: 2px; }
.plano-esquina { position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--acento); border: 3px solid var(--superficie); cursor: nwse-resize; display: none; }
.plano-pieza.elegida .plano-esquina { display: block; }
[data-solo-ver] .plano-pieza { cursor: default; }
.plano-mesa { position: sticky; top: 16px; margin: 0; }
.plano-mesa .formas { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 0; padding: 0; margin: 4px 0 12px; }
.plano-acciones { display: flex; gap: 12px; justify-content: flex-end; margin-top: 16px; }

@media (max-width: 760px) {
    .plano-cuerpo { grid-template-columns: 1fr; }
    .plano-mesa { position: static; }
    /* En el teléfono la esquina se agarra con el dedo. */
    .plano-esquina { width: 26px; height: 26px; right: -10px; bottom: -10px; }
}

/* ——— Ventas (vistas/ventas.php, venta.php) y periodo ——— */

.rango { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; }
.rango label { margin: 0; }
.filtros-ventas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 4px 0 16px; }
.filtros-ventas .buscador { flex: 1 1 220px; margin: 0; }
.filtros-ventas select { width: auto; margin: 0; }
.formas-pago { display: grid; gap: 12px; }
.forma-pago { display: grid; grid-template-columns: 120px 1fr auto; gap: 12px; align-items: center; }
.forma-pago .medidor { height: 8px; margin: 0; border: 0; background: var(--relleno); }
.forma-pago .medidor span { display: block; height: 100%; border-radius: 999px; background: var(--acento); }
tr.cancelada td { color: var(--tenue); }
tr.cancelada td a { text-decoration: line-through; }
.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0; }
.peligro-zona summary { color: var(--error); font-weight: 600; }
.peligro-zona form { margin-top: 12px; }
td .chico, td .tenue.chico { display: block; }

/* Un grupo de campos que se apaga junto (lo que sólo cambia el administrador) sin dibujar un marco. */
fieldset.sin-marco { border: 0; padding: 0; margin: 0; min-width: 0; }
/* Impresoras de la sucursal: cada una se abre para editarla; el botón de prueba queda a la vista. */
[data-si][hidden] { display: none; }
details.impresora { border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 8px; }
details.impresora summary .tenue { font-weight: 400; }
.prueba-impresora { margin: 0 0 8px; }
#estaciones td { vertical-align: middle; }

/* ——— El día a día: productos, categorías, clientes, bitácora, inicio y «Mi negocio» ——— */

/* Lo que se hace a los marcados: una barra que se queda arriba al bajar por la lista. */
.barra-masiva { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 12px; margin: 0 0 16px;
    background: color-mix(in srgb, var(--superficie) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.barra-masiva select, .barra-masiva input { width: auto; margin: 0; }
.barra-masiva input[name=cantidad] { width: 6em; }
.barra-masiva .solo-precio, .barra-masiva .solo-categoria, .barra-masiva .solo-agotar { display: none; gap: 8px; align-items: center; }
/* Sólo los campos de la acción elegida, sin JavaScript. */
.barra-masiva:has(option[value=precio]:checked) .solo-precio,
.barra-masiva:has(option[value=categoria]:checked) .solo-categoria,
.barra-masiva:has(option[value=agotar]:checked) .solo-agotar,
.barra-masiva:has(option[value=desagotar]:checked) .solo-agotar { display: inline-flex; }
.barra-masiva [data-cuantos-marcados] { font-weight: 600; font-size: .9rem; }
th.marcar, td.marcar { width: 44px; padding-right: 0; }
td.marcar input, th.marcar input { width: 18px; height: 18px; margin: 0; accent-color: var(--acento); }
/* La casilla es chica, pero el dedo le atina a 44 × 44: el label la envuelve y cubre la celda. */
.area-marcar { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: -12px 0 -12px -12px; cursor: pointer; position: relative; z-index: 1; }
/* Sin nada marcado no hay qué aplicar: la barra estorbaba y su botón competía con «Nuevo producto». */
.masivo:not(:has(input[name="ids[]"]:checked)) .barra-masiva { display: none; }
/* Toda la fila se toca, no sólo el nombre (medía 18 px de alto): el enlace principal la cubre
   con un ::after, y lo demás que se toca en la fila (casilla, flechas) queda encima. */
tr:has(> td .fila-enlace) { position: relative; }
tr:has(> td .fila-enlace) > td { height: 48px; }
.fila-enlace::after { content: ''; position: absolute; inset: 0; }
tr:has(> td .fila-enlace) :is(.mover, .marcar, button, select, input) { position: relative; z-index: 1; }
tr:has(> td .fila-enlace):hover > td { background: var(--superficie-2); }
.miniatura { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; vertical-align: middle; margin-right: 12px; background: var(--relleno); }
.estados { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.estados:empty { display: none; }
.estados .etiqueta { font-size: .75rem; padding: 2px 8px; }
.etiqueta .icono { width: 12px; height: 12px; }
.estados .etiqueta:has(.icono)::before { content: none; }
td.mover { white-space: nowrap; width: 1%; }
.mover .boton-icono { width: 34px; height: 34px; }
.mover .boton-icono:disabled { opacity: .25; cursor: default; }
tr:target td, .categoria:target { background: var(--acento-suave); }
fieldset.dias { border: 0; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
fieldset.dias legend { font-weight: 600; font-size: .86rem; margin-bottom: 4px; padding: 0; }

.lista-categorias { display: grid; gap: 12px; margin-bottom: 20px; }
.lista-categorias .tarjeta { margin: 0; padding-block: 16px; }
.categoria-cabeza { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.categoria-cabeza img, .categoria-cabeza .foto-vacia { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.categoria-cabeza .foto-vacia { display: grid; place-items: center; background: var(--relleno); color: var(--tenue); }
.categoria-cabeza label.crece { flex: 1; min-width: 180px; margin: 0; }
.categoria details { margin: 12px 0 12px; }
.categoria summary { cursor: pointer; color: var(--tenue); font-size: .9rem; }

.acciones-pie { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 8px 0 24px; }
.acciones-pie form { margin: 0; }
.errores-csv td strong { display: block; }
.cambio { display: block; font-size: .9rem; }

/* Clientes: encabezados que ordenan y etiquetas propias. */
a.ordenar { color: inherit; text-decoration: none; }
a.ordenar:hover { color: var(--acento-tinta); }
.etiqueta.chica { font-size: .75rem; padding: 1px 8px; margin: 4px 4px 0 0; }
.etiqueta.chica::before { content: none; }
.etiquetas-filtro a { font-size: .85rem; }
a.etiqueta { text-decoration: none; }
.lista-compacta { margin: 8px 0 0; padding-left: 20px; color: var(--tenue); }

/* Bitácora: los filtros en un renglón que se acomoda. */
.filtros-bitacora .buscador { flex: 1 1 100%; }
.filtros-bitacora .en-linea-chico { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; color: var(--tenue); }
.filtros-bitacora input[type=date] { width: auto; margin: 0; }

/* Inicio: lo que pide acción, con el color de qué tan urgente es. */
.lista-alertas { list-style: none; margin: 0; padding: 0; }
.lista-alertas li { border-bottom: 1px solid var(--borde); }
.lista-alertas li:last-child { border-bottom: 0; }
.lista-alertas a { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--texto); text-decoration: none; font-weight: 500; }
.lista-alertas a:hover span { color: var(--acento-tinta); }
.lista-alertas a > .icono:first-child { width: 32px; height: 32px; padding: 8px; border-radius: 10px; flex: none; background: var(--alerta-suave); color: var(--alerta); }
.lista-alertas li.error a > .icono:first-child { background: var(--error-suave); color: var(--error); }
.lista-alertas span { flex: 1; }
.lista-alertas .ir { color: var(--tenue); width: 16px; height: 16px; }

/* «Mi negocio» */
.logo-actual { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.logo-actual img { border-radius: 22px; background: var(--relleno); flex: none; }
.logo-actual .grande-inicial { width: 96px; height: 96px; font-size: 2.4rem; flex: none; }
.revision-color { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 12px 0 16px; }
.revision-color > div { display: grid; gap: 8px; }
.muestra-color { display: grid; place-items: center; height: 44px; border-radius: 12px; font-weight: 650; }
.muestra-color.sobre-blanco { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--borde); }
.campo-color { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.campo-color input[type=color]:not([type=checkbox]) { width: 44px; height: var(--alto-control); padding: 3px; border-radius: 10px; flex: none; margin: 0; cursor: pointer; }
.campo-color input:not([type=color]):not([type=checkbox]) { flex: 1; min-width: 0; margin: 0; }
.promocion-panel { border-top: 1px solid var(--borde); padding: 12px 0; }
.promocion-panel summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.promocion-panel form { margin-top: 12px; }

@media (max-width: 700px) {
    /* En el teléfono la barra sale abajo, al alcance del pulgar, y sólo cuando hay algo marcado. */
    .barra-masiva { top: auto; bottom: calc(84px + env(safe-area-inset-bottom)); box-shadow: var(--sombra-alta); }
    .masivo:not(:has(input[name="ids[]"]:checked)) .barra-masiva { display: none; }
    .barra-masiva select[name=accion] { flex: 1; }
    .barra-masiva button { width: 100%; }
    .masivo { display: flex; flex-direction: column; }
    .masivo .barra-masiva { order: 99; }
    .filtros-bitacora .en-linea-chico { flex: 1 1 45%; }
    /* Exportar e importar un CSV se hace en la computadora; en el teléfono sólo estorban. */
    .solo-escritorio, .encabezado .acciones .solo-escritorio { display: none; }
    td.mover { padding-left: 0; padding-right: 8px; }
    th.marcar, td.marcar { width: 36px; padding-left: 12px; }
}

/* La vista previa del resumen diario: el texto tal cual llega, con su ancho de correo. */
.resumen-correo { white-space: pre-wrap; font: .9rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--superficie-2); border-radius: var(--radio-chico); padding: 16px 16px; max-width: 70ch; }

/* Correo con tu dominio: el «listo» con su palomita y los valores de DNS, que
   son una sola palabra larguísima (la llave DKIM) y rompían la tabla en el teléfono. */
.estado-ok { display: flex; align-items: center; gap: 8px; color: var(--exito); font-weight: 600; margin: 0 0 16px; }
code.partir { word-break: break-all; }

/* Asistencia: la semana se recorre con flechas; cada día lleva horas, de qué hora a qué hora y sus marcas. */
.semana-asistencia { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 20px; }
.semana-asistencia .en-linea { margin: 0 0 0 auto; }
table.asistencia th[scope="row"] { font-weight: 600; text-align: left; white-space: nowrap; }
.dia-asistencia { vertical-align: top; white-space: nowrap; }
table.asistencia td, table.asistencia th { padding-inline: 8px; white-space: nowrap; }
.dia-asistencia .tenue { font-size: .8rem; }
.dia-asistencia > * { display: block; margin-left: auto; width: fit-content; }
.dia-asistencia .etiqueta { margin-top: 4px; }
.corregir-checada summary { cursor: pointer; color: var(--acento-tinta); font-weight: 600; white-space: nowrap; }
.corregir-checada form { min-width: 280px; padding-top: 8px; }
.horario-persona { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 0; border-top: 1px solid var(--borde); }
.horario-persona > strong { min-width: 140px; }
.dias-horario { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.dias-horario label { display: grid; gap: 2px; margin: 0; font-size: .8rem; color: var(--tenue); }
.dias-horario input { width: 7.2em; margin: 0; }

/* Grupos de un combo en la ficha del producto: cada uno en su caja, como se verá en la caja. */
fieldset.grupo-combo { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px 4px; margin: 0 0 16px; }
fieldset.grupo-combo legend { font-weight: 600; padding: 0 6px; }
form.en-linea { display: inline; }

/* ——— Tu plan (suscripción) ——— */
/* La banda de la suscripción va arriba de cada pantalla del dueño: en prueba
   informa; con un pago que no pasó, pide acción y dice dónde. */
.banda-plan { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; padding: 10px 14px; border-radius: var(--radio-chico); background: var(--superficie-2); color: var(--texto); font-size: .92rem; }
.banda-plan .icono { color: var(--tenue); flex: none; }
.banda-plan span { flex: 1 1 240px; }
.banda-plan.alerta { background: var(--alerta-suave); }
.banda-plan.alerta .icono { color: var(--alerta); }
.banda-plan.error { background: var(--error-suave); }
.banda-plan.error .icono { color: var(--error); }
.banda-plan a { font-weight: 600; }
.datos-suscripcion { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.datos-suscripcion dt { color: var(--tenue); font-size: .85rem; }
.datos-suscripcion dd { margin: 2px 0 0; }
.rejilla-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.plan-opcion { display: flex; flex-direction: column; margin: 0; }
.plan-opcion.actual { border-color: var(--acento); }
.plan-opcion h3 { display: flex; align-items: center; gap: 8px; }
.plan-opcion .cifra small { font-size: .9rem; font-weight: 500; color: var(--tenue); }
.plan-opcion form { margin-top: auto; }
.lista-plan { margin: 0 0 16px; padding-left: 20px; color: var(--cuerpo); }
.modulos-plan li { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.modulos-plan form { flex: none; display: flex; align-items: center; gap: 12px; margin: 0; }
.recibo .logo-mn24 { display: block; margin-bottom: 16px; }
@media print {
    .no-imprimir, .lateral, .cabecera-movil, .pestanas-app { display: none !important; }
    .recibo { border: 0; }
}