/* ==========================================================================
   Mejora visual V7 (aprobada con cambios, 2026-11-09)
   Conserva: ilustraciones (gimmicks), paleta de marca, tipografía Inter y estructura.
   Cambia: jerarquía, densidad y peso visual. Solo presentación: sin IDs, JS ni contratos.
   Todo usa tokens de css/tokens.css.
   ========================================================================== */

/* 1. Sombras más ligeras: las tarjetas se separan por borde y una sombra corta,
      en vez de una sombra larga en cada bloque. Afecta a todo lo que usa --dg-shadow-panel. */
:root {
    --dg-shadow-panel: 0 1px 2px rgba(55, 31, 79, .05), 0 6px 18px rgba(55, 31, 79, .06);
    --dg-shadow-raised: 0 2px 4px rgba(55, 31, 79, .06), 0 14px 32px rgba(55, 31, 79, .10);
}

/* 2. Contexto de negocio: de tarjeta de 77 px a una franja compacta de una línea. */
html[data-panel-design="v7"] .panel-workspace-context {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    margin: 0 0 16px;
    padding: 10px 16px;
    border: 1px solid var(--dg-border-surface);
    border-left: 3px solid var(--dg-brand-alt);
    border-radius: var(--dg-radius-md);
    background: rgba(255, 255, 255, .72);
    box-shadow: none;
}
html[data-panel-design="v7"] .panel-workspace-context strong { display: inline; font-size: var(--dg-text-base); }
html[data-panel-design="v7"] .panel-workspace-context p { margin: 0; font-size: var(--dg-text-xs); line-height: 1.4; }

/* 3. Ilustraciones de Contactos, Atención humana, Mi negocio y Centro del asistente entre 701 y 1450 px:
      en vez de un bloque de 240 px que empuja el contenido, se colocan junto al encabezado.
      Por encima de 1450 px se conserva la columna lateral original. */
@media (min-width: 701px) and (max-width: 1450px) {
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(132px, 13vw, 176px);
        column-gap: var(--dg-space-4);
        align-items: start;
    }
    /* Misma especificidad que la regla original de business-gimmicks.css, cargada después. */
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :not(.business-gimmick, .assistant-page-gimmick) { grid-column: 1 / -1; min-width: 0; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > .panel-location { grid-row: 1; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > .panel-workspace-context { grid-row: 2; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > header:not(.business-gimmick) { grid-row: 3; grid-column: 1; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) {
        grid-row: 3;
        grid-column: 2;
        align-self: center;
        min-height: 0;
        margin: 0;
        border: 0;
        background: none;
        overflow: visible;
    }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) img {
        width: 100%;
        max-width: none;
        height: auto;
    }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick)::before { inset: -6%; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick)::after { left: 22%; right: 22%; bottom: 2%; }
}

/* 4. Indicadores del Resumen: etiquetas de altura fija para que las cifras queden alineadas. */
html[data-panel-design="v7"] .card-info h3 {
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    line-height: 1.3;
}
@media (max-width: 700px) {
    html[data-panel-design="v7"] .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dg-space-3); }
    html[data-panel-design="v7"] .cards .card { flex-direction: column; align-items: flex-start; gap: var(--dg-space-2); padding: var(--dg-space-4); }
    html[data-panel-design="v7"] .cards .card-info p { font-size: var(--dg-text-2xl); }
    html[data-panel-design="v7"] .cards .card-icon { width: 36px; height: 36px; }
}

/* 5. Fecha del Resumen en tipo oración («Lunes, 9 de noviembre de 2026»). */
#fecha-actual { text-transform: none; display: inline-block; }
#fecha-actual::first-letter { text-transform: uppercase; }

/* 6. Tablas: el botón de detalle no se parte en dos líneas; filas un poco más compactas. */
html[data-panel-design="v7"] .lead-expand { white-space: nowrap; }
html[data-panel-design="v7"] :is(#tabla-leads, #tabla-actividad) td { padding-block: 14px; }

/* 7. Hover de tarjetas: elevación sutil y consistente. */
html[data-panel-design="v7"] .cards .card { transition: box-shadow .18s ease, transform .18s ease; }
html[data-panel-design="v7"] .cards .card:hover { box-shadow: var(--dg-shadow-raised); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
    html[data-panel-design="v7"] .cards .card { transition: none; }
    html[data-panel-design="v7"] .cards .card:hover { transform: none; }
}

/* 13. Logo del menú lateral: se ajusta al ancho disponible (en tablet se cortaba «D'Orygi»). */
html[data-panel-design="v7"] .sidebar .logo { background-size: min(190px, 100%) auto; }

/* 14. Elementos flotantes con sombra elevada (no la de panel, que ahora es más ligera). */
html[data-panel-design="v7"] .toast-notification { box-shadow: var(--dg-shadow-raised); }

/* ==========================================================================
   Celular (hasta 768 px)
   ========================================================================== */

/* 8. Corrige los huecos: en columna, los anchos base de escritorio (420 px, 180 px)
      se convertían en altura. En celular cada bloque mide lo que su contenido. */
@media (max-width: 768px) {
    html[data-panel-design="v7"] .main > header > *,
    html[data-panel-design="v7"] .main > header .filtros > *,
    html[data-panel-design="v7"] :is(.business-header, .assistant-center-header) > :first-child { flex-basis: auto; }
    html[data-panel-design="v7"] .main > header .filtros { gap: var(--dg-space-3); }
}

/* 9. Ilustraciones: en vez de una franja entera, una versión pequeña en la esquina
      del encabezado (como en Resumen). */
@media (max-width: 700px) {
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 88px;
        column-gap: 0;
    }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :not(.business-gimmick, .assistant-page-gimmick) { grid-column: 1 / -1; min-width: 0; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > .panel-location { grid-row: 1; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > .panel-workspace-context { grid-row: 2; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > header:not(.business-gimmick) { grid-row: 3; }
    /* El título y su descripción dejan espacio a la ilustración; los filtros usan todo el ancho. */
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > header:not(.business-gimmick) :is(h1, h1 + p) { padding-right: 84px; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) {
        grid-row: 3;
        grid-column: 2;
        z-index: 1;
        align-self: start;
        justify-self: end;
        width: 88px;
        min-height: 0;
        margin: 10px 10px 0 0;
        border: 0;
        background: none;
        overflow: visible;
        pointer-events: none;
    }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) img { width: 88px; max-width: none; height: auto; }
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick)::after { left: 24%; right: 24%; bottom: 0; }

    /* 10. Aviso de negocio: en celular solo el nombre; la explicación ya se entiende por contexto. */
    html[data-panel-design="v7"] .panel-workspace-context p { display: none; }

    /* 11. Indicadores de Atención humana: tres en una fila, compactos. */
    html[data-panel-design="v7"] .escalation-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--dg-space-2); }
    html[data-panel-design="v7"] .escalation-metrics article { padding: var(--dg-space-3) !important; }
    html[data-panel-design="v7"] .escalation-metrics article strong { font-size: var(--dg-text-xl); }
    html[data-panel-design="v7"] .escalation-metrics article span { font-size: var(--dg-text-xs); letter-spacing: .02em; }

    /* 12. Pasos de Mi negocio: una fila deslizable en vez de dos filas de botones.
          Pista de desplazamiento: barra fina visible y desvanecido en el lado donde hay más pasos
          (app2.js marca data-hay-antes / data-hay-despues y centra el paso activo). */
    html[data-panel-design="v7"] .wizard-steps {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: var(--dg-space-1);
        padding-bottom: var(--dg-space-1);
        scroll-padding-inline: var(--dg-space-6);
        scrollbar-width: thin;
        scrollbar-color: var(--dg-border-control) transparent;
    }
    html[data-panel-design="v7"] .wizard-steps > * { flex: 0 0 auto; }
    html[data-panel-design="v7"] .wizard-steps[data-hay-despues="true"] { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
    html[data-panel-design="v7"] .wizard-steps[data-hay-antes="true"] { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
    html[data-panel-design="v7"] .wizard-steps[data-hay-antes="true"][data-hay-despues="true"] { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
    /* El foco de teclado no se recorta con la máscara: el paso enfocado se desplaza a la vista. */
    html[data-panel-design="v7"] .wizard-steps > :focus-visible { outline-offset: -3px !important; }
}

/* ===== Ciclo móvil (2026-11-11) ==========================================
   Todo es presentación en celular (hasta 700 px). Escritorio y tablet no cambian.
   ========================================================================== */

/* Elementos que solo existen en celular. */
/* El botón «Filtros» hereda estilos de .btn-refresh con !important en otras hojas; por eso se fuerza aquí. */
.panel-bottom-nav { display: none; }
html .main header .header-actions > button.panel-filters-toggle.btn-refresh { display: none !important; }

@media (max-width: 700px) {
    /* 15. Barra superior más baja: solo el logo (el menú vive en la barra inferior). */
    html.panel-has-bottom-nav[data-panel-design="v7"] .sidebar { padding-block: 8px; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-menu-toggle { display: none; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .sidebar .logo { min-height: 40px; }

    /* 16. Sin ruta de migas visible: la barra inferior y las pestañas ya indican dónde estás.
           Se conserva para lectores de pantalla y sigue ocupando su fila (altura 0), para que
           el orden de la cuadrícula de las páginas con ilustración no cambie. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > .panel-location {
        height: 0;
        margin: 0 !important;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* 17. Negocio activo: una línea discreta en vez de una tarjeta. */
    html[data-panel-design="v7"] .main > .panel-workspace-context {
        margin: 0 0 var(--dg-space-3);
        padding: 7px 12px;
        border-left-width: 3px;
        border-radius: 10px;
        box-shadow: none;
    }
    html[data-panel-design="v7"] .main > .panel-workspace-context strong { font-size: var(--dg-text-sm); font-weight: 600; }

    /* 18. Páginas con ilustración: las filas no se estiran cuando la página es corta
           (provocaba huecos grandes en Revisión). */
    html[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) { align-content: start; }

    /* 19. Barra inferior fija. */
    html.panel-has-bottom-nav body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    html.panel-has-bottom-nav .panel-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 800;
        display: flex;
        align-items: stretch;
        gap: 2px;
        padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
        border-top: 1px solid var(--dg-border-subtle, #ece3ef);
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        box-shadow: 0 -6px 24px rgba(55, 31, 79, .08);
    }
    .panel-bottom-nav > :is(a, button) {
        flex: 1 1 0;
        min-width: 0;
        min-height: 54px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        border: 0;
        border-radius: 12px;
        color: var(--dg-ink-muted);
        background: none;
        font: inherit;
        font-size: var(--dg-text-xs);
        font-weight: 600;
        line-height: 1.1;
        text-decoration: none;
        cursor: pointer;
    }
    .panel-bottom-nav > [hidden] { display: none; }
    .panel-bottom-nav svg { width: 22px; height: 22px; flex: 0 0 22px; }
    .panel-bottom-nav span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .panel-bottom-nav > a[aria-current="page"],
    .panel-bottom-nav > button[aria-expanded="true"] { color: #64208d; background: #f4ebfa; }
    .panel-bottom-nav > :is(a, button):active { background: #efe3f7; }

    /* 20. Menú completo como hoja inferior, sobre la barra. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-menu[open] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(66px + env(safe-area-inset-bottom));
        z-index: 790;
        max-height: calc(100dvh - 140px);
        overflow: auto;
        overscroll-behavior: contain;
        padding: 6px 16px 16px;
        border-radius: 22px 22px 0 0;
        background: #fff;
        box-shadow: 0 0 0 100vmax rgba(35, 24, 43, .32), 0 -12px 40px rgba(35, 24, 43, .18);
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-menu[open]::before {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        margin: 4px auto 10px;
        border-radius: 99px;
        background: #ddd2e2;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-menu[open] nav { padding-top: 4px; }
    html.panel-menu-sheet-open body { overflow: hidden; }
    /* La barra superior forma su propio contexto de apilamiento; se eleva mientras la hoja está abierta. */
    html.panel-menu-sheet-open[data-panel-design="v7"] .sidebar { z-index: 790; }

    /* La barra se oculta mientras se escribe en una conversación o se ve un contacto. */
    html.panel-has-bottom-nav body:has(.inbox-shell:is(.mobile-thread-open, .mobile-contact-sheet-open)) { padding-bottom: 0; }
    html.panel-has-bottom-nav body:has(.inbox-shell:is(.mobile-thread-open, .mobile-contact-sheet-open)) .panel-bottom-nav { display: none; }
    html.panel-has-bottom-nav body:has(.inbox-shell:is(.mobile-thread-open, .mobile-contact-sheet-open)) .help-assistant-launcher { display: none; }
    html.panel-has-bottom-nav .inbox-shell:not(.mobile-thread-open) { height: calc(100dvh - 96px - 68px); }

    /* 21. Ayuda: botón redondo pequeño. Con barra inferior va en la barra superior
           (donde estaba «Menú») y ya no tapa tarjetas ni botones; sin barra, en la esquina. */
    body .help-assistant-launcher,
    html[data-panel-design="v7"] body .help-assistant-launcher {
        top: auto;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: 999px;
        transform: none;
        writing-mode: horizontal-tb;
        box-shadow: 0 6px 18px rgba(141, 24, 209, .28);
    }
    html.panel-has-bottom-nav body .help-assistant-launcher,
    html.panel-has-bottom-nav[data-panel-design="v7"] body .help-assistant-launcher {
        position: absolute;
        top: 22px;
        right: 24px;
        bottom: auto;
        z-index: 700;
    }
    body .help-assistant-launcher .help-assistant-launcher-content { gap: 0; }
    body .help-assistant-launcher .help-assistant-launcher-content > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    body .help-assistant-launcher svg { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }

    /* 22. Filtros de lista: búsqueda visible; selectores detrás de «Filtros». */
    html[data-panel-design="v7"] .main > header .header-actions:has(.panel-filters-toggle) {
        display: flex;
        flex-wrap: wrap;
        gap: var(--dg-space-2);
    }
    html[data-panel-design="v7"] .main > header .header-actions:has(.panel-filters-toggle) > .filtros { order: -1; flex: 1 1 100%; display: flex; flex-direction: column; }
    html[data-panel-design="v7"] .main > header .header-actions:has(.panel-filters-toggle) > :is(button, a) { flex: 1 1 0; min-width: 0; margin: 0; padding-inline: 8px; font-size: var(--dg-text-sm); white-space: nowrap; }
    html[data-panel-design="v7"] .main > header .filtros[data-plegable="true"] > :is(input, .panel-filter-field:has(input)) { order: -1; }
    html[data-panel-design="v7"] .main > header .filtros[data-plegable="true"]:not([data-abierto="true"]) > :is(select, .panel-filter-field:has(select)) { display: none; }
    html[data-panel-design="v7"] .main header .header-actions > button.panel-filters-toggle.btn-refresh {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    html[data-panel-design="v7"] .panel-filters-toggle svg { width: 18px; height: 18px; flex: 0 0 18px; }
    html[data-panel-design="v7"] .panel-filters-toggle[aria-expanded="true"] { color: #64208d; background: #f4ebfa; border-color: #d9c3e8; }
    .panel-filters-count {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 99px;
        color: #fff;
        background: #8d18d1;
        font-size: var(--dg-text-xs);
        font-weight: 700;
    }
    .panel-filters-count[hidden] { display: none; }
    /* La etiqueta del buscador sobra: el texto de ejemplo ya lo explica. */
    html[data-panel-design="v7"] .main > header .filtros[data-plegable="true"] > .panel-filter-field:has(input) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

    /* 23. Contactos: el detalle se abre con «Ver detalle» (antes siempre estaba abierto)
           y cada contacto muestra su estado y próxima acción sin abrirlo. */
    html[data-panel-design="v7"] #tabla-leads tr[hidden] { display: none; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
        padding: 14px 4px;
    }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td { padding: 0; min-width: 0; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td:first-child { order: 1; flex: 1 1 0; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td:last-child { order: 2; flex: 0 0 auto; padding-left: 6px; }
    /* Salto de línea: los distintivos empiezan siempre debajo del nombre. */
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td:nth-child(2) { order: 3; display: block; margin-top: 2px; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td:nth-child(3) { order: 4; display: block; margin-top: 2px; }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td.next-action { order: 5; display: block; flex: 1 1 100%; color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }
    html[data-panel-design="v7"] #tabla-leads .lead-summary-row td.next-action small { display: block; margin-top: 2px; font-size: var(--dg-text-xs); }
    html[data-panel-design="v7"] #tabla-leads .lead-detail-row td { padding: 0 0 14px !important; background: none; }
    html[data-panel-design="v7"] #tabla-leads .lead-detail-panel { padding: 14px; border: 1px solid #eee4f1; border-radius: 14px; background: #fcf8fd; box-shadow: none; }
    html[data-panel-design="v7"] #tabla-leads .lead-detail-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    html[data-panel-design="v7"] #tabla-leads .lead-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    html[data-panel-design="v7"] #tabla-leads .lead-detail-actions > * { width: 100%; }
    html[data-panel-design="v7"] .section:has(> .table-container > #tabla-leads),
    html[data-panel-design="v7"] .table-container:has(> #tabla-leads) { padding-inline: var(--dg-space-3); }

    /* 24. Actividad reciente (Resumen): lista en vez de tabla cortada. */
    html[data-panel-design="v7"] #tabla-actividad,
    html[data-panel-design="v7"] #tabla-actividad tbody { display: block; width: 100%; }
    html[data-panel-design="v7"] .table-container:has(> #tabla-actividad) { overflow: visible; }
    html[data-panel-design="v7"] #tabla-actividad thead { display: none; }
    html[data-panel-design="v7"] #tabla-actividad tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--dg-space-3);
        row-gap: 4px;
        padding: 12px 4px;
        border-bottom: 1px solid #f0e8f2;
    }
    html[data-panel-design="v7"] #tabla-actividad tr:last-child { border-bottom: 0; }
    html[data-panel-design="v7"] #tabla-actividad td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(1) { grid-column: 1; grid-row: 1; }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(3) { grid-column: 2; grid-row: 1; align-self: center; }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(2) { grid-column: 1; grid-row: 2; font-size: var(--dg-text-sm); }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(4) { grid-column: 1 / -1; grid-row: 3; color: var(--dg-ink-muted); font-size: var(--dg-text-sm); }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(5) { grid-column: 1 / -1; grid-row: 4; color: var(--dg-ink-muted); font-size: var(--dg-text-xs); }
    html[data-panel-design="v7"] #tabla-actividad td:nth-child(4):empty { display: none; }
    html[data-panel-design="v7"] #tabla-actividad td[colspan] { grid-column: 1 / -1; grid-row: auto; text-align: center; }

    /* Centro del asistente: su cuadrícula separa filas con 20 px; la ruta oculta no deja hueco. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .assistant-center-page > .panel-workspace-context { margin-top: -20px; }

    /* 25. Conversaciones: ilustración pequeña en la esquina como el resto de páginas. */
    html[data-panel-design="v7"] .inbox-header { position: relative; }
    html[data-panel-design="v7"] .inbox-header .inbox-title { padding-right: 84px; }
    html[data-panel-design="v7"] .inbox-header .inbox-header-gimmick { display: block; position: absolute; top: 10px; right: 10px; width: 80px; height: 80px; pointer-events: none; }
    html[data-panel-design="v7"] .inbox-header .inbox-header-gimmick img { width: 80px; height: 80px; }
    html[data-panel-design="v7"] .channel-tabs { scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
    html[data-panel-design="v7"] .inbox-header .header-actions { display: flex; flex-wrap: nowrap; align-items: stretch; gap: var(--dg-space-2); }
    html[data-panel-design="v7"] .inbox-header .global-inbox-search { order: 0; flex: 1 1 auto; min-width: 0; width: auto; }
    html[data-panel-design="v7"] .inbox-header .global-inbox-search { flex: 1 1 0 !important; width: auto !important; }
    /* Actualizar queda como ícono (conserva su aria-label «Actualizar bandeja»). */
    html[data-panel-design="v7"] .inbox-header #refresh-inbox { order: 1; flex: 0 0 44px !important; width: 44px !important; padding: 0 !important; margin: 0; font-size: 0 !important; gap: 0 !important; }
    html[data-panel-design="v7"] .inbox-header #refresh-inbox > span { font-size: 18px !important; }
    html[data-panel-design="v7"] .inbox-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* 26. Mi suscripción: misma barra superior y escala de títulos que el resto del panel. */
@media (max-width: 700px) {
    body:has(> main .gimmick-subscription-hero) > header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--dg-space-3);
        padding: 10px 14px;
    }
    body:has(> main .gimmick-subscription-hero) > header > a:first-child {
        display: block;
        width: 132px;
        height: 36px;
        overflow: hidden;
        color: transparent;
        font-size: 0;
        background: url("../assets/brand/logo-full-440.webp?v=2") left center / contain no-repeat;
    }
    body:has(> main .gimmick-subscription-hero) > header > nav { display: flex; flex-direction: row; align-items: center; gap: 6px; }
    body:has(> main .gimmick-subscription-hero) > header > nav > * { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; font-size: var(--dg-text-sm); white-space: nowrap; }
    html[data-panel-design="v7"] body > main:not(.main) .hero.gimmick-subscription-hero h1, body:has(> main .gimmick-subscription-hero) .gimmick-subscription-hero h1 { font-size: 28px; line-height: 1.15; }
    body:has(> main .gimmick-subscription-hero) .gimmick-subscription-hero .subscription-gimmick-image { width: 88px; height: auto; }
    body:has(> main .gimmick-subscription-hero) #content > .cards > article:nth-child(3):last-child { grid-column: 1 / -1; }
}

/* ===== Celular · Dirección A «Héroe de marca» (2026-11-11) ================
   Solo hasta 700 px. Encabezado de cada página con el degradado de marca,
   ilustración grande, barra superior con isotipo + negocio y barra inferior
   flotante. Los degradados usan tonos con contraste ≥ 4.8:1 con texto blanco.
   ========================================================================== */
:root {
    --dg-hero-gradient: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .16), transparent 55%), linear-gradient(135deg, #d81b72 0%, #a51cb0 50%, #7a16c4 100%);
    --dg-hero-shadow: 0 14px 34px rgba(122, 22, 196, .26);
}
.panel-topbar-context { display: none; }

@media (max-width: 700px) {
    /* 27. Lienzo liso y claro (sin la textura rosada de escritorio). */
    html.panel-has-bottom-nav[data-panel-design="v7"] body { background: #f7f4f9; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body::before,
    html.panel-has-bottom-nav[data-panel-design="v7"] body::after { display: none; }

    /* 28. Barra superior: isotipo + negocio activo + Ayuda, sin tarjeta.
           El isotipo ya no se recorta (antes el logo de 52 px vivía en una caja de 40 px). */
    html.panel-has-bottom-nav[data-panel-design="v7"] .sidebar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 14px 70px 8px 16px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .sidebar .logo {
        flex: 0 0 34px;
        width: 34px;
        min-width: 34px;
        max-width: 34px;
        height: 44px;
        min-height: 44px;
        margin: 0;
        background: url("../assets/brand/logo-mark.png") left center / auto 34px no-repeat;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-topbar-context {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        line-height: 1.2;
    }
    .panel-topbar-context small { color: var(--dg-ink-muted); font-size: var(--dg-text-xs); font-weight: 600; }
    .panel-topbar-context strong { overflow: hidden; color: var(--dg-ink); font-size: var(--dg-text-md, 16px); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
    /* El aviso original sigue para lectores de pantalla (la copia de la barra es aria-hidden). */
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > .panel-workspace-context {
        height: 0;
        min-height: 0;
        margin: 0 !important;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .help-assistant-launcher,
    html.panel-has-bottom-nav[data-panel-design="v7"] body .help-assistant-launcher:hover {
        top: 16px;
        right: 16px;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        color: #7a16c4;
        background: #fff;
        box-shadow: 0 1px 2px rgba(40, 20, 60, .08), 0 0 0 1px #ece4f1;
    }

    /* 29. Barra inferior flotante (píldora de vidrio; la página activa con el degradado). */
    html.panel-has-bottom-nav body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    html.panel-has-bottom-nav .panel-bottom-nav {
        left: 12px;
        right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom));
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, .7);
        border-radius: 24px;
        background: rgba(255, 255, 255, .86);
        box-shadow: 0 10px 30px rgba(60, 24, 90, .16), inset 0 1px 0 rgba(255, 255, 255, .8);
    }
    .panel-bottom-nav > :is(a, button) { min-height: 52px; border-radius: 18px; }
    .panel-bottom-nav > a[aria-current="page"] { color: #fff; background: var(--dg-hero-gradient); box-shadow: 0 6px 16px rgba(122, 22, 196, .3); }
    html.panel-has-bottom-nav[data-panel-design="v7"] .panel-menu[open] { bottom: calc(76px + env(safe-area-inset-bottom)); }
    html.panel-has-bottom-nav .inbox-shell:not(.mobile-thread-open) { height: calc(100dvh - 96px - 96px); }

    /* 30. Encabezado de página: tarjeta con el degradado de marca y texto blanco. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header {
        position: relative !important;
        overflow: visible !important;
        padding: 22px 20px 20px !important;
        border: 0 !important;
        border-radius: 26px !important;
        color: #fff !important;
        background: var(--dg-hero-gradient) !important;
        box-shadow: var(--dg-hero-shadow) !important;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header :is(h1, p, .page-subtitle, #fecha-actual, .assistant-center-eyebrow, .inbox-eyebrow, .panel-filter-field > span) { color: #fff; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header h1 { color: #fff; font-size: 28px; line-height: 1.12; letter-spacing: -.02em; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header h1::after { color: rgba(255, 255, 255, .92) !important; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header :is(p, .page-subtitle) { color: rgba(255, 255, 255, .92) !important; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .assistant-center-eyebrow { opacity: .9; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header :is(h1, p, .page-subtitle) { max-width: calc(100% - 112px); padding-right: 0 !important; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header :is(input, select) { border-color: transparent; border-radius: 14px; background-color: rgba(255, 255, 255, .97); }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .global-inbox-search { border-color: transparent; border-radius: 14px; background: rgba(255, 255, 255, .97); }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header :is(.btn-refresh, .btn-export, .panel-filters-toggle) {
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, .42) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, .16) !important;
        box-shadow: none !important;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header :is(.btn-refresh, .panel-filters-toggle) svg { stroke: currentColor; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header .panel-filters-toggle[aria-expanded="true"] { color: #7a16c4; background: #fff; border-color: #fff; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .panel-filters-count { color: #7a16c4; background: #fff; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header .panel-filters-toggle[aria-expanded="true"] .panel-filters-count { color: #fff; background: #7a16c4; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .header-actions { margin-top: 18px; }
    html.panel-has-bottom-nav[data-panel-design="v7"] body .main > header :is(.btn-refresh, .btn-export, .panel-filters-toggle):hover { color: #fff !important; background: rgba(255, 255, 255, .26) !important; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header :focus-visible { outline-color: #fff !important; }

    /* 31. Ilustración grande que sobresale del encabezado. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .page-title-gimmick { position: static; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .page-title-gimmick-image,
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .inbox-header-gimmick img {
        position: absolute;
        top: -24px;
        right: -4px;
        width: 128px;
        height: 128px;
        filter: drop-shadow(0 12px 18px rgba(60, 10, 90, .32));
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .inbox-header-gimmick { position: static; width: 0; height: 0; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main > header .inbox-title { padding-right: 0; }
    html.panel-has-bottom-nav[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) {
        width: 128px;
        margin: -24px -4px 0 0;
        z-index: 2;
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick) img {
        width: 128px;
        filter: drop-shadow(0 12px 18px rgba(60, 10, 90, .32));
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] :is(.business-page.business-page-gimmick, .assistant-center-page.assistant-center-page-gimmick) > :is(.business-gimmick, .assistant-page-gimmick)::after { display: none; }

    /* 32. Tarjetas más ligeras: borde fino, esquinas amplias, sombra suave. */
    html.panel-has-bottom-nav[data-panel-design="v7"] .main :is(.cards .card, .section, .chart-container-wrapper) {
        border: 1px solid #efe8f2;
        border-radius: 20px;
        box-shadow: 0 1px 2px rgba(40, 20, 60, .04), 0 8px 24px rgba(40, 20, 60, .05);
    }
    html.panel-has-bottom-nav[data-panel-design="v7"] .cards .card .card-icon { border-radius: 12px; color: #8d18d1; background: linear-gradient(135deg, #fde7f2, #f1e4fd); }
    html.panel-has-bottom-nav[data-panel-design="v7"] .cards .card-info h3 { color: var(--dg-ink-muted); font-size: var(--dg-text-sm); font-weight: 600; letter-spacing: 0; text-transform: none; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .cards .card-info p { color: var(--dg-ink); font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
}

/* 33. Mi suscripción (sin barra inferior): el mismo encabezado de marca. */
@media (max-width: 700px) {
    html[data-panel-design="v7"] body > main:not(.main) .hero.gimmick-subscription-hero {
        position: relative;
        border: 0;
        color: #fff;
        background: var(--dg-hero-gradient);
        box-shadow: var(--dg-hero-shadow);
    }
    html[data-panel-design="v7"] body > main:not(.main) .hero.gimmick-subscription-hero :is(h1, p, span) { color: #fff; }
    html[data-panel-design="v7"] body > main:not(.main) .hero.gimmick-subscription-hero :is(p, span) { opacity: .92; }
    html[data-panel-design="v7"] body > main:not(.main) .hero.gimmick-subscription-hero .subscription-gimmick-image { width: 112px; filter: drop-shadow(0 12px 18px rgba(60, 10, 90, .32)); }
}

/* Centro del asistente: su cuadrícula separaba filas con 20 px y las dos filas ocultas
   (ruta y aviso) dejaban 40 px de hueco. Sin separación de filas; cada bloque lleva su margen. */
@media (max-width: 700px) {
    html.panel-has-bottom-nav[data-panel-design="v7"] .main.assistant-center-page { row-gap: 0; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main.assistant-center-page > .panel-workspace-context { margin: 0 !important; }
    html.panel-has-bottom-nav[data-panel-design="v7"] .main.assistant-center-page > :not(.panel-location, .panel-workspace-context, .assistant-page-gimmick) { margin-bottom: 20px; }
}