/* =====================================================
   MI CATÁLOGO — Sistema de diseño
   Los colores principales vienen de configuracion/marca.php
   (variables --m-color, --m-oscuro, --m-fondo).
   ===================================================== */

:root{
    --texto: #16181D;
    --texto-suave: #5B606B;
    --borde: #E3E6EB;
    --borde-suave: #EEF0F3;
    --blanco: #FFFFFF;
    --exito: #0F8A6A;
    --error: #C5221F;
    --radio: 14px;
    --radio-lg: 20px;
    --sombra: 0 1px 2px rgba(22,24,29,.04), 0 8px 24px rgba(22,24,29,.06);
    --fuente: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

body{
    margin: 0;
    font-family: var(--fuente);
    color: var(--texto);
    background: var(--m-fondo);
    -webkit-font-smoothing: antialiased;
}

a{ color: var(--m-color); text-decoration: none; font-weight: 600; }
a:hover{ text-decoration: underline; }

/* ---------- Botones ---------- */
.btn-m{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 50px; padding: 0 22px; border: none; border-radius: var(--radio);
    background: var(--m-color); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: filter .15s, transform .05s;
}
.btn-m:hover{ filter: brightness(.95); color: #fff; text-decoration: none; }
.btn-m:active{ transform: translateY(1px); }
.btn-m:disabled{ opacity: .6; cursor: not-allowed; }
.btn-m.btn-bloque{ width: 100%; }

.btn-m-sec{
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 16px; border-radius: 12px;
    border: 1px solid var(--borde); background: var(--blanco); color: var(--texto);
    font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.btn-m-sec:hover{ background: #F1F3F5; text-decoration: none; color: var(--texto); }

/* ---------- Formularios ---------- */
.campo{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.campo label{ font-size: 13px; font-weight: 700; color: var(--texto); }
.campo .ayuda{ font-size: 12px; color: var(--texto-suave); }

.entrada{
    width: 100%; height: 50px; padding: 0 14px;
    border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco);
    font-family: inherit; font-size: 15px; color: var(--texto);
    transition: border-color .15s, box-shadow .15s;
}
.entrada:focus{
    outline: none; border-color: var(--m-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-color) 15%, transparent);
}
select.entrada{ 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='%235B606B' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }

.entrada-grupo{ position: relative; display: flex; align-items: center; }
.entrada-grupo .entrada{ padding-right: 50px; }
.entrada-grupo .btn-ojo{
    position: absolute; right: 4px; width: 44px; height: 44px;
    border: none; background: transparent; color: var(--texto-suave);
    border-radius: 10px; cursor: pointer; font-size: 18px;
}

.entrada-prefijo{
    display: flex; align-items: center;
    border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco);
    overflow: hidden; transition: border-color .15s, box-shadow .15s;
}
.entrada-prefijo:focus-within{
    border-color: var(--m-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-color) 15%, transparent);
}
.entrada-prefijo span{
    padding: 0 4px 0 14px; color: var(--texto-suave); font-size: 14px; white-space: nowrap;
}
.entrada-prefijo input{
    flex: 1; min-width: 0; height: 48px; border: none; outline: none; background: transparent;
    font-family: inherit; font-size: 15px; font-weight: 700; color: var(--texto); padding-right: 14px;
}

.estado-slug{ font-size: 12px; font-weight: 700; min-height: 16px; }
.estado-slug.ok{ color: var(--exito); }
.estado-slug.mal{ color: var(--error); }

.reglas-clave{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin-top: 4px; }
.reglas-clave span{ font-size: 12px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.reglas-clave span.cumple{ color: var(--exito); font-weight: 700; }

.ayuda{ font-size: 13px; color: var(--texto-suave); line-height: 1.5; }

/* ---------- Pantallas de acceso (login / registro) ---------- */
.acceso{
    min-height: 100vh; display: flex; flex-wrap: wrap;
}
.acceso-marca{
    flex: 1 1 420px; min-width: 0; background: var(--m-oscuro); color: #fff;
    padding: 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.acceso-logo{ display: flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 800; color: #fff; }
.acceso-logo:hover{ text-decoration: none; color: #fff; }
.acceso-logo .icono{
    width: 42px; height: 42px; border-radius: 13px; background: var(--m-color);
    display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.acceso-marca h1{ font-size: clamp(28px, 3.2vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 16px; }
.acceso-marca p.lead-m{ font-size: 16px; color: #C9CDD6; margin: 0; max-width: 440px; line-height: 1.6; }
.acceso-beneficios{ display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.acceso-beneficios div{ display: flex; align-items: center; gap: 12px; font-size: 15px; color: #E4E6EB; }
.acceso-beneficios i{
    width: 36px; height: 36px; border-radius: 11px; background: #262A33; color: var(--m-color);
    display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0;
}
.acceso-pie{ font-size: 13px; color: #8A8F99; }

.acceso-form{
    flex: 1 1 480px; min-width: 0; display: flex; align-items: center; justify-content: center; padding: 40px 20px;
}
.acceso-caja{ width: 100%; max-width: 440px; }
.acceso-caja h2{ font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.acceso-caja .sub{ color: var(--texto-suave); font-size: 15px; margin: 0 0 28px; }
.acceso-caja .cambiar{ text-align: center; margin-top: 22px; font-size: 14px; color: var(--texto-suave); }

.separador-pasos{ display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; font-size: 12px; font-weight: 800; color: var(--texto-suave); letter-spacing: .05em; }
.separador-pasos::after{ content: ""; flex: 1; height: 1px; background: var(--borde); }

@media (max-width: 900px){
    .acceso-marca{ padding: 28px 22px; flex-basis: 100%; }
    .acceso-marca .acceso-beneficios, .acceso-marca .acceso-pie{ display: none; }
    .acceso-marca h1{ font-size: 24px; margin-bottom: 6px; }
    .acceso-marca p.lead-m{ font-size: 14px; }
    .acceso-form{ flex-basis: 100%; padding: 28px 18px 40px; align-items: flex-start; }
}

/* ---------- Avisos flotantes (toasts) ---------- */
.toasts{
    position: fixed; top: 18px; right: 18px; left: 18px; z-index: 2000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
}
.toast-m{
    pointer-events: auto; max-width: 380px; width: 100%;
    display: flex; align-items: flex-start; gap: 12px;
    background: var(--texto); color: #fff; border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(22,24,29,.25); font-size: 14px; font-weight: 600; line-height: 1.45;
    animation: toastEntra .25s ease;
}
.toast-m i{ font-size: 18px; margin-top: 1px; }
.toast-m.exito i{ color: #6EE7B7; }
.toast-m.error i{ color: #FCA5A5; }
.toast-m.sale{ animation: toastSale .25s ease forwards; }
@keyframes toastEntra{ from{ opacity: 0; transform: translateY(-8px); } to{ opacity: 1; transform: none; } }
@keyframes toastSale{ to{ opacity: 0; transform: translateY(-8px); } }

/* ---------- Spinner dentro de botones ---------- */
.girando{ width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
    .toast-m, .toast-m.sale, .girando{ animation: none; }
}

/* =====================================================
   PANEL DEL NEGOCIO — layout
   ===================================================== */
.pn-layout{ display: flex; min-height: 100vh; }

.pn-menu{
    width: 264px; flex-shrink: 0; background: var(--m-oscuro); color: #fff;
    display: flex; flex-direction: column; padding: 18px 14px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1040;
}
.pn-menu-cabeza{ display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 18px; }
.pn-menu-logo{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: #fff; }
.pn-menu-logo:hover{ color: #fff; text-decoration: none; }
.pn-menu-logo .icono{ width: 36px; height: 36px; border-radius: 11px; background: var(--m-color); display: flex; align-items: center; justify-content: center; }
.pn-menu-cerrar{ display: none; width: 40px; height: 40px; border: none; border-radius: 10px; background: #262A33; color: #fff; }

.pn-menu-tienda{ display: flex; align-items: center; gap: 12px; background: #20232B; border-radius: 14px; padding: 12px; margin-bottom: 16px; }
.pn-menu-tienda .avatar{ width: 40px; height: 40px; border-radius: 12px; background: var(--m-color); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; }
.pn-menu-tienda .datos{ min-width: 0; }
.pn-menu-tienda strong{ display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-menu-tienda span{ font-size: 12px; color: #A9AEB8; }

.pn-menu-lista{ display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pn-menu-lista a, .pn-menu-lista .pn-menu-pronto, .pn-menu-pie a{
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: 12px; color: #C9CDD6; font-size: 14px; font-weight: 600;
}
.pn-menu-lista a:hover, .pn-menu-pie a:hover{ background: #20232B; color: #fff; text-decoration: none; }
.pn-menu-lista a.activo{ background: #2A2E38; color: #fff; }
.pn-menu-lista a.activo i{ color: var(--m-color); }
.pn-menu-lista i, .pn-menu-pie i{ font-size: 18px; width: 20px; text-align: center; }
.pn-menu-lista a > span, .pn-menu-pronto > span{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pn-menu-pronto{ opacity: .55; cursor: default; }
.pn-menu-pronto em{ margin-left: auto; font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #2A2E38; padding: 3px 7px; border-radius: 999px; }
.pn-menu-pie{ border-top: 1px solid #262A33; padding-top: 10px; margin-top: 10px; }

.pn-velo{ display: none; }

.pn-principal{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pn-top{
    height: 64px; background: var(--blanco); border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 1000;
}
.pn-top-menu{ display: none; width: 44px; height: 44px; border: 1px solid var(--borde); border-radius: 12px; background: var(--blanco); font-size: 20px; }
.pn-top-titulo{ font-size: 15px; font-weight: 700; color: var(--texto-suave); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn-contenido{ width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 24px 56px; display: flex; flex-direction: column; gap: 20px; }

.pn-cabecera{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-cabecera h1{ font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.pn-cabecera p{ color: var(--texto-suave); margin: 0; font-size: 15px; }

.pn-tarjeta{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 20px 22px; }

@media (max-width: 991px){
    .pn-menu{ position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .25s ease, visibility .25s; visibility: hidden; }
    .pn-menu.abierto{ transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.25); }
    .pn-menu-cerrar{ display: flex; align-items: center; justify-content: center; }
    .pn-velo{ position: fixed; inset: 0; background: rgba(22,24,29,.45); z-index: 1030; }
    .pn-velo.visible{ display: block; }
    .pn-top{ padding: 0 14px; }
    .pn-top-menu{ display: flex; align-items: center; justify-content: center; }
    .pn-contenido{ padding: 20px 14px 48px; }
    .pn-cabecera h1{ font-size: 24px; }
}
@media (max-width: 520px){
    .pn-top-ver span{ display: none; }
    .pn-top-ver{ width: 44px; padding: 0; }
}

/* ---------- Inicio del panel ---------- */
.pn-enlace{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pn-enlace .etiqueta{ font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.pn-enlace .valor{ font-size: 18px; font-weight: 800; word-break: break-all; }
.pn-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.pn-dato .lbl{ font-size: 12px; font-weight: 700; color: var(--texto-suave); letter-spacing: .04em; text-transform: uppercase; }
.pn-dato .num{ font-size: 26px; font-weight: 800; margin-top: 6px; }
.pn-dato .det{ font-size: 13px; color: var(--texto-suave); margin-top: 2px; }
.pn-pasos h2{ font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.pn-paso{ display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--borde-suave); }
.pn-paso:first-of-type{ border-top: none; }
.pn-paso .circulo{ width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--borde); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; color: var(--texto-suave); flex-shrink: 0; }
.pn-paso.hecho .circulo{ background: var(--exito); border-color: var(--exito); color: #fff; }
.pn-paso .txt{ flex: 1; min-width: 0; }
.pn-paso .txt strong{ display: block; font-size: 15px; }
.pn-paso .txt span{ font-size: 13px; color: var(--texto-suave); }
.pn-paso .ir{ font-size: 13px; white-space: nowrap; }
.pn-paso .btn-m-sec.ir{ height: 38px; padding: 0 14px; flex-shrink: 0; }
.pn-paso .ir.hecho{ color: var(--texto-suave); font-weight: 600; flex-shrink: 0; }
.pn-pasos-cabeza{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.pn-pasos-cabeza h2{ margin: 0; }
.pn-pasos-cuenta{ font-size: 13px; font-weight: 700; color: var(--texto-suave); white-space: nowrap; }
.pn-proximo{ font-size: 12px; font-weight: 700; color: var(--texto-suave); background: #F1F3F5; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }

/* ---------- Listas tipo tabla ---------- */
.lista-m{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); overflow: hidden; }
.lista-m-fila{ display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--borde-suave); }
.lista-m-fila:first-child{ border-top: none; }
.lista-m-fila .principal{ flex: 1; min-width: 0; }
.lista-m-fila .principal strong{ display: block; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-m-fila .principal span{ font-size: 13px; color: var(--texto-suave); }
.lista-m-fila .acciones{ display: flex; gap: 6px; flex-shrink: 0; }
.btn-icono{
    width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--borde); background: var(--blanco);
    color: var(--texto); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
}
.btn-icono:hover{ background: #F1F3F5; }
.btn-icono:disabled{ opacity: .35; cursor: not-allowed; }
.btn-icono.peligro:hover{ background: #FDECEC; color: var(--error); border-color: #F5C2C0; }
@media (max-width: 560px){
    .lista-m-fila{ flex-wrap: wrap; row-gap: 10px; }
    .lista-m-fila .principal{ flex: 1 1 60%; }
    .lista-m-fila .acciones{ width: 100%; justify-content: flex-end; }
}
.etiqueta-m{ font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #F1F3F5; color: var(--texto-suave); white-space: nowrap; }
.etiqueta-m.oculta{ background: #FFF4E5; color: #9A5B00; }

.vacio-m{ text-align: center; padding: 48px 20px; }
.vacio-m .icono{ width: 64px; height: 64px; border-radius: 18px; background: color-mix(in srgb, var(--m-color) 12%, #fff); color: var(--m-color); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; margin-bottom: 14px; }
.vacio-m h3{ font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.vacio-m p{ color: var(--texto-suave); margin: 0 0 18px; }

.esqueleto{ height: 68px; border-top: 1px solid var(--borde-suave); background: linear-gradient(90deg, #F6F7F9 0%, #EEF0F3 50%, #F6F7F9 100%); background-size: 200% 100%; animation: brillo 1.2s infinite; }
@keyframes brillo{ to{ background-position: -200% 0; } }

/* ---------- Ventanas (modales) ---------- */
.modal-content{ border: none; border-radius: var(--radio-lg); box-shadow: 0 24px 64px rgba(22,24,29,.22); }
.modal-header{ border-bottom: 1px solid var(--borde-suave); padding: 18px 22px; }
.modal-title{ font-weight: 800; font-size: 18px; }
.modal-body{ padding: 20px 22px 6px; }
.modal-footer{ border-top: none; padding: 6px 22px 20px; gap: 8px; }
.modal-footer > *{ margin: 0; }
.interruptor{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer; }
.interruptor input[type="checkbox"]{
    appearance: none; -webkit-appearance: none; flex-shrink: 0;
    width: 46px; height: 26px; margin: 0; border: none; border-radius: 999px;
    background: #C9CDD6; position: relative; cursor: pointer; transition: background .15s;
}
.interruptor input[type="checkbox"]::after{
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s;
}
.interruptor input[type="checkbox"]:checked{ background: var(--m-color); }
.interruptor input[type="checkbox"]:checked::after{ transform: translateX(20px); }
.interruptor input[type="checkbox"]:focus-visible{ outline: 3px solid color-mix(in srgb, var(--m-color) 40%, transparent); outline-offset: 2px; }
.interruptor strong{ display: block; font-size: 14px; }
.interruptor span{ font-size: 12px; color: var(--texto-suave); }

/* =====================================================
   PRODUCTOS
   ===================================================== */
textarea.entrada{ height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; }

.filtros-m{ display: flex; gap: 10px; flex-wrap: wrap; }
.filtros-m .entrada{ height: 46px; flex: 0 1 220px; }
.buscar-m{ flex: 1 1 260px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 12px; margin: 0; }
.buscar-m:focus-within{ border-color: var(--m-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--m-color) 15%, transparent); }
.buscar-m i{ color: var(--texto-suave); }
.buscar-m input{ flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: inherit; font-size: 15px; }

.limite-plan{ display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; }
.limite-plan .texto{ flex: 1 1 260px; }
.limite-plan strong{ font-size: 14px; }
.limite-plan .barra{ height: 8px; background: #EEF0F3; border-radius: 999px; margin-top: 8px; overflow: hidden; }
.limite-plan .barra span{ display: block; height: 100%; background: var(--m-color); border-radius: 999px; transition: width .3s; }
.limite-plan .barra span.lleno{ background: var(--error); }

.grid-productos{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tarjeta-producto{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.tarjeta-producto:hover{ box-shadow: var(--sombra); transform: translateY(-2px); }
.tarjeta-producto .foto{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; color: #B9BEC8; font-size: 36px; }
.tarjeta-producto .foto img{ width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.tarjeta-producto .foto:not(:has(img)){ background: #F1F3F5; }
.tarjeta-producto.agotado .foto img{ opacity: .5; }
.tarjeta-producto .sello{ position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 800; background: var(--m-oscuro); color: #fff; padding: 4px 9px; border-radius: 999px; }
.tarjeta-producto .sello i{ color: #FBBF24; }
.tarjeta-producto .sello.agotado{ left: auto; right: 10px; background: var(--error); }
.tarjeta-producto .cuerpo{ padding: 12px 14px 6px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tarjeta-producto .cat{ font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.tarjeta-producto .nombre{ font-size: 15px; font-weight: 700; color: var(--texto); line-height: 1.35; }
.tarjeta-producto .nombre:hover{ color: var(--m-color); text-decoration: none; }
.tarjeta-producto .precios{ display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.tarjeta-producto .precio{ font-size: 17px; font-weight: 800; }
.tarjeta-producto .tachado{ font-size: 13px; color: var(--texto-suave); text-decoration: line-through; }
.tarjeta-producto .pie{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; }
.tarjeta-producto .acciones{ display: flex; gap: 6px; }
.tarjeta-producto .btn-icono{ width: 36px; height: 36px; font-size: 15px; }
.tarjeta-producto .btn-icono .bi-star-fill{ color: #F59E0B; }

.mini-switch{ display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--texto-suave); cursor: pointer; margin: 0; }
.mini-switch input{ appearance: none; width: 38px; height: 22px; border-radius: 999px; background: #C9CDD6; position: relative; cursor: pointer; transition: background .15s; margin: 0; flex-shrink: 0; }
.mini-switch input::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.mini-switch input:checked{ background: var(--exito); }
.mini-switch input:checked::after{ transform: translateX(16px); }
.mini-switch input:focus-visible{ outline: 3px solid color-mix(in srgb, var(--m-color) 40%, transparent); outline-offset: 2px; }

/* Formulario de producto */
.form-producto{ display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.form-producto .columna-principal{ flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.form-producto .columna-lateral{ flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; }
.titulo-seccion{ font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.cabeza-seccion{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fila-2{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.barra-guardar{ display: flex; gap: 10px; }

.fotos-producto{ display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.foto-item{ position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #F1F3F5; border: 1px solid var(--borde); display: flex; align-items: center; justify-content: center; }
.foto-item img{ width: 100%; height: 100%; object-fit: cover; }
.foto-item .sello{ position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 800; background: var(--m-oscuro); color: #fff; padding: 3px 8px; border-radius: 999px; }
.foto-acciones{ position: absolute; right: 6px; bottom: 6px; display: flex; gap: 4px; }
.foto-acciones button{ width: 34px; height: 34px; border: none; border-radius: 10px; background: rgba(22,24,29,.75); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.foto-acciones button:hover{ background: var(--m-oscuro); }
.foto-agregar{ aspect-ratio: 1; border: 2px dashed #C9CDD6; border-radius: 14px; background: var(--blanco); color: var(--texto-suave); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: border-color .15s, color .15s; }
.foto-agregar i{ font-size: 24px; }
.foto-agregar:hover{ border-color: var(--m-color); color: var(--m-color); }

@media (max-width: 991px){
    .form-producto .columna-lateral{ position: static; }
}
@media (max-width: 560px){
    .fila-2{ grid-template-columns: 1fr; }
    .grid-productos{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .tarjeta-producto .pie{ flex-direction: column; align-items: stretch; }
    .tarjeta-producto .acciones{ justify-content: space-between; }
    .filtros-m .entrada{ flex: 1 1 140px; }
    .barra-guardar{ position: sticky; bottom: 0; background: var(--m-fondo); padding: 10px 0; }
}

/* =====================================================
   VARIANTES (colores, tallas, cantidades)
   ===================================================== */
[hidden]{ display: none !important; }

.aviso-pro{ display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--m-color) 8%, #fff); border: 1px solid color-mix(in srgb, var(--m-color) 25%, #fff); }
.aviso-pro i{ font-size: 20px; color: var(--m-color); }
.aviso-pro strong{ display: block; font-size: 14px; }
.aviso-pro span{ font-size: 13px; color: var(--texto-suave); }
.aviso-pro.neutro{ background: #F6F7F9; border-color: var(--borde); }
.aviso-pro.neutro i{ color: var(--texto-suave); }

.chips-tipos{ display: flex; gap: 8px; flex-wrap: wrap; }
.chip-tipo{ height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font-family: inherit; font-size: 14px; font-weight: 700; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip-tipo.activo{ background: var(--m-oscuro); border-color: var(--m-oscuro); color: #fff; }
.chip-tipo:disabled{ opacity: .4; cursor: not-allowed; }

.bloque-variante{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.bloque-variante > .cabeza-seccion strong{ font-size: 15px; }

.entrada-chica{ height: 42px; font-size: 14px; padding: 0 12px; }

.lista-colores{ display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.fila-color{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px; border: 1px solid var(--borde); border-radius: 14px; }
.fila-color > .entrada-chica{ flex: 1 1 140px; min-width: 0; }
.selector-color{ position: relative; width: 42px; height: 42px; margin: 0; cursor: pointer; flex-shrink: 0; }
.selector-color .muestra-color{ width: 42px; height: 42px; }
.selector-color input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.muestra-color{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); vertical-align: middle; flex-shrink: 0; }
.fotos-color{ display: flex; gap: 6px; flex-wrap: wrap; }
.mini-foto{ position: relative; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; border: 1px solid var(--borde); }
.mini-foto img{ width: 100%; height: 100%; object-fit: cover; }
.mini-foto.pendiente{ outline: 2px dashed var(--m-color); outline-offset: -2px; }
.mini-foto button{ position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border: none; border-radius: 6px; background: rgba(22,24,29,.75); color: #fff; font-size: 14px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.mini-agregar{ width: 52px; height: 52px; border-radius: 10px; border: 2px dashed #C9CDD6; background: var(--blanco); color: var(--texto-suave); font-size: 18px; cursor: pointer; }
.mini-agregar:hover{ border-color: var(--m-color); color: var(--m-color); }

.agregar-opcion{ display: flex; gap: 8px; margin-top: 10px; }
.agregar-opcion .entrada-chica{ flex: 1; min-width: 0; }
.agregar-opcion .btn-m-sec{ height: 42px; }
.sugeridas{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.chip-sugerida{ height: 34px; padding: 0 12px; border-radius: 999px; border: 1px dashed #B9BEC8; background: var(--blanco); font-family: inherit; font-size: 13px; font-weight: 600; color: var(--texto); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.chip-sugerida:hover{ border-color: var(--m-color); color: var(--m-color); }
.chips-valores{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip-valor{ height: 36px; padding: 0 4px 0 14px; border-radius: 999px; background: var(--m-oscuro); color: #fff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.chip-valor button{ width: 28px; height: 28px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }

.aplicar-todas{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.aplicar-todas .btn-m-sec{ height: 42px; }
.tabla-combos{ border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.fila-combo{ display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--borde-suave); }
.fila-combo:first-child{ border-top: none; }
.fila-combo.cabeza{ background: #F8FAFC; font-size: 11px; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .04em; }
.tabla-combos .fila-combo:not(:has(> :nth-child(4))){ grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) auto; }
.nombre-combo{ font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nombre-combo .sep{ color: var(--texto-suave); font-weight: 400; }

.etq-movil{ display: none; }
.info-variantes{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.info-variantes span{ font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #F1F3F5; color: var(--texto-suave); }
.info-variantes span.poco{ background: #FFF4E5; color: #9A5B00; }
.info-variantes span.cero{ background: #FDECEC; color: var(--error); }

@media (max-width: 560px){
    .fila-combo{ grid-template-columns: 1fr 1fr; }
    .fila-combo .nombre-combo{ grid-column: 1 / -1; }
    .fila-combo.cabeza{ display: none; }
    .etq-movil{ display: block; font-size: 11px; font-weight: 700; color: var(--texto-suave); margin-bottom: 3px; }
    .mini-switch .etq-movil{ display: inline; margin: 0; font-size: 13px; }
    .fila-combo > span:last-child{ grid-column: 1 / -1; }
    .tabla-combos .fila-combo:not(:has(> :nth-child(4))){ grid-template-columns: 1fr auto; }
}

/* ---------- Pedidos ---------- */
.pn-globo{ margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--m-color); color: #fff; font-style: normal; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.pd-pestanas{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; padding-bottom: 2px; }
.pd-pestanas::-webkit-scrollbar{ display: none; }
.pd-pestanas button{ flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font: inherit; font-size: 14px; font-weight: 700; color: var(--texto); cursor: pointer; }
.pd-pestanas button span{ min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #F1F3F5; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.pd-pestanas button.activa{ background: var(--m-oscuro); border-color: var(--m-oscuro); color: #fff; }
.pd-pestanas button.activa span{ background: rgba(255,255,255,.18); }
.pd-nuevo-ico{ font-size: 8px; color: var(--m-color); }

.pd-fila{ width: 100%; display: grid; grid-template-columns: 110px 1fr auto auto 16px; align-items: center; gap: 14px; padding: 14px 18px; border: none; border-top: 1px solid var(--borde-suave); background: var(--blanco); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pd-fila:first-child{ border-top: none; }
.pd-fila:hover{ background: #FAFBFC; }
.pd-fila.es-nuevo{ box-shadow: inset 3px 0 0 var(--m-color); }
.pd-codigo, .pd-cliente{ display: flex; flex-direction: column; min-width: 0; }
.pd-codigo strong{ font-size: 15px; font-weight: 800; }
.pd-codigo small, .pd-cliente small{ font-size: 12.5px; color: var(--texto-suave); }
.pd-cliente strong{ font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-total{ font-weight: 800; font-size: 15px; }
.pd-flecha{ color: #B9BEC8; }
.pd-estado{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.pd-estado.nuevo{ background: color-mix(in srgb, var(--m-color) 12%, #fff); color: var(--m-color); }
.pd-estado.preparando{ background: #FFF4DB; color: #9A6200; }
.pd-estado.entregado{ background: color-mix(in srgb, var(--exito) 12%, #fff); color: var(--exito); }
.pd-estado.cancelado{ background: #F1F3F5; color: var(--texto-suave); }
@media (max-width: 640px){
    .pd-fila{ grid-template-columns: 1fr auto; gap: 6px 12px; }
    .pd-codigo{ flex-direction: row; gap: 8px; align-items: baseline; }
    .pd-total{ grid-column: 2; grid-row: 1; }
    .pd-cliente{ grid-column: 1; }
    .pd-fila .pd-estado{ grid-column: 2; grid-row: 2; justify-self: end; }
    .pd-flecha{ display: none; }
}

#modalPedido .modal-title{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-fecha{ font-size: 13px; color: var(--texto-suave); }
.pd-items{ list-style: none; margin: 0; padding: 0; }
.pd-items li{ display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--borde-suave); }
.pd-items .cant{ min-width: 34px; height: 28px; border-radius: 8px; background: #F1F3F5; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.pd-items div{ flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pd-items strong{ font-size: 14.5px; }
.pd-items small{ font-size: 12.5px; color: var(--texto-suave); }
.pd-total-linea{ display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 6px; font-weight: 700; }
.pd-total-linea strong{ font-size: 20px; font-weight: 800; }
.pd-bloque{ margin: 14px 0; padding: 14px 16px; border-radius: var(--radio); background: #F7F8FA; }
.pd-bloque h3{ font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 0 0 8px; }
.pd-bloque p{ display: flex; gap: 10px; margin: 0 0 6px; font-size: 14.5px; }
.pd-bloque p:last-child{ margin-bottom: 0; }
.pd-bloque p i{ color: var(--texto-suave); }
.pd-nota{ background: #FFF8E6; margin-top: 8px !important; padding: 8px 10px; border-radius: 10px; }
.pd-btn-wa{ background: #25D366; height: 48px; }
.pd-acciones{ gap: 8px; justify-content: stretch; }
.pd-acciones > *{ flex: 1 1 130px; margin: 0; height: 46px; white-space: nowrap; padding: 0 12px; }
.pd-btn-ok{ background: var(--exito); }
.pd-btn-cancelar{ color: var(--error); }
.pd-cancelado-nota{ flex-basis: 100%; height: auto !important; font-size: 14px; color: var(--texto-suave); text-align: center; }

/* ---------- Entregas ---------- */
.en-bloque{ margin-bottom: 14px; padding: 18px 20px; }
.en-bloque .interruptor{ margin: 0; }
.en-bloque .interruptor strong i{ color: var(--m-color); margin-right: 4px; }
.en-sub{ margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde-suave); }
.en-sub.campo{ margin-bottom: 0; }
.en-titulo{ font-size: 15px; }
.en-titulo i{ color: var(--m-color); margin-right: 4px; }
.en-pregunta{ font-size: 14px; font-weight: 700; margin: 16px 0 8px; }
.en-sub > .en-pregunta:first-child{ margin-top: 0; }
.en-pro{ background: color-mix(in srgb, var(--m-color) 12%, #fff); color: var(--m-color); font-size: 11px; vertical-align: middle; }
.en-modos{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px){ .en-modos{ grid-template-columns: 1fr; } }
.en-modo{ position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border: 1.5px solid var(--borde); border-radius: var(--radio); cursor: pointer; background: var(--blanco); }
.en-modo input{ position: absolute; opacity: 0; pointer-events: none; }
.en-modo i{ font-size: 20px; color: var(--texto-suave); margin-bottom: 4px; }
.en-modo strong{ font-size: 14px; }
.en-modo span{ font-size: 12.5px; color: var(--texto-suave); }
.en-modo.activo{ border-color: var(--m-color); background: color-mix(in srgb, var(--m-color) 6%, #fff); }
.en-modo.activo i{ color: var(--m-color); }
.en-modo:has(input:focus-visible){ outline: 3px solid color-mix(in srgb, var(--m-color) 35%, transparent); }
.en-modo.bloqueado{ cursor: not-allowed; opacity: .7; }
.en-tabla{ display: flex; flex-direction: column; gap: 8px; margin: 14px 0 10px; }
.en-fila{ display: grid; grid-template-columns: 1fr 170px 44px; gap: 8px; align-items: center; }
.en-fila.cabeza{ font-size: 12px; font-weight: 700; color: var(--texto-suave); }
.en-fila .btn-icono{ width: 44px; height: 44px; }
.en-monto{ display: flex; align-items: center; position: relative; }
.en-monto > span{ position: absolute; left: 14px; font-size: 14px; font-weight: 700; color: var(--texto-suave); pointer-events: none; }
.en-monto .entrada{ width: 100%; padding-left: 46px; }
.en-monto.km > span{ left: auto; right: 14px; }
.en-monto.km .entrada{ padding-left: 14px; padding-right: 40px; }
@media (max-width: 560px){ .en-fila{ grid-template-columns: 1fr 120px 44px; } }
/* Extras del producto */
.ex-sub{ font-size: 14px; font-weight: 700; margin: 0 0 4px; }
.en-fila.ex-fila{ grid-template-columns: 1fr 140px 44px 44px; }
.en-fila.ex-fila.apagado .entrada{ opacity: .5; text-decoration: line-through; }
@media (max-width: 560px){ .en-fila.ex-fila{ grid-template-columns: 1fr 100px 40px 40px; } .en-fila.ex-fila .btn-icono{ width: 40px; } }
.en-mapa{ height: 300px; border-radius: var(--radio); overflow: hidden; border: 1px solid var(--borde); z-index: 0; }
.en-mapa-pie{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.opcional{ font-weight: 500; color: var(--texto-suave); }
.pd-linea{ display: flex; justify-content: space-between; padding: 8px 0 0; font-size: 14px; color: var(--texto-suave); font-weight: 600; }

/* ---------- Configuración ---------- */
.cf-indice{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px; }
.cf-indice::-webkit-scrollbar{ display: none; }
.cf-indice a{ flex-shrink: 0; padding: 8px 14px; border-radius: 999px; background: var(--blanco); border: 1px solid var(--borde); color: var(--texto); font-size: 13.5px; }
.cf-indice a:hover{ text-decoration: none; border-color: #C9CDD6; }
.cf-bloque{ margin-bottom: 16px; padding: 20px; scroll-margin-top: 80px; }
.cf-titulo{ font-size: 17px; font-weight: 800; margin: 0 0 16px; }
.cf-titulo i{ color: var(--m-color); margin-right: 6px; }
.cf-dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 640px){ .cf-dos{ grid-template-columns: 1fr; } }
.cf-estado{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cf-estado-texto{ display: flex; align-items: center; gap: 14px; }
.cf-estado-texto strong{ display: block; font-size: 17px; }
.cf-estado-texto span:not(.cf-punto){ font-size: 13.5px; color: var(--texto-suave); }
.cf-punto{ width: 14px; height: 14px; border-radius: 50%; background: #C9CDD6; flex-shrink: 0; }
.cf-punto.si{ background: var(--exito); box-shadow: 0 0 0 5px color-mix(in srgb, var(--exito) 18%, transparent); }
.cf-punto.no{ background: var(--error); box-shadow: 0 0 0 5px color-mix(in srgb, var(--error) 15%, transparent); }
.cf-switch-grande input{ appearance: none; width: 62px; height: 34px; border-radius: 999px; background: #C9CDD6; position: relative; cursor: pointer; margin: 0; transition: background .15s; }
.cf-switch-grande input::after{ content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.cf-switch-grande input:checked{ background: var(--exito); }
.cf-switch-grande input:checked::after{ transform: translateX(28px); }
.cf-switch-grande input:disabled{ opacity: .55; cursor: not-allowed; }
.cf-switch-grande input:focus-visible{ outline: 3px solid color-mix(in srgb, var(--m-color) 35%, transparent); outline-offset: 2px; }
.cf-enlace{ display: flex; align-items: stretch; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--blanco); }
.cf-enlace span{ display: flex; align-items: center; padding: 0 2px 0 14px; background: #F4F5F7; color: var(--texto-suave); font-size: 14px; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.cf-enlace .entrada{ border: none; border-radius: 0; flex: 1; min-width: 0; padding-left: 4px; }
.cf-ok{ color: var(--exito) !important; font-weight: 600; }
.cf-mal{ color: var(--error) !important; font-weight: 600; }
.cf-con-boton{ display: flex; gap: 8px; }
.cf-con-boton .entrada{ flex: 1; min-width: 0; }
.cf-con-boton .btn-m-sec{ height: auto; min-height: 44px; }
.cf-ayuda-pasos{ font-size: 13.5px; color: var(--texto-suave); }
.cf-ayuda-pasos summary{ cursor: pointer; color: var(--m-color); font-weight: 700; }
.cf-ayuda-pasos ol{ margin: 8px 0 4px; padding-left: 20px; }
.cf-ayuda-pasos p{ margin: 0; }
.cf-dias{ display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-bottom: 8px; }
.cf-dia{ display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; padding: 10px 14px; }
.cf-dia + .cf-dia{ border-top: 1px solid var(--borde-suave); }
.cf-horas{ display: flex; align-items: center; gap: 8px; }
.cf-horas .entrada{ height: 42px; width: 130px; padding: 0 10px; }
.cf-horas span{ color: var(--texto-suave); font-size: 13px; }
.cf-cerrado-txt{ display: none; color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.cf-dia.cerrado .cf-horas{ display: none; }
.cf-dia.cerrado .cf-cerrado-txt{ display: block; }
@media (max-width: 480px){ .cf-dia{ grid-template-columns: 1fr; gap: 6px; } .cf-horas .entrada{ flex: 1; width: auto; } }
.cf-pago{ border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 8px; }
.cf-pago.apagado{ background: #FAFBFC; }
.cf-pago.apagado .entrada{ color: var(--texto-suave); }
.cf-pago-cabeza{ display: flex; gap: 10px; align-items: center; }
.cf-pago-cabeza .entrada{ flex: 1; min-width: 0; font-weight: 700; }
.cf-pago-cabeza .mini-switch span{ min-width: 48px; }
.cf-sugerencias{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cf-chip{ height: 36px; padding: 0 12px; border-radius: 999px; border: 1px dashed #B9BEC8; background: var(--blanco); font: inherit; font-size: 13.5px; font-weight: 700; color: var(--texto); cursor: pointer; }
.cf-chip:hover{ border-color: var(--m-color); color: var(--m-color); }

/* ---------- Diseño ---------- */
.pn-menu-tienda .avatar{ overflow: hidden; }
.pn-menu-tienda .avatar img{ width: 100%; height: 100%; object-fit: cover; background: #fff; }
.ds-layout{ display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
@media (max-width: 980px){ .ds-layout{ grid-template-columns: 1fr; } .ds-vista{ order: -1; } }
.ds-subida{ display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ds-logo-prev{ width: 96px; height: 96px; border-radius: 24px; overflow: hidden; border: 1px solid var(--borde); background: #fff; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.ds-logo-prev img{ width: 100%; height: 100%; object-fit: cover; }
.ds-logo-prev span{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--m-color); color: #fff; font-size: 38px; font-weight: 800; }
.ds-portada-prev{ height: 150px; border-radius: var(--radio); background: var(--m-color) center / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.ds-portada-prev span{ color: #fff; font-weight: 700; font-size: 14px; background: rgba(0,0,0,.18); padding: 6px 12px; border-radius: 999px; }
.ds-boton-archivo{ cursor: pointer; }
.ds-boton-archivo.cargando{ opacity: .6; pointer-events: none; }
.ds-boton-archivo:focus-within{ outline: 3px solid color-mix(in srgb, var(--m-color) 35%, transparent); }
.ds-quitar{ color: var(--error); margin-left: 6px; }
.ds-colores{ display: flex; flex-wrap: wrap; gap: 10px; }
.ds-color{ width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; background: var(--c, #fff); box-shadow: 0 0 0 1px var(--borde); cursor: pointer; padding: 0; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ds-color.activo{ box-shadow: 0 0 0 3px var(--m-oscuro); }
.ds-color.activo::after{ content: "\F633"; font-family: "bootstrap-icons"; color: #fff; font-size: 18px; }
.ds-color:disabled{ cursor: not-allowed; opacity: .55; }
.ds-otro{ background: conic-gradient(#f03e3e, #fab005, #40c057, #15aabf, #4c6ef5, #be4bdb, #f03e3e); overflow: hidden; }
.ds-otro input{ position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.ds-otro i{ color: #fff; font-size: 16px; text-shadow: 0 1px 3px rgba(0,0,0,.4); pointer-events: none; }
.ds-otro.activo::after{ content: none; }
.ds-vista{ position: sticky; top: 84px; }
.ds-vista-titulo{ display: block; font-size: 13px; font-weight: 700; color: var(--texto-suave); margin-bottom: 8px; }
.ds-telefono{ border: 8px solid #16181D; border-radius: 34px; overflow: hidden; background: #F4F5F7; max-width: 320px; margin: 0 auto; padding-bottom: 12px; box-shadow: var(--sombra); }
.ds-t-portada{ height: 90px; background: var(--pc) center / cover no-repeat; }
.ds-t-info{ background: #fff; padding: 0 14px 12px; display: flex; flex-direction: column; }
.ds-t-logo{ width: 58px; height: 58px; margin-top: -29px; border-radius: 16px; border: 3px solid #fff; overflow: hidden; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.12); margin-bottom: 6px; }
.ds-t-logo img{ width: 100%; height: 100%; object-fit: cover; }
.ds-t-logo span{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--pc); color: #fff; font-weight: 800; font-size: 24px; }
.ds-t-info strong{ font-size: 16px; }
.ds-t-info small{ font-size: 11.5px; color: var(--texto-suave); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ds-t-chips{ display: flex; gap: 6px; padding: 10px 12px; }
.ds-t-chips span{ font-size: 11px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--borde); }
.ds-t-chips span.activo{ background: color-mix(in srgb, var(--pc) 12%, #fff); color: var(--pc); border-color: var(--pc); }
.ds-t-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 12px; }
.ds-t-grid div{ background: #fff; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; padding-bottom: 8px; }
.ds-t-grid i{ aspect-ratio: 1; background: linear-gradient(135deg, #EEF0F3, #F8F9FA); }
.ds-t-grid b{ font-size: 11.5px; padding: 6px 8px 0; }
.ds-t-grid em{ font-style: normal; font-size: 12px; font-weight: 800; padding: 0 8px; color: var(--pc); }
.ds-t-boton{ margin: 12px 12px 0; height: 40px; border-radius: 12px; background: var(--pc); color: #fff; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.ds-t-boton span{ background: rgba(255,255,255,.22); border-radius: 6px; padding: 1px 7px; }
.ds-t-boton b{ margin-left: auto; }

/* ---------- Compartir ---------- */
.cp-enlace{ display: flex; gap: 8px; flex-wrap: wrap; }
.cp-enlace .entrada{ flex: 1 1 260px; font-weight: 700; }
.cp-dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 900px){ .cp-dos{ grid-template-columns: 1fr; } }
.cp-qr{ display: flex; justify-content: center; padding: 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.cp-qr canvas{ width: 220px; height: 220px; }
.cp-opciones{ display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.cp-botones{ display: flex; gap: 8px; flex-wrap: wrap; }
.cp-redes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 14px; }
.cp-red{ display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: var(--radio); border: 1px solid var(--borde); background: var(--blanco); font: inherit; font-size: 13px; font-weight: 700; color: var(--texto); cursor: pointer; }
.cp-red i{ font-size: 22px; }
.cp-red:hover{ background: #F7F8FA; }
.cp-red.wa i{ color: #25D366; }
.cp-red.fb i{ color: #1877F2; }
.cp-tip{ display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--radio); background: #F7F8FA; margin-top: 8px; font-size: 13.5px; }
.cp-tip i{ font-size: 20px; color: var(--m-color); }
.cp-tip strong{ display: block; }
.cp-tip span{ color: var(--texto-suave); }
.cp-productos{ list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); max-height: 420px; overflow-y: auto; }
.cp-productos li{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.cp-productos li + li{ border-top: 1px solid var(--borde-suave); }
.cp-productos li[hidden]{ display: none; }
.cp-productos .foto{ width: 48px; height: 48px; border-radius: 10px; border: 1px solid var(--borde-suave); overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #B9BEC8; background: #fff; }
.cp-productos .foto img{ width: 100%; height: 100%; object-fit: contain; }
.cp-productos .texto{ flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cp-productos .texto strong{ font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-productos .texto span{ font-size: 12.5px; color: var(--texto-suave); }
.cp-productos .acciones{ display: flex; gap: 6px; }
.cp-wa{ color: #25D366 !important; }
.cp-pdf{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cp-pdf .icono{ width: 54px; height: 54px; border-radius: 14px; background: color-mix(in srgb, var(--error) 10%, #fff); color: var(--error); font-size: 26px; display: flex; align-items: center; justify-content: center; }
.cp-pdf .texto{ flex: 1 1 260px; }

/* ---------- Clientes ---------- */
.cl-resumen{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.cl-resumen div{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 14px 18px; display: flex; flex-direction: column; }
.cl-resumen strong{ font-size: 26px; font-weight: 800; }
.cl-resumen span{ font-size: 13px; color: var(--texto-suave); font-weight: 600; }
@media (max-width: 560px){ .cl-resumen{ gap: 8px; } .cl-resumen div{ padding: 10px 12px; } .cl-resumen strong{ font-size: 20px; } .cl-resumen span{ font-size: 11.5px; } }
.cl-filtros{ grid-template-columns: 1fr 230px; }
@media (max-width: 640px){ .cl-filtros{ grid-template-columns: 1fr; } }
.cl-fila{ width: 100%; display: grid; grid-template-columns: 44px 1fr 90px 120px 16px; align-items: center; gap: 14px; padding: 12px 18px; border: none; border-top: 1px solid var(--borde-suave); background: var(--blanco); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cl-fila:first-child{ border-top: none; }
.cl-fila:hover{ background: #FAFBFC; }
.cl-avatar{ width: 44px; height: 44px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cl-avatar.grande{ width: 52px; height: 52px; font-size: 18px; }
.cl-datos{ display: flex; flex-direction: column; min-width: 0; }
.cl-datos strong{ font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-datos small, .cl-num small{ font-size: 12.5px; color: var(--texto-suave); }
.cl-num{ display: flex; flex-direction: column; text-align: right; }
.cl-num strong{ font-size: 15px; font-weight: 800; }
.cl-top{ margin-left: 6px; }
.cl-icono-nota{ color: #E8B300; font-size: 12px; }
@media (max-width: 640px){
    .cl-fila{ grid-template-columns: 44px 1fr auto; gap: 4px 12px; }
    .cl-fila .cl-num:nth-of-type(3){ display: none; }
    .cl-fila .pd-flecha{ display: none; }
}
.cl-cab{ display: flex; align-items: center; gap: 12px; }
.cl-cifras{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.cl-cifras div{ background: #F7F8FA; border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; }
.cl-cifras strong{ font-size: 16px; font-weight: 800; }
.cl-cifras span{ font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.cl-veces{ margin-left: auto; color: var(--texto-suave); font-weight: 700; }
.cl-subtitulo{ font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); margin: 18px 0 6px; }
.cl-pedidos{ list-style: none; margin: 0; padding: 0; border: 1px solid var(--borde); border-radius: var(--radio); }
.cl-pedidos li{ display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 14px; }
.cl-pedidos li + li{ border-top: 1px solid var(--borde-suave); }
.cl-pedidos li span:first-child{ display: flex; flex-direction: column; }
.cl-pedidos small{ font-size: 12px; color: var(--texto-suave); }
.cl-ver-pedidos{ display: inline-block; margin-top: 10px; font-size: 14px; }
.cl-bloqueo{ max-width: 560px; margin: 10px auto; text-align: center; padding: 34px 28px; }
.cl-bloqueo .icono{ width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; background: color-mix(in srgb, var(--m-color) 12%, #fff); color: var(--m-color); font-size: 34px; display: flex; align-items: center; justify-content: center; }
.cl-bloqueo h2{ font-size: 21px; font-weight: 800; margin: 0 0 8px; }
.cl-bloqueo p{ color: var(--texto-suave); margin: 0 0 16px; }
.cl-bloqueo ul{ list-style: none; padding: 0; margin: 0 auto 18px; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; font-size: 14.5px; font-weight: 600; }
.cl-bloqueo ul i{ color: var(--exito); margin-right: 6px; }

/* ---------- Ventas ---------- */
.vt-filtro{ margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.vt-rangos{ display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.vt-rangos::-webkit-scrollbar{ display: none; }
.vt-rangos button{ flex-shrink: 0; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--borde); background: var(--blanco); font: inherit; font-size: 14px; font-weight: 700; color: var(--texto); cursor: pointer; }
.vt-rangos button.activo{ background: var(--m-oscuro); border-color: var(--m-oscuro); color: #fff; }
.vt-rangos button:disabled{ opacity: .45; cursor: not-allowed; }
.vt-fechas{ display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.vt-fechas label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.vt-fechas .entrada{ height: 44px; }
.vt-cifras{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vt-cifras .vt-cifra.principal{ grid-column: span 2; }
@media (max-width: 560px){ .vt-cifras{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .vt-cifra.principal{ grid-column: 1 / -1; } }
.vt-cifra{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vt-cifra > span{ font-size: 12.5px; font-weight: 700; color: var(--texto-suave); }
.vt-cifra strong{ font-size: 22px; font-weight: 800; letter-spacing: -.01em; overflow-wrap: anywhere; line-height: 1.15; }
.vt-cifra.principal{ background: var(--m-oscuro); border-color: var(--m-oscuro); color: #fff; }
.vt-cifra.principal > span{ color: rgba(255,255,255,.7); }
.vt-cifra.principal strong{ font-size: 30px; }
.vt-cifra em{ font-style: normal; display: flex; flex-direction: column; gap: 2px; }
.vt-cifra em small{ font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.vt-cambio{ display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 800; align-self: flex-start; padding: 2px 8px; border-radius: 999px; }
.vt-cambio.sube{ background: color-mix(in srgb, var(--exito) 12%, #fff); color: var(--exito); }
.vt-cambio.baja{ background: color-mix(in srgb, var(--error) 10%, #fff); color: var(--error); }
.vt-cambio.igual, .vt-cambio.nuevo{ background: #F1F3F5; color: var(--texto-suave); }
.vt-cifra.principal .vt-cambio.sube{ background: rgba(56,217,169,.18); color: #63E6BE; }
.vt-cifra.principal .vt-cambio.baja{ background: rgba(255,135,135,.18); color: #FFA8A8; }
.vt-cifra.principal .vt-cambio.igual, .vt-cifra.principal .vt-cambio.nuevo{ background: rgba(255,255,255,.12); color: rgba(255,255,255,.8); }
.vt-detalle{ display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; font-size: 13.5px; color: var(--texto-suave); margin: 10px 2px 16px; min-height: 1px; }
.vt-detalle b{ color: var(--texto); }
.vt-detalle .sep{ margin: 0 8px; color: #C9CDD6; }
.vt-bloque{ padding: 18px 20px; margin-bottom: 16px; }
.vt-titulo{ font-size: 16px; font-weight: 800; margin: 0 0 14px; }
.vt-titulo i{ color: var(--m-color); margin-right: 6px; }
.vt-cab{ display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.vt-cab .vt-titulo{ margin: 0; }
.vt-segmento{ display: inline-flex; background: #F1F3F5; border-radius: 10px; padding: 3px; }
.vt-segmento button{ height: 32px; padding: 0 12px; border: none; border-radius: 8px; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.vt-segmento button.activo{ background: var(--blanco); color: var(--texto); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.vt-grafico{ position: relative; height: 220px; }
.vt-grafico.alto{ height: 280px; }
.vt-dos{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.vt-tres{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 16px; }
@media (max-width: 1000px){ .vt-tres{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px){ .vt-dos, .vt-tres{ grid-template-columns: 1fr; } }
.vt-barras{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vt-barras .fila{ display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 5px; }
.vt-barras .nombre{ font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-barras .nombre em{ font-style: normal; display: inline-flex; width: 22px; height: 22px; border-radius: 7px; background: #F1F3F5; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; margin-right: 8px; }
.vt-barras .valor{ font-weight: 800; white-space: nowrap; text-align: right; }
.vt-barras .valor small{ display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }
.vt-barras .pista{ height: 8px; border-radius: 4px; background: #F1F3F5; overflow: hidden; }
.vt-barras .pista span{ display: block; height: 100%; border-radius: 4px; background: var(--m-color); }
.vt-estados{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vt-estados li{ display: grid; grid-template-columns: 1fr auto 44px; align-items: center; gap: 10px; }
.vt-estados .pd-estado{ justify-self: start; }
.vt-estados b{ font-size: 16px; }
.vt-estados small{ color: var(--texto-suave); font-weight: 700; text-align: right; }
.vt-enlace{ display: inline-block; margin-top: 12px; font-size: 14px; }
.vt-clientes{ list-style: none; margin: 0; padding: 0; }
.vt-clientes li{ display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; padding: 9px 0; }
.vt-clientes li + li{ border-top: 1px solid var(--borde-suave); }
.vt-clientes .pos{ width: 28px; height: 28px; border-radius: 50%; background: #F1F3F5; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.vt-clientes li:first-child .pos{ background: var(--m-color); color: #fff; }
.vt-clientes small{ color: var(--texto-suave); font-size: 12.5px; }
.vt-claves ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vt-claves li{ display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; }
.vt-claves li i{ width: 30px; height: 30px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, var(--m-color) 10%, #fff); color: var(--m-color); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.vt-vacio{ color: var(--texto-suave); font-size: 14px; margin: 0; padding: 10px 0; }
.vt-tabla-ver{ margin-top: 10px; font-size: 13.5px; }
.vt-tabla-ver summary{ cursor: pointer; color: var(--texto-suave); font-weight: 700; }
.vt-tabla{ width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.vt-tabla th{ text-align: left; color: var(--texto-suave); font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.vt-tabla td{ padding: 6px 8px; border-bottom: 1px solid var(--borde-suave); }
.vt-tabla td:not(:first-child), .vt-tabla th:not(:first-child){ text-align: right; }
.esqueleto-txt{ display: block; height: 28px; border-radius: 8px; background: linear-gradient(90deg, #F1F3F5, #E9ECEF, #F1F3F5); background-size: 200% 100%; animation: brillo 1.2s infinite; }

/* ---------- Aviso del plan ---------- */
.pn-aviso-plan{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: calc(100% - 48px); max-width: 1072px; margin: 16px auto 0; padding: 12px 16px; border-radius: var(--radio); background: #FFF6E0; border: 1px solid #FFE08A; color: #6B4A00; font-size: 14px; font-weight: 600; }
.pn-aviso-plan i{ font-size: 18px; }
.pn-aviso-plan span{ flex: 1 1 260px; }
.pn-aviso-plan .btn-m{ height: 40px; padding: 0 16px; font-size: 14px; }
.pn-aviso-plan.urgente{ background: #FFF0F0; border-color: #FFC9C9; color: #8A1C1C; }
.pn-aviso-plan.urgente .btn-m{ background: var(--error); }
.pn-aviso-plan.revision{ background: #EEF6FF; border-color: #C7E0FF; color: #134A87; }
@media (max-width: 640px){ .pn-aviso-plan{ width: calc(100% - 28px); margin-top: 12px; } }

/* ---------- Mi plan ---------- */
.mp-actual{ display: flex; align-items: center; gap: 16px; padding: 18px 20px; flex-wrap: wrap; }
.mp-actual .icono{ width: 52px; height: 52px; border-radius: 16px; background: color-mix(in srgb, var(--m-color) 12%, #fff); color: var(--m-color); font-size: 24px; display: flex; align-items: center; justify-content: center; }
.mp-actual.en_gracia .icono{ background: #FFF0F0; color: var(--error); }
.mp-actual .texto{ flex: 1; min-width: 200px; }
.mp-actual .texto span{ font-size: 12.5px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; }
.mp-actual .texto strong{ display: block; font-size: 21px; font-weight: 800; }
.mp-actual .texto p{ margin: 2px 0 0; font-size: 14px; color: var(--texto-suave); }
.mp-dias{ text-align: center; padding: 8px 16px; border-radius: 14px; background: #F4F5F7; }
.mp-dias b{ display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.mp-dias span{ font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.mp-revision, .mp-rechazo{ display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; flex-wrap: wrap; }
.mp-revision{ background: #EEF6FF; border-color: #C7E0FF; }
.mp-rechazo{ background: #FFF0F0; border-color: #FFC9C9; }
.mp-revision > i{ font-size: 22px; color: #1C5FB0; }
.mp-rechazo > i{ font-size: 22px; color: var(--error); }
.mp-revision > div, .mp-rechazo > div{ flex: 1; min-width: 220px; }
.mp-revision p, .mp-rechazo p{ margin: 2px 0 0; font-size: 14px; }
.mp-planes{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.mp-plan{ position: relative; background: var(--blanco); border: 1.5px solid var(--borde); border-radius: var(--radio-lg); padding: 22px 20px 20px; display: flex; flex-direction: column; }
.mp-plan.destacado{ border-color: var(--m-color); box-shadow: 0 10px 30px color-mix(in srgb, var(--m-color) 14%, transparent); }
.mp-plan.actual::before{ content: "Tu plan"; position: absolute; top: -11px; left: 18px; background: var(--m-oscuro); color: #fff; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.mp-plan.elegido{ outline: 3px solid color-mix(in srgb, var(--m-color) 35%, transparent); }
.mp-sello{ position: absolute; top: -11px; right: 18px; background: var(--m-color); color: #fff; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.mp-plan h2{ font-size: 16px; font-weight: 800; margin: 0 0 8px; }
.mp-precio{ display: flex; align-items: baseline; gap: 6px; }
.mp-precio strong{ font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.mp-precio span{ color: var(--texto-suave); font-size: 14px; font-weight: 600; }
.mp-equivale{ margin: 4px 0 0; font-size: 13px; color: var(--exito); font-weight: 600; }
.mp-plan ul{ list-style: none; padding: 0; margin: 16px 0 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: 14px; }
.mp-plan li{ display: flex; gap: 8px; }
.mp-plan li i{ color: var(--exito); font-weight: 800; }
.mp-pagar{ padding: 20px; scroll-margin-top: 80px; }
.mp-monto{ color: var(--m-color); }
.mp-paso{ display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 15px; margin: 6px 0 12px; }
.mp-paso b{ width: 28px; height: 28px; border-radius: 50%; background: var(--m-oscuro); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.mp-metodos{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mp-metodo{ display: flex; align-items: center; gap: 10px; padding: 14px; border: 1.5px solid var(--borde); border-radius: var(--radio); background: var(--blanco); font: inherit; font-size: 14px; font-weight: 700; color: var(--texto); cursor: pointer; text-align: left; }
.mp-metodo i{ font-size: 22px; color: var(--texto-suave); }
.mp-metodo.activo{ border-color: var(--m-color); background: color-mix(in srgb, var(--m-color) 6%, #fff); }
.mp-metodo.activo i{ color: var(--m-color); }
.mp-detalle{ margin-bottom: 22px; }
.mp-qr{ display: flex; justify-content: center; }
.mp-qr img{ width: 240px; max-width: 100%; border-radius: 16px; border: 1px solid var(--borde); background: #fff; padding: 8px; }
.mp-btn-enlace{ display: flex; width: fit-content; margin: 6px auto 8px; }
.mp-datos{ border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-top: 10px; }
.mp-datos > div{ display: grid; grid-template-columns: 130px 1fr 36px; gap: 10px; align-items: center; padding: 10px 14px; font-size: 14.5px; }
.mp-datos > div + div{ border-top: 1px solid var(--borde-suave); }
.mp-datos span{ color: var(--texto-suave); font-weight: 600; font-size: 13px; }
.mp-datos b{ overflow-wrap: anywhere; }
.mp-datos .btn-icono{ width: 34px; height: 34px; }
@media (max-width: 480px){ .mp-datos > div{ grid-template-columns: 1fr 36px; } .mp-datos span{ grid-column: 1 / -1; } }
.mp-historial{ list-style: none; margin: 0; padding: 0; }
.mp-historial li{ display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; }
.mp-historial li + li{ border-top: 1px solid var(--borde-suave); }
.mp-historial li > span:first-child{ display: flex; flex-direction: column; }
.mp-historial small{ font-size: 12.5px; color: var(--texto-suave); }
@media (max-width: 480px){ .mp-historial li{ grid-template-columns: 1fr auto; } .mp-historial .pd-estado{ grid-column: 1 / -1; justify-self: start; } }

/* ---------- SuperAdmin ---------- */
.sa .pn-menu{ background: #0E1726; }
.sa .pn-menu-logo .icono{ background: #3B82F6; }
.sa-insignia{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: #1D4ED8; background: #EFF6FF; padding: 7px 12px; border-radius: 999px; }
.sa-cifras{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sa-cifra{ background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.sa-cifra span{ font-size: 12.5px; font-weight: 700; color: var(--texto-suave); }
.sa-cifra strong{ font-size: 24px; font-weight: 800; }
.sa-cifra small{ font-size: 12.5px; color: var(--texto-suave); }
.sa-cifra.oscura{ background: #0E1726; border-color: #0E1726; color: #fff; }
.sa-cifra.oscura span, .sa-cifra.oscura small{ color: rgba(255,255,255,.7); }
.sa-cifra.alerta{ border-color: #FFC078; background: #FFF9F0; }
.sa-lista{ list-style: none; margin: 0; padding: 0; }
.sa-lista li{ display: flex; align-items: center; gap: 12px; padding: 10px 0; flex-wrap: wrap; }
.sa-lista li + li{ border-top: 1px solid var(--borde-suave); }
.sa-lista .principal{ flex: 1; min-width: 160px; display: flex; flex-direction: column; }
.sa-lista small{ font-size: 12.5px; color: var(--texto-suave); }
.sa-tabla-envoltura{ overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-lg); background: var(--blanco); }
.sa-tabla{ width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.sa-tabla th{ text-align: left; font-size: 12px; color: var(--texto-suave); font-weight: 700; padding: 12px 14px; border-bottom: 1px solid var(--borde); background: #FAFBFC; white-space: nowrap; }
.sa-tabla td{ padding: 12px 14px; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.sa-tabla tr:last-child td{ border-bottom: none; }
.sa-tabla tbody tr{ cursor: pointer; }
.sa-tabla tbody tr:hover{ background: #FAFBFC; }
.sa-tabla .chico{ display: block; font-size: 12.5px; color: var(--texto-suave); }
.sa-plan{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: #F1F3F5; color: var(--texto-suave); white-space: nowrap; }
.sa-plan.pro{ background: #EFF6FF; color: #1D4ED8; }
.sa-plan.gracia{ background: #FFF0F0; color: var(--error); }
.sa-plan.aviso{ background: #FFF6E0; color: #8A5A00; }
.sa-plan.suspendida{ background: #16181D; color: #fff; }
.sa-pago{ display: grid; grid-template-columns: 120px 1fr auto; gap: 16px; padding: 16px; align-items: start; }
.sa-pago + .sa-pago{ border-top: 1px solid var(--borde-suave); }
.sa-pago .foto{ width: 120px; height: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--borde); background: #F4F5F7; display: block; }
.sa-pago .foto img{ width: 100%; height: 100%; object-fit: cover; }
.sa-pago h3{ font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.sa-pago dl{ display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 8px 0 0; font-size: 13.5px; }
.sa-pago dt{ color: var(--texto-suave); font-weight: 600; }
.sa-pago dd{ margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.sa-pago .acciones{ display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.sa-pago .acciones .btn-m, .sa-pago .acciones .btn-m-sec{ height: 42px; }
@media (max-width: 760px){ .sa-pago{ grid-template-columns: 90px 1fr; } .sa-pago .foto{ width: 90px; height: 112px; } .sa-pago .acciones{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; } .sa-pago .acciones > *{ flex: 1; } }
.sa-motivos{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sa-plan-edit{ display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sa-flags{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 6px 0 14px; }
@media (max-width: 420px){ .sa-flags{ grid-template-columns: 1fr; } }
.sa .pn-menu-tienda .avatar{ background: #3B82F6; }

/* ---------- Recuperar contraseña ---------- */
.rc-icono{ width: 64px; height: 64px; border-radius: 20px; background: color-mix(in srgb, var(--exito) 12%, #fff); color: var(--exito); font-size: 30px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.rc-icono.malo{ background: #FFF0F0; color: var(--error); }

/* Pedidos: fecha de entrega y texto del cliente */
.pd-para{ color: var(--m-color, #0E7A5A); font-weight: 700; white-space: nowrap; }
.pd-para-caja{ display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: #FFF6E5; color: #7A4B00; }
.pd-para-caja i{ font-size: 22px; }
.pd-para-caja small{ display: block; font-size: 12px; font-weight: 600; }
.pd-para-caja strong{ font-size: 15px; }
.pd-items .pd-texto-cliente{ color: var(--texto) !important; font-style: italic; }

/* Registro: casilla de términos */
.casilla-terminos{ display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font-size: 13px; line-height: 1.5; color: var(--texto-suave); cursor: pointer; }
.casilla-terminos input{ width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--m-color); }

/* Configuración: zona de peligro */
.cf-peligro{ border-color: #F5C2C0; }
.cf-peligro .cf-titulo i{ color: var(--error); }
.cf-btn-peligro{ color: var(--error); border-color: #F5C2C0; }
.cf-btn-peligro:hover{ background: #FDECEC; color: var(--error); }
.cf-btn-borrar{ background: var(--error); }
#formEliminar{ margin-top: 4px; }
.cf-sub{ margin: 10px 0 0; }

/* Producto: sugeridos / accesorios compatibles */
.sg-elegidos{ display: flex; flex-wrap: wrap; gap: 8px; }
.sg-elegidos:empty{ display: none; }
.sg-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-radius: 12px; background: #F1F3F5; font-size: 13px; max-width: 100%; }
.sg-chip img, .sg-chip > i{ width: 30px; height: 30px; border-radius: 8px; object-fit: cover; background: #fff; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); flex: none; }
.sg-chip b{ font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-chip button{ border: none; background: transparent; width: 28px; height: 28px; border-radius: 8px; color: var(--texto-suave); cursor: pointer; flex: none; }
.sg-chip button:hover{ background: #fff; color: var(--error); }
.sg-lista{ margin-top: 8px; max-height: 260px; overflow-y: auto; border: 1px solid var(--borde); border-radius: 14px; }
.sg-item{ width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: none; border-top: 1px solid var(--borde-suave); background: #fff; font: inherit; text-align: left; cursor: pointer; }
.sg-item:first-child{ border-top: none; }
.sg-item:hover:not(:disabled){ background: #FAFBFC; }
.sg-item:disabled{ opacity: .45; cursor: not-allowed; }
.sg-item img, .sg-item > i:first-child{ width: 38px; height: 38px; border-radius: 9px; object-fit: cover; background: #F1F3F5; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); flex: none; }
.sg-item span{ flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.sg-item small{ display: block; color: var(--texto-suave); font-weight: 500; font-size: 12px; }
.sg-item > i:last-child{ font-size: 18px; color: var(--texto-suave); }
.sg-item.elegido > i:last-child{ color: var(--exito); }

.pd-items .pd-financiado{ color: var(--exito) !important; font-weight: 600; }
.pd-equipo{ color: #7A4B00; }

/* Producto: precio por cantidad */
.en-fila.es-fila{ grid-template-columns: 170px 170px 44px; justify-content: start; }
@media (max-width: 560px){ .en-fila.es-fila{ grid-template-columns: 1fr 1fr 44px; } }
.en-monto.km input + span{ left: auto; right: 14px; }

/* Menú: instalar la app */
.pn-instalar{ display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; margin-bottom: 6px; border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-align: left; }
.pn-instalar:hover{ background: rgba(255,255,255,.06); }
.pn-instalar[hidden]{ display: none; }

/* Cupones */
.cu-codigo{ display: flex; gap: 8px; }
.cu-codigo .entrada{ flex: 1; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cu-codigo .btn-m-sec{ height: 48px; width: 48px; padding: 0; flex: none; }
.cu-legend{ font-size: 13px; font-weight: 700; margin-bottom: 6px; float: none; width: auto; padding: 0; }
.cu-tipos{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cu-tipos label{ display: flex; gap: 10px; align-items: flex-start; border: 1.5px solid var(--borde); border-radius: 12px; padding: 10px 12px; cursor: pointer; }
.cu-tipos label:has(input:checked){ border-color: var(--m-color); background: color-mix(in srgb, var(--m-color) 6%, #fff); }
.cu-tipos input{ margin-top: 3px; accent-color: var(--m-color); }
.cu-tipos b{ display: block; font-size: 14px; }
.cu-tipos small{ font-size: 12px; color: var(--texto-suave); }
.lista-m-fila .principal strong.cu-cod{ font-size: 16px; letter-spacing: .05em; }
.etiqueta-m.cu-activo{ background: #E7F8EE; color: #0B7A43; }
.etiqueta-m.cu-vencido{ background: #FDECEC; color: var(--error); }

/* Pedido: mensajes listos y cupón */
.pd-mensajes{ margin-top: 4px; }
.pd-mensajes h3{ font-size: 13px; font-weight: 800; color: var(--texto-suave); margin: 0 0 8px; display: flex; gap: 6px; align-items: center; }
.pd-mensajes-otros{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.pd-mensajes-otros .btn-m-sec{ height: 42px; font-size: 13px; padding: 0 10px; justify-content: flex-start; }
.pd-mensajes-nota{ font-size: 12px; color: var(--texto-suave); margin: 8px 0 0; }
.pd-descuento{ color: #0B7A43; }

/* Inicio: se está acabando */
.pn-acaban{ border-color: #F3D9A4; }
.pn-acaban h2{ display: flex; align-items: center; gap: 8px; }
.pn-acaban h2 i{ color: #B26A00; }
.pn-acaban ul{ list-style: none; padding: 0; margin: 0; }
.pn-acaban li a{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--borde-suave); color: var(--texto); font-weight: 500; }
.pn-acaban li:first-child a{ border-top: none; }
.pn-acaban li a:hover{ text-decoration: none; background: #FAFBFC; }
.pn-acaban li strong{ display: block; font-size: 14px; }
.pn-acaban li small{ font-size: 12px; color: var(--texto-suave); }
.pn-acaban li b{ font-size: 13px; color: #A15C00; white-space: nowrap; }
.pn-acaban li b.cero{ color: var(--error); }
.cf-alerta-fila{ display: flex; gap: 8px; align-items: center; }

/* Producto: combo */
.cb-items{ display: flex; flex-direction: column; gap: 8px; }
.cb-item{ display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 14px; }
.cb-item img, .cb-item > i{ width: 40px; height: 40px; border-radius: 10px; object-fit: cover; background: #F1F3F5; display: flex; align-items: center; justify-content: center; color: var(--texto-suave); flex: none; }
.cb-nombre{ flex: 1; min-width: 0; font-weight: 700; font-size: 14px; }
.cb-nombre small{ display: block; font-weight: 500; color: var(--texto-suave); font-size: 12px; }
.cb-cant{ display: flex; align-items: center; gap: 4px; border: 1px solid var(--borde); border-radius: 10px; padding: 2px; }
.cb-cant button{ width: 30px; height: 30px; border: none; background: none; border-radius: 8px; cursor: pointer; }
.cb-cant button:disabled{ opacity: .35; }
.cb-cant b{ min-width: 22px; text-align: center; }
.cb-resumen{ margin: 12px 0 0; font-size: 14px; }
.cb-resumen:empty{ display: none; }
.cb-ahorro{ color: var(--exito); }
.cb-aviso{ color: #A15C00; }

/* Reseñas */
.rs-promedio{ display: flex; align-items: center; gap: 10px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 14px; }
.rs-promedio strong{ font-size: 24px; font-weight: 800; }
.rs-promedio span:last-child{ font-size: 12px; color: var(--texto-suave); }
.rs-estrellas{ color: #F5A524; font-size: 14px; display: inline-flex; gap: 1px; }
.rs-pestanas{ display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.rs-pestanas button{ border: 1px solid var(--borde); background: var(--blanco); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 14px; font-weight: 700; color: var(--texto-suave); cursor: pointer; }
.rs-pestanas button[aria-selected="true"]{ background: var(--m-oscuro); color: #fff; border-color: var(--m-oscuro); }
.rs-pestanas em{ font-style: normal; margin-left: 4px; background: var(--m-color); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; }
.rs-fila{ padding: 16px 18px; border-top: 1px solid var(--borde-suave); }
.rs-fila:first-child{ border-top: none; }
.rs-cabeza{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rs-cabeza strong{ font-size: 15px; }
.rs-cabeza span:last-child{ font-size: 12px; color: var(--texto-suave); }
.rs-texto{ margin: 8px 0; font-size: 15px; line-height: 1.55; }
.rs-texto.vacio{ color: var(--texto-suave); font-style: italic; }
.rs-resp-fila{ display: flex; gap: 8px; margin-top: 4px; }
.rs-resp-fila .entrada{ flex: 1; }
.rs-acciones{ display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rs-acciones .btn-m{ height: 44px; }

/* ---------- Clientes frecuentes ---------- */
.cl-fidelidad { margin-bottom: 18px; }
.cl-fid-cabeza { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.cl-fid-cabeza h2 { font-size: 1.05rem; margin: 0 0 4px; }
.cl-fid-cabeza p { margin: 0; color: var(--texto-suave, #555); font-size: .92rem; }
.cl-fid-icono { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #F4F1FF; color: #5B45C9; font-size: 1.3rem; }
.cl-fid-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.cl-fid-campos .campo { margin: 0; }
#fidEjemplo { margin: 10px 0 12px; }

/* Título de "Se está acabando" igual que el de los pasos */
.pn-acaban h2{ font-size: 17px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 8px; }
.pn-acaban h2 i{ color: #B35C00; }
img.icono{ object-fit: contain; }

/* ---------- Tonos PideLink sobre el fondo verde oscuro ---------- */
:root{ --m-claro: #3DDC97; }   /* verde brillante para íconos sobre oscuro */
.pn-menu-tienda{ background: rgba(255,255,255,.07); }
.pn-menu-tienda span{ color: #A7C4BC; }
.pn-menu-lista a.activo{ background: rgba(255,255,255,.10); }
.pn-menu-lista a.activo i{ color: var(--m-claro); }
.acceso-beneficios i{ color: var(--m-claro); background: rgba(255,255,255,.08); }

/* ---------- Botón flotante de WhatsApp ---------- */
.pb-wa-flotante{ position: fixed; right: 18px; bottom: 18px; z-index: 900; display: inline-flex; align-items: center; gap: 9px; height: 56px; padding: 0 20px 0 16px; border-radius: 30px; background: #25D366; color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 10px 28px rgba(14,122,90,.35); transition: transform .2s, box-shadow .2s; animation: pb-wa-entra .5s .8s both; }
.pb-wa-flotante i{ font-size: 26px; line-height: 1; }
.pb-wa-flotante:hover{ color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(14,122,90,.45); }
.pb-wa-flotante:focus-visible{ outline: 3px solid #0F2E2C; outline-offset: 3px; }
@keyframes pb-wa-entra{ from{ opacity: 0; transform: translateY(20px) scale(.9); } to{ opacity: 1; transform: none; } }
@media (max-width: 600px){ .pb-wa-flotante{ width: 56px; padding: 0; justify-content: center; right: 14px; bottom: 14px; } .pb-wa-flotante span{ display: none; } }
@media (prefers-reduced-motion: reduce){ .pb-wa-flotante{ animation: none; } }