/* sneat-base.css */

/* ==================================================================== */
/* SNEAT — Reglas base GLOBALES de la UI moderna.                       */
/*                                                                      */
/* Extraídas de suscriptores.css (donde nacieron) para cortar el        */
/* "bleeding" entre módulos: este archivo se carga PRIMERO en el bundle */
/* (ver clases/PW/PanelDeControl/Css.php), así cualquier css de módulo  */
/* posterior gana con igual especificidad.                              */
/*                                                                      */
/* Acá va SOLO lo transversal (shell, componentes reutilizables,        */
/* toolbar, filtros, paginador). La cosmética de cada módulo vive en    */
/* su css/<modulo>.css. TODO bajo body.pw-sneat: regresión cero en      */
/* modo clásico. Guía: panel_de_control/SNEAT-PATTERNS.md               */
/* ==================================================================== */

/* --- Shell: quitar borde/fondo del contenedor clásico — los panels
   internos son las cards --- */
body.pw-sneat .main-right__page-content {
    border: 0 none;
    background-color: transparent;
    padding: 0;
}

/* --- Flecha de los <select>: la nativa queda pegada al borde derecho;
   se reemplaza por un chevron SVG a 12px, con padding para que el texto
   no lo pise. Si un select pierde el chevron, buscar shorthands
   "background:" posteriores que lo pisen. --- */
body.pw-sneat select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23566A7F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px 14px;
    padding-right: 34px !important;
}

/* --- Toolbar superior: stat-cards izquierda, botones derecha --- */
body.pw-sneat .button-bar--top {
    width: 100%;
    float: none;
    flex-wrap: wrap;
    margin-bottom: 20px;
    /* sin el padding 4px del clasico: alinea las cards con el resto */
    padding: 0;
}

/* --- Filtros estilo "Search Filters": label dentro del campo (opt-in
   con la clase pw-filters-inline en el form) --- */
body.pw-sneat #formBuscar.pw-filters-inline label {
    display: none;
}

body.pw-sneat .button-bar--top .counter:last-of-type {
    margin-right: auto;
}

body.pw-sneat .button-bar--top .mensajeExportar {
    flex-basis: 100%;
}

/* --- Contadores como mini stat-cards (icono + numero) --- */
body.pw-sneat .counter {
    display: flex;
    align-items: center;
    gap: 12px;
    float: none;
    width: auto;
    min-width: 150px;
    margin-right: 12px;
    padding: 12px 16px;
    border: 1px solid var(--pw-border-card);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(67, 89, 113, 0.08);
    text-align: left;
}

body.pw-sneat .counter__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 18px;
    /* Referencia SNEAT: el icono va a la derecha de la card */
    order: 2;
    margin-left: auto;
}

body.pw-sneat .counter--blue .counter__icon {
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
}

body.pw-sneat .counter--green .counter__icon {
    background: rgba(40, 199, 111, 0.12);
    color: #28C76F;
}

body.pw-sneat .counter--red .counter__icon {
    background: rgba(255, 62, 29, 0.12);
    color: var(--pw-danger);
}

body.pw-sneat .counter--yellow .counter__icon {
    background: rgba(255, 159, 67, 0.12);
    color: #FF9F43;
}

body.pw-sneat .counter__body {
    padding: 0;
}

body.pw-sneat .counter__values,
body.pw-sneat .counter__spinner,
body.pw-sneat .counter--blue .counter__values,
body.pw-sneat .counter--green .counter__values {
    font-size: 22px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 2px;
}

body.pw-sneat .counter__caption {
    font-size: 12px;
    color: var(--pw-gray-light);
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* --- Botones de barra (Agregar primario; Importar/Exportar claros) --- */
body.pw-sneat .button-bar .btn-primary {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: 600;
}

body.pw-sneat .button-bar .btn-primary:hover,
body.pw-sneat .button-bar .btn-primary:focus,
body.pw-sneat .button-bar .btn-primary:active {
    background: var(--pw-accent-hover);
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
}

body.pw-sneat .button-bar .btn:not(.btn-primary) {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--pw-text-strong);
}

body.pw-sneat .button-bar .btn:not(.btn-primary):hover,
body.pw-sneat .button-bar .btn:not(.btn-primary):focus {
    background: var(--pw-btn-secondary-bg-hover);
    color: var(--pw-text-strong);
}

/* --- Icono de ayuda "?" inline (pw_form_tooltip(), funciones.php) ---
   Global porque lo usan formularios de varios modulos (documentado en el
   patron 29 de SNEAT-PATTERNS.md); reemplaza el badge negro BS2
   (.badge-inverse) por uno sutil gris que se tine de accent al hover. */
body.pw-sneat .pw-tooltip-help {
    display: inline-flex;
    vertical-align: middle;
    text-decoration: none;
}

body.pw-sneat .pw-tooltip-help .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    /* El .badge de BS2 trae padding:0 5px, y como el box-sizing por defecto
       aca es content-box ese padding se SUMA al width: el circulo media
       26x16 y se veia como una pildora ovalada. Con width/height iguales no
       alcanza -- hay que anular el padding y contar el borde adentro.
       (Medir con getBoundingClientRect: getComputedStyle().width devuelve el
       content-box y reporta 16px aunque el elemento mida 26.) */
    padding: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    background: #C6CCD4 !important;
    background-image: none !important;
    color: #FFFFFF !important;
    text-shadow: none;
    box-shadow: none;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.15s ease;
}

body.pw-sneat .pw-tooltip-help:hover .badge {
    background: var(--pw-accent) !important;
}

/* --- Bloque de filtro #formBuscar como card blanca (fallback global).
   Los módulos con card propia (*-filtro-card) lo dejan flat con un
   override de mayor especificidad. --- */
body.pw-sneat #formBuscar {
    margin: 0 0 20px;
    padding: 20px 16px;
    border: 1px solid var(--pw-border-soft);
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.06);
}

body.pw-sneat #formBuscar fieldset {
    margin: 0;
    padding: 0;
    border: 0 none;
}

body.pw-sneat #formBuscar legend {
    width: 100%;
    margin-bottom: 14px;
    padding: 0;
    border: 0 none;
    color: #566A7F;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
}

body.pw-sneat #formBuscar label {
    display: block;
    margin-bottom: 6px;
    color: #566A7F;
    font-size: 13px;
    font-weight: 500;
}

body.pw-sneat #formBuscar input[type="text"],
body.pw-sneat #formBuscar select {
    height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    background-color: #FFFFFF;
    color: #566A7F;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat #formBuscar input[type="text"]:focus,
body.pw-sneat #formBuscar select:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Alineacion del row de filtros: todos los items al fondo de la fila.
   Neutraliza los padding-top inline de los spans de botones del clasico. */
body.pw-sneat #formBuscar .row-fluid {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-left: 0;
}

/* El clearfix de BS2 (:before/:after con display:table) se convierte en
   flex item y agrega un gap fantasma al inicio/fin de la fila */
body.pw-sneat #formBuscar .row-fluid::before,
body.pw-sneat #formBuscar .row-fluid::after {
    display: none;
}

body.pw-sneat #formBuscar .row-fluid > [class*="span"] {
    float: none;
    margin-left: 0;
    min-width: 0;
}

body.pw-sneat #formBuscar .row-fluid > .span4 { flex: 2 1 0; }
body.pw-sneat #formBuscar .row-fluid > .span2 { flex: 1 1 0; }
body.pw-sneat #formBuscar .row-fluid > .span3 { flex: 1 1 0; }

body.pw-sneat #formBuscar .row-fluid > [class*="span"][style] {
    padding-top: 0 !important;
}

body.pw-sneat #formBuscar input[type="text"],
body.pw-sneat #formBuscar select,
body.pw-sneat #formBuscar .btn {
    margin-bottom: 0;
}

body.pw-sneat #formBuscar .btn {
    height: 38px;
    border-radius: 8px;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    font-weight: 600;
}

body.pw-sneat #formBuscar .btn-primary {
    border: 0 none;
    background: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat #formBuscar .btn-primary:hover,
body.pw-sneat #formBuscar .btn-primary:focus {
    background: var(--pw-accent-hover);
    color: #FFFFFF;
}

body.pw-sneat #formBuscar .btn-default {
    border: 1px solid var(--pw-divider);
    background: #FFFFFF;
    color: #566A7F;
}

body.pw-sneat #formBuscar .btn-default:hover,
body.pw-sneat #formBuscar .btn-default:focus {
    background: #F5F6FA;
    color: #566A7F;
}

/* --- Texto muted de celdas --- */
body.pw-sneat .page-content__table-text--muted {
    color: var(--pw-gray-light);
}

/* --- Switch de activar/desactivar (reemplaza visualmente al checkbox) --- */
body.pw-sneat .pw-switch {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 22px;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* El input se toma por tipo y no por la clase .pw_table_action_activar (que es
   la del checkbox Activo de los listados): asi el mismo componente sirve en un
   formulario cualquiera. Los listados siguen matcheando, porque su checkbox es
   igual un input[type=checkbox] adentro del label .pw-switch.
   OJO: no reusar .pw_table_action_activar fuera de un listado --
   table_actions.js le engancha un handler global que dispara el ajax de
   activar/desactivar. */
body.pw-sneat .pw-switch input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

body.pw-sneat .pw-switch__slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--pw-divider);
    border-radius: 999px;
    transition: background-color 0.15s ease;
}

body.pw-sneat .pw-switch__slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform 0.15s ease;
}

body.pw-sneat .pw-switch input[type="checkbox"]:checked + .pw-switch__slider {
    background: var(--pw-accent);
}

body.pw-sneat .pw-switch input[type="checkbox"]:checked + .pw-switch__slider::before {
    transform: translateX(16px);
}

/* --- Badges de color por tipo/origen (6 variantes ciclicas: id % 6) --- */
body.pw-sneat .pw-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

body.pw-sneat .pw-badge--c0 { background: var(--pw-accent-soft);       color: var(--pw-accent); }
body.pw-sneat .pw-badge--c1 { background: rgba(40, 199, 111, 0.12);   color: #28C76F; }
body.pw-sneat .pw-badge--c2 { background: var(--pw-danger-soft);      color: var(--pw-danger); }
body.pw-sneat .pw-badge--c3 { background: rgba(255, 159, 67, 0.12);   color: #FF9F43; }
body.pw-sneat .pw-badge--c4 { background: rgba(0, 207, 232, 0.12);    color: #00CFE8; }
body.pw-sneat .pw-badge--c5 { background: rgba(130, 134, 139, 0.12);  color: #82868B; }

/* --- Barra de acciones masivas: flat sobre el fondo (anula la card
   global de pw-panel.css; los módulos que quieran card la re-aplican
   con mayor especificidad, p.ej. cupones). --- */
body.pw-sneat .table-actions--top {
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

body.pw-sneat .table-actions--top .table-actions__select {
    margin-bottom: 0;
}

/* El segundo combo (elegir grupo/categoria/etc, o el "dummy" vacio de
   placeholder) solo lo muestra JS (table_actions.js, enableSelectData)
   cuando la accion elegida en el primer combo realmente lo necesita. Sin
   este display:none de base, el <select> se ve con su render nativo (
   visible) en el primer paint, ANTES de que el usuario dispare un evento
   "change" -> con la accion por defecto ("Acciones masivas", sin elegir
   nada todavia) se veia una caja gris vacia sin ningun sentido. JS lo
   revela con .show() cuando corresponde. */
body.pw-sneat .table-actions--top .table-actions__select-data {
    display: none;
}

body.pw-sneat .table-actions--top button.table-actions__button-action {
    float: none;
}

/* --- Checkboxes de seleccion masiva (primera columna) --- */
body.pw-sneat .page-content__table-check-row,
body.pw-sneat .page-content__table-check-all {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
    vertical-align: middle;
}

/* --- Paginador SNEAT (reemplaza estilos BS2) --- */
body.pw-sneat .pagination {
    margin: 20px 0 0;
}

body.pw-sneat .pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    margin: 0;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
}

body.pw-sneat .pagination ul > li {
    display: inline-flex;
}

body.pw-sneat .pagination ul > li > a,
body.pw-sneat .pagination ul > li > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    background: #FFFFFF;
    background-image: none;
    color: #566A7F;
    font-size: 13px;
    font-weight: 500;
    text-shadow: none;
    box-shadow: none;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.pw-sneat .pagination ul > li > a:hover,
body.pw-sneat .pagination ul > li > a:focus {
    background: #F5F6FA;
    background-image: none;
    color: var(--pw-accent);
    border-color: var(--pw-accent);
    box-shadow: none;
    text-decoration: none;
}

body.pw-sneat .pagination ul > li.active > a,
body.pw-sneat .pagination ul > li.active > span {
    background: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    box-shadow: none;
    cursor: default;
}

body.pw-sneat .pagination ul > li.disabled > a,
body.pw-sneat .pagination ul > li.disabled > span {
    color: #A0AEBA;
    border-color: var(--pw-border-soft);
    background: #FAFBFC;
    background-image: none;
    cursor: not-allowed;
    pointer-events: none;
}

/* Fix especificidad: li.active > span (0,3,4) gana sobre
   .pagination-input-container (0,3,1) y aplica fondo accent al contenedor.
   Se neutraliza con un selector equivalente pero con clase mas especifica. */
body.pw-sneat .pagination ul > li.active > span.pagination-input-container {
    background: #FFFFFF;
    border: 1px solid var(--pw-accent);
    color: #566A7F;
}

/* Input de numero de pagina dentro del paginador */
body.pw-sneat .pagination .pagination-input-container {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--pw-accent);
    border-radius: 8px;
    background: #FFFFFF;
}

body.pw-sneat .pagination .pagination-title {
    display: none;
}

body.pw-sneat .pagination .pagination-input {
    width: 40px;
    height: 24px;
    padding: 2px 4px;
    border: 1px solid var(--pw-divider);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    color: #384551;
    box-shadow: none;
    background: #FFFFFF;
}

body.pw-sneat .pagination .pagination-max {
    font-size: 13px;
    color: var(--pw-gray-light);
    white-space: nowrap;
}

body.pw-sneat .pagination .pagination-button {
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 4px;
    cursor: pointer;
}

body.pw-sneat .pagination .pagination-button:hover {
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
}

/* --- Mobile: conservar comportamiento clasico de acciones masivas --- */
@media (max-width: 767px) {
    body.pw-sneat .table-actions--top {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
    body.pw-sneat .table-actions--top .table-actions__select-action,
    body.pw-sneat .table-actions--top .table-actions__select-data,
    body.pw-sneat .table-actions--top button.table-actions__button-action {
        display: none;
    }
}

/* ====================================================================
   Toolbar con Importar/Exportar/Agregar: layout de 2 filas en mobile Y
   tablet, patron GLOBAL para CUALQUIER listado (no por modulo).
   ====================================================================
   Origen: Productos y Suscriptores repetian este mismo patron con
   selectores propios por modulo (uno scopeado a #contenido, otro a
   .suscriptores--list). Se unifico en un solo lugar para que:
     a) no haya que volver a escribirlo/probarlo modulo por modulo, y
     b) un modulo NUEVO lo herede solo con agregar una clase, sin tocar CSS.

   Como optar: el wrapper propio del modulo (el div que ya envuelve su
   page-size + Importar + Exportar + Agregar, ej. .catalogo-actions-buttons,
   .suscriptores-actions-buttons) necesita ADEMAS la clase marcadora
   ".pw-toolbar-actions-group". El resto es automatico.

   Por que :has() y no un ID/clase de modulo (como el fix viejo de
   Productos con #contenido): :has() hace que el selector SOLO matchee
   toolbars que en verdad contienen el wrapper marcado -> ningun listado
   sin la clase se ve afectado, sin depender de conocer/mantener el ID de
   cada tab-pane. Elimina de raiz el bug de fuga entre modulos que tuvo
   Productos (un .table-actions--top de OTRO modulo, sin el wrapper
   marcado, nunca matchea :has(.pw-toolbar-actions-group)).

   Breakpoint 1024px (no 767 como el resto de sneat-base.css): esto no es
   "mobile vs desktop", es "esta fila con [page-size][Importar][Exportar]
   [Agregar] no entra mas" - eso empieza a pasar bastante antes de 767px de
   VIEWPORT, ya en anchos de tablet (reportado en vivo ~920px). 1024px da
   margen de sobra para page-size+2 botones+Agregar con texto completo en
   CUALQUIER combinacion de esos 4 controles. */
@media (max-width: 1024px) {
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) {
        /* flex-wrap explicito: el <=767px de mas arriba en este mismo
           archivo ya trae flex-wrap:wrap, pero ese rango NO cubre todo
           este bloque (768-1024px) -> sin esto, el salto de linea forzado
           (::after mas abajo) no tiene efecto: flex-basis:100% en un
           contenedor nowrap no envuelve nada, solo desborda la fila 2
           entera fuera de la caja (bug real, encontrado verificando en
           vivo a 782px: la fila 2 rendereaba 400px a la derecha del borde
           del toolbar, invisible). */
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
        row-gap: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) button.table-actions__button-action {
        display: inline-flex;
    }
    /* Disuelve el wrapper propio del modulo: sus hijos (page-size,
       Importar, Exportar, Agregar) pasan a ser items DIRECTOS del toolbar,
       en igualdad con el combo de acciones masivas -> pueden reordenarse
       entre si via "order" sin que el anidamiento original lo impida.
       !important: los wrappers suelen traer la utility .b5-d-flex, que
       declara display:flex !important y si no gana siempre. */
    body.pw-sneat .table-actions--top .pw-toolbar-actions-group {
        display: contents !important;
    }

    /* Fila 1 (izquierda -> derecha): [Mostrar N items] ... [Importar] [Exportar]
       Fila 2 (izquierda -> derecha): [Acciones masivas] [aplicar] ... [Agregar]
       El selector de cantidad usa distinto nombre de clase por modulo
       (catalogo-page-size, suscriptores-page-size, ...) -> se matchea por
       wildcard en vez de listar cada modulo. */
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) [class*="-page-size"] {
        order: 1;
        margin-right: auto;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) .btnImportar {
        order: 2;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) .btnExportar {
        order: 2;
    }
    /* Salto de linea forzado (flexbox no tiene break-after): un item de
       ancho completo y alto 0 entre la fila 1 y la fila 2. */
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group)::after {
        content: "";
        order: 3;
        flex: 0 0 100%;
        width: 100%;
        height: 0;
        margin: 0;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) .table-actions__select-action {
        order: 4;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) [class*="table-actions__select-data"] {
        order: 5;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) button.table-actions__button-action {
        order: 6;
        margin-right: auto;
    }
    body.pw-sneat .table-actions--top:has(.pw-toolbar-actions-group) .btnCrear {
        order: 7;
    }

    /* Boton "Agregar X": mostrar solo "Agregar" cuando no hay espacio.
       font-size:0 colapsa el nodo de texto original del link/boton; se
       restaura en el icono y se inyecta la etiqueta corta via ::after.
       .btnCrear es la clase que ya trae PW_PanelDeControl_Html_Links::crearAnimado()
       en TODOS los modulos que la usan -> no hace falta scope adicional,
       ningun otro elemento del panel usa esa clase para otra cosa. */
    body.pw-sneat .table-actions--top .btnCrear {
        font-size: 0;
        white-space: nowrap;
    }
    body.pw-sneat .table-actions--top .btnCrear > i {
        font-size: 14px;
    }
    body.pw-sneat .table-actions--top .btnCrear::after {
        content: "Agregar";
        font-size: 13px;
        margin-left: 6px;
        vertical-align: middle;
    }
}

/* ====================================================================
   Panel "Filtros avanzados" (#formBuscar .form-search__advanced): patron
   GLOBAL para CUALQUIER listado con este panel (Suscriptores, Usuarios,
   Contacto, Publicaciones...). pw_html_button_filters() e id="btnFiltros"
   son compartidos por todos los modulos que llaman a esa funcion -> un
   solo fix aca cubre a todos, igual que el patron de toolbar (ver
   §36/§37 en SNEAT-PATTERNS.md).
   ==================================================================== */

/* Boton "Filtros avanzados": solo icono en mobile (sin la etiqueta).
   El markup es <i class="fa fa-sliders"></i> + un nodo de texto plano
   (sin <span>) -> font-size:0 colapsa el texto, se restaura en el icono.
   !important necesario: catalogo-productos.css trae
   "body.pw-sneat #formBuscar #btnFiltros { font-size:13px; ... }" (2 IDs,
   SIN media query) — ese archivo se carga en el bundle de TODAS las
   paginas (no solo Productos), y sus 2 IDs empatan/superan la
   especificidad de esta regla aunque sea mas especifica en apariencia. */
@media (max-width: 767px) {
    body.pw-sneat #btnFiltros {
        font-size: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
        /* display:flex del boton + gap global de .btn separaban el
           icono del texto colapsado (que ya mide 0px real, confirmado
           con Range sobre el nodo de texto) -- se vuelve al flujo
           inline normal para que text-align:center centre el contenido
           visible sin depender de flex. */
        display: block !important;
        text-align: center;
    }
    body.pw-sneat #btnFiltros > i {
        font-size: 14px !important;
        /* El icono trae margin-right:4px de una regla vieja pensada
           para separarlo del label VISIBLE ("Filtros avanzados" en
           desktop) -- en el estado solo-icono de mobile ese margen lo
           empuja 4px a la izquierda del centro real del boton (medido:
           12.8px de hueco a la izquierda contra 16.8px a la derecha).
           !important necesario: "#formBuscar #btnFiltros .fa"
           (catalogo-productos.css, 2 IDs + 1 clase) le gana en
           especificidad a un simple "#btnFiltros > i" (mismo motivo ya
           documentado arriba en este archivo para el font-size). */
        margin-right: 0 !important;
    }
}

/* Columnas del panel avanzado (Lista de precios / Estado / Borrar filtros /
   Filtrar) sin separacion vertical cuando apilan: el grid b5- usa flex-wrap
   con margen NEGATIVO en la fila (gutter horizontal via padding en cada
   columna) pero ningun row-gap vertical -> al apilar en 1 columna (mobile,
   b5-col-12) las filas quedaban pegadas entre si (medido: bottom de la
   fila 1 == top de la fila 2, 0px de separacion).
   row-gap en vez de margin-bottom por columna (como era antes, con un
   :last-child para no duplicar el padding-bottom del fieldset): ese
   margin-bottom rompia el align-items:stretch por defecto de .b5-row en
   pantallas anchas (4 columnas por fila, ej. Activo/Destacado/Borrar
   filtros/Filtrar) -- la penultima columna ("Borrar filtros", CON margen)
   quedaba con 12px menos de alto que la ultima ("Filtrar", SIN margen por
   ser :last-child), y como cada columna centra su boton contra su PROPIA
   altura (align-items:flex-end de la regla de mas abajo), el boton
   "Filtrar" terminaba 12px mas abajo que "Borrar filtros" -- reportado con
   captura por el usuario. row-gap separa solo entre LINEAS que realmente
   wrappean, sin tocar la altura de cada item dentro de una misma linea. */
body.pw-sneat .form-search__advanced .b5-row {
    row-gap: 12px;
}

/* ====================================================================
   Checkboxes de seleccion masiva por fila/thead: patron GLOBAL.
   page-content__table.css los oculta con display:none a <=1024px, SIN
   scope de body.pw-sneat -> regla clasica vieja (pensada para cuando
   clasico no ofrecia acciones masivas en mobile/tablet) que tambien pega
   en SNEAT. El combo de "Acciones masivas" SI se muestra en SNEAT en ese
   mismo rango (patron global de arriba), asi que sin esto no habria forma
   de elegir que filas afecta. Antes duplicado por modulo (Suscriptores,
   Usuarios) — unificado aca: cubre cualquier listado que use
   PW_PanelDeControl_Html_List con setMultipleActionsFirst(), sin scope de
   body-class por modulo (mismo criterio que el resto de esta seccion).
   ==================================================================== */
@media (max-width: 1024px) {
    body.pw-sneat .page-content__table-header--multiple-actions,
    body.pw-sneat .page-content__table-cell-multiple-actions-checkbox,
    body.pw-sneat .page-content__table-cell-multiple-actions {
        display: table-cell !important;
    }
}


/* sneat-responsive.css */

/* ============================================================================
   sneat-responsive.css -- Red de seguridad anti-overflow (solo UI moderna)
   ----------------------------------------------------------------------------
   Baseline transversal para eliminar scroll horizontal en el panel SNEAT en
   viewports < 1024px y < 768px. Ataca las causas raiz comunes en vez de
   parchear pantalla por pantalla.

   Reglas de scoping (regla de oro del proyecto):
   - Todo selector va prefijado con body.pw-sneat -> regresion cero en clasico.
   - Cargado en el bundle JUSTO despues de sneat-base.css: las hojas de modulo
     posteriores pueden pisar con igual especificidad si necesitan opt-out.

   Ver panel_de_control/SNEAT-PATTERNS.md (seccion "tabla responsive / baseline
   anti-overflow").
   ============================================================================ */

/* 1. Guard de overflow horizontal.
   Se aplica en body Y en html: un elemento position:fixed (la .navbar-fixed-top)
   que desborda NO lo contiene el overflow del body, porque el scroll horizontal
   ocurre en el elemento raiz (html). Por eso el guard va tambien en html.
   :has(body.pw-sneat) se evalua en el render inicial (la clase es estatica) ->
   uso seguro de :has (el gotcha de :has es solo para cambios DINAMICOS).

   CLAVE: usar overflow-x: CLIP, no hidden. `hidden` fuerza a overflow-y a
   computar `auto`, lo que convierte a <body> en un scroll-container interno y
   ROMPE el scroll nativo del documento (window.scrollY queda en 0; se rompen
   scroll-to-top, sneat_sidebar scrollToActive, restauracion de scroll, anclas).
   `clip` corta el overflow horizontal SIN forzar overflow-y ni crear
   scroll-container -> el scroll nativo se conserva y position:fixed sigue fijo
   (clip NO establece containing-block para fixed). Se deja `hidden` como linea
   previa: fallback para browsers sin soporte de `clip` (los modernos usan la
   ultima declaracion, `clip`). */
html:has(body.pw-sneat) {
    overflow-x: hidden;
    overflow-x: clip;
}

body.pw-sneat {
    overflow-x: hidden;
    overflow-x: clip;
}

/* 2. Domar la tabla de layout .main (display:table -> se expande al ancho del
   contenido). Globaliza el fix que hoy se repite modulo por modulo.
   Mayor especificidad que .main de main.css -> gana sin depender del orden. */
body.pw-sneat .main {
    table-layout: fixed;
    width: 100%;
}

/* 3. Tablas de datos con scroll horizontal propio, sin wrapper en el PHP.
   display:block + overflow-x:auto convierte la tabla en su propio contenedor
   scrollable: la caja externa toma el 100% del ancho disponible y el contenido
   de la tabla scrollea dentro en vez de empujar la pagina.
   Cubre todos los listados construidos con la clase central List, MAS
   .abml__table (el otro sistema de listado compartido, usado por Grupos de
   Suscriptores y cualquier otro ABML) — sin esto, un ABML con columnas
   angostas (ej. solo iconos de accion) que no entran en mobile empujaban
   TODA la pagina a scroll horizontal en vez de scrollear la tabla sola. */
body.pw-sneat .page-content__table,
body.pw-sneat .main-right__page-content table.table,
body.pw-sneat .abml__table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

/* 4. Strings largos sin espacios (titulos "hhhhh...", codigos, URLs) que
   desbordan la celda pese al scroll de la tabla. */
body.pw-sneat .page-content__table td,
body.pw-sneat .page-content__table td a {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 5. Media que desborda su contenedor. */
body.pw-sneat .main-right__page-content img,
body.pw-sneat .main-right__page-content video {
    max-width: 100%;
    height: auto;
}

/* 6. Paginador: en SNEAT el <ul> es inline-flex en una sola fila, asi que con
   muchas paginas se vuelve intrinsecamente ancho y desborda en mobile. Con
   flex-wrap los numeros fluyen a varias filas (patron responsive de
   paginacion). Transversal: afecta a todos los listados. */
body.pw-sneat .pagination {
    max-width: 100%;
}

body.pw-sneat .pagination ul {
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
}

/* 7. Barra superior (navbar SNEAT) responsive.
   El navbar es un flex row donde el logo tiene margin-right:auto y empuja el
   cluster derecho (ui-switch, tareas, ayuda, novedades, tienda, USUARIO) hacia
   la derecha. Con poco ancho, ese cluster desborda y el menu de usuario (que va
   ultimo) queda fuera del viewport -> el guard de overflow lo recorta y el
   usuario pierde acceso a Configuracion / Planes / Cerrar sesion.
   Solucion: colapsar progresivamente los botones de texto secundarios a
   solo-icono, priorizando que el menu de usuario SIEMPRE quede visible y
   clickeable. (En clasico el navbar ya oculta #top-menu-usuario a <=979px; en
   SNEAT se mantiene visible via li{display:flex}, por eso hace falta esto.) */

/* Tier 1 (<=1024px): botones secundarios -> solo icono */
@media (max-width: 1024px) {
    body.pw-sneat #top-menu-ui-switch > a > span,
    body.pw-sneat .pw-menu-tareas-avance > a > span {
        display: none !important;
    }
    /* "Ir a mi tienda": el texto es un nodo suelto (sin span) -> ocultar por
       font-size y restaurar el icono de la tienda; ocultar el icono de link
       externo para dejar un solo glifo limpio. */
    body.pw-sneat #top-menu-sitio > a {
        font-size: 0 !important;
    }
    body.pw-sneat #top-menu-sitio > a > i.main__icon--tienda-online {
        font-size: 16px !important;
    }
    body.pw-sneat #top-menu-sitio > a > i.main__icon--enlace-externo {
        display: none !important;
    }
}

/* Tier 2 (<=820px): menu de usuario -> solo avatar (oculta "Hola, email").
   El dropdown sigue funcionando (el toggle es el <a>, no el texto).

   Con el texto oculto, el <a> del toggle dejaba de ser un pill (padding
   asimetrico 6px/12px heredado del texto) y quedaba descentrado respecto
   al circulo del icono adentro -> ver mismo problema en la flechita del
   dropdown mas abajo. Se lo iguala al mismo patron icon-only circular ya
   usado en Ayuda/Novedades (pw-panel.css): boton cuadrado 36x36 centrado,
   el icono queda perfectamente centrado dentro. */
@media (max-width: 820px) {
    body.pw-sneat #top-menu-usuario > a > span {
        display: none !important;
    }
    body.pw-sneat #top-menu-usuario > a {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
    }
}

/* Tier 3 (<=600px): ocultar el logo para dar aire (igual que el clasico).
   El logo es quien empuja el resto del cluster al extremo derecho via
   margin-right:auto (ver pw-panel.css "#top-menu-logo-webered"). Al
   ocultarlo con display:none, ese margen desaparece con el y el cluster
   entero (ui-switch, tareas, ayuda, novedades, tienda, usuario) colapsa
   pegado a la izquierda dejando un hueco vacio a la derecha de la barra.

   OJO: el hamburger (#top-menu-boton) es el PRIMER item de ul.nav (antes
   que el logo) y debe quedarse pegado a la izquierda siempre -> no sirve
   justify-content:flex-end en el contenedor (empuja tambien al hamburger).
   En su lugar, el margin-right:auto se mueve al <li> del hamburger: fija
   el hamburger a la izquierda y empuja TODO lo demas (logo oculto incluido)
   al extremo derecho, igual que hacia el logo cuando estaba visible.
   El <li> del hamburger no tiene class/id propio (el id esta en el <a>
   interno) -> se selecciona con :has(). */
@media (max-width: 600px) {
    body.pw-sneat #top-menu-logo-webered {
        display: none !important;
    }
    body.pw-sneat .pw-navbar-small > ul.nav > li:has(#top-menu-boton) {
        margin-right: auto !important;
    }
}

/* 8. Barra superior FIJA en TODOS los anchos.
   Bootstrap 2 responsive vuelve .navbar-fixed-top a position:static en <=979px,
   asi que en mobile/tablet el header scrolleaba y desaparecia. Se refuerza el
   fixed para que quede pegado arriba siempre y el contenido deslice por debajo.
   z-index: se hereda el 800 de navbar.css (bajado a proposito para que los
   popovers de ayuda queden por encima; NO subir a 1000). */
body.pw-sneat .navbar.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

/* Compensacion de altura en mobile: como ahora el navbar es fijo tambien a
   <=979px, hay que devolver el padding-top que main.css pone en 0 en ese rango
   (si no, el primer bloque queda tapado bajo el header de 60px). Replica la
   logica desktop: 60px normal / 100px cuando hay barra de notificacion. */
@media (max-width: 979px) {
    body.pw-sneat .main__right {
        padding-top: 60px;
    }
    body.pw-sneat .main--width-notif-bar .main__right {
        padding-top: 100px;
    }
}

/* 9. ESTANDAR DE PRODUCTO — filas de listado en mobile: SIEMPRE
   vertical-align:top, NUNCA middle. Pedida explicitamente por el
   usuario como regla permanente para cualquier listado (no repetirla
   modulo por modulo): en mobile las filas mezclan celdas de contenido
   corto (numero, icono de accion, switch) con celdas de contenido
   largo/multilinea (nombre+email, descripcion, etc) que estiran la
   fila -- con vertical-align:middle (el default de casi todos los
   modulos, pensado para desktop donde las filas son mas uniformes) el
   contenido corto queda flotando a mitad de la fila alta en vez de
   arrancar arriba junto con el resto.
   Global e incondicional (no requiere `body.pw-sneat .modulo .page-content__table`
   por modulo): cubre cualquier listado construido con la clase central
   List (Pedidos, Cupones, Promociones, etc) de una sola vez.
   !important: varios modulos fijan vertical-align:middle con selectores
   propios de 3+ clases (ej. ".pedidos .page-content__table tbody td")
   que igualan o superan la especificidad de esta regla generica -- sin
   !important, esos overrides por modulo seguirian ganando. Documentado
   en profundidad en SNEAT-PATTERNS.md #54/#57. */
@media (max-width: 767px) {
    body.pw-sneat .page-content__table tbody td {
        vertical-align: top !important;
    }
}


/* main.css */

:root {
    --main_left_width: 256px;
    --main_menu_title_width: --main_left_width - 12px;
}

.main {
    box-sizing: border-box;
    display: table;
    width: 100%;  
    height: 100%;
}

.main__left {       
    box-sizing: border-box;
    width: var(--main_left_width);
    min-width: var(--main_left_width);
    display: table-cell;
}

.main__left-content {    
    padding-top: 60px;
    position: fixed; 
    width: var(--main_left_width);
    height: calc(100% - 60px);
    z-index: 799;
    background-color: #1f2937;
}

.main__right {
    box-sizing: border-box;
    padding-top: 60px;
    padding-bottom: 20px;
    display: table-cell;
    vertical-align: top;
    background-color: #ECEEF0;
}

.main--width-notif-bar .main__left-content {
    padding-top: 100px;
    height: calc(100% - 100px);
}

.main--width-notif-bar .main__right {
    padding-top: 100px;
}

.main-right__page-content {

}

.main-right__page-content--with-border {
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    padding: 20px;
}
    
.main-right__page-help {
    border: 1px solid #DDDDDD;
    background-color: #FFFFFF;
    padding: 20px;
    margin-bottom: 20px;
}   

.main-right__page-title {
    margin-top: 0px;
}

.main-right__page-icon {
    margin-right: 5px;
}

@media (max-width: 979px) {
    
    /* quitar espacios a los costados, excepto en el m�dulo Configuraci�n */
    
    body:not(#mod_configuracion) .main {
        padding-right: 0px;
    }
    
    body:not(#mod_configuracion) .main__right {
        padding-left: 0px;
    }
    
    .main__right {
        padding-top: 0px;
    }
    
    .main-right__page-header {
        padding-left: 10px;
    }
    
}

@media (max-width: 767px) {
    .main-right__page-header {
        padding-left: 0px;
    }    
}

@media (max-width: 600px) {
    .main-right__page-header {
        padding-left: 10px;
    }    
}

.main__menu {    
    width: 100%;  
    height: 100%;
    display: flex;
    flex-direction: column;
}

.main__menu .dropdown-menu {
    background-color: #d1d5db;
}

.main__menu .dropdown-menu .divider {
    background-color: #d1d5db;
    border-bottom: 1px solid #353c45;
    height: 0;
    margin-top: 4px;
    margin-bottom: 4px;
}

.main__menu .dropdown-menu > li > a, 
.main__menu .dropdown-menu > li.dropdown-title > a {
    font-size: 16px;
    padding: 5px 20px 5px 5px;
    color: #353c45;
    background-color: #d1d5db;
    margin-left: 4px;
    margin-right: 4px;
    margin-bottom: 0px;
}

.main__menu .dropdown-menu > li > a:hover, 
.main__menu .dropdown-menu > li > a:focus, 
.main__menu .dropdown-submenu:hover > a, 
.main__menu .dropdown-submenu:focus > a {
    color: #d1d5db;
    text-decoration: none;
    background-color: #353c45;
    background-image: none;
    border-radius: 6px;
}

.main__menu .dropdown-menu .section_name
{
    margin-right: 20px;
}

.main__menu .dropdown-title .section_name
{
    font-weight: bold;
}

.main__menu > li > a {
    padding: 10px;
    color: #d1d5db;
    font-size: 16px;
    border: 1px solid #1f2937;
    border-radius: 10px;
    margin-left: 4px;
    margin-right: 6px;
}

.main__menu .dropdown-menu {
    border-radius: 10px;
    padding: 4px 0;
    min-width: 235px;    
}

.main__menu > li > .dropdown-menu {
    left: 10px;
}

.main__menu > li > a .fa {
    font-size: 18px;
    margin-right: 4px;
}

.main__menu .dropdown-menu > li:last-child > a {
    margin-bottom: 0;
}

.main__menu .dropdown-menu .fa {
    margin-right: 2px;
}

.main__menu .dropdown-menu .fa-circle {
    font-size: 10px;
    vertical-align: middle;
}

.main__menu .dropdown-toggle .caret {
    border-top: 6px solid #000;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    border-top-color: #d1d5db;
    border-bottom-color: #d1d5db;
    float: right;
}

.main__menu .dropdown-submenu > a::after {
    border-left-color: #353c45;
}

.main__menu > li > a:hover,
.main__menu > li > a:active,
.main__menu > li > a:focus {
    background-color: #374151;
    transition-duration: .15s;
}

.main__menu .dropdown-submenu:hover > a::after {
    border-left-color: #d1d5db;
}

.main__menu .dropdown-toggle:hover .caret, 
.main__menu .dropdown-toggle:focus .caret {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.main__menu li.title {
    background-color: #111827;
    color: #999999;
    font-size: 14px;
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 10px;
    cursor: pointer;
    margin-bottom: 4px;
    margin-top: 4px;
    width: var(--main_menu_title_width);
}

.main__menu li.title:hover {
    color: #BBBBBB;
}

.main__menu li.title .fa {
    float: right;
    font-size: 14px;
    margin-right: 16px;
    margin-top: 2px;
}

.main__menu li.blocked {
    position: relative;
}

.main__menu li.blocked span {
    margin-right: 20px;
}

.main__menu li.blocked .fa-lock {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 16px;
}

.main-right__page-header {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
}

.main-right__page-footer {
    margin-top: 20px;
    text-align: center;
}

.main-right__page-config {
    padding: 0px;
    font-size: 16px;
    font-weight: normal;
}

@media (max-width: 979px) {
    .main__left {
        display: none;
    }  
    .main__right {
        margin-left: 0px;
    }
}

#top-menu-configuracion {
    background-color: #111827;
    margin-top: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

#top-menu-configuracion a {
    border: 0 none;
}

#top-menu-configuracion a:hover {
    background-color: #1f2937;
}

.main__menu-icon-important {
    background-color: #b94a48;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 2px;
    float: right;
    margin-left: 0px;
    line-height: 1;
    margin-top: 4px;
    border-radius: 50%;
}


.main__icon--bold::before {
    font-weight: bold !important;
}


.main__menu .main__icon {
    margin-right: 5px;
}

.main__menu .main__icon--marketing {
    color: #facc15;
}

.main__menu .main__icon--configuracion-2 {
    width: 16px;
    height: 16px;
}

.main__menu .main__icon--meta {
    vertical-align: middle;
}

#contenedor-paginas .main__icon {
    font-size: 16px;
}


.main__menu .main__icon-effect {
    width: 100%;
    line-height: 1;
}

.main__menu .main__icon-effect span {
    margin-left: 5px;
}

.main__menu .main__icon-effect--rotation .main__icon {
    display: inline-block;
    transition: transform 2.0s ease;
    line-height: 1;
    margin: 0;
}

.main__menu .main__icon-effect--rotation:hover .main__icon {
    transform: rotate(360deg);
}


/* sneat-sidebar.css */

/* ==================================================================== */
/* SNEAT - Sidebar (menu lateral) claro.                                */
/*                                                                      */
/* Registrado en Css.php DESPUES de css/main.css: pisa el sidebar       */
/* oscuro clasico con igual especificidad. Todo bajo body.pw-sneat:     */
/* el modo clasico conserva main.css intacto (regresion cero).          */
/* Guia: panel_de_control/SNEAT-PATTERNS.md                             */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

/* ==== Contenedor: blanco premium con divisor suave =====================
   Arquitectura: .main__left-content es el flex column FIJO (fixed, alto
   completo, SIN scroll propio); el <ul class="main__menu"> es el panel
   que scrollea (flex:1 + overflow-y:auto); el footer #top-menu-configuracion
   lo saca sneat_sidebar.js del <ul> y lo reinserta como hermano directo
   aca, fuera del area scrolleable, para quedar SIEMPRE visible al pie sin
   importar cuanto contenido haya arriba ni la altura de la pantalla.
   (Se probo position:sticky y position:absolute ancladas DENTRO del
   contenedor con scroll: ambas se desplazan junto con el contenido al
   scrollear, o dejan un hueco segun la altura de ventana — el fix real
   es sacar el footer del elemento que scrollea, no un position trick.) */
body.pw-sneat .main__left-content {
    background-color: #FFFFFF;
    border-right: 1px solid var(--pw-border-soft);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* main.css usa height: calc(100% - 60px): el contenedor fixed termina
       60px ANTES del borde inferior del viewport y deja una franja
       descubierta bajo el footer (invisible en el clasico oscuro, evidente
       con el sidebar blanco). Con box-sizing:border-box el padding-top de
       60px (navbar) ya queda contenido dentro del 100%. */
    height: 100%;
}

/* ==== Menu raiz: panel scrolleable, ocupa todo el espacio disponible
   arriba del footer (flex:1). min-height:0 es imprescindible: sin el,
   un flex item no puede encogerse por debajo de su content-size y el
   overflow-y:auto nunca entra en juego (se desborda el padre en vez de
   scrollear internamente). ==== */
body.pw-sneat .main__menu {
    padding-top: 10px;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: #D9DEE3 transparent;
}

body.pw-sneat .main__menu::-webkit-scrollbar {
    width: 6px;
}

body.pw-sneat .main__menu::-webkit-scrollbar-thumb {
    background: #D9DEE3;
    border-radius: 3px;
}

body.pw-sneat .main__menu::-webkit-scrollbar-thumb:hover {
    background: #B0BAC5;
}

/* ==== Items nivel 0 ==== */
body.pw-sneat .main__menu > li > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 14px;
    padding: 9px 14px;
    border: 0 none;
    border-radius: 8px;
    color: var(--pw-text-strong);
    font-size: 14px;
    line-height: 1.4;
    position: relative;
    /* Sin transition de color/background: en este stack (main.css pone
       transition-duration en el :hover) la CSSTransition queda "running"
       eterna y congela el valor computado en el frame inicial. */
    transition: none;
}

body.pw-sneat .main__menu > li > a:hover,
body.pw-sneat .main__menu > li > a:active,
body.pw-sneat .main__menu > li > a:focus {
    background-color: rgba(67, 89, 113, 0.06);
    color: var(--pw-text-strong);
    text-decoration: none;
}

body.pw-sneat .main__menu > li > a .main__icon,
body.pw-sneat .main__menu > li > a > .fa {
    font-size: 17px;
    color: var(--pw-gray-light);
}

/* El icono amarillo de Marketing conserva su color propio (main.css). */

/* ==== Titulo de seccion (separador estatico, NO colapsable) ====
   Agrupa el menu plano de SNEAT con el mismo criterio que el modo clasico
   (Administracion / Personalizacion / Promocion) sin reintroducir el
   comportamiento +/- colapsable de pw_menu_cabecera_panel_titulo() (eso fue
   una decision deliberada al aplanar el menu para SNEAT). Estilo tomado del
   template Sneat original: texto chico, mayusculas, letter-spacing, gris
   apagado. El margin-top separa del grupo anterior; el primero (justo
   despues de padding-top del <ul>) no necesita separacion extra. */
body.pw-sneat .main__menu li.pw-menu-section-title {
    margin: 6px 12px 6px;
    padding: 6px 6px 6px 6px;
    list-style: none;
    background-color: #f5f6fa;
    border-radius: 6px;
}

body.pw-sneat .main__menu li.pw-menu-section-title:first-child {
    margin-top: 4px;
}

body.pw-sneat .main__menu li.pw-menu-section-title > span {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #A8B1BB;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==== Caret BS2 -> chevron rotatorio (Bootstrap Icons) ==== */
body.pw-sneat .main__menu .dropdown-toggle .caret {
    display: none;
}

body.pw-sneat .main__menu > li > .dropdown-toggle::after {
    content: "\F282"; /* bi-chevron-down */
    font-family: "bootstrap-icons";
    font-size: 12px;
    margin-left: auto;
    color: #8592A3;
    transition: transform 0.2s ease;
}

body.pw-sneat .main__menu > li.pw-open > .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* ==== Item activo: semibold + fondo accent translucido + barra 4px ==== */
body.pw-sneat .main__menu li.active > a {
    font-weight: 600;
    color: var(--pw-accent);
    background-color: var(--pw-accent-soft);
}

body.pw-sneat .main__menu li.active > a .main__icon,
body.pw-sneat .main__menu li.active > a > .fa {
    color: var(--pw-accent);
}

body.pw-sneat .main__menu > li.active > a::before {
    content: "";
    position: absolute;
    left: -14px; /* anclada al borde del sidebar (margen 14px del item) */
    top: 6px;
    bottom: 6px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--pw-accent);
}

/* Item con acordeon abierto (.pw-open, clase propia del JS SNEAT) */
body.pw-sneat .main__menu > li.pw-open > a {
    color: var(--pw-accent);
}

body.pw-sneat .main__menu > li.pw-open > a .main__icon {
    color: var(--pw-accent);
}

/* ==================================================================== */
/* Acordeon inline (reemplaza a los flyouts BS2, solo SNEAT).           */
/* La visibilidad la maneja el JS con estilos inline (slideDown/Up);    */
/* aca solo va la piel y la anulacion del flyout.                       */
/* ==================================================================== */

body.pw-sneat .main__menu .dropdown-menu {
    position: static;
    float: none;
    display: none;
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 2px 0 6px;
    left: auto;
}

/* Anular el flyout por hover de BS2 (niveles 2/3) y su flecha */
body.pw-sneat .main__menu .dropdown-submenu:hover > .dropdown-menu {
    display: none;
}

body.pw-sneat .main__menu .dropdown-submenu > a::after {
    display: none;
}

/* El JS re-muestra con estilos inline los ULs de la rama abierta;
   el hover de BS2 pierde porque display:none inline no existe: el
   selector de arriba solo pisa el caso "cerrado por CSS". Cuando el
   JS abre (display:block inline), gana el inline. */

/* ==== Nivel 2: indentado suave + linea guia vertical tenue ==== */
body.pw-sneat .main__menu > li > .dropdown-menu {
    margin: 0 14px 4px 30px; /* la guia cae bajo el icono del padre */
    border-left: 1px solid var(--pw-divider);
}

body.pw-sneat .main__menu .dropdown-menu > li > a,
body.pw-sneat .main__menu .dropdown-menu > li.dropdown-title > a {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 1px 0 1px 10px;
    padding: 6px 10px;
    background-color: transparent;
    border-radius: 6px;
    color: var(--pw-gray-light);
    font-size: 13px;
}

body.pw-sneat .main__menu .dropdown-menu > li > a:hover,
body.pw-sneat .main__menu .dropdown-menu > li > a:focus,
body.pw-sneat .main__menu .dropdown-submenu:hover > a,
body.pw-sneat .main__menu .dropdown-submenu:focus > a {
    background-color: rgba(67, 89, 113, 0.06);
    background-image: none; /* anula el gradiente azul de BS2 */
    color: var(--pw-text-strong);
    border-radius: 6px;
}

/* Activo dentro del acordeon: BS2 pinta .dropdown-menu .active > a con
   gradiente azul — se anula y se aplica el accent del patron. */
body.pw-sneat .main__menu .dropdown-menu > li.active > a,
body.pw-sneat .main__menu .dropdown-menu > li.active > a:hover,
body.pw-sneat .main__menu .dropdown-menu > li.active > a:focus {
    background-color: var(--pw-accent-soft);
    background-image: none;
    color: var(--pw-accent);
    font-weight: 600;
}

body.pw-sneat .main__menu .dropdown-menu .divider {
    background-color: transparent;
    border-bottom: 1px solid var(--pw-border-soft);
    margin: 6px 10px;
}

body.pw-sneat .main__menu .dropdown-menu .section_name {
    margin-right: 0;
}

/* Pista "(dentro de: Padre)" para una pagina fuera del menu que ademas es
   hija de otra (ver pw_menu_secciones_panel_items()): esa fila se aplana
   al nivel superior (ya no queda anidada bajo su padre visualmente), asi
   que sin esto se perderia la relacion padre/hija por completo. */
body.pw-sneat .main__menu .dropdown-menu .pw-menu-dentro-de {
    display: block;
    font-size: 11px;
    color: var(--pw-gray-light, #8592A3);
    font-weight: 400;
}

/* ==== Nivel 3: mas indentado, 13px, vinieta anclada a la guia ==== */
body.pw-sneat .main__menu .dropdown-menu .dropdown-menu {
    margin: 0 0 2px 18px;
    border-left: 1px solid var(--pw-border-soft);
}

body.pw-sneat .main__menu .dropdown-menu .dropdown-menu > li > a {
    font-size: 13px;
    padding: 5px 8px;
    margin-left: 12px;
    position: relative;
}

body.pw-sneat .main__menu .dropdown-menu .dropdown-menu > li > a::before {
    content: "";
    position: absolute;
    left: -16px; /* centrada sobre el border-left del ul (margin 12 + padding 8 aprox) */
    top: 50%;
    margin-top: -2.5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #B0BAC5;
}

body.pw-sneat .main__menu .dropdown-menu .dropdown-menu > li.active > a::before {
    background: var(--pw-accent);
}

/* ==== Caret propio de subniveles (inyectado por el JS) ==== */
body.pw-sneat .main__menu .pw-subcaret {
    margin-left: auto;
    padding: 2px 4px;
    cursor: pointer;
    color: #8592A3;
    font-size: 11px;
    line-height: 1;
}

body.pw-sneat .main__menu .pw-subcaret .bi {
    transition: transform 0.2s ease;
    display: inline-block;
}

body.pw-sneat .main__menu li.pw-open > a .pw-subcaret .bi {
    transform: rotate(180deg);
}

body.pw-sneat .main__menu li.dropdown-submenu.pw-open > a {
    color: var(--pw-accent);
}

/* ==== Headers de grupo (li.title): mayusculas tenues ==== */
body.pw-sneat .main__menu li.title {
    background-color: transparent;
    width: auto; /* pisa el width con calc invalido de main.css */
    color: #8592A3;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 18px 16px 6px 28px;
    margin: 0;
    cursor: pointer;
}

body.pw-sneat .main__menu li.title:hover {
    color: var(--pw-text-strong);
}

/* Toggle de grupo: chevron fino en lugar de +/- circulo.
   Se re-dibuja el glyph por CSS sin tocar el JS (main_menu.js
   sigue swapeando fa-minus-circle / fa-plus-circle). */
body.pw-sneat .main__menu li.title .fa {
    float: right;
    margin: 2px 0 0;
    font-size: 11px;
    color: #B0BAC5;
}

body.pw-sneat .main__menu li.title .fa-minus-circle::before {
    content: "\f077"; /* fa-chevron-up */
}

body.pw-sneat .main__menu li.title .fa-plus-circle::before {
    content: "\f078"; /* fa-chevron-down */
}

/* ==== Item bloqueado por plan (candado) ==== */
body.pw-sneat .main__menu li.blocked .fa-lock {
    color: #B0BAC5;
}

/* ==== Footer Configuracion: hermano flex FUERA del <ul> scrolleable
   (lo reubica sneat_sidebar.js al iniciar — ver ese archivo). Al ser un
   item normal del flex column de .main__left-content, con flex-shrink:0
   queda siempre pegado al pie real, determinístico, sin importar el
   contenido de arriba ni el alto de pantalla, y SIN moverse al
   scrollear la lista (porque ya no es descendiente del elemento que
   scrollea). ==== */
body.pw-sneat #top-menu-configuracion {
    flex-shrink: 0;
    margin: 0;
    list-style: none;
    background-color: #FFFFFF;
    border-top: 1px solid var(--pw-border-soft);
    padding-top: 10px;
    padding-bottom: 10px;
}

/* El link replica el estilo de "Items nivel 0" de arriba: al sacar el
   <li> del <ul class="main__menu">, deja de matchear los selectores
   ".main__menu > li > a" — sin esto el ítem quedaría sin estilo. */
body.pw-sneat #top-menu-configuracion > a {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 14px;
    padding: 9px 14px;
    border: 0 none;
    border-radius: 8px;
    color: var(--pw-text-strong);
    font-size: 14px;
    line-height: 1.4;
    transition: none;
}

body.pw-sneat #top-menu-configuracion > a:hover,
body.pw-sneat #top-menu-configuracion > a:focus {
    background-color: rgba(67, 89, 113, 0.06);
    color: var(--pw-text-strong);
    text-decoration: none;
}

body.pw-sneat #top-menu-configuracion .main__icon {
    font-size: 17px;
    color: var(--pw-gray-light);
}

/* Efecto de rotacion del icono al hacer hover (main.css lo define
   scopeado a ".main__menu ...", que deja de aplicar una vez que el
   <li> sale del <ul>; se replica aca para no perder el detalle). */
body.pw-sneat #top-menu-configuracion .main__icon-effect--rotation .main__icon {
    display: inline-block;
    transition: transform 2.0s ease;
    line-height: 1;
    margin: 0;
}

body.pw-sneat #top-menu-configuracion .main__icon-effect--rotation:hover .main__icon {
    transform: rotate(360deg);
}


/* page-content.css */

.page-content__form-search {
    background-color: #FFFFFF;
}

/* ---------------------------------------------------------------------------*/

.page-content__tab-header {
    padding: 20px 20px 16px 20px;
    background-color: #FFFFFF;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
}

.page-content__tab-header-content {
    line-height: 18px;
}

.page-content__tab-header-title {
    display: inline;
    font-size: 16px;
    font-weight: bold;
}
    
.page-content__tab-header-subtitle {
    float: right;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 767px) {
    .page-content__tab-header-subtitle {
        float: none;
        text-align: left;
    }
}  

/* ---------------------------------------------------------------------------*/

.page-content__panel {
    background-color: #FFFFFF;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 20px;
}

.page-content__panel--border-full {
    border: 1px solid #E3E3E3;
}

.page-content__panel--border-none {
    border: 0 none;
}

.page-content__panel--border-top {
    border-top: 1px solid #E3E3E3;    
}

.page-content__panel--border-bottom {
    border-bottom: 1px solid #E3E3E3;    
}

.page-content__panel--border-left {
    border-left: 1px solid #E3E3E3;
}

.page-content__panel--border-right {
    border-right: 1px solid #E3E3E3;
}



#pw-form-cupon .add-on {
    height: 30px;
    line-height: 2;
}


/* page-content__table.css */

.page-content__table {
    background-color: #FFFFFF;
    border: 1px solid #BFC7CE;
    border-radius: 0px;
    border-collapse: separate;
}

.page-content__table-header {
    height: 30px;
    background-color: #f1f1f1;    
}

.page-content__table-header--actions {
    width: 1%;
}

.page-content__table-header--multiple-actions {
    width: 3%;
    text-align: center !important;
}

.page-content__table-header--sort:hover,
.page-content__table-header--selected {
    background-color: #d0e1f2;
}

.page-content__table-header--right {
    text-align: right !important;
}

.page-content__table-header--center {
    text-align: center !important;
}

.page-content__table-header--sort {
    cursor: pointer;
    color: #0088CC;
}

.page-content__table-sort-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 16px;
}

.page-content__table-header--right .page-content__table-sort-icon {
    left: 6px;
    right: auto;
}

.page-content__table thead th {
    position: relative;
}

.page-content__table thead th,
.page-content__table thead td {
    font-size: 12px !important;
    vertical-align: middle;
}

.page-content__table th {
    padding: 4px 8px;
}

.page-content__table td {
    padding: 4px;
}

.page-content__table tbody tr:hover {
    background-color: #F9F9F9;
}

/*.page-content__table tbody tr:last-child td {
    border-bottom: 1px solid #ddd;
}*/

.page-content__table-cell-multiple-actions {
    text-align: center !important;
}

.page-content__table-cell--left {
    text-align: left !important;
}

.page-content__table-cell--center {
    text-align: center !important;
}

.page-content__table-cell--right {
    text-align: right !important;
}

.page-content__table-cell-actions {
    text-align: right !important;
}

.page-content__table-text--muted {
    font-size: 12px;
    color: #AAAAAA;
    font-weight: normal;
}

.page-content__table-actions {
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 10px;
}

.table-actions--top {
    text-align: right;
}

.table-actions__select {
    width: 140px;
    margin-bottom: 0px;
}

.table-actions__select-page-size {
    width: 100%;
}

.table-actions__select-action {
    margin-right: 10px;
}

.table-actions__select-data {
    margin-right: 10px;
}

button.table-actions__button-action {
    width: 40px;
    height: 40px;
    padding: 0px;
    font-size: 12px; 
    float: right;
}

.page-content__table tbody .btn-group > .btn {
    width: 38px;
    height: 38px;
    line-height: 40px;
    padding: 0px;
}

.page-content__table tbody .btn-group > button.btn {
    width: 40px;
    height: 40px;
}

@media (max-width: 767px) {
    
    .table-actions--top {
        display: none;
    }
    
    .page-content__table-header--multiple-actions {
        display: none;
    }
    .page-content__table-select-multiple-action {
        display: none;
    }
    .page-content__table-button-multiple-action	{
        display: none;
    }
    .page-content__table-cell-multiple-actions-checkbox {
        display: none;
    }
    .page-content__table-cell-multiple-actions {
        display: none;
    }
    .page-content__table-foot-row-multiple-actions {
        display: none;
    }
    
    .table-actions--top {
        text-align: center;
    }
    .table-actions__select-action {
        width: 100%;
        margin-bottom: 6px;
    }
    .table-actions__select-data--group {
        width: 100%;
        margin-bottom: 6px;
    }
    .table-actions__button-action {
        float: none;
    }
}

.table-actions .pagination ul > li > a {
    margin: 0px;
    padding: 9px 14px;
}

/* PRODUCTOS ---------------------------------------------------------------- */

.catalogo .page-content__table-actions {
    display: flex;
    flex-direction: row;    
}

.catalogo .table-actions--top {
    justify-content: end;
}

/* 
40px es el ancho del bot�n, entonces el espacio libre que queda hay que 
repartirlo entre 2 selects.
*/
.catalogo .table-actions__select-action,
.catalogo .table-actions__select-data {
    width: calc( (100% - 40px) / 2 );
}

.catalogo .table-actions__button-action {
    flex-shrink: 0;
}


/* page-content__form.css */

.page-content__form {
    /* Clase CSS para el <div> contenedor del <form> */
    margin: 0;
    padding: 0;
}

.page-content__form .form-actions {
    border-top: 0 none;
    padding-top: 0;
}

/* Clase CSS para el <form> */
.form {
    margin: 0;
}

/* Clases CSS para el contenido del <form> */
.form__block {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.form__block-title {
    font-size: 14px;
    margin-top: 0;
}

.form__block-item {
    margin-bottom: 10px;
}

.form__block-items .form__block-item:last-child {
    margin-bottom: 0px;
}

.form__block-item label.checkbox, 
.form__block-item label.radio {
    /* evitar que los tags labels se estiren al 100% de la columna */
    display: table; 
}

.form__block-label {
    font-weight: bold;
    font-size: 14px;
}

.form__block .control-label {
    font-size: inherit;
}

.form__block #tabsItemContenidoIdioma {
    margin-bottom: 0;
}

.form__block .tab-pane {
    padding-bottom: 0;
}

.form__block .button-toggle {
    margin-top: 0;
}

.form__block .primera_foto {
    border: 1px solid #CCCCCC;
    height: auto;
}

.form__block .primera_foto .plus {
    color: #BBBBBB;
    font-size: 20px;
    position: absolute;
    bottom: 9px;
    right: 5px;
}

.form__block .primera_foto:hover .plus {
    color: #DDDDDD;
}

.form__block .primera_foto .plus-container-no-image {
    position: relative;
    width: 80px;
    margin: auto;
}

.form__block .primera_foto .plus-container-with-image {
    position: relative;
}

.form__block .primera_foto .plus-container-with-image .plus {
    bottom: 5px;
}


/* page-content__form-search.css */

.form-search__advanced select,
.form-search__advanced input[type=text] {
    height: 20px !important;
}

@media (max-width: 767px) {
    .form-search select {
        margin-bottom: 5px;
    }
}

.form-search button {
    outline: 0 none;
}

.form-search__search-bar {
    position: relative;
    width: 100%;
}

.form-search__search-bar input {
    margin-bottom: 0;
    padding-left: 40px;
    padding-right: 40px;
}

.form-search__simple {
    display: flex;
    flex-direction: row;
}

.form-search__simple-left {
    display: flex;
    width: 100%;        
}

.form-search__simple-right {
    display: flex;
    margin-left: 20px;
}    

.form-search__advanced {
    padding-top: 10px;
}

.form-search__advanced fieldset {
    border: 1px solid #E6E6E6;
    margin: 0 !important;
    padding-bottom: 6px !important;
}

.form-search__button-simple {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 0 none;
    background-color: transparent;
    box-shadow: none;
}

#formBuscar #btnFiltros {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0 none;
    background-color: transparent;
    box-shadow: none;
}

/*#formBuscar #btnFiltros {
    width: 40px;
    height: 40px;
    padding: 0;
}*/

.form-search__button-advanced {
    width: 80px;
    height: 31px;
    padding: 0 !important;
    margin-left: 4px;
}

@media (min-width: 767px) and (max-width: 1530px) {
    .form-search__button-advanced {
        width: 31px;
    } 
    .form-search__button-advanced span {
        display: none;
    }        
}

.form-search__button-clear {
    width: 31px;
    height: 31px;
    padding: 0 !important;    
}


#formBuscar .col-button-clear {
    text-align: right;
}


/* page-routes.css */

.page-routes {
    font-size: 18px;
}

/* El icono del primer breadcrumb (modulo) quedaba pegado al borde
   izquierdo de la card de contenido -- componente compartido por TODO
   el panel (html/main/header.php), asi que el fix va aca y no por
   modulo. Scopeado a SNEAT: en clasico este breadcrumb con iconos no
   se usa (rama $page_routes vs. el <h4> de abajo), pero por las dudas
   se acota para no arriesgar el layout clasico. */
body.pw-sneat .page-routes {
    padding-left: 4px;
}

.page-routes__icon {    
    margin-right: 5px;
}

.page-routes__separator {
    font-size: 20px;
    margin-left: 5px;
    margin-right: 5px;
    line-height: 1;
    vertical-align: bottom;
}

/* page-footer.css */

.main-right__page-footer--with-border {
    border-top: 1px solid #DDDDDD;
    padding-top: 20px;
}

/* offcanvas.css */

#pw_offcanvas_panel {
    display: none;
}

.pw-offcanvas-divider .nav-item {
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #2c5d8f;
}

.hc-offcanvas-nav .nav-container, 
.hc-offcanvas-nav .nav-wrapper, 
.hc-offcanvas-nav ul {
    background: #282828;
}

.hc-offcanvas-nav li.nav-close a, 
.hc-offcanvas-nav li.nav-back a {
	background: #1a1a1a;
	border-top: 1px solid #36383B;
	border-bottom: 1px solid #36383B;
}

.hc-offcanvas-nav a, 
.hc-offcanvas-nav .nav-item {
	background: rgba(0,0,0,0);
	border-bottom: 1px solid #36383B;
}

.hc-offcanvas-nav a[href]:not([href="#"]) > span.nav-next {
	border-left: 1px solid #36383B;
}

.hc-offcanvas-nav li.blocked .fa-lock {
    position: absolute;
    top: 18px;
    right: 18px;
    font-size: 16px;    
}

.hc-offcanvas-nav .nav-item .main__icon {
    margin-right: 10px;
}

.hc-offcanvas-nav .nav-item .main__icon--meta {
    vertical-align: middle;
}

/* navbar.css */

.nav {
    margin-bottom: 0px;
}

.navbar {
    box-shadow: 0 0.46875rem 2.1875rem rgba(4,9,20,.03), 0 0.9375rem 1.40625rem rgba(4,9,20,.03), 0 0.25rem 0.53125rem rgba(4,9,20,.05), 0 0.125rem 0.1875rem rgba(4,9,20,.03)
}

.navbar .brand { padding: 5px 0 0 20px; }

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
    margin-right: 0px;
    margin-left: 0px;
    margin-bottom: 0px;
    z-index: 800; /* menos del default, para que no quede por encima de los popovers de la ayuda */
}

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle, 
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle, 
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    background-color: transparent;
}

.navbar-inverse .nav > li > a {
    color: #FFFFFF;
}

.navbar-inverse .nav .active > a,
.navbar-inverse .nav .active > a:hover,
.navbar-inverse .nav .active > a:focus {
    color: #fff;
    background-color: transparent;
    box-shadow: none;
}

.navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
    border-top-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
}

.navbar .dropdown-menu > li > a:hover, 
.navbar .dropdown-menu > li > a:focus, 
.navbar .dropdown-submenu:hover > a, 
.navbar .dropdown-submenu:focus > a {
    background-color: #3b82f6;
    background-image: none;
}

.navbar li.bootstro-highlight {
    padding-left: 10px;
    padding-right: 10px;
}

/*
Cuando en una pantalla chica est� activo y abierto el men� collapse, bootstrap
le pone una altura fija que hace que cuando se abren los submen�es aparezcan cortados.
Forzando la altura a que sea autom�tica, se muestra el men� completo.
*/
.collapse.in {
    height: auto !important;
}

.pw-navbar-small {
    /*margin: 0;*/ 
    padding: 10px 0px 10px 0px !important;   
    background-color: #3b82f6; 
    font-size: 14px; 
}    

.pw-navbar-small > .nav > li {
    padding-top: 6px;
    padding-bottom: 6px;
    margin-right: 10px;
}

.pw-navbar-small > .nav > li > a {
    color: #FFFFFF;
    font-size: 16px;
    margin: 0px;
    padding: 0px;
}

.pw-navbar-small > .nav > li > .btn {
    padding-left: 10px;
    padding-right: 10px;
    background-image: none;
    border-radius: 0px;
}

@media (max-width: 980px) {
    #top-menu-container {
        display: none;
    }
}

#top-menu-boton {
    position: static;
    box-sizing: border-box;
    border: 0 none;
    width: 56px;    
    height: 34px;
    padding: 2px 0px;    
    background-color: transparent;
    color: #ffffff;    
    font-size: 30px;
    text-align: center;    
}

.pw-navbar-small .nav {
    width: 100%;
}

.pw-navbar-small #top-menu-logo-webered {
    padding-top: 2px;
    padding-bottom: 0px;
    margin-left: 12px;
    margin-right: 24px;
}

#top-menu-logo-webered svg {
    width: auto;
    height: 25px;
}

.pw-navbar-small #top-menu-sitio {
    background-color: #FFFFFF;
    padding: 6px 12px;
    border-radius: 6px;
}

.pw-navbar-small #top-menu-sitio a {
    color: #3b82f6;
    text-shadow: none;
}

.pw-navbar-small #top-menu-sitio .marketplace_icon {
    vertical-align: text-top;
}
.pw-navbar-small #top-menu-sitio a:hover .marketplace_icon .st0 {
    fill: #A0DDFA;
}

.bootstro-highlight .marketplace_icon .st0 {
    fill: #000000;
}

#top-menu-tareas-avance,
#top-menu-novedades,
#top-menu-sitio,
#top-menu-usuario,
#top-menu-ayuda
{
    float: right;
    margin-left: 12px;
}

#top-menu-usuario {
    width: 230px;
}

#top-menu-ayuda
{
    margin-right: 12px;
}

.pw-navbar-small #top-menu-sitio .btn-info:hover,
.pw-navbar-small #top-menu-sitio .btn-info:active,
.pw-navbar-small #top-menu-sitio .btn-info:focus {
    background-color: #2f96b4;
}

#top-menu > li > a,
#top-menu-2 > li > a {
    padding: 10px;
}

#top-menu-usuario .dropdown-menu > li > a {
    padding: 5px 10px;
}

#top-menu-usuario .dropdown-menu > li > a .main__icon {
    margin-right: 5px;
}

/*
El pull-right que tiene el top-menu-2 hace que los dropdowns internos se abran
hacia la izquierda porque tienen left: auto, en lugar de a la derecha que ser�a
lo correcto.
Reseteando el valor left como si no estuviera pull-right se consigue que se 
abran correctamente.
*/
#top-menu-2.pull-right > li > .dropdown-menu .dropdown-menu, 
#top-menu-2.nav > li > .dropdown-menu.pull-right .dropdown-menu
{
    left: 100%;
    right: auto;
}

#top-menu li.blocked {
    position: relative;
}

#top-menu li.blocked span {
    margin-right: 20px;
}

#top-menu li.blocked .fa-lock {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 16px;
}

.dropdown-menu > li > a > img
{
    margin-top: -5px;
    max-height: 18px;
}

.pw-navbar-small .pw-icon {
    color: #FFFFFF;
    font-weight: bold;
}

@media (max-width: 979px) {
    
    .pw-navbar-small #top-menu-logo-webered {
        margin-left: 0px;
    }    
    
    #top-menu-usuario {
        display: none;
    }
    
}

@media (max-width: 600px) {
    
    #top-menu-logo-webered {
        display: none;
    }
    
}

@media (max-width: 500px) {
        
    #top-menu-ayuda {
        display: none;
    }
    
}

@media (max-width: 400px) {
    
    #top-menu-sitio {
        /*float: none;
        display: inline-block;*/
        margin-left: 0px;
    }
    
}

/* El toggle de UI ya no se oculta en pantallas chicas: pasa a modo compacto
   (solo icono). Las reglas responsive estan junto al resto de sus estilos,
   en pw-panel.css. */


.navbar-inverse #navbar-top-notif.navbar-inner {
    background-color: #333;
    background-image: none;
    background-repeat: no-repeat;
    color: #FFFFFF;
    min-height: auto;
}

#navbar-top-notif .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* Barra de notificaciones superior */
.webered-alert-bar {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    padding-right: 40px; /* espacio para el bot�n cerrar */
    border-radius: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
    background: #2c3e50;
    position: relative; /* para poder posicionar el bot�n dentro */
}


/* Colores por tipo de alerta: sobrescriben el fondo base de la barra */
.webered-alert-bar.is-trial {
    background: linear-gradient(90deg, #2ecc71, #27ae60);
}

.webered-alert-bar.is-alert {
    background: linear-gradient(90deg, #f39c12, #d35400);
}

.webered-alert-bar.is-critical {
    background: linear-gradient(90deg, #e67e22, #e74c3c);
}

.webered-alert-bar.is-expired {
    background: linear-gradient(90deg, #c0392b, #8e2b22);
}


/* Contenedor del mensaje + acciones:
   - Desktop: fila, mensaje + botones a la derecha, todo centrado
   - Mobile: lo sobreescribimos m�s abajo a columna */
.webered-alert-bar__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;  /* centra el conjunto mensaje+botones */
    flex-wrap: wrap;
    text-align: center;
    gap: 6px;
}

/* Mensaje centrado */
.webered-alert-bar__message {
    margin: 0;
    padding: 0 8px;
    text-align: center;
    flex: 0 1 auto;
}

/* Acciones (botones, fecha, etc.) a la derecha del texto */
.webered-alert-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start; /* se ubican a continuaci�n del mensaje */
    gap: 6px;
}

.webered-alert-bar__date {
    color: rgba(255, 255, 255, 0.9);
    font-weight: normal;
    padding: 4px 10px;
}

/* Bot�n cerrar: solo �cono, fijo arriba a la derecha */
.webered-alert-bar__close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 16px; /* tama�o del �cono &times; */
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    opacity: 0.9;
}

.webered-alert-bar__close:hover,
.webered-alert-bar__close:focus {
    outline: none;
    opacity: 1;
}

/* Si a�n existe por markup, lo escondemos por si acaso */
.webered-alert-bar__close-text {
    display: none;
}

/* Botones de llamada a la acci�n dentro de la barra */
.cta-button-bar {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;

    /* SIEMPRE fondo blanco */
    background: #ffffff !important;
    color: #2c3e50 !important; /* valor por defecto si no hay clase de estado */
    border: 1px solid rgba(255, 255, 255, 0.9) !important;

    white-space: nowrap;
    box-shadow: none;
}

/* Hover gen�rico: casi blanco, se nota el cambio pero sigue muy claro */
.cta-button-bar:hover,
.cta-button-bar:focus {
    background: #fdfdfd !important;
    text-decoration: none;
}

/* Colores por tipo de alerta: texto y borde combinan con el fondo de la barra */
.webered-alert-bar.is-trial .cta-button-bar {
    color: #1e8449 !important;   /* verde oscuro */
    border-color: #1e8449 !important;
}

.webered-alert-bar.is-alert .cta-button-bar {
    color: #af5a0a !important;   /* naranja oscuro */
    border-color: #af5a0a !important;
}

.webered-alert-bar.is-critical .cta-button-bar {
    color: #c0392b !important;   /* rojo anaranjado */
    border-color: #c0392b !important;
}

.webered-alert-bar.is-expired .cta-button-bar {
    color: #7b241c !important;   /* rojo oscuro */
    border-color: #7b241c !important;
}

/* Hover por tipo de barra: tinte MUY suave del color principal, siempre claro */
.webered-alert-bar.is-trial .cta-button-bar:hover,
.webered-alert-bar.is-trial .cta-button-bar:focus {
    background: rgb(188, 255, 217) !important;
}

.webered-alert-bar.is-alert .cta-button-bar:hover,
.webered-alert-bar.is-alert .cta-button-bar:focus {
    background: rgb(246, 226, 193) !important;
}

.webered-alert-bar.is-critical .cta-button-bar:hover,
.webered-alert-bar.is-critical .cta-button-bar:focus {
    background: rgb(246, 207, 202) !important;
}

.webered-alert-bar.is-expired .cta-button-bar:hover,
.webered-alert-bar.is-expired .cta-button-bar:focus {
    background: rgb(244, 194, 189) !important;
}

/* Ajustes responsivos para pantallas chicas */
@media (max-width: 767px) {
    .webered-alert-bar {
        padding: 8px 10px;
        padding-right: 40px; /* mantenemos espacio para el bot�n */
    }

    /* En mobile: mensaje arriba, botones debajo, ambos centrados */
    .webered-alert-bar__content {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .webered-alert-bar__message {
        flex: 0 1 auto;
        width: 100%;
        margin-bottom: 2px;
    }

    .webered-alert-bar__actions {
        width: 100%;
        justify-content: center;
        margin-left: 0;   /* ya no los empujamos a la derecha */
    }

    /* El bot�n cerrar sigue absolute en la esquina superior derecha */
}


/* menu-barra-superior.css */

/* Estilos personalizados para la barra superior del panel de control */

/* Estilos para el avance de tareas */
.pw-menu-tareas-avance .pw-menu-tareas-avance-link {
    position: relative;
}

.pw-menu-tareas-avance .pw-menu-tareas-avance-porcentaje {
    font-size: 12px;
    margin-left: 5px;
    background-color: #fff;
    padding: 2px 4px;
    border-radius: 6px;
}

/* Men�s con icono y texto */
.pw-menu-icon-with-text a {
    padding: 10px 12px !important;
}

.pw-menu-icon-with-text a i {
    font-size: 18px;
    margin-right: 5px;
}

/* Ocultar texto en pantallas peque�as, mostrar solo icono */
@media (max-width: 768px) {
    .pw-menu-icon-with-text .hidden-phone {
        display: none !important;
    }
    
    .pw-menu-tareas-avance .pw-menu-tareas-avance-link span {
        display: none;
    }
    
    .pw-menu-tareas-avance .pw-menu-tareas-avance-link strong {
        display: inline !important;
        margin-left: 0;
    }
}

/* Men� de usuario mejorado */
.pw-menu-usuario .dropdown-menu {
    min-width: 220px;
    padding: 5px 0;
}

.pw-menu-usuario-email a {
    cursor: default !important;
    background: transparent !important;
    padding: 8px 15px !important;
    pointer-events: none;
}

.pw-menu-usuario-email a:hover {
    background: transparent !important;
    color: inherit !important;
}

.pw-menu-usuario-email a small {
    font-size: 11px;
}

.pw-menu-usuario .dropdown-menu li:not(.pw-menu-usuario-email) a {
    padding: 8px 15px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/*.pw-menu-usuario .dropdown-menu li:not(.pw-menu-usuario-email) a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #333 !important;
}*/

.pw-menu-usuario .dropdown-menu li:not(.pw-menu-usuario-email) a i {
    margin-right: 8px;
    width: 16px;
    text-align: center;
}

/* Animaci�n para el porcentaje de tareas en hover */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.pw-menu-tareas-avance:hover strong {
    animation: pulse 0.5s ease-in-out;
}

/* Tooltips mejorados */
.navbar .nav > li > a[title] {
    position: relative;
}



#top-menu-usuario:before {
    background-color: #ffffff5c;
    content: "";
    height: 22px;
    left: -12px;
    position: absolute;
    width: 1px;
}

#top-menu-sitio .main__icon--enlace-externo {
    font-size: 14px;
}


/* buttons.css */

.btn {
    padding-top: 9px;
    padding-bottom: 9px;
    background-image: none;    
    border-radius: 6px;
}

.btn-primary {
    background-color: #3b82f6;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #498cfb;
}

.btn-info {
    color: #3b82f6;
    border: 2px solid #3b82f6;
    background-color: #FFFFFF;
    padding-top: 8.2px;
    padding-bottom: 8.2px;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    color: #3b82f6;
    border: 2px solid #3b82f6;
    background-color: #d0e1f2;
}

.btn-info[disabled],
.btn-info[disabled]:hover {
    color: #638df0;
    border: 2px solid #b8dde8;
    background-color: #b8dde8;
}


.btn-empty {
    width: 38px;
    height: 38px;
    line-height: 40px;
    padding: 0px;
    background-color: #f5f5f5;
    background-image: none;
}

.btn-empty:hover {
    width: 38px;
    height: 38px;
    line-height: 40px;
    padding: 0px;
    background-color: #f5f5f5;
    background-image: none;
    z-index: 0 !important;
}

.btn-small {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 16px;
}



@media (max-width: 550px) {
    .form-actions .btn {
        margin-bottom: 5px;
    }
}

@media (max-width: 450px) {
    #btnCancelar {
        display: none;
    }
}

.btnMostrarFormBuscar {
    display: none;
    padding: 0;
    margin: 0px 0px 20px 0px;
}

@media (max-width: 600px) {
    .btnMostrarFormBuscar {
        margin: 0px 0px 20px 10px;
    }
}

.button-bar--right .btnMostrarFormBuscar {
    float: left;
    margin: 4px 0px;
}

@media (max-width: 767px) {
    .form-buscar-ocultable {
        display: none;
    }
    .btnMostrarFormBuscar {
        display: inline;
    }
}

@media (max-width: 320px) {
    .btnMostrarFormBuscar {
        display: block;
        width: 100%;
        text-align: left;
    }
}

.pw-tutorial-button {
    position: fixed;
    right: -94px;
    top: 18%;
    /* Sin z-index propio el boton quedaba en el contexto raiz con z-index:auto
       (o sea 0) y cualquier elemento posicionado con z-index:1 lo tapaba: el
       badge "Habilitado" del banner de bienvenida (.pw-cuenta-welcome__badge)
       le pasaba por encima. 1030 lo pone arriba de la barra superior (800), del
       menu lateral (799) y del contenido, y debajo del popover del propio tour
       (100000) y de los modales, que si deben taparlo. */
    z-index: 1030;
    font-size: 16px;
    line-height: 20px;
    /* Violeta SNEAT. El fallback cubre el modo clasico, donde el token puede
       no estar definido. */
    background-color: var(--pw-accent, #696CFF);
    color: #FFFFFF;
    border: 0 none;
    padding: 10px;
    box-shadow: 0 2px 10px 0 rgba(105, 108, 255, 0.4);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

.pw-tutorial-button .fa {
    font-size: 20px;
    margin-right: 10px;
    float: left;
}

.pw-tutorial-button:hover {
    background-color: var(--pw-accent-hover, #5a5fe0);
    right: 0px;
    -webkit-transition: right 0.5s 0s ease;
    -moz-transition: right 0.5s 0s ease;
    -o-transition: right 0.5s 0s ease;
    transition: right 0.5s 0s ease;
}


.btn-listado-externo,
.btn-popup-externo {
    border: 0 none;
    padding: 0px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    margin-left: 6px;
    outline: none;
    box-shadow: none;
}

.btn-listado-externo:focus,
.btn-popup-externo:focus,
.btn-listado-externo:active,
.btn-popup-externo:active,
.btn-listado-externo:hover,
.btn-popup-externo:hover {
    border: 0 none;
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

form .pw_openai_popup_abrir,
form .pw_openai_popup_abrir:active,
form .pw_openai_popup_abrir:focus {
    padding-top: 0;
    padding-bottom: 0;
    font-size: 12px;
    text-shadow: none;   
    outline: none;
    
    /* Aplica un gradiente de colores al texto del link */
    background: linear-gradient(90deg, #6a11cb, #2575fc); /* Degradado de morado a azul */
    -webkit-background-clip: text; /* Clip del fondo al texto para navegadores Webkit */
    -webkit-text-fill-color: transparent; /* Hace el texto transparente para mostrar el gradiente */
    text-decoration: none; /* Quita el subrayado */
    font-weight: bold; /* Texto en negrita */
    transition: opacity 0.3s ease; /* Suaviza el efecto hover */
    
    /* Opcional: Asegura compatibilidad con m�s navegadores */
    background-clip: text;
    color: transparent;
}

form .pw_openai_popup_abrir:hover {
    opacity: 0.8; /* Reduce la opacidad al pasar el mouse */
}

form .pw_openai_popup_abrir[disabled] {
    color: inherit;
    background: none;
    -webkit-background-clip: inherit;
    -webkit-text-fill-color: inherit;
}


/* table.css */

/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : 26 abr. 2022, 10:57:40
    Author     : cjnim
*/



/* tabs.css */

.nav-tabs > li > a {
    line-height: 26px;
    font-size: 15px;
    border: 1px solid #DDDDDD;
    background-color: #F5F5F6;
    outline: none;
}

.nav-tabs > li.active > a {
    color: #3b82f6;
    cursor: pointer;
    box-shadow: 2px -4px 6px -2px #CCCCCC;    
}

.nav-tabs > .active > a, 
.nav-tabs > .active > a:hover, 
.nav-tabs > .active > a:focus {
    cursor: pointer;
}

.tab-pane {
    margin-bottom: 0px;   
}

.tab-pane .well {
    padding: 10px;
}

.tab-content > .active, .pill-content > .active {
    padding: 18px;
    background-color: #FFFFFF;
}

/* tabs que contienen otros tabs */
/*.tab-pane .tab-pane {
    padding: 18px;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;     
}*/

#tabsContents {
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

#tabsContentsItem.tab-content {
    margin-top: 1px;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

#tabsItem {
    margin-bottom: -1px;
    background-color: #FFFFFF;
    border-right: 1px solid #DDDDDD;
}

/* 
form de productos: el border-top est� aplicado en pw_form_header, entonces cuando
ese div est� presente no hay que aplicar border-top en #tabsItem.
*/
.pw_form_header + #tabsItem {
    border-top: 0 none;
}

#tabsItemContenidoIdioma {
    margin-bottom: 20px;
}

#tabsItemContenidoIdioma .tab-pane {
    border-left: 0 none;
    border-right: 0 none;
    border-bottom: 0 none;
    padding-left: 0px;
    padding-right: 0px;
}

#tabsItemContenidoIdioma #descripcion_corta_1,
#tabsItemContenidoIdioma #descripcion_corta_2 {
    height: 80px;
}

form.panel #tabsFormIdiomasBody { /* form preguntas frecuentes */
    border-top: 1px solid #DDDDDD;
    border-left: 1px solid #DDDDDD;
    border-right: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}

@media (min-width: 980px) and (max-width: 1009px) {
    
    #tabs li > a {
        border-bottom: 0px none;
    }    
}

@media (max-width: 809px) {
    
    #tabs {
        margin-bottom: 0px;
        border-bottom: 1px solid #ddd;
    }

    #tabs li {
        margin-bottom: 0px;
    }
    
    #tabs li > a {
        border-bottom: 0px none;
    }     
    
    .catalogo--list #tabsContents {
        border-top: 0px none;
    }    
    
    .catalogo--form .pw_form_header {
        border-top: 0px none;
    }
    
}

@media (max-width: 679px) {
    
    .catalogo--form #tabsItem li > a {
        border-bottom: 0px none;
    }

    .catalogo--form #tabsContentsItem.tab-content {
        margin-top: 2px;
    }
    
}


.tab-pane .cfg-ayuda__item {
    border: 1px solid #DDDDDD;
    background-color: #F5F5F6;
    padding: 20px;
    margin-bottom: 0px;
}

.tab-pane .cfg-ayuda__item h4 {
    margin-top: 0px;
}

@media (max-width: 767px) {
    .tab-pane .cfg-ayuda {
        padding-left: 0;
        padding-right: 0;
    }    
    .tab-pane .cfg-ayuda__item {
        background-color: transparent;
    }
}

/* pagination.css */

.pagination {
    margin-bottom: 0px;
}

.pagination ul {
    box-shadow: none;
}

.pagination ul > li > a, .pagination ul > li > span {
    padding: 12px 14px;
    margin-top: 3px;
}

.row-fluid .pagination {
    margin-top: 0px;
}

.pagination-with-input input {
    box-sizing: border-box; 
    margin: 0; 
    height: 30px; 
    width: 80px;
    text-align: center;
}

.pagination-with-input a.pagination-control {
    box-sizing: border-box; 
    margin: 0 !important; 
    padding: 9px 12px !important;
}

.pagination-with-input a.pagination-control:hover {
    background-color: #F5F5F5;
}

.pagination-input-container {
    float: left; 
    margin: 0 !important; 
    padding: 4px !important; 
}

.pagination-title {
    padding: 5px 5px 5px 0px;
}

.pagination-max {
    vertical-align: middle;
}

.pagination-button {
    margin-left: 6px; 
    border: 0 none; 
    color: #3b82f6;
    padding: 5px 10px;
}

.pagination-button:hover {
    background-color: #DDDDDD;
}

.pagination-icon {
    font-style: normal;
    vertical-align: middle;
}

/* hierarchy-tree.css */

/* https://two-wrongs.com/draw-a-tree-structure-with-only-css.html */

.hierarchy-tree, 
.hierarchy-tree ol, 
.hierarchy-tree li {
     position: relative;
}

.hierarchy-tree ol {
    list-style: none;
    margin-left: 2px;
    padding-left: 16px;
}

.hierarchy-tree li::before, 
.hierarchy-tree li::after {
    content: "";
    position: absolute;
    left: -12px;
}

.hierarchy-tree li::before {
    border-top: 1px solid #AAAAAA;
    top: 9px;
    width: 8px;
    height: 0;
}

.hierarchy-tree li::after {
    border-left: 1px solid #AAAAAA;
    height: 100%;
    width: 0px;
    top: 2px;
}

.hierarchy-tree ol > li:last-child::after {
    height: 8px;
}

/* sin l�nea en el nivel exterior: */

.hierarchy-tree > ol {
    margin-left: 0px;
    padding-left: 0px;
}

.hierarchy-tree > ol > li::after {
    border-left: 0 none;
}

.hierarchy-tree > ol > li::before {
    border-top: 0 none;
}

/* 
----------------------------------------
l�neas en listados hechos con Nestable
---------------------------------------- 
*/

.hierarchy-tree.dd ol {
    margin-left: 0;
}

.hierarchy-tree.dd li::before, 
.hierarchy-tree.dd li::after {
    left: -20px;
}

.hierarchy-tree.dd li::after {
    height: 120%;
}

.hierarchy-tree.dd li::before {
    width: 14px;
    top: 24px;
}

.hierarchy-tree.dd ol > li:last-child::after {
    height: 22px;
}


/* sortable.css */

.sortable-chosen {
    background-color: #EEEEEE;
    box-shadow: 10px 10px 10px #AAAAAA;
}

.sortable-ghost {
    outline: 2px dashed #000000;
    box-shadow: none;
}

.sortable-chosen .btn-toolbar {
    display: none;
}

.mod-fotos #thumbnail-image-list li,
.mod-videos #thumbnail-image-list li{
    margin: 0px 10px 10px 0px;
    border: 1px solid #E3E3E3;
    background-color: #F5F5F5;
}

.mod-fotos #thumbnail-image-list.ordenable li:hover,
.mod-videos #thumbnail-image-list.ordenable li:hover {
    cursor: grab;
}

.mod-fotos #thumbnail-image-list li:hover .btn-toolbar,
.mod-videos #thumbnail-image-list li:hover .btn-toolbar {
    display: block;
}

.mod-fotos #thumbnail-image-list.no-ordenable li,
.mod-videos #thumbnail-image-list.no-ordenable li {
    height: 108px;
    overflow: hidden;
}

.mod-fotos #thumbnail-image-list.no-ordenable .thumbnail,
.mod-videos #thumbnail-image-list.no-ordenable .thumbnail {
    height: 105px;
}

.mod-fotos #thumbnail-image-list .thumbnail,
.mod-videos #thumbnail-image-list .thumbnail {
    border: none;
    box-shadow: none;
    padding: 5px;
    position: relative;
    height: 130px;
}

.mod-fotos #thumbnail-image-list img,
.mod-videos #thumbnail-image-list img {
    max-height: 100%;
}		

.mod-fotos #thumbnail-image-list .no-activo img,
.mod-videos #thumbnail-image-list .no-activo img {
    opacity: 0.5;
}

.mod-fotos #thumbnail-image-list .btn-toolbar,
.mod-videos #thumbnail-image-list .btn-toolbar {
    display: none;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    left: 0px;
    bottom: 0px;
    padding: 5px 0px;
}

.mod-videos #thumbnail-image-list .btn,
.mod-fotos #thumbnail-image-list .btn {
    font-size: 14px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
}

/* ================================================================== */
/* SNEAT — Dropzone de carga de archivos (Fine Uploader + mod_fotos  */
/*          + mod_archivos). CSS-only, sin romper modo clásico.       */
/* ================================================================== */

body.pw-sneat .qq-uploader {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    margin-bottom: 16px;
}

/* Input file invisible inyectado por Fine Uploader: extenderlo a todo el botón.
   Fine Uploader usa right:0;top:0;font-size:118px — en un botón full-width solo
   cubre la zona derecha. Con left:0;width/height:100% cubre todo el dropzone. */
body.pw-sneat .qq-upload-button > input[type="file"] {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Zona clickeable → ocupa todo el ancho como un dropzone */
body.pw-sneat .qq-upload-button {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 160px;
    border: 2px dashed #C0C4CC;
    border-radius: 12px;
    background: #FAFBFC !important;
    background-image: none !important;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
    color: inherit !important;
    text-shadow: none !important;
    box-shadow: none !important;
    font-size: inherit !important;
    font-weight: normal !important;
    text-align: center;
    padding: 24px 16px !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden !important;
}

body.pw-sneat .qq-upload-button:hover,
body.pw-sneat .qq-upload-button-hover {
    border-color: var(--pw-accent);
    background-color: rgba(105, 108, 255, 0.04) !important;
}

/* PW_Uploader.setHideButtonOnLoad(true) oculta el boton via JS (inline
   style="display:none") cuando ya existe un archivo cargado. El selector
   generico de arriba usa !important y le ganaba a ese estilo inline,
   mostrando el dropzone encima de la miniatura existente. El wrapper
   .pw-uploader recibe la clase .disabled desde PHP en ese mismo caso
   (ver mod_configuracion/diseno/logo/form_logo.php y similares), asi
   que la usamos para re-ocultar el boton sin depender de timing de JS. */
body.pw-sneat .pw-uploader.disabled .qq-upload-button {
    display: none !important;
}

/* Contenido interno del dropzone (inyectado vía JS) */
body.pw-sneat .pw-dropzone__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

body.pw-sneat .pw-dropzone__icon {
    font-size: 40px;
    color: var(--pw-accent);
    display: block;
    margin-bottom: 10px;
}

body.pw-sneat .pw-dropzone__main {
    font-size: 15px;
    font-weight: 600;
    color: #384551;
    margin: 0 0 4px;
}

body.pw-sneat .pw-dropzone__or {
    font-size: 13px;
    color: #697A8D;
    margin: 0 0 6px;
}

body.pw-sneat .pw-dropzone__link {
    color: var(--pw-accent);
    text-decoration: underline;
}

body.pw-sneat .pw-dropzone__hint {
    font-size: 11px;
    color: #8592A3;
    margin: 0;
    letter-spacing: 0.4px;
}

/* Overlay durante drag-and-drop */
body.pw-sneat .qq-upload-drop-area {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10;
    border: 2px dashed var(--pw-accent) !important;
    border-radius: 12px;
    background: rgba(105, 108, 255, 0.08) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--pw-accent);
    font-size: 16px;
    font-weight: 600;
    text-shadow: none;
    font-family: inherit;
}

body.pw-sneat .qq-upload-drop-area span {
    position: static;
    margin-top: 0;
}

/* Listado de uploads en progreso */
body.pw-sneat .qq-upload-list {
    margin-top: 12px;
}

/* ================================================================== */
/* SNEAT — Módulo Videos: input URL + botón                           */
/* ================================================================== */

body.pw-sneat .mod-videos #formUploadVideo {
    background: #FAFBFC;
    border: 2px dashed #C0C4CC;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

/* .row-fluid wraps the input — make it grow */
body.pw-sneat .mod-videos #formUploadVideo > .row-fluid {
    flex: 1;
    margin-left: 0;
    margin-right: 0;
}

body.pw-sneat .mod-videos #formUploadVideo .span12 {
    width: 100% !important;
}

body.pw-sneat .mod-videos #formUploadVideo .control-group {
    margin-bottom: 0;
}

body.pw-sneat .mod-videos #formUploadVideo label.control-label {
    font-weight: 600;
    color: #384551;
    font-size: 13px;
    margin-bottom: 4px;
    display: block;
    float: none;
    width: auto;
    text-align: left;
}

body.pw-sneat .mod-videos #formUploadVideo .controls {
    margin-left: 0;
}

body.pw-sneat .mod-videos #formUploadVideo #video_url {
    width: 100% !important;
    border-radius: 8px;
    border: 1px solid #C0C4CC;
    padding: 8px 12px;
    font-size: 14px;
    height: 38px;
    box-sizing: border-box;
}

body.pw-sneat .mod-videos #formUploadVideo #btnUploadVideo {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #fff;
    border-radius: 8px;
    height: 38px;
    padding: 0 16px;
    white-space: nowrap;
    flex-shrink: 0;
}

body.pw-sneat .mod-videos #formUploadVideo #btnUploadVideo:hover {
    background-color: var(--pw-accent-hover);
    border-color: var(--pw-accent-hover);
}

/* ================================================================== */
/* SNEAT — Grid de thumbnails (fotos y videos)                        */
/* ================================================================== */

body.pw-sneat .mod-fotos #thumbnail-image-list li,
body.pw-sneat .mod-videos #thumbnail-video-list li {
    border: 1px solid var(--pw-border-card) !important;
    background-color: #FFFFFF !important;
    border-radius: 8px;
    overflow: hidden;
}

body.pw-sneat .mod-fotos #thumbnail-image-list .btn-toolbar,
body.pw-sneat .mod-videos #thumbnail-video-list .btn-toolbar {
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    border-radius: 0 0 7px 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 0;
}

body.pw-sneat .mod-fotos #thumbnail-image-list .btn,
body.pw-sneat .mod-videos #thumbnail-video-list .btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px !important;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50% !important;
    transition: background 0.15s;
}

body.pw-sneat .mod-fotos #thumbnail-image-list .btn:hover,
body.pw-sneat .mod-videos #thumbnail-video-list .btn:hover {
    background: rgba(255,255,255,0.2) !important;
}

/* Mensaje "Arrastrar para ordenar" */
body.pw-sneat .txt_info_ordenar_fotos {
    font-size: 13px;
    color: #697A8D;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ================================================================== */
/* SNEAT — Tabla de archivos (#tabla-archivos)                        */
/* ================================================================== */

body.pw-sneat #tabla-archivos {
    border-collapse: collapse;
    width: 100%;
    margin-top: 8px;
}

body.pw-sneat #tabla-archivos thead th {
    background-color: var(--pw-thead-bg, #F5F5F6);
    color: #697A8D;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--pw-border-soft);
    border-top: 0 none;
    padding: 10px 12px;
}

body.pw-sneat #tabla-archivos tbody td {
    border-top: 1px solid var(--pw-border-soft);
    border-left: 0 none;
    border-right: 0 none;
    padding: 10px 12px;
    color: #384551;
    font-size: 13px;
    vertical-align: middle;
}

body.pw-sneat #tabla-archivos tbody tr:hover td {
    background-color: rgba(67, 89, 113, 0.04);
}

body.pw-sneat #tabla-archivos.table-bordered {
    border: 0 none;
}

/* ================================================================== */
/* SNEAT — Botones de acción en #tabla-archivos                       */
/* Mismo estilo flat/icon que el patrón global de listados SNEAT.     */
/* ================================================================== */

body.pw-sneat #tabla-archivos .btn {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 16px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #697A8D;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #tabla-archivos .btn:hover,
body.pw-sneat #tabla-archivos .btn:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

body.pw-sneat #tabla-archivos .btn.btn-danger,
body.pw-sneat #tabla-archivos .btn.btnBorrar {
    color: #697A8D;
}

body.pw-sneat #tabla-archivos .btn.btn-danger:hover,
body.pw-sneat #tabla-archivos .btn.btnBorrar:hover,
body.pw-sneat #tabla-archivos .btn.btn-danger:focus,
body.pw-sneat #tabla-archivos .btn.btnBorrar:focus {
    background: rgba(255, 62, 62, 0.08) !important;
    color: #FF3E3E;
}

body.pw-sneat #tabla-archivos .btn-group {
    display: flex;
    gap: 2px;
}

/* ================================================================== */
/* SNEAT — Fix scroll horizontal en tabs de archivos, fotos, videos   */
/* El row-fluid usa float, lo que causa overflow en el tab-pane.      */
/* ================================================================== */

body.pw-sneat #tabItemArchivos,
body.pw-sneat #tabItemFotos,
body.pw-sneat #tabItemVideos {
    overflow-x: hidden;
}

body.pw-sneat #tabItemArchivos > .row-fluid,
body.pw-sneat #tabItemFotos > .row-fluid,
body.pw-sneat #tabItemVideos > .row-fluid {
    display: block;
    width: 100%;
    margin-left: 0;
}

body.pw-sneat #tabItemArchivos .span12,
body.pw-sneat #tabItemFotos .span12,
body.pw-sneat #tabItemVideos .span12 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
}

@media (max-width: 767px) {
    
    .mod-fotos #thumbnail-image-list.ordenable li,
    .mod-videos #thumbnail-image-list.ordenable li {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .mod-fotos #thumbnail-image-list .thumbnail,
    .mod-videos #thumbnail-image-list .thumbnail {
        height: auto;
    }
    
    .mod-fotos #thumbnail-image-list .btn-toolbar,
    .mod-videos #thumbnail-image-list .btn-toolbar {
        display: block;
    }
    
    .mod-fotos #thumbnail-image-list .btnEditarImagenDatos,
    .mod-videos #thumbnail-image-list .btnEditarImagenDatos {
        margin-right: 15px;
    }    
    
    .mod-fotos #thumbnail-image-list .btnEditarImagenCrop,
    .mod-videos #thumbnail-image-list .btnEditarImagenCrop {
        display: none;
    }   
    
    .mod-fotos #thumbnail-image-list .btnBorrarImagen,
    .mod-videos #thumbnail-image-list .btnBorrarImagen {
        margin-left: 15px;
    }  
}


/* counters.css */

.counter {
    float:left; 
    width:100px; 
    margin-right: 10px;
    background-color: #FFFFFF;
    text-align: center;
    border-top: 2px solid #999999;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
}

.counter__body {
    padding: 4px; 
    line-height: 1; 
}

.counter__values,
.counter__spinner {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 4px;
}

.counter__caption {
    font-size: 13px;
}

.counter--clickable {
    cursor: pointer;
}

.counter--clickable:hover {
    background-color: #DDDDDD;
}

.counter--red {
    border-top-color: #b94a48;    
}

.counter--red .counter__values,
.counter--red .counter__spinner {
    color: #b94a48;    
}

.counter--green {
    border-top-color: #468847;    
}

.counter--green .counter__values,
.counter--green .counter__spinner {
    color: #468847;    
}

.counter--blue {
    border-top-color: #3a87ad;    
}

.counter--blue .counter__values,
.counter--blue .counter__spinner {
    color: #3a87ad;    
}

.counter--yellow {
    border-top-color: #c09853;    
}

.counter--yellow .counter__values,
.counter--yellow .counter__spinner {
    color: #c09853;    
}

@media (max-width: 767px) {
    .counter {
        margin-bottom: 10px;
    }
}



/* form_buscar.css */

.list-ordenar fieldset,
.form-crear-item fieldset,
.form-variante fieldset,
.form-ordenar fieldset,
.form-buscar fieldset,
.form-configurar fieldset,
#formBuscar fieldset,
.form-otras-acciones fieldset {
    border: 1px solid #BFC7CE;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px;
}

.form-crear-item legend,
.form-variante legend,
.form-ordenar legend,
.form-buscar legend,
.form-configurar legend,
#formBuscar legend,
.form-otras-acciones legend {
    font-size: 12px;
    font-weight: bold;
    line-height: 1px;
    padding: 0px 6px;
    border: 0px;
    margin: 0px;
    width: auto;
} 

.form-crear-item label,
.form-variante label,
.form-ordenar label,
.form-buscar label,
.form-configurar label:not(.checkbox),
#formBuscar label,
.form-otras-acciones label {
    font-size: 12px;
} 

.form-crear-item input,
.form-crear-item select,
.form-variante input,
.form-variante select,
.form-ordenar select,
.form-buscar select,
.form-configurar select {
    margin-bottom: 0px;
}

.form-buscar-botones {
    padding-top: 20px;
}

.form-buscar-botones .btn-toolbar {
    margin-top: 0px;
    margin-bottom: 0px;
}

@media (max-width: 767px) {
    .form-otras-acciones .btn {
        width: 30%;
        display: inline-block;
        margin-top: 0px;
        margin-right: 20px;
    }
    .form-otras-acciones .btn:last-child {
        margin-right: 0px;
    }
}

@media (max-width: 460px) {
    .form-otras-acciones .btn {
        margin-bottom: 10px;
        width: 100%;
    }
    .form-otras-acciones .btn:last-child {
        margin-bottom: 0px;
    }
}

/* emarketing.css */

/* EMARKETING */

@media (max-width: 980px) {
    #pw-popup-emarketing.modal {
        left: 35%;
    } 
}

@media (max-width: 800px) {
    #pw-popup-emarketing.modal {
        width: 100%;
    } 
}

@media (max-width: 767px) {
    #pw-popup-emarketing.modal {
        left: 0%;
    } 
    #pw-popup-emarketing-facebook-config {
        left: 0px;
        margin-left: 0px;
        width: 100%;
    }
}  

/* mapa.css */

@media(max-width: 624px) {
    .marcas-listado__activo {
        display: none;
    }
    .marcas-listado__descripcion {
        display: none;
    } 
}

@media(max-width: 480px) {
    .marcas-listado__direccion {
        display: none;
    }
}

/* ==================================================================== */
/* SNEAT - Modulo Mapa / Ubicaciones (mod_mapa.php)                     */
/*                                                                      */
/* body.pw-sneat.mapa--list / .mapa--form                               */
/* Listado de marcas: solo Activo=switch (sin destacado) + columna      */
/* especial "Centrar" (radio que fija el centro del mapa). No hay       */
/* filtro/busqueda en este modulo. La tabla reusa .publicaciones-listado */
/* (thead/filas/hover globales). ASCII puro.                            */
/* ==================================================================== */

/* Columna Descripcion: nunca se muestra en el listado (a pedido del
   usuario, con captura). Ademas de la mejora de UX (el listado no
   necesita mostrar el texto largo de la ubicacion), era la columna mas
   ancha de la tabla -- ocultarla de entrada, en vez de solo en mobile
   (la regla clasica de arriba, @media max-width:624px, se deja intacta),
   resuelve tambien gran parte del overflow horizontal que hacia
   "desaparecer" el icono de Borrar en anchos intermedios (ver mas abajo). */
body.pw-sneat.mapa--list .marcas-listado__descripcion {
    display: none;
}

/* Titulo: no partir palabras cortas en mitad de renglon ("Centra"/"l").
   El baseline global (sneat-responsive.css) fuerza word-break:break-word +
   overflow-wrap:anywhere en TODAS las celdas de tabla SNEAT (evita que un
   texto largo sin espacios reviente el ancho) -- en esta columna angosta
   (20%) eso partia palabras normales de tamano razonable. Se vuelve al
   wrap normal (corta en espacios); una palabra realmente mas ancha que la
   columna desborda en vez de partirse, preferible a "Centra/l". */
body.pw-sneat.mapa--list .marcas-listado__titulo {
    word-break: normal;
    overflow-wrap: normal;
}

/* Direccion: truncar a 1 linea con "..." + tooltip nativo con el texto
   completo (title, agregado en tabla.php) -- a pedido del usuario, antes
   una direccion larga ocupaba 8+ renglones y desalineaba el resto de la
   fila (Activo/Centrar/Titulo/Color quedaban centrados verticalmente
   contra una celda gigante). display:block necesario porque la celda es
   <td> (inline por default no respeta max-width+ellipsis). */
body.pw-sneat.mapa--list .marcas-listado__direccion-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Alineacion: con la direccion ahora en 1 linea todas las filas miden
   igual, pero se deja explicito (arriba, no centrado) para que quede
   prolijo tambien en mobile con Titulo/Direccion apilados en 2+ lineas. */
body.pw-sneat.mapa--list .page-content__table td {
    vertical-align: top;
    padding-top: 12px;
}

/* Columnas de controles (nunca envuelven a varias lineas, a diferencia
   de Titulo/Direccion de arriba): centradas verticalmente contra la
   ALTURA REAL de la fila, no pegadas arriba. Con vertical-align:top
   parejo para toda la fila, un titulo corto (1 linea) hacia que el
   switch/radio/pill/lapiz quedaran ~1-3px mas arriba que el propio
   texto (el line-height de la fuente deja aire arriba del glifo que
   una caja de controles de altura fija no tiene) -- imperceptible en
   una fila de 1 sola linea de texto, pero evidente igual (reportado
   con captura, cruces rojos comparando Titulo/checkbox contra Centrar/
   Color/lapiz). Con :middle quedan centrados sin importar si Titulo/
   Direccion terminan en 1, 2 o mas lineas. */
body.pw-sneat.mapa--list .page-content__table td.page-content__table-cell-multiple-actions,
body.pw-sneat.mapa--list .page-content__table td.marcas-listado__activo,
body.pw-sneat.mapa--list .page-content__table td.marcas-listado__centro,
body.pw-sneat.mapa--list .page-content__table td.marcas-listado__color,
body.pw-sneat.mapa--list .page-content__table td.page-content__table-cell-actions {
    vertical-align: middle;
    padding-top: 0;
}

/* Botonera editar/borrar: sacado el placeholder invisible entre ambos
   (ver tabla.php, setActionsSingleRow sin 'empty'=>true) -- con eso solo
   ya quedaban practicamente pegados por el margin-left:-1px de Bootstrap
   2 en .btn-group; se deja un gap chico a proposito en vez de 0/-1px
   para que no se superpongan los bordes circulares pero sigan "juntos"
   como pidio el usuario. */
body.pw-sneat.mapa--list .page-content__table-cell-actions .btn-group {
    display: inline-flex;
    gap: 4px;
}
body.pw-sneat.mapa--list .page-content__table-cell-actions .btn-group > .btn {
    margin-left: 0 !important;
}

/* Evita scroll horizontal cuando .main{display:table} expande el contenido */
body.pw-sneat.mapa--list .main,
body.pw-sneat.mapa--form .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Toolbar de acciones ==== */
body.pw-sneat.mapa--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Boton Agregar inyectado en el toolbar: empujar a la derecha */
body.pw-sneat.mapa--list .mapa-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat.mapa--list .mapa-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat.mapa--list .mapa-actions-buttons .btnCrear:hover,
body.pw-sneat.mapa--list .mapa-actions-buttons .btnCrear:focus,
body.pw-sneat.mapa--list .mapa-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

/* Radio "Centrar" con color de marca */
body.pw-sneat.mapa--list .pw_table_action_centrar {
    accent-color: var(--pw-accent);
    cursor: pointer;
    /* margin-top:0 + vertical-align:top: sin esto el radio nativo queda
       ~7-9px mas abajo que el inicio real del texto de Titulo/Direccion
       en la misma fila (padding-top:12px de la celda, ver regla de
       arriba en este archivo), aunque ambas celdas compartan el mismo
       vertical-align:top -- eso alinea la CELDA, no el control nativo
       adentro (que trae su propio centrado de linea). Mismo ajuste que
       ya resuelve el switch Activo (siguiente regla). */
    margin-top: 0;
    vertical-align: top;
}

/* Switch "Activo": mismo componente button-toggle global de siempre.
   El componente base (js/button-toggle/toggle.css) trae margin-top:7px
   pensado para su contexto clasico (alinearlo con texto en una celda
   de tabla de otro modulo) -- en esta tabla, con vertical-align:top +
   padding-top:12px en la celda (ver arriba), ese margen extra lo
   corria mas abajo que Titulo/Direccion/Centrar, desalineando toda la
   fila (mismo gotcha ya documentado en widgets.css para el nestable de
   Widgets). Se resetea a 0. */
body.pw-sneat.mapa--list .marcas-listado__activo .button-toggle {
    margin-top: 0;
}

/* Etiqueta de color como pill SNEAT */
body.pw-sneat.mapa--list .marcas-listado__color .etiqueta {
    display: inline-block;
    width: auto;
    min-width: 46px;
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Marca inactiva: titulo y etiqueta de color en gris (pedido explicito del
   usuario -- distinto del criterio global "solo atenua el fondo" de
   pw-panel.css:2160, que en SNEAT deja el color de texto sin tocar). La
   fila ya llega con .pw_disabled_row (Table.php la agrega sola leyendo
   data-item_disabled, y toggle.js la mantiene sincronizada al togglear el
   switch Activo) -- no hace falta JS propio, solo el CSS. El fondo de la
   etiqueta (.rojo/.azul/.verde, mod_mapa/includes_css.php, sin scope a
   body.pw-sneat) queda pisado por mayor especificidad, sin necesitar
   !important. */
body.pw-sneat.mapa--list tr.pw_disabled_row .marcas-listado__titulo,
body.pw-sneat.mapa--list tr.pw_disabled_row .marcas-listado__titulo a {
    color: var(--pw-gray-light);
}

body.pw-sneat.mapa--list tr.pw_disabled_row .marcas-listado__color .etiqueta {
    background-color: #D9DEE3;
    color: #8B95A1;
}

/* ==================================================================== */
/* SNEAT - Formulario de alta/edicion de ubicacion (mapa--form)         */
/* El form es plano (sin .well): id #frmAltaModif, class .panel.         */
/* En SNEAT el markup se reencuadra (contenido.php) en 3 cards con       */
/* titulo+icono: Ubicacion / Apariencia / Contenido. El <form> pasa a    */
/* ser un contenedor transparente y cada .mapa-form__card es la card.    */
/* ==================================================================== */

body.pw-sneat.mapa--form #frmAltaModif {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
}

/* Card por seccion */
body.pw-sneat.mapa--form .mapa-form__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Los controles de texto van al 100% de su columna (neutraliza el ancho fijo
   de .span12 de Bootstrap 2 fuera de .row-fluid). No afecta a los inputs
   ocultos del switch/swatches (son checkbox/radio). */
body.pw-sneat.mapa--form .mapa-form__card input[type="text"],
body.pw-sneat.mapa--form .mapa-form__card textarea,
body.pw-sneat.mapa--form .mapa-form__card select {
    width: 100%;
    box-sizing: border-box;
}

/* Titulo de seccion con icono badge */
body.pw-sneat.mapa--form .mapa-form__section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 0 0 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.mapa--form .mapa-form__section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 14px;
}

/* Labels de los controles */
body.pw-sneat.mapa--form #frmAltaModif .control-label,
body.pw-sneat.mapa--form #frmAltaModif label {
    color: var(--pw-text-strong);
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 6px;
}
body.pw-sneat.mapa--form .mapa-form__hint {
    color: #A5AAB3;
    font-weight: 400;
    font-size: 12px;
}

/* Separacion vertical entre filas dentro de una card */
body.pw-sneat.mapa--form .mapa-form__card .b5-row + .b5-row {
    margin-top: 14px;
}

/* Fila de coordenadas: alinear el boton mapa al pie de los inputs */
body.pw-sneat.mapa--form .mapa-form__coords {
    align-items: flex-end;
}
body.pw-sneat.mapa--form .mapa-form__map-btn-col {
    display: flex;
    align-items: flex-end;
}

/* Boton "mapa": secundario SNEAT con icono */
body.pw-sneat.mapa--form #frmAltaModif .mapa-form__map-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: var(--pw-control-height, 38px);
    background-color: var(--pw-accent-soft);
    background-image: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--pw-accent);
    font-weight: 600;
    box-shadow: none;
    text-shadow: none;
    margin: 0 0 10px 0;
}
body.pw-sneat.mapa--form #frmAltaModif .mapa-form__map-btn:hover,
body.pw-sneat.mapa--form #frmAltaModif .mapa-form__map-btn:focus {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

/* El switch Activo/Inactivo se saca SOLO del modal -- eso se administra
   siempre desde el listado (visible sin importar el tamaño de pantalla,
   a diferencia de un modal que puede no estar abierto). No se toca
   .mapa--form (el form de pagina completa clasico-adyacente, fuera de
   alcance de este pedido). El checkbox real sigue en el DOM con su
   "checked" inicial (poblado por mapa_modal.js al abrir en modo
   edicion) y sigue viajando en el submit -- display:none no excluye un
   campo del POST del form. */
body.pw-sneat #modal-mapa-marca .mapa-modal__field:has(#modal-marca-activo) {
    display: none;
}

/* ---- Switch de Activo (checkbox estilado como toggle, verde como el listado) ---- */
body.pw-sneat #modal-mapa-marca .mapa-switch,
body.pw-sneat.mapa--form .mapa-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}
body.pw-sneat #modal-mapa-marca .mapa-switch input,
body.pw-sneat.mapa--form .mapa-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
body.pw-sneat #modal-mapa-marca .mapa-switch__track,
body.pw-sneat.mapa--form .mapa-switch__track {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    border-radius: 999px;
    background-color: #d9dee3;
    transition: background-color .2s ease;
    flex: 0 0 auto;
}
body.pw-sneat #modal-mapa-marca .mapa-switch__thumb,
body.pw-sneat.mapa--form .mapa-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    transition: transform .2s ease;
}
body.pw-sneat #modal-mapa-marca .mapa-switch.is-on .mapa-switch__track,
body.pw-sneat.mapa--form .mapa-switch.is-on .mapa-switch__track {
    background-color: #2dcb70;
}
body.pw-sneat #modal-mapa-marca .mapa-switch.is-on .mapa-switch__track .mapa-switch__thumb,
body.pw-sneat.mapa--form .mapa-switch.is-on .mapa-switch__track .mapa-switch__thumb {
    transform: translateX(20px);
}
body.pw-sneat #modal-mapa-marca .mapa-switch input:focus ~ .mapa-switch__track,
body.pw-sneat.mapa--form .mapa-switch input:focus ~ .mapa-switch__track {
    box-shadow: 0 0 0 3px rgba(45, 203, 112, .18);
}
body.pw-sneat #modal-mapa-marca .mapa-switch__text,
body.pw-sneat.mapa--form .mapa-switch__text {
    color: #566A7F;
    font-weight: 500;
    font-size: 13px;
    margin: 0;
}

/* ---- Selector de color como swatches ---- */
/* El estado seleccionado se estila sobre .__chip via `input:checked ~ .chip`
   (combinador de hermano: 100% reactivo). No se usa :has() porque este Chrome
   no re-evalua :has(:checked) en cambios dinamicos (solo en el render inicial). */
body.pw-sneat #modal-mapa-marca .mapa-color-swatches,
body.pw-sneat.mapa--form .mapa-color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch,
body.pw-sneat.mapa--form .mapa-color-swatch {
    display: inline-flex;
    cursor: pointer;
    margin: 0;
    user-select: none;
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch input,
body.pw-sneat.mapa--form .mapa-color-swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch__chip,
body.pw-sneat.mapa--form .mapa-color-swatch__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 10px;
    border: 1.5px solid var(--pw-border-input);
    border-radius: 999px;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch__dot,
body.pw-sneat.mapa--form .mapa-color-swatch__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch__name,
body.pw-sneat.mapa--form .mapa-color-swatch__name {
    font-size: 13px;
    font-weight: 600;
    color: #566A7F;
    transition: color .15s ease;
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--rojo  .mapa-color-swatch__dot { background-color: #FB7567; }
body.pw-sneat.mapa--form .mapa-color-swatch--rojo  .mapa-color-swatch__dot { background-color: #FB7567; }
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--azul  .mapa-color-swatch__dot { background-color: #6990FC; }
body.pw-sneat.mapa--form .mapa-color-swatch--azul  .mapa-color-swatch__dot { background-color: #6990FC; }
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--verde .mapa-color-swatch__dot { background-color: #00E54D; }
body.pw-sneat.mapa--form .mapa-color-swatch--verde .mapa-color-swatch__dot { background-color: #00E54D; }

/* Estado seleccionado (chip resaltado por color). La clase .is-checked la
   gestiona un mini-script en contenido.php (rama SNEAT) en el evento change,
   porque este Chrome no re-evalua input:checked ~ ... en cambios dinamicos. */
body.pw-sneat #modal-mapa-marca .mapa-color-swatch.is-checked .mapa-color-swatch__name,
body.pw-sneat.mapa--form .mapa-color-swatch.is-checked .mapa-color-swatch__name {
    color: var(--pw-text-strong);
}
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--rojo.is-checked  .mapa-color-swatch__chip { border-color: #FB7567; background-color: rgba(251, 117, 103, .12); }
body.pw-sneat.mapa--form .mapa-color-swatch--rojo.is-checked  .mapa-color-swatch__chip { border-color: #FB7567; background-color: rgba(251, 117, 103, .12); }
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--azul.is-checked  .mapa-color-swatch__chip { border-color: #6990FC; background-color: rgba(105, 144, 252, .12); }
body.pw-sneat.mapa--form .mapa-color-swatch--azul.is-checked  .mapa-color-swatch__chip { border-color: #6990FC; background-color: rgba(105, 144, 252, .12); }
body.pw-sneat #modal-mapa-marca .mapa-color-swatch--verde.is-checked .mapa-color-swatch__chip { border-color: #00E54D; background-color: rgba(0, 229, 77, .14); }
body.pw-sneat.mapa--form .mapa-color-swatch--verde.is-checked .mapa-color-swatch__chip { border-color: #00E54D; background-color: rgba(0, 229, 77, .14); }
body.pw-sneat #modal-mapa-marca .mapa-color-swatch input:focus ~ .mapa-color-swatch__chip,
body.pw-sneat.mapa--form .mapa-color-swatch input:focus ~ .mapa-color-swatch__chip {
    box-shadow: 0 0 0 3px rgba(105, 92, 255, .14);
}

/* Textarea de descripcion con fondo amarillo tipo nota */
body.pw-sneat.mapa--form #frmAltaModif textarea {
    background-color: #FFF8E1;
    border: 1px solid #EEDFA2;
    border-radius: 8px;
    color: #6E6033;
    box-shadow: none;
}
body.pw-sneat.mapa--form #frmAltaModif textarea:focus {
    background-color: #FFFBEB;
    border-color: #F1C50E;
    box-shadow: 0 0 0 3px rgba(241, 197, 14, 0.18);
    outline: none;
}
body.pw-sneat.mapa--form #frmAltaModif textarea::placeholder {
    color: #BBAA6B;
}

/* ====================================================================
   SNEAT - Modal #modal-mapa-marca (alta/edicion de ubicacion)
   Mismas convenciones que mod_preguntas_frecuentes (#modal-crear-pregunta,
   ver preguntas-frecuentes.css) -- Bootstrap 2 .modal, guardado por AJAX,
   dirty-state con el modal de "cambios sin guardar" de funciones.js. Los
   estilos de switch/swatches ya definidos arriba para mapa--form se
   reusan tal cual (duplicados de scope mas arriba en este archivo).
   ==================================================================== */

body.pw-sneat #modal-mapa-marca {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
    width: 560px;
    margin-left: -280px;
    /* Alto total del modal (header+body+footer) capado al viewport real,
       en vez de calcular el max-height del body a mano restando un
       numero fijo de px para header+footer (calc(94vh - 120px) de abajo,
       ya retirado): ese numero fijo no incluia el padding propio del
       body (box-sizing:content-box lo suma ENCIMA del max-height) y
       quedaba corto contra el alto real del header+footer -- el modal
       se pasaba del viewport en notebooks (pantallas bajas, <700px de
       alto), tapando el boton Guardar del footer. display:flex (solo
       en la regla .in de abajo, NO aca -- ver ese comentario) hace que
       header/footer midan lo que necesiten y el body (flex:1) se lleve
       el resto, con scroll propio si no entra. */
    flex-direction: column;
    max-height: 96vh;
    /* bootstrap.min.css anima ".modal.fade { transition: opacity .3s
       linear, top .3s ease-out }" -- normalmente inofensivo, pero este
       modal tiene un mapa de Google embebido que sigue provocando
       reflow mientras cargan los tiles/el autocomplete, y cada reflow
       reinicia la transicion de "top" antes de que asiente (confirmado
       con getAnimations(): quedaba con playState "running" para
       siempre). Resultado real: el modal terminaba posicionado con un
       "top" a mitad de camino de la animacion en vez del valor final
       de la regla .in de abajo -- se veia salido por arriba del
       viewport. Sacar "top" de la transicion (dejar solo opacity) evita
       el problema de raiz: la posicion se aplica de una sola vez, sin
       nada que interpolar ni reiniciar. */
    transition: opacity 0.3s linear;
}

body.pw-sneat #modal-mapa-marca .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    flex-shrink: 0;
}

body.pw-sneat #modal-mapa-marca .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-mapa-marca .modal-header .mapa-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

body.pw-sneat #modal-mapa-marca .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-mapa-marca .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-mapa-marca .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* overflow-x:hidden explicito: sin esto el navegador trata "auto"
       tambien para el eje horizontal (regla del CSS2.1: si un eje no es
       "visible", el otro deja de serlo tambien) y un desborde de 1px
       (redondeo de sub-pixel, no contenido real cortado) alcanzaba para
       mostrar una scrollbar horizontal ancha e innecesaria. El contenido
       esta pensado en width:100% de la columna, no necesita scroll
       horizontal nunca. */
    overflow-x: hidden;
}

/* Pedido del usuario: "sobra lugar" -- el modal quedaba mas chico que el
   viewport disponible con margenes grandes arriba/abajo. Menos margen
   arriba + modal-body mas alto (arriba) aprovechan mejor la altura real. */
body.pw-sneat #modal-mapa-marca.in {
    top: 2vh;
    margin-top: 0;
    /* display:flex va SOLO aca (scopeado a .in), no en la regla base de
       arriba: #modal-mapa-marca es un selector por ID, con mas
       especificidad que ".modal.hide{display:none}" de bootstrap.min.css
       -- ponerlo en la regla base ganaba SIEMPRE, incluso con el modal
       "cerrado" (sin .in), dejandolo con display:flex + opacity:0
       (invisible pero presente en el layout, top:-154px calculado por la
       transicion detenida). El marcador de Google Maps embebido adentro
       quedaba tapando el checkbox "Seleccionar todo" del listado de
       abajo -- clics ahi no hacian nada porque el click real aterrizaba
       en el <img> del marcador, no en el checkbox (confirmado con
       elementFromPoint(), bug real reportado por el usuario). Con
       display:flex condicionado a .in, el modal vuelve a desaparecer del
       todo (display:none real) cuando esta cerrado. */
    display: flex;
}

/* El dropdown de sugerencias de Places (.pac-container) es un elemento que
   Google inyecta como HERMANO de <body>, con z-index:1000 propio -- por
   debajo del z-index:1050 del modal Bootstrap 2 (#modal-mapa-marca en
   .in), asi que quedaba invisible DETRAS del modal (confirmado en vivo: el
   dropdown existia en el DOM y tenia items reales, pero su rect quedaba
   tapado). No tiene clase propia scopeable a body.pw-sneat (Google no la
   agrega), asi que esta regla es la unica forma de subirlo. */
.pac-container {
    z-index: 1060 !important;
}

body.pw-sneat #modal-mapa-marca .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
    flex-shrink: 0;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pw-accent);
    margin: 20px 0 12px;
}
body.pw-sneat #modal-mapa-marca .mapa-modal__section-title:first-child {
    margin-top: 0;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__idioma-block {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--pw-border-soft);
}
body.pw-sneat #modal-mapa-marca .mapa-modal__idioma-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0 none;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__idioma-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pw-accent);
    margin-bottom: 8px;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__field { margin-bottom: 16px; }

body.pw-sneat #modal-mapa-marca .mapa-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

body.pw-sneat #modal-mapa-marca input[type="text"],
body.pw-sneat #modal-mapa-marca textarea {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}
body.pw-sneat #modal-mapa-marca textarea {
    resize: vertical;
}

body.pw-sneat #modal-mapa-marca input[type="text"]:focus,
body.pw-sneat #modal-mapa-marca textarea:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

body.pw-sneat #modal-mapa-marca input[readonly] {
    background-color: #F8F8FC;
    color: #697A8D;
    cursor: default;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__required {
    color: var(--pw-danger);
    font-size: 12px;
    margin-left: 2px;
}

/* Mapa embebido (reemplaza el popup viejo, ver mapa_modal.js) */
body.pw-sneat #modal-mapa-marca .mapa-modal__map {
    width: 100%;
    height: 260px;
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    margin-top: 10px;
    margin-bottom: 8px;
    background: #F8F8FC;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__map-hint {
    font-size: 12px;
    color: #A5AAB3;
    margin: 0 0 16px;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__coords {
    display: flex;
    gap: 14px;
}
body.pw-sneat #modal-mapa-marca .mapa-modal__coords .mapa-modal__field {
    flex: 1 1 0;
    min-width: 0;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-mapa-marca .mapa-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

body.pw-sneat #modal-mapa-marca .modal-footer .btn-primary,
body.pw-sneat #modal-mapa-marca .modal-footer .btnGuardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-mapa-marca .modal-footer .btn-primary:hover,
body.pw-sneat #modal-mapa-marca .modal-footer .btn-primary:focus,
body.pw-sneat #modal-mapa-marca .modal-footer .btn-primary:active,
body.pw-sneat #modal-mapa-marca .modal-footer .btnGuardar:hover,
body.pw-sneat #modal-mapa-marca .modal-footer .btnGuardar:focus,
body.pw-sneat #modal-mapa-marca .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

@media (max-width: 620px) {
    /* Mismo patron que usa el propio Bootstrap 2 responsive (left/right
       simetricos + width:auto), NO el de margin-left negativo del modal
       base (que asume left:50% -- a este ancho bootstrap-responsive.min.css
       ya pisa "left" a 20px/10px, y como esta regla tiene mayor
       especificidad que esa, mezclar left:50% (heredado) con un
       margin-left en vw quedaba mal calculado y el modal se iba fuera de
       pantalla, confirmado en vivo: x negativo). */
    body.pw-sneat #modal-mapa-marca {
        width: auto;
        left: 16px;
        right: 16px;
        margin-left: 0;
    }
    body.pw-sneat #modal-mapa-marca .mapa-modal__coords {
        flex-direction: column;
        gap: 0;
    }
}



/* tutorial.css */

/* ====================================================================== */
/* Tour guiado del panel (bootstro + popover de Bootstrap 2).             */
/*                                                                        */
/* Dos bloques: el ELEMENTO RESALTADO y el POPOVER.                       */
/* Archivo ASCII puro (el bundle mezcla encodings).                       */
/* Se carga dentro del bundle de PW_PanelDeControl_Css, es decir DESPUES  */
/* de bootstro.min.css y de pw-panel.css: gana los empates sin !important */
/* salvo donde haya que pisar al vendor, que si los usa.                  */
/* ====================================================================== */


/* ====================================================================== */
/* 1. Elemento resaltado                                                  */
/* ====================================================================== */

/*
 * No se le toca NINGUN color al elemento apuntado.
 *
 * bootstro.css lo pinta de blanco (background-color: white + border blanco) y
 * pw-panel.css ademas le forzaba color negro. En la UI moderna la barra
 * superior es violeta con texto blanco, y los hijos ganan por especificidad:
 * quedaba texto blanco sobre fondo blanco y el elemento desaparecia, se veia
 * un recuadro blanco vacio donde deberia estar el menu.
 *
 * En su lugar se lo marca con un anillo. El anillo interior (inset) es el que
 * importa: no lo recorta ningun ancestro con overflow hidden, cosa que si
 * pasaria con un outline o un box-shadow comun dentro del menu lateral, que es
 * position:fixed con overflow:hidden.
 */
/* OJO con position:relative.
   z-index solo surte efecto sobre elementos posicionados, pero forzar
   position:relative sobre uno que ya es position:fixed lo saca de su anclaje al
   viewport y lo manda a donde caiga en el documento. Pasaba con el boton
   flotante de ayuda: al resaltarlo, saltaba ~1600px hacia abajo.
   Por eso el position lo pone tutorial.js (clase pw-tutorial-relative) solo
   cuando el elemento es estatico. */
.bootstro-highlight {
    z-index: 9999;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 none !important;
    border-radius: 8px;
    /* La marca va POR FUERA del elemento, con outline.
       Un anillo inset grueso le come espacio al contenido: en las solapas del
       catalogo la banda blanca se metia en el area del texto y la etiqueta
       quedaba apretada y dificil de leer. El outline no ocupa lugar en el
       layout ni pisa al contenido.
       El offset separa la marca del borde para que respire. */
    outline: 2px solid #696CFF;
    outline-offset: 2px;
    /* Respaldo para contenedores que recortan (el menu lateral es
       position:fixed con overflow:hidden y ahi el outline no se ve): una linea
       blanca fina por dentro, que ademas es la que contrasta contra la barra
       superior violeta y contra el menu oscuro del modo clasico.
       Es de 2px y va pegada al borde, asi que no invade el texto. */
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9),
                0 0 0 5px rgba(105, 108, 255, 0.18);
}


/* ====================================================================== */
/* 2. Popover                                                             */
/* ====================================================================== */

/*
 * Los popovers cuelgan de <body> (container:'body' en bootstro) para no quedar
 * recortados por contenedores con overflow:hidden. El z-index los pone por
 * encima de la barra superior (800) y del menu lateral (799).
 */
.pw_bootstro.popover {
    z-index: 100000;
    padding: 0;
    border: 0 none;
    border-radius: 12px;
    background-color: #FFFFFF;
    box-shadow: 0 12px 34px rgba(16, 24, 40, 0.18),
                0 2px 6px rgba(16, 24, 40, 0.06);
}

.pw_bootstro .popover-inner {
    padding: 0;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

/* --- Titulo ------------------------------------------------------------
   Se le saca el fondo gris de Bootstrap 2. Ademas de verse mejor, evita que
   la flecha (que Bootstrap pinta blanca) desentone cuando el popover sale
   con placement bottom y la flecha apunta contra la franja del titulo. */
.pw_bootstro .popover-title {
    padding: 16px 20px 8px 20px;
    border: 0 none;
    border-radius: 12px 12px 0 0;
    background-color: transparent;
    color: #2F3349;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

/* Contador de pasos: bootstro lo emite como <span class="label label-success">.
   Se lo convierte en una pildora violeta, en lugar del verde de Bootstrap 2. */
.pw_bootstro .popover-title .label,
.pw_bootstro .popover-title .label-success {
    display: inline-block;
    margin-right: 4px;
    padding: 3px 9px;
    border-radius: 20px;
    background-color: rgba(105, 108, 255, 0.12);
    color: #696CFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: none;
    vertical-align: 2px;
}

/* --- Contenido --------------------------------------------------------- */
.pw_bootstro .popover-content {
    padding: 4px 20px 16px 20px;
    color: #4A5072;
    font-size: 15px;
    line-height: 1.6;
}

.pw_bootstro .popover-content p:last-child {
    margin-bottom: 0;
}

.pw_bootstro .popover-content b,
.pw_bootstro .popover-content strong {
    color: #2F3349;
    font-weight: 600;
}

.pw_bootstro .popover-content hr {
    margin: 12px 0;
    border: 0 none;
    border-top: 1px solid #EBEEF4;
}

.pw_bootstro .popover-content small {
    color: #7B8199;
    font-size: 13px;
    line-height: 1.5;
}

.pw_bootstro .popover-content img,
.pw_bootstro .popover-content iframe {
    max-width: 100%;
    border-radius: 8px;
}

.pw_bootstro .popover-content code {
    padding: 2px 5px;
    border: 0 none;
    border-radius: 4px;
    background-color: rgba(105, 108, 255, 0.10);
    color: #696CFF;
    font-size: 13px;
}


/* ====================================================================== */
/* 3. Botonera                                                            */
/* ====================================================================== */

.bootstro-nav-wrapper {
    margin-top: 0;
    padding: 12px 20px 0 20px;
    border-top: 1px solid #EBEEF4;
    overflow: hidden;
}

.bootstro-prev-btn,
.bootstro-next-btn,
.bootstro-finish-btn {
    min-width: 104px;
    height: auto;
    margin: 0 !important;
    padding: 8px 16px !important;
    border: 0 none;
    border-radius: 8px;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}

/* Siguiente: la accion principal. */
.bootstro-next-btn,
.bootstro-next-btn:hover,
.bootstro-next-btn:focus,
.bootstro-next-btn:active {
    background-color: #696CFF;
    color: #FFFFFF;
}

.bootstro-next-btn:hover,
.bootstro-next-btn:focus {
    background-color: #5A5FE0;
}

/* Anterior: secundaria, para que no compita con Siguiente. */
.bootstro-prev-btn,
.bootstro-prev-btn:hover,
.bootstro-prev-btn:focus,
.bootstro-prev-btn:active {
    background-color: rgba(105, 108, 255, 0.12);
    color: #696CFF;
}

.bootstro-prev-btn:hover,
.bootstro-prev-btn:focus {
    background-color: rgba(105, 108, 255, 0.22);
}

/* Cerrar: discreta. Salir del tour no es un error, no hace falta el rojo. */
.bootstro-finish-btn,
.bootstro-finish-btn:hover,
.bootstro-finish-btn:focus,
.bootstro-finish-btn:active {
    min-width: 0;
    padding: 6px 12px !important;
    background-color: transparent;
    color: #7B8199;
    font-size: 13px !important;
}

.bootstro-finish-btn:hover,
.bootstro-finish-btn:focus {
    background-color: #F1F2F6;
    color: #2F3349;
}


/* ====================================================================== */
/* 4. Pie: checkbox de "no volver a mostrar" + Cerrar                      */
/* ====================================================================== */

/* El pie entra en una sola linea: el checkbox a la izquierda y Cerrar a la
   derecha. Antes quedaban apilados en tres renglones porque el wrapper era
   text-align:right y el texto del checkbox no entraba al lado del boton. */
.bootstro-finish-btn-wrapper {
    display: table;
    width: 100%;
    padding: 10px 20px 14px 20px;
    box-sizing: border-box;
    clear: both;
}

.bootstro-finish-btn-wrapper .checkbox {
    display: table-cell;
    width: 100%;
    margin: 0;
    padding: 0;
    color: #7B8199;
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.bootstro-finish-btn-wrapper .bootstro-finish-btn {
    display: table-cell;
    white-space: nowrap;
}

.bootstro-finish-btn-wrapper .checkbox input {
    float: none;
    margin: 0 0 0 4px;
    vertical-align: middle;
}


/* ====================================================================== */
/* 5. Fondo oscuro                                                        */
/* ====================================================================== */

/*
 * bootstro lo deja en opacity .5 sobre negro puro. Se suaviza un poco y se le
 * da el tinte del layout, para que el contraste con el popover no sea tan duro.
 */
div.bootstro-backdrop {
    background-color: #2F3349;
    opacity: 0.45;
    filter: alpha(opacity=45);
}

/* La agrega tutorial.js solo sobre elementos estaticos (ver arriba). */
.bootstro-highlight.pw-tutorial-relative {
    position: relative;
}

/* --- Refuerzo de contraste ---------------------------------------------
   Las agrega tutorial.js SOLO cuando midio que el texto del elemento resaltado
   no llega al minimo legible (ver applyHighlightContrast). No se aplican por
   defecto: la regla general del tour es no tocarle los colores a nada, porque
   pintarlos fue justamente lo que hacia desaparecer elementos enteros.

   El caso que las motivo: las solapas inactivas del catalogo son gris claro a
   proposito (2.93:1, por debajo del minimo de 4.5), y cuando el tour senala una
   de ellas la etiqueta es justo lo que hay que leer. */
.bootstro-highlight.pw-tutorial-contrast-dark,
.bootstro-highlight.pw-tutorial-contrast-dark * {
    color: #2F3349 !important;
}

.bootstro-highlight.pw-tutorial-contrast-light,
.bootstro-highlight.pw-tutorial-contrast-light * {
    color: #FFFFFF !important;
}


/* card.css */

.card {
    /* sin estilos propios, los estilos deben ir en los elementos internos */
}

.card__content {
    /* por si se necesita un contenedor para card__header, card__body y card__footer */
}

.card__header {
    /* contenedor de card__title */
}

.card__body {
    /* contenedor principal de card */
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 14px;    
}

.card__body-section {
    border-bottom: 1px solid #E3E3E3;
    margin-bottom: 6px;
}

.card__body .card__body-section:last-child {
    border: 0 none;
    margin-bottom: 0px;
}

.card__footer {
    /* contenedor para agregar un pie */
}

.card__title {
    font-weight: bold;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 6px;
}

.card__header .card__title {
    padding-left: 10px;    
}

.card__title--inline {
    margin-bottom: 0px;
}

.card__titleIcon, /* dejar de usar titleIcon */
.card__title-icon {
    margin-right: 3px;
}

.card__subtitle {
    
}

.card__text {
    font-size: 14px;
    margin-bottom: 2px;
}

.card__body .card__text:last-child {
    margin-bottom: 0px;
}

.card__link {
    font-size: 14px;
}

/* panel.css */

.panel {
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 14px;
}

.panel--tab {
    border-top-left-radius: 0px;
}

.panel__fieldset {
    margin-bottom: 14px;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

.panel .panel__fieldset:last-child {
    margin-bottom: 0;
    border-bottom: 0 none;    
    padding-bottom: 0px;
}

.panel__legend {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 10px;
    border: 0 none;
}

.panel__fieldset .control-group:last-of-type {
    margin-bottom: 0 !important;
}

.panel legend + .control-group {
    margin-top: 0;
}

.panel__item {
    margin-bottom: 20px;
}

.panel__title {
    font-weight: bold;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 6px;
}

.panel__text {
    font-size: 14px;
    margin-bottom: 2px;
}

.panel__info {
    font-size: 12px;
    font-weight: normal;
    color: #3a87ad;
}

.panel__title--center,
.panel__text--center {
    text-align: center;
}

.panel__title--right,
.panel__text--right {
    text-align: right;
}

.panel__text--small {
    font-size: 12px;
}

.panel__label {
    font-size: 14px;
}

.panel__input {
    font-size: 14px !important;
}

.panel__icon {
    float: left;
    margin-right: 20px;
    font-size: 20px;
    color: #555F78;
}

.panel__link {
    font-size: 14px;
}

.panel--link {
    display: block;
    color: #0088CC;
}

.panel--link:hover,
.panel--link:active,
.panel--link:focus
{
    border: 1px solid #0099CC;
    color: #0099CC;
    text-decoration: none;
    transition: all ease-in 0.2s;
}

.panel .row-fluid:last-child input, 
.panel .row-fluid:last-child textarea, 
.panel .row-fluid:last-child select,
.panel .row-fluid:last-child .control-group {
    margin-bottom: 0px;
}

/* aplicaciones-store.css */

/* ==================================================================== */
/* SNEAT - Tienda de aplicaciones (mod_aplicaciones.php).                */
/*                                                                       */
/* Hero + buscador + tabs de filtro rapido + grid de cards. Todo bajo    */
/* body.pw-sneat: el modo clasico conserva el layout original (2         */
/* columnas Bootstrap 2, sin hero/tabs). El flujo de compra/suscripcion  */
/* (listado/item/body.php, popup_v2) no cambia de markup: aca solo se    */
/* reskinea con las clases que ya existen.                               */
/* Archivo ASCII puro (el bundle mezcla encodings).                      */
/* ==================================================================== */

/* ==== Hero ==== */
body.pw-sneat .app-store-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--pw-accent) 0%, #7367F0 45%, #9E95F5 100%);
    border-radius: 16px;
    padding: 36px 32px;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(115, 103, 240, 0.25);
}

/* Icono decorativo grande, esfumado y recortado por el overflow del hero. */
body.pw-sneat .app-store-hero__deco {
    position: absolute;
    top: 50%;
    right: 36px;
    transform: translateY(-50%) rotate(-12deg);
    font-size: 190px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.16);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(115deg, transparent 0%, #000 55%);
    mask-image: linear-gradient(115deg, transparent 0%, #000 55%);
}

body.pw-sneat .app-store-hero__content {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

@media (max-width: 991px) {
    body.pw-sneat .app-store-hero__deco {
        display: none;
    }
}

body.pw-sneat .app-store-hero__title {
    color: #FFFFFF;
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 8px;
}

body.pw-sneat .app-store-hero__subtitle {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    margin: 0 0 20px;
}

body.pw-sneat .app-store-hero__search {
    position: relative;
    max-width: 420px;
}

body.pw-sneat .app-store-hero__search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #8592A3;
    font-size: 14px;
    pointer-events: none;
}

body.pw-sneat .app-store-hero__search-input {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 6px 16px 6px 40px;
    border: 0 none;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    background-color: #FFFFFF;
    color: #566A7F;
    font-size: 14px;
}

body.pw-sneat .app-store-hero__search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* ==== Tabs de filtro rapido ==== */
body.pw-sneat .app-store-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

body.pw-sneat .app-store-tabs__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pw-text-strong);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.pw-sneat .app-store-tabs__btn:hover {
    border-color: var(--pw-accent);
    color: var(--pw-accent);
}

body.pw-sneat .app-store-tabs__btn--active,
body.pw-sneat .app-store-tabs__btn--active:hover {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

/* ==== Estado vacio (busqueda/filtro sin resultados) ==== */
body.pw-sneat .app-store-empty {
    text-align: center;
    color: #8592A3;
    font-size: 14px;
    padding: 48px 20px;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    margin-bottom: 20px;
}

body.pw-sneat .app-store-empty i {
    display: block;
    font-size: 32px;
    color: #D5DAE0;
    margin-bottom: 10px;
}

/* ==== Grid de cards ====                                              */
/* El PHP sigue armando pares de apps en .row-fluid > .span6 (sin tocar  */
/* la logica); aca se "desarma" ese grid BS2 con display:contents y se   */
/* reemplaza por un CSS grid responsive real.                            */
body.pw-sneat .app-store-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
}

body.pw-sneat .app-store-grid .row-fluid {
    display: contents;
}

/* Bootstrap 2 le pone clearfix (::before/::after con content:"" y
   display:table) a .row-fluid. Con display:contents en la fila, esos
   pseudo-elementos se convierten en items del grid y dejan celdas vacias
   intercaladas. Anularlos para que solo las cards ocupen celdas. */
body.pw-sneat .app-store-grid .row-fluid::before,
body.pw-sneat .app-store-grid .row-fluid::after {
    content: none;
    display: none;
}

body.pw-sneat .app-store-grid .row-fluid > .span6 {
    width: auto !important;
    float: none;
    margin-left: 0;
    display: flex;
}

/* ==== Card ==== */
body.pw-sneat .app-store-grid .app {
    width: 100%;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 22px;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

body.pw-sneat .app-store-grid .app:hover {
    box-shadow: 0 10px 28px rgba(67, 89, 113, 0.16);
    border-color: var(--pw-accent-soft);
    transform: translateY(-2px);
}

body.pw-sneat .app-store-grid .app__header {
    margin-bottom: 14px;
}

/* ==== Cabecera de la card: icono + badges ==== */
body.pw-sneat .app-store-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

body.pw-sneat .app-store-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 22px;
}

body.pw-sneat .app-store-card__icon .app__logo-image {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    object-fit: cover;
}

body.pw-sneat .app-store-card__badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

body.pw-sneat .app-store-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

body.pw-sneat .app-store-badge--installed {
    background: rgba(40, 199, 111, 0.14);
    color: #28C76F;
}

body.pw-sneat .app-store-badge--free {
    background: rgba(255, 159, 67, 0.16);
    color: #FF9F43;
}

/* Boton de configuracion (engranaje): ya viene con markup/handler propio,
   solo se reubica visualmente al lado del titulo. */
body.pw-sneat .app-store-card__config {
    display: inline-block;
    margin-left: 6px;
}

body.pw-sneat .app-store-card__config .app__config-button {
    float: none;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--pw-btn-secondary-bg) !important;
    background-image: none !important;
    border: 1px solid var(--pw-btn-secondary-border) !important;
    color: var(--pw-text-strong);
    box-shadow: none !important;
    text-shadow: none;
}

body.pw-sneat .app-store-card__config .app__config-button:hover {
    background-color: var(--pw-accent-soft) !important;
    border-color: var(--pw-accent) !important;
    color: var(--pw-accent);
}

/* ==== Titulo y descripcion ==== */
body.pw-sneat .app-store-card__title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--pw-text-strong);
}

body.pw-sneat .app-store-card__description {
    color: #697A8D;
    font-size: 13px;
    line-height: 1.6;
    min-height: 60px;
    max-height: 130px;
    overflow: auto;
}

body.pw-sneat .app-store-grid .app__body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* ==== Bloque de plan / CTA (reskin sobre las clases que ya usa el flujo */
/* real de suscripcion en item/body.php; ese archivo NO se toca) ====     */
body.pw-sneat .app-store-grid .app__plan-list {
    border-top: 1px solid var(--pw-divider);
    padding-top: 14px;
    margin-top: auto;
}

/* La card SNEAT es mucho mas angosta que el layout fluido clasico (2      */
/* columnas a lo ancho de la pagina): apilar precio/plan y CTA en vertical */
/* en vez de span8/span4 uno al lado del otro, para que no se corten.      */
body.pw-sneat .app-store-grid .app__plan-list .row-fluid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 !important;
}

body.pw-sneat .app-store-grid .app__plan-list .row-fluid > [class*="span"] {
    width: 100% !important;
    float: none;
    margin-left: 0;
}

body.pw-sneat .app-store-grid .app__plan-description {
    background: var(--pw-accent-soft);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--pw-text-strong);
    box-sizing: border-box;
}

/* Planes/pruebas gratis: tinte verde para reforzar "sin costo". */
body.pw-sneat .app-store-grid .app__plan-description--free-with-button,
body.pw-sneat .app-store-grid .app__plan-description--free-without-button {
    background: rgba(40, 199, 111, 0.10);
}

body.pw-sneat .app-store-grid .plan__select {
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    /*background-image: none;*/
    height: var(--pw-control-height);
}

/* Suscribirse (CTA principal, apps de pago) */
body.pw-sneat .app-store-grid .app__subscription-button,
body.pw-sneat .app-store-grid .plan__button-subscribe {
    background-color: var(--pw-accent) !important;
    background-image: none !important;
    border-color: var(--pw-accent) !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
    padding: 9px 16px;
}

body.pw-sneat .app-store-grid .app__subscription-button:hover,
body.pw-sneat .app-store-grid .app__subscription-button:focus,
body.pw-sneat .app-store-grid .plan__button-subscribe:hover {
    background-color: var(--pw-accent-hover) !important;
    border-color: var(--pw-accent-hover) !important;
}

/* Instalar gratis (CTA principal, apps sin costo) */
body.pw-sneat .app-store-grid .app__plan-free--js {
    background-color: #28C76F !important;
    background-image: none !important;
    border-color: #28C76F !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

body.pw-sneat .app-store-grid .app__plan-free--js:hover {
    background-color: #22b464 !important;
    border-color: #22b464 !important;
}

/* Cancelar suscripcion: outline, no debe competir visualmente con el CTA
   principal de otras cards. */
body.pw-sneat .app-store-grid .plan__button--cancel {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid var(--pw-danger) !important;
    color: var(--pw-danger) !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

body.pw-sneat .app-store-grid .plan__button--cancel:hover {
    background-color: var(--pw-danger-soft) !important;
}

/* "Instalada" (mensaje ya generado por pw_html_aplicacion_mensaje_instalada) */
body.pw-sneat .app-store-grid .app__installed {
    text-align: right;
}

body.pw-sneat .app-store-grid .app__installed .text-success {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(40, 199, 111, 0.14);
    color: #28C76F !important;
    font-size: 12px;
    font-weight: 700;
}

/* ==== Footer: link "Mas informacion" ==== */
body.pw-sneat .app-store-grid .app__footer {
    margin-top: 12px;
    text-align: center;
}

body.pw-sneat .app-store-card__link-info {
    color: #8592A3;
    font-size: 12px;
    text-decoration: none;
}

body.pw-sneat .app-store-card__link-info:hover {
    color: var(--pw-accent);
    text-decoration: underline;
}

/* ==================================================================== */
/* Modales (Bootstrap 2) del flujo de configuracion y suscripcion: solo   */
/* chrome visual, sin tocar ids/clases usadas por el JS.                 */
/* ==================================================================== */
body.pw-sneat #app-popup-config,
body.pw-sneat #app-subscription-popup {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat #app-popup-config.fade,
body.pw-sneat #app-subscription-popup.fade {
    top: 10%;
    transition: opacity 0.15s linear;
}

body.pw-sneat #app-popup-config .modal-header,
body.pw-sneat #app-subscription-popup .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-divider);
    padding: 16px 20px;
}

body.pw-sneat #app-popup-config .modal-header h3,
body.pw-sneat #app-subscription-popup .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pw-text-strong);
    margin: 0;
}

body.pw-sneat #app-popup-config .modal-body,
body.pw-sneat #app-subscription-popup .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
}

body.pw-sneat #app-popup-config .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-divider);
    padding: 14px 20px;
}

body.pw-sneat #app-subscription-popup .app-store-hero__search-input {
    box-shadow: none;
}

body.pw-sneat #form-checkout__submit {
    background-color: var(--pw-accent) !important;
    background-image: none !important;
    border-color: var(--pw-accent) !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat #form-checkout__submit:hover {
    background-color: var(--pw-accent-hover) !important;
    border-color: var(--pw-accent-hover) !important;
}

/* ==================================================================== */
/* Modal de configuracion: WhatsApp por horas.                          */
/* Reskin 100% CSS sobre el markup de                                    */
/* configuracion/whatsapp_por_horas/{popup,rows,row_create}.php: tablas, */
/* inputs y botones con sus ids/clases --js intactos (el JS no se toca). */
/* El contenido se inyecta por AJAX dentro de #app-popup-config, que ya  */
/* vive bajo body.pw-sneat.                                             */
/* ==================================================================== */

/* Modal un poco mas ancho para la tabla de 6 columnas + mas alto util */
body.pw-sneat #app-popup-config {
    width: 660px;
    margin-left: -330px;
}

/* Sin esto, un ancho fijo de 660px + margin-left:-330px calculado contra
   left:50% desborda cualquier viewport angosto (mismo patron ya resuelto
   en paginas.css .pw-modal-ia y mapa.css #modal-mapa-marca): por debajo
   de 767px Bootstrap 2 ya trae su propio fallback (left/right + width
   auto), pero un selector por ID como este le gana en especificidad y lo
   pisa sin avisar. */
@media (max-width: 767px) {
    body.pw-sneat #app-popup-config {
        width: auto;
        margin-left: 0;
    }
}

body.pw-sneat #app-popup-config .modal-body {
    max-height: 62vh;
}

/* Titulos y ayudas de seccion (solo SNEAT, markup gateado) */
body.pw-sneat #app-popup-config .whatsapp-config__section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 4px 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat #app-popup-config .whatsapp-config__section-title i {
    color: var(--pw-accent);
}

body.pw-sneat #app-popup-config .whatsapp-config__section-help {
    font-size: 12px;
    color: #8592A3;
    margin-bottom: 12px;
}

/* Card "Numero por defecto" (verde WhatsApp muy suave, icono en el gutter) */
body.pw-sneat #app-popup-config .whatsapp-config__default {
    position: relative;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: 10px;
    padding: 14px 16px 14px 48px;
    font-size: 13px;
    color: #566A7F;
    line-height: 1.7;
}

body.pw-sneat #app-popup-config .whatsapp-config__default-icon {
    position: absolute;
    left: 16px;
    top: 15px;
    font-size: 22px;
    color: #25D366;
}

body.pw-sneat #app-popup-config .whatsapp-config__default strong {
    color: var(--pw-text-strong);
}

body.pw-sneat #app-popup-config .whatsapp-config__default a {
    color: var(--pw-accent);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
}

body.pw-sneat #app-popup-config .whatsapp-config__default a:hover {
    text-decoration: underline;
}

/* Card de la fila "Recibir notificaciones del sistema" */
body.pw-sneat #app-popup-config .whatsapp-config__avisos {
    background: #F8F8FC;
    border: 1px solid var(--pw-border-card);
    border-radius: 10px;
    padding: 4px 12px;
    margin-bottom: 22px;
}

body.pw-sneat #app-popup-config .whatsapp-avisos {
    margin: 0;
    background: transparent;
}

body.pw-sneat #app-popup-config .whatsapp-avisos td {
    border: 0 none;
    vertical-align: middle;
    padding: 8px 6px;
}

body.pw-sneat #app-popup-config .whatsapp-avisos label {
    color: var(--pw-text-strong);
    font-size: 13px;
    margin: 0;
}

/* ==== Tabla de horarios ==== */
body.pw-sneat #app-popup-config .whatsapp-list {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

body.pw-sneat #app-popup-config .whatsapp-list thead th {
    background: transparent;
    border: 0 none;
    border-bottom: 1px solid var(--pw-divider);
    color: #8592A3;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px;
    vertical-align: middle;
}

body.pw-sneat #app-popup-config .whatsapp-list tbody td {
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    padding: 8px;
    vertical-align: middle;
}

/* Fila de alta (primer tbody): tinte violeta suave en vez del gris inline */
body.pw-sneat #app-popup-config #whatsapp-list-form-create tr {
    background-color: rgba(115, 103, 240, 0.06) !important;
}

body.pw-sneat #app-popup-config #whatsapp-list-form-create td {
    border-top: 0 none;
    border-bottom: 1px dashed var(--pw-border-card);
}

/* Inputs de hora/numero */
body.pw-sneat #app-popup-config .whatsapp-list__text {
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    padding: 6px 10px;
    font-size: 13px;
    color: #566A7F;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat #app-popup-config .whatsapp-list__text:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

body.pw-sneat #app-popup-config .whatsapp-list__text.error {
    border-color: var(--pw-danger);
    box-shadow: 0 0 0 3px var(--pw-danger-soft);
}

/* Combobox de horas (0..23): mismo alto que los inputs, ancho compacto */
body.pw-sneat #app-popup-config .whatsapp-list__select {
    width: 72px;
    min-width: 64px;
    background-color: #FFFFFF;
    cursor: pointer;
}

/* ==== Switch (CSS-only) sobre los checkbox existentes ====             */
/* No se toca el markup ni el JS: el <input type=checkbox> sigue siendo   */
/* checkbox (el JS lee .prop('checked')); solo se re-pinta como switch.   */
body.pw-sneat #app-popup-config .whatsapp-list input[type="checkbox"],
body.pw-sneat #app-popup-config .whatsapp-avisos input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    box-sizing: border-box;
    width: 40px;
    height: 22px;
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 999px;
    background-color: #D5DAE0;
    cursor: pointer;
    vertical-align: middle;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

body.pw-sneat #app-popup-config .whatsapp-list input[type="checkbox"]::before,
body.pw-sneat #app-popup-config .whatsapp-avisos input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s ease;
}

body.pw-sneat #app-popup-config .whatsapp-list input[type="checkbox"]:checked,
body.pw-sneat #app-popup-config .whatsapp-avisos input[type="checkbox"]:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat #app-popup-config .whatsapp-list input[type="checkbox"]:checked::before,
body.pw-sneat #app-popup-config .whatsapp-avisos input[type="checkbox"]:checked::before {
    transform: translateX(18px);
}

/* Fila "Recibir notificaciones": el label BS2 .checkbox trae padding-left  */
/* que pegaba el texto al control. Se pasa a flex con gap (fix pegoteado).  */
body.pw-sneat #app-popup-config .whatsapp-avisos label,
body.pw-sneat #app-popup-config .whatsapp-avisos label.checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    margin: 0;
    color: var(--pw-text-strong);
    font-size: 13px;
    cursor: pointer;
}

/* ==== Boton Test (abre wa.me en pestana nueva) ==== */
body.pw-sneat #app-popup-config .whatsapp-list__test--js {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    float: none;
    border-radius: 8px;
    box-shadow: none !important;
    text-shadow: none;
    background-color: rgba(37, 211, 102, 0.12) !important;
    background-image: none !important;
    border: 1px solid rgba(37, 211, 102, 0.35) !important;
    color: #1DA851 !important;
}

body.pw-sneat #app-popup-config .whatsapp-list__test--js:hover {
    background-color: rgba(37, 211, 102, 0.22) !important;
    border-color: #25D366 !important;
}

/* ==== Botones de accion: circulares por color de rol ==== */
body.pw-sneat #app-popup-config .whatsapp-list__button-create--js,
body.pw-sneat #app-popup-config .whatsapp-list__button-modify--js,
body.pw-sneat #app-popup-config .whatsapp-list__button-remove--js,
body.pw-sneat #app-popup-config .whatsapp-avisos__button-save--js {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    float: none;
    border-radius: 8px;
    box-shadow: none !important;
    text-shadow: none;
    background-image: none !important;
}

/* Crear (+): violeta de marca */
body.pw-sneat #app-popup-config .whatsapp-list__button-create--js {
    background-color: var(--pw-accent) !important;
    border-color: var(--pw-accent) !important;
    color: #FFFFFF !important;
}

body.pw-sneat #app-popup-config .whatsapp-list__button-create--js:hover {
    background-color: var(--pw-accent-hover) !important;
    border-color: var(--pw-accent-hover) !important;
}

/* Guardar/confirmar (check): verde */
body.pw-sneat #app-popup-config .whatsapp-list__button-modify--js,
body.pw-sneat #app-popup-config .whatsapp-avisos__button-save--js {
    background-color: #28C76F !important;
    border-color: #28C76F !important;
    color: #FFFFFF !important;
}

body.pw-sneat #app-popup-config .whatsapp-list__button-modify--js:hover,
body.pw-sneat #app-popup-config .whatsapp-avisos__button-save--js:hover {
    background-color: #22b464 !important;
    border-color: #22b464 !important;
}

/* Borrar (x): outline rojo */
body.pw-sneat #app-popup-config .whatsapp-list__button-remove--js {
    background-color: #FFFFFF !important;
    border: 1px solid var(--pw-danger) !important;
    color: var(--pw-danger) !important;
}

body.pw-sneat #app-popup-config .whatsapp-list__button-remove--js:hover {
    background-color: var(--pw-danger-soft) !important;
}

@media (max-width: 767px) {
    body.pw-sneat .app-store-hero {
        padding: 24px 20px;
    }

    body.pw-sneat .app-store-hero__title {
        font-size: 20px;
    }

    body.pw-sneat .app-store-grid {
        grid-template-columns: 1fr;
    }
}


/* promo-apps-popup.css */

/* Popup de promocion de apps del Escritorio (Webered Ads).
   Sin `.modal-header`: el cierre es un boton flotante (`.promo-apps-popup__close`)
   para que el banner de la primera tarjeta llegue hasta el borde superior.

   Reglas BASE (sin gate): estructura y funcionalidad que tiene que andar en
   los dos modos (layout del banner, tamano de logo, planes/botones, imagenes
   e iframes responsivos dentro de la descripcion). Lo "premium" pedido
   explicitamente (gradiente de 3 colores, modal ancho, sombra flotante,
   scrollbar a medida) va SOLO bajo `body.pw-sneat #pw-popup-promo-apps`: en
   modo clasico el banner queda con un color solido de respaldo y el modal
   mantiene el ancho de Bootstrap 2. */

#pw-popup-promo-apps.modal {
    padding: 0;
    overflow: hidden;
    border: none;
}

#pw-popup-promo-apps .promo-apps-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #384551;
    opacity: 1;
    text-shadow: none;
    font-size: 18px;
}

#pw-popup-promo-apps .promo-apps-popup__close:hover {
    background: #FFFFFF;
    color: #1A1D28;
}

#pw-popup-promo-apps .promo-apps-popup__body {
    padding: 20px;
}

#pw-popup-promo-apps .promo-apps-popup__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --- Tarjeta ---------------------------------------------------------- */

#pw-popup-promo-apps .promo-apps-popup__card {
    border: 1px solid #DDDDDD;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
}

/* --- Banner (header compacto por tarjeta: logo + nombre) --------------- */

#pw-popup-promo-apps .promo-apps-popup__banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 44px 12px 14px;
    /* Color solido de respaldo en modo clasico: el gradiente de 3 colores es
       una mejora SNEAT (ver el bloque body.pw-sneat mas abajo). */
    background-color: #696CFF;
}

#pw-popup-promo-apps .promo-apps-popup__banner-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.28);
    color: #FFFFFF;
    font-size: 18px;
    overflow: hidden;
}

#pw-popup-promo-apps .promo-apps-popup__banner-icon img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
}

#pw-popup-promo-apps .promo-apps-popup__banner-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Contenido: descripcion, planes, CTA -------------------------------- */

#pw-popup-promo-apps .promo-apps-popup__content {
    padding: 16px;
}

/* Scroll vertical interno: textos/imagenes/videos largos no agrandan el
   modal. Soporta HTML (pw_string() no escapa, es contenido de un admin, no
   dato de usuario): banners, imagenes, embeds de YouTube/Vimeo. */
#pw-popup-promo-apps .app-store-card__description {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #666666;
}

/* Imagenes/banners pegados en la descripcion: nunca mas anchos que la card. */
#pw-popup-promo-apps .app-store-card__description img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Videos embebidos (YouTube/Vimeo): 16:9 sin necesitar un wrapper con
   padding-bottom, aspect-ratio ya cubre los navegadores que carga el panel. */
#pw-popup-promo-apps .app-store-card__description iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 8px;
    margin: 8px 0;
}

#pw-popup-promo-apps .app__plan-list .row-fluid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 10px !important;
}

#pw-popup-promo-apps .app__plan-list .row-fluid > [class*="span"] {
    width: 100% !important;
    float: none;
    margin-left: 0;
}

#pw-popup-promo-apps .app__plan-description {
    background: #F5F6FA;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #384551;
    box-sizing: border-box;
}

#pw-popup-promo-apps .app__plan-description--free-with-button {
    background: rgba(40, 199, 111, 0.10);
}

#pw-popup-promo-apps .plan__select {
    border-radius: 8px;
    box-shadow: none;
}

/* Suscribirse (CTA de apps de pago) */
#pw-popup-promo-apps .app__subscription-button {
    background-color: #029CDC !important;
    background-image: none !important;
    border-color: #029CDC !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
    padding: 9px 16px;
}

#pw-popup-promo-apps .app__subscription-button:hover,
#pw-popup-promo-apps .app__subscription-button:focus {
    background-color: #0284b8 !important;
    border-color: #0284b8 !important;
}

/* Probar Gratis (CTA principal cuando hay prueba gratis disponible) */
#pw-popup-promo-apps .app__plan-free--js {
    background-color: #28C76F !important;
    background-image: none !important;
    border-color: #28C76F !important;
    color: #FFFFFF !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}

#pw-popup-promo-apps .app__plan-free--js:hover {
    background-color: #22b464 !important;
    border-color: #22b464 !important;
}

/* Cuando conviven prueba gratis (CTA principal, arriba) y plan pago (abajo),
   el plan pago se atenua: es la alternativa, no la oferta principal. */
#pw-popup-promo-apps .promo-apps-popup__planes--secundario {
    opacity: 0.85;
}

#pw-popup-promo-apps .promo-apps-popup__nota-usada {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #F1F2F4;
    color: #666666;
    font-size: 12px;
}

#pw-popup-promo-apps .app-store-card__link-info {
    color: #8592A3;
    font-size: 12px;
    text-decoration: none;
}

#pw-popup-promo-apps .app-store-card__link-info:hover {
    color: #029CDC;
    text-decoration: underline;
}

/* --- Footer del modal: "Mas informacion" (por app, izquierda) + "No me
   interesa" / "No por ahora" (derecha). margin-left:auto en las acciones en
   vez de justify-content:space-between en el padre: asi las acciones se
   mantienen a la derecha aunque no haya ningun link de "Mas informacion"
   (footer-info ni siquiera se imprime en ese caso). Tono neutro a proposito:
   no deben competir visualmente con los CTA de cada tarjeta. */

#pw-popup-promo-apps .promo-apps-popup__footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

#pw-popup-promo-apps .promo-apps-popup__footer-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#pw-popup-promo-apps .promo-apps-popup__footer-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

#pw-popup-promo-apps .promo-apps-popup__footer-actions .btn {
    background-color: #F5F6FA;
    background-image: none;
    border: 1px solid #E0E2E7;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
}

#pw-popup-promo-apps .promo-apps-popup__footer-actions .btn:hover {
    background-color: #ECEEF4;
    color: #384551;
}

/* ==========================================================================
   SNEAT: gradiente de 3 colores, modal ancho, sombra premium, scrollbar a
   medida. Todo lo nuevo "premium" pedido vive aca adentro, no en las reglas
   base de arriba.
   ========================================================================== */

/* Modal mas ancho en desktop. Reimplementa (bajo el mismo id, mayor
   especificidad que .modal de Bootstrap) los breakpoints propios de BS2 en
   vez de heredarlos: si no, un selector con id le gana en especificidad a la
   media query de Bootstrap y el modal queda ancho tambien en el celular. */
@media (min-width: 768px) {
    body.pw-sneat #pw-popup-promo-apps.modal {
        width: 92%;
        max-width: 720px;
        left: 50%;
        margin-left: 0;
        transform: translateX(-50%);
    }
}

@media (max-width: 767px) {
    body.pw-sneat #pw-popup-promo-apps.modal {
        left: 20px;
        right: 20px;
        width: auto;
        margin: 0;
    }
}

@media (max-width: 480px) {
    body.pw-sneat #pw-popup-promo-apps.modal {
        top: 10px;
        right: 10px;
        left: 10px;
    }
}

body.pw-sneat #pw-popup-promo-apps.modal {
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(31, 40, 61, 0.24);
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__card {
    border-color: var(--pw-border-card);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(31, 40, 61, 0.08);
}

/* Gradiente diagonal de 3 colores, uno por tarjeta: --app-color-1/2/3 se
   fijan inline por PHP (PW_PanelDeControl_PopupPromoApps::gradientePorClase()),
   con estos valores como default si algun dia faltaran. */
body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__banner {
    background: linear-gradient(
        135deg,
        var(--app-color-1, var(--pw-accent, #696CFF)),
        var(--app-color-2, #8592A3),
        var(--app-color-3, var(--pw-info, #03C3EC))
    );
}

body.pw-sneat #pw-popup-promo-apps .app__plan-description {
    background: var(--pw-accent-soft);
    color: var(--pw-text-strong);
}

/* Sin borde: el gris de Bootstrap 2 se leia como una linea suelta separando
   la descripcion del combo. Fondo solido en vez de borde para que se siga
   distinguiendo como control. margin:0 mata el margin-bottom por defecto de
   <select> en BS2 (forms.less): sin resetear, ese margen quedaba "adentro"
   del .span8 (48px de alto contra 38px del boton en .span4) y align-items:
   center corria el boton ~5px hacia abajo respecto del combo. */
body.pw-sneat #pw-popup-promo-apps .plan__select {
    border: none;
    background-color: var(--pw-page-bg, #F1F2F6);
    height: var(--pw-control-height);
    margin: 0;
}

body.pw-sneat #pw-popup-promo-apps .app__subscription-button {
    background-color: var(--pw-accent) !important;
    border-color: var(--pw-accent) !important;
}

body.pw-sneat #pw-popup-promo-apps .app__subscription-button:hover,
body.pw-sneat #pw-popup-promo-apps .app__subscription-button:focus {
    background-color: var(--pw-accent-hover) !important;
    border-color: var(--pw-accent-hover) !important;
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__nota-usada {
    background: var(--pw-page-bg);
    color: var(--pw-gray-light);
}

body.pw-sneat #pw-popup-promo-apps .app-store-card__link-info:hover {
    color: var(--pw-accent);
}

/* Descripcion mas alta (el modal ancho tiene lugar) + scroll a medida,
   discreto en vez del scrollbar default del sistema operativo. */
body.pw-sneat #pw-popup-promo-apps .app-store-card__description {
    max-height: 380px;
    margin-bottom: 8px;
    color: var(--pw-gray-light);
    scrollbar-width: thin;
    scrollbar-color: var(--pw-border-card) transparent;
}

body.pw-sneat #pw-popup-promo-apps .app-store-card__description::-webkit-scrollbar {
    width: 6px;
}

body.pw-sneat #pw-popup-promo-apps .app-store-card__description::-webkit-scrollbar-track {
    background: transparent;
}

body.pw-sneat #pw-popup-promo-apps .app-store-card__description::-webkit-scrollbar-thumb {
    background-color: var(--pw-border-card);
    border-radius: 3px;
}

/* ==========================================================================
   SNEAT: bloque inferior compacto (planes + CTA) y limpieza del marco gris
   de BS2. Todo lo de esta seccion es "nuevo" de esta vuelta de diseno.
   ========================================================================== */

/* BS2 le pone max-height:400px + overflow-y:auto a .modal-body por defecto:
   con 2-3 tarjetas eso generaba un scroll exterior ademas del scroll propio
   de cada descripcion. Se cambia por un limite atado al viewport (holgado)
   en vez del valor fijo de Bootstrap, y se recorta el padding: las tarjetas
   ya tienen su propio borde, no hace falta un marco grande alrededor. */
body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__body {
    max-height: 82vh;
    padding: 14px 16px;
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__list {
    gap: 12px;
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__content {
    padding: 12px 14px 14px;
}

/* Selector de plan + CTA en la misma linea: el select se estira, el boton
   toma un ancho fijo proporcional. Con dos filas apiladas (plan pago +
   prueba gratis) cada una pasa a ocupar 1 sola linea en vez de 2. */
body.pw-sneat #pw-popup-promo-apps .app__plan-list .row-fluid {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px !important;
}

body.pw-sneat #pw-popup-promo-apps .app__plan-list .row-fluid > [class*="span"] {
    width: auto !important;
}

body.pw-sneat #pw-popup-promo-apps .app__plan-list .row-fluid > .span8 {
    flex: 1 1 auto;
    min-width: 0;
}

body.pw-sneat #pw-popup-promo-apps .app__plan-list .row-fluid > .span4 {
    flex: 0 0 40%;
    min-width: 132px;
}

body.pw-sneat #pw-popup-promo-apps .app__plan-description {
    padding: 8px 12px;
}

body.pw-sneat #pw-popup-promo-apps .app__subscription-button,
body.pw-sneat #pw-popup-promo-apps .app__plan-free--js {
    padding: 8px 12px;
}

/* "Mas informacion" / "No me interesa" / "No por ahora": mismo tratamiento
   de link fantasma, sin fondo ni borde, para que no compitan con el CTA. */
body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__footer {
    padding: 8px 14px 12px;
    background: none;
    border-top: none;
    box-shadow: none;
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__footer-actions .btn {
    padding: 4px 8px;
    background: none;
    background-image: none;
    border: none;
    box-shadow: none;
    color: var(--pw-gray-light);
    font-size: 12px;
    font-weight: 500;
}

body.pw-sneat #pw-popup-promo-apps .promo-apps-popup__footer-actions .btn:hover {
    background: none;
    color: var(--pw-accent);
    text-decoration: underline;
}


/* configuracion.css */

/* estilos del m�dulo Configuraci�n */
@media (max-width: 600px) {
    .cfg-main-container {
        padding-left: 20px; 
        padding-right: 20px;
    }    
}

.cfg-main-container.cfg-no-routes-list {
    padding-top: 10px;
}

.cfg-container {
    border-bottom: 1px solid #CCCCCC;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.cfg-header {
    font-size: 16px;    
    margin-top: 0px;
    margin-bottom: 10px;
}

.cfg-header-logo {
    margin-bottom: 20px;
    max-width: 150px;
}

.cfg-title {
    font-size: 18px;    
    margin-top: 0px;
    margin-bottom: 10px;
}

.cfg-panel {
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 14px;
}

.cfg-panel__item {
    margin-bottom: 10px;
}

.cfg-panel__item .add-on {
    box-sizing: border-box;
    height: 40px;
    min-width: 40px;    
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.cfg-panel__item--border-bottom {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px;
}

.cfg-panel__item--no-margin {
    margin-bottom: 0px;
}

.cfg-panel__fieldset {
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}

.cfg-panel__legend {
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    margin-bottom: 10px;
    border: 0 none;
}

.cfg-panel__title {
    font-weight: bold;
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 6px;
}

.cfg-panel__subtitle {
    font-weight: bold;
    font-size: 12px;    
    margin-top: 0px;
    margin-bottom: 10px;
    border-bottom: 1px solid #E3E3E3;
}


.cfg-panel__text {
    font-size: 14px;
    margin-bottom: 2px;
}

.cfg-panel__text-info {
    font-size: 12px;
    font-weight: normal;
}

.cfg-panel__title--center,
.cfg-panel__text--center {
    text-align: center;
}

.cfg-panel__label {
    font-size: 12px;
    font-weight: bold;
}

.cfg-panel__input {
    font-size: 14px !important;
}

.cfg-panel__icon {
    float: left;
    margin-right: 20px;
    font-size: 20px;
    color: #000000;
}

.cfg-panel__link {
    font-size: 14px;
}

.cfg-panel--link {
    display: block;
    color: #0088CC;
}

.cfg-panel--link:hover,
.cfg-panel--link:active,
.cfg-panel--link:focus
{
    border: 1px solid #0099CC;
    color: #0099CC;
    text-decoration: none;
    transition: all ease-in 0.2s;
}

/*.cfg-panel .row-fluid:last-child input, 
.cfg-panel .row-fluid:last-child textarea, 
.cfg-panel .row-fluid:last-child select,
.cfg-panel .row-fluid:last-child .control-group {
    margin-bottom: 0px;
}*/

.cfg-button-bar {
    padding: 4px;
    /*border: 1px solid #E3E3E3;
    border-radius: 4px;*/
}

.cfg-button-bar--top {
    margin-top: 0px;
    margin-bottom: 20px;
}

.cfg-button-bar--bottom {
    margin-top: 20px;
    margin-bottom: 0px;
}

.cfg-button-bar--right {
    text-align: right;
}

.cfg-button-bar--top .btn {
    margin-left: 4px;
}

.cfg-button-bar--bottom .btn {
    margin-right: 4px;
}

.cfg-button-bar--no-margin {
    margin-top: 0px;
    margin-bottom: 0px;
}

.cfg-routes-list {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 30px;    
    padding-bottom: 10px;
    border-bottom: 1px solid #CCCCCC;
}

.cfg-routes-list__item {
    display: inline-block;
}

.cfg-routes-list__link,
.cfg-routes-list__title {
    margin-right: 6px;
    font-size: 16px;
}

.cfg-routes-list__divider {
    margin-right: 6px;
}

.cfg-menu {
    /* contenedor de un men� */
    margin-bottom: 20px;
}

.cfg-menu__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.cfg-menu__item {
    display: block;
    color: #0088CC;
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 14px;
    font-size: 14px;
}

.cfg-menu__item:hover,
.cfg-menu__item:active,
.cfg-menu__item:focus
{
    border: 1px solid #0099CC;
    color: #0099CC;
    text-decoration: none;
    transition: all ease-in 0.2s;
}

.cfg-menu__item--disabled {
    color: #777777;
    background-color: #DDDDDD;
    border: 1px solid #CCCCCC;
    cursor: default;
}

.cfg-menu__item--disabled:hover,
.cfg-menu__item--disabled:focus,
.cfg-menu__item--disabled:active {
    color: #777777;
    border: 1px solid #CCCCCC;
    outline: 0 none;
    transition: none;
}

.cfg-menu__item-alert {
    float: right;
    font-size: 10px;
    color: #b94a48;
    width: 70px;
    text-align: center;
    line-height: 12px;
}

@media (max-width: 500px) {
    .cfg-menu__item-alert {
        float: none;
        display: block;
        width: 100%;
        margin-bottom: 5px;
    }
}

.cfg-menu__item-icon {
    float: left;
    font-size: 20px;
    color: #000000;
}

*.cfg-menu__item-image {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    margin-right: 20px;  
    padding: 1px;
}

.cfg-menu__item-title {
    font-weight: bold;
    margin-left: 14px;
}

.cfg-menu__item-title--with-image {
    display: block;
    margin-left: 0px;
    margin-bottom: 5px;
}

.cfg-menu__item-description {
    display: block;
    color: #000000;
    margin-top: 10px;
    /*margin-left: 40px;*/
}

.cfg-menu__item--disabled .cfg-menu__item-description {
    color: #777777;
}

.cfg-panel__item-addon {  
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}

.cfg-panel__item-addon--bottom {
    padding: 0px 10px 10px;
    margin-top: -10px;
}

.cfg-panel__item-addon--no-padding {
    padding: 0px;
}

.cfg-form {

}

/* 
.cfg-ayuda {
    -- contenedor donde se muestra el texto de ayuda
}
*/

.cfg-ayuda__item {
    margin-bottom: 20px;
}

.cfg-ayuda__boton-abrir {
    display: none;
}

@media (max-width: 767px) {
    
    .cfg-ayuda {
        height: 65px;
        overflow: hidden;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* https://ed.team/blog/truco-css-texto-con-color-degradado */
    .cfg-ayuda--degradado {
        background: -webkit-linear-gradient(#555f78, #FFFFFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #555f78; /* para navegadores que no soportan lo anterior */
    }
    
    .cfg-ayuda__boton-abrir {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
    }
}

.cfg-form-ayuda {
    
}

.cfg-form-ayuda__descripcion_corta {
    height: 50px;
}

.cfg-form-ayuda__descripcion {
    margin-bottom: 20px;
}

.cfg-form-ayuda__url {
    margin-top: 20px;
}

.cfg-form-ayuda__guardar {
    margin-top: 10px;
}

.cfg-form-ayuda__guardar--menu {
    margin-top: 0px;
    margin-bottom: 60px;
}

.cfg-alert {
    padding: 8px 14px 8px 14px;
    border-radius: 4px;
}

.cfg-alert--danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.cfg-alert--warning {
    color: #98763b;
    background-color: #f4eecb;
    border-color: #e4b900;
}

.cfg-logo {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    padding: 1px;
}

/* icono svg de Meta */
.cfg-menu__item .main__icon--svg .bi-meta,
.cfg-title .main__icon--svg .bi-meta {
    color: #000000;
    width: 20px;
    height: 20px;
}

.cfg-menu__item .main__icon--meta,
.cfg-title .main__icon--meta {
    vertical-align: top;
}


/* catalogo.css */

/*
.catalogo--form #tabs.nav-tabs > li.active > a {
    color: #0088CC;
    cursor: pointer;
}
*/

/* catalogo-colores.css */

@media (max-width: 624px) {
    .colores-listado__activo {
        display: none;
    }
}

/* ================================================================== */
/* SNEAT: Listado de Colores (Variante Primaria)                       */
/* Scoped a body.pw-sneat #colores — regresion cero en modo clasico.  */
/* ================================================================== */

/* --- Layout: dos columnas (help izq, lista der) --- */
/* Sobreescribe el flex-column que aplica .catalogo .row-fluid         */
body.pw-sneat #colores .row-fluid {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

body.pw-sneat #colores .row-fluid > .span5 {
    flex: 0 0 38%;
    max-width: 38%;
    width: 38% !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #colores .row-fluid > .span7 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

/* Sin help: span7 ocupa todo el ancho */
body.pw-sneat #colores .row-fluid > .span7:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

/* --- Columna de ayuda como card SNEAT --- */
body.pw-sneat #colores .row-fluid > .span5 .pw-ayuda,
body.pw-sneat #colores .row-fluid > .span5 > div {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-soft);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    font-size: 13px;
    color: #697A8D;
    line-height: 1.6;
}

/* --- Tabla aireada y limpia --- */
body.pw-sneat #colores .page-content__table {
    border: 0 none;
    box-shadow: none;
    background: transparent;
}

body.pw-sneat #colores .page-content__table thead th {
    background: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

body.pw-sneat #colores .page-content__table tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--pw-border-soft);
    color: #697A8D;
    vertical-align: middle;
}

body.pw-sneat #colores .page-content__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat #colores .page-content__table tbody tr:hover {
    background-color: #F9FAFB;
}

/* Fila inactiva: SOLO el texto se atenua (nunca los controles: switch, estrella,
   checkbox de seleccion, ni los botones editar/borrar/fotos). Excluir por
   :has(.btn) / :has(input) es generico y estructural (TODO boton de accion del
   panel usa clase .btn via Links::editar()/borrar(); switch/estrella/checkbox
   usan <input>), no depende de a que control corresponda cada celda.
   Selector doble [data-item_disabled="1"] / .pw_disabled_row: el atributo lo
   pone PHP en el render inicial; la clase la togglea pw_activate_item.js al
   activar/desactivar en vivo (updateStyle NO actualiza el atributo, asi que sin
   la clase el atenuado no aplicaba hasta recargar la pagina). Ver SNEAT-PATTERNS. */
body.pw-sneat #colores .page-content__table tbody tr[data-item_disabled="1"] > td:not(:has(.btn)):not(:has(input)),
body.pw-sneat #colores .page-content__table tbody tr.pw_disabled_row > td:not(:has(.btn)):not(:has(input)) {
    opacity: 0.55;
}

/* Nombre del color semibold */
body.pw-sneat #colores .colores-listado__nombre {
    font-weight: 600;
    color: #566A7F;
}

/* Código en title (tooltip) — no se aplica CSS directo, pero el color del td sí */
body.pw-sneat #colores .page-content__table tbody td[title]:not([title=""]) {
    cursor: help;
}

/* --- Botones de acción: edit — reset BS2 + hover circular violeta --- */
body.pw-sneat #colores .page-content__table-button--edit {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #colores .page-content__table-button--edit:hover,
body.pw-sneat #colores .page-content__table-button--edit:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* --- Botón eliminar — hover circular rojo --- */
body.pw-sneat #colores .page-content__table-button--delete {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #colores .page-content__table-button--delete:hover,
body.pw-sneat #colores .page-content__table-button--delete:focus,
body.pw-sneat #colores .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* --- Celda vacía (muestra el muñeco de color) — centrada --- */
body.pw-sneat #colores .page-content__table-button--empty {
    display: inline-block;
    width: 34px;
    height: 34px;
}

/* --- Toolbar: acciones masivas a la izquierda --- */
body.pw-sneat #colores .table-actions--top {
    justify-content: flex-start;
}

/* --- Botón Agregar alineado a la derecha dentro del toolbar --- */
/* Reutiliza .catalogo-actions-buttons ya definido en catalogo-productos.css */
/* (order: 99; margin-left: auto) — no necesita redefinición             */

/* Botón Agregar (toolbar y estado vacío) */
body.pw-sneat #colores .colores-btn-nueva,
body.pw-sneat #colores .colores-btn-agregar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #colores .colores-btn-nueva:hover,
body.pw-sneat #colores .colores-btn-nueva:focus,
body.pw-sneat #colores .colores-btn-nueva:active,
body.pw-sneat #colores .colores-btn-agregar:hover,
body.pw-sneat #colores .colores-btn-agregar:focus,
body.pw-sneat #colores .colores-btn-agregar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* --- fieldset: quitar borde del contenedor de lista --- */
body.pw-sneat #colores #contenedor-colores {
    border: 0 none;
    padding: 0;
    margin: 0;
}

/* ================================================================== */
/* Modal SNEAT: #modal-crear-color                                     */
/* ================================================================== */

body.pw-sneat #modal-crear-color {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat #modal-crear-color .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

body.pw-sneat #modal-crear-color .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-crear-color .modal-header .colores-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

/* Cruz de cerrar: estandar SNEAT (ver SNEAT-PATTERNS). */
body.pw-sneat #modal-crear-color .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-crear-color .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-crear-color .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    /* Usar la altura de pantalla (BS2 fija max-height:400px y fuerza scroll). */
    max-height: calc(88vh - 120px);
    overflow-y: auto;
}

body.pw-sneat #modal-crear-color.in {
    top: 5vh;
    margin-top: 0;
}

body.pw-sneat #modal-crear-color .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

/* Labels en el modal */
body.pw-sneat #modal-crear-color .colores-modal__field {
    margin-bottom: 16px;
}

body.pw-sneat #modal-crear-color .colores-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

/* Inputs en el modal */
body.pw-sneat #modal-crear-color input[type="text"] {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

body.pw-sneat #modal-crear-color input[type="text"]:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Botón cancelar en el modal */
body.pw-sneat #modal-crear-color .colores-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-color .colores-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

/* Botón guardar en el modal (btn-primary / btnGuardar) */
body.pw-sneat #modal-crear-color .modal-footer .btn-primary,
body.pw-sneat #modal-crear-color .modal-footer .btnGuardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-color .modal-footer .btn-primary:hover,
body.pw-sneat #modal-crear-color .modal-footer .btn-primary:focus,
body.pw-sneat #modal-crear-color .modal-footer .btn-primary:active,
body.pw-sneat #modal-crear-color .modal-footer .btnGuardar:hover,
body.pw-sneat #modal-crear-color .modal-footer .btnGuardar:focus,
body.pw-sneat #modal-crear-color .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* Responsive: en mobile el layout colapsa a una sola columna */
@media (max-width: 767px) {
    body.pw-sneat #colores .row-fluid {
        flex-direction: column;
    }

    body.pw-sneat #colores .row-fluid > .span5,
    body.pw-sneat #colores .row-fluid > .span7 {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100% !important;
    }

    /* Mostrar el combo de acciones masivas TAMBIEN en mobile (hay espacio),
       arriba del listado y alineado con Agregar. sneat-base lo oculta en mobile
       globalmente; mayor especificidad (#colores) gana sin tocar sneat-base. */
    body.pw-sneat #colores .table-actions--top {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    body.pw-sneat #colores .table-actions--top .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat #colores .table-actions--top button.table-actions__button-action {
        display: inline-flex;
    }
    body.pw-sneat #colores .table-actions--top .colores-btn-nueva {
        margin-left: auto;
    }

    /* Mantener visibles en mobile la columna del switch (activo) y la del checkbox
       de seleccion masiva. El diseño clasico las ocultaba (activo se editaba en el
       form; sin acciones masivas en mobile), pero en SNEAT el switch del listado es
       la unica via de activar/desactivar (salio del modal) y el checkbox habilita
       las acciones masivas que ahora se muestran en mobile. */
    body.pw-sneat #colores .colores-listado__activo,
    body.pw-sneat #colores [class*="table-cell-multiple-actions"],
    body.pw-sneat #colores [class*="table-header--multiple-actions"] {
        display: table-cell !important;
    }
}

/* ================================================================== */
/* Modal: campos adicionales (activo inline, asterisco requerido)     */
/* ================================================================== */

/* Campo activo como fila compacta inline */
body.pw-sneat #modal-crear-color .colores-modal__field--inline {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #F8F8FC;
    border-radius: 8px;
    border: 1px solid var(--pw-border-soft);
}

/* Label con checkbox: alinear horizontalmente */
body.pw-sneat #modal-crear-color .colores-modal__label--checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
    cursor: pointer;
    margin: 0;
}

body.pw-sneat #modal-crear-color .colores-modal__label--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
    flex-shrink: 0;
}

/* Asterisco requerido */
body.pw-sneat #modal-crear-color .colores-modal__required {
    color: var(--pw-danger);
    font-size: 12px;
    margin-left: 2px;
}


/* catalogo-marcas.css */

/* ================================================================== */
/* SNEAT: Listado de Marcas                                            */
/* Scoped a body.pw-sneat #marcas — regresion cero en modo clasico.  */
/* ================================================================== */

/* --- Layout: dos columnas (help izq, lista der) --- */
body.pw-sneat #marcas .row-fluid {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

body.pw-sneat #marcas .row-fluid > .span5 {
    flex: 0 0 38%;
    max-width: 38%;
    width: 38% !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #marcas .row-fluid > .span7 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

/* Sin help: span7 ocupa todo el ancho */
body.pw-sneat #marcas .row-fluid > .span7:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

/* --- Columna de ayuda como card SNEAT --- */
body.pw-sneat #marcas .row-fluid > .span5 .pw-ayuda,
body.pw-sneat #marcas .row-fluid > .span5 > div {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-soft);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    font-size: 13px;
    color: #697A8D;
    line-height: 1.6;
}

/* --- Tabla aireada y limpia --- */
body.pw-sneat #marcas .page-content__table {
    border: 0 none;
    box-shadow: none;
    background: transparent;
}

body.pw-sneat #marcas .page-content__table thead th {
    background: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

body.pw-sneat #marcas .page-content__table tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--pw-border-soft);
    color: #697A8D;
    vertical-align: middle;
}

body.pw-sneat #marcas .page-content__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat #marcas .page-content__table tbody tr:hover {
    background-color: #F9FAFB;
}

/* Fila inactiva: SOLO el texto se atenua (nunca los controles ni los botones de
   accion). Ver comentario extenso en catalogo-colores.css / SNEAT-PATTERNS. */
body.pw-sneat #marcas .page-content__table tbody tr[data-item_disabled="1"] > td:not(:has(.btn)):not(:has(input)),
body.pw-sneat #marcas .page-content__table tbody tr.pw_disabled_row > td:not(:has(.btn)):not(:has(input)) {
    opacity: 0.55;
}

/* Nombre de la marca semibold */
body.pw-sneat #marcas .marcas-listado__nombre {
    font-weight: 600;
    color: #566A7F;
}

/* --- Botón editar: reset BS2 + hover circular violeta --- */
body.pw-sneat #marcas .page-content__table-button--edit {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #marcas .page-content__table-button--edit:hover,
body.pw-sneat #marcas .page-content__table-button--edit:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* --- Botón eliminar: hover circular rojo --- */
body.pw-sneat #marcas .page-content__table-button--delete {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #marcas .page-content__table-button--delete:hover,
body.pw-sneat #marcas .page-content__table-button--delete:focus,
body.pw-sneat #marcas .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* --- Toolbar: acciones masivas a la izquierda --- */
body.pw-sneat #marcas .table-actions--top {
    justify-content: flex-start;
}

/* --- Botón Agregar --- */
body.pw-sneat #marcas .marcas-btn-nueva {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #marcas .marcas-btn-nueva:hover,
body.pw-sneat #marcas .marcas-btn-nueva:focus,
body.pw-sneat #marcas .marcas-btn-nueva:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* --- fieldset: quitar borde del contenedor de lista --- */
body.pw-sneat #marcas #contenedor-marcas {
    border: 0 none;
    padding: 0;
    margin: 0;
}

/* ================================================================== */
/* Modal SNEAT: #modal-crear-marca                                     */
/* ================================================================== */

body.pw-sneat #modal-crear-marca {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat #modal-crear-marca .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

body.pw-sneat #modal-crear-marca .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-crear-marca .modal-header .marcas-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

/* Cruz de cerrar: estandar SNEAT (ver SNEAT-PATTERNS). */
body.pw-sneat #modal-crear-marca .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-crear-marca .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-crear-marca .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    /* Usar la altura de pantalla (BS2 fija max-height:400px y fuerza scroll). */
    max-height: calc(88vh - 120px);
    overflow-y: auto;
}

body.pw-sneat #modal-crear-marca.in {
    top: 5vh;
    margin-top: 0;
}

body.pw-sneat #modal-crear-marca .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

/* Campos en el modal */
body.pw-sneat #modal-crear-marca .marcas-modal__field {
    margin-bottom: 16px;
}

body.pw-sneat #modal-crear-marca .marcas-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

/* Campo activo/destacado inline */
body.pw-sneat #modal-crear-marca .marcas-modal__field--inline {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #F8F8FC;
    border-radius: 8px;
    border: 1px solid var(--pw-border-soft);
    display: flex;
    gap: 20px;
}

body.pw-sneat #modal-crear-marca .marcas-modal__label--checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
    cursor: pointer;
    margin: 0;
}

body.pw-sneat #modal-crear-marca .marcas-modal__label--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
    flex-shrink: 0;
}

/* Inputs en el modal */
body.pw-sneat #modal-crear-marca input[type="text"] {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

body.pw-sneat #modal-crear-marca input[type="text"]:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Asterisco requerido */
body.pw-sneat #modal-crear-marca .marcas-modal__required {
    color: var(--pw-danger);
    font-size: 12px;
    margin-left: 2px;
}

/* Botón cancelar */
body.pw-sneat #modal-crear-marca .marcas-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-marca .marcas-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

/* Botón guardar */
body.pw-sneat #modal-crear-marca .modal-footer .btn-primary,
body.pw-sneat #modal-crear-marca .modal-footer .btnGuardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-marca .modal-footer .btn-primary:hover,
body.pw-sneat #modal-crear-marca .modal-footer .btn-primary:focus,
body.pw-sneat #modal-crear-marca .modal-footer .btn-primary:active,
body.pw-sneat #modal-crear-marca .modal-footer .btnGuardar:hover,
body.pw-sneat #modal-crear-marca .modal-footer .btnGuardar:focus,
body.pw-sneat #modal-crear-marca .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* Responsive */
@media (max-width: 767px) {
    body.pw-sneat #marcas .row-fluid {
        flex-direction: column;
    }

    body.pw-sneat #marcas .row-fluid > .span5,
    body.pw-sneat #marcas .row-fluid > .span7 {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100% !important;
    }

    /* mapa.css (que carga en TODO el panel) tiene una regla sin scope que
       coincide por nombre de clase: ".marcas-listado__activo{display:none}" a
       <=624px (pensada para el mapa, no para el catalogo). Ocultaba el switch
       de marcas, que en SNEAT es la unica via de activar/desactivar. Idem el
       checkbox de seleccion masiva. */
    body.pw-sneat #marcas .marcas-listado__activo,
    body.pw-sneat #marcas [class*="table-cell-multiple-action"],
    body.pw-sneat #marcas [class*="table-header--multiple-action"] {
        display: table-cell !important;
    }

    /* Mostrar el combo de acciones masivas TAMBIEN en mobile (hay espacio),
       arriba del listado y alineado con Agregar. sneat-base lo oculta en mobile
       globalmente; mayor especificidad (#marcas) gana sin tocar sneat-base. */
    body.pw-sneat #marcas .table-actions--top {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    body.pw-sneat #marcas .table-actions--top .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat #marcas .table-actions--top button.table-actions__button-action {
        display: inline-flex;
    }
    body.pw-sneat #marcas .table-actions--top .marcas-btn-nueva {
        margin-left: auto;
    }
}


/* catalogo-tamanios.css */

/* ================================================================== */
/* SNEAT: Listado de Tamaños (Drag & Drop)                            */
/* Scoped a body.pw-sneat #tamanios — regresion cero en modo clasico.*/
/* ================================================================== */

/* --- Layout dos columnas --- */
body.pw-sneat #tamanios .row-fluid {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

body.pw-sneat #tamanios .row-fluid > .span5 {
    flex: 0 0 38%;
    max-width: 38%;
    width: 38% !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #tamanios .row-fluid > .span7 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #tamanios .row-fluid > .span7:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

body.pw-sneat #tamanios .row-fluid > .span5 .pw-ayuda,
body.pw-sneat #tamanios .row-fluid > .span5 > div {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-soft);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    font-size: 13px;
    color: #697A8D;
    line-height: 1.6;
}

/* --- Quitar borde y padding del fieldset contenedor --- */
body.pw-sneat #tamanios #contenedor-tamanios {
    border: 0 none;
    padding: 0;
    margin: 0;
}

/* --- Toolbar: acciones masivas a la izquierda --- */
body.pw-sneat #tamanios .table-actions--top {
    justify-content: flex-start;
}

/* --- Header row (NOMBRE / ACTIVO) ---
   No hay <thead> real: esto es un nestable drag&drop (<ul>/<li>), no una
   <table>. Se imita el thead de page-content__table (mismo fondo/color/
   tipografía que usa Colores) con un div, alineado a las mismas columnas
   que .dd3-content (70px de padding-left = handle + checkbox). */
body.pw-sneat #tamanios .tamanios-listado__head {
    display: flex;
    align-items: center;
    background: var(--pw-thead-bg);
    border-bottom: 1px solid var(--pw-divider);
    padding: 10px 8px 10px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pw-text-strong);
}

/* Checkbox "seleccionar todo": mismo offset (38px) que el checkbox de
   cada fila (.dd3-content .dd-check-row, left:38px absolute) para que
   quede alineado en la misma columna. */
body.pw-sneat #tamanios .tamanios-listado__head-check {
    flex: 0 0 70px;
    display: flex;
    align-items: center;
    padding-left: 38px;
}

body.pw-sneat #tamanios .tamanios-listado__head-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
}

body.pw-sneat #tamanios .tamanios-listado__head-nombre {
    flex: 1 1 auto;
}

body.pw-sneat #tamanios .tamanios-listado__head-activo {
    flex: 0 0 160px;
    text-align: center;
}

/* --- Botón Agregar --- */
body.pw-sneat #tamanios .tamanios-btn-nueva {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
    margin-left: auto;
}

body.pw-sneat #tamanios .tamanios-btn-nueva:hover,
body.pw-sneat #tamanios .tamanios-btn-nueva:focus,
body.pw-sneat #tamanios .tamanios-btn-nueva:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* ================================================================== */
/* SNEAT: Nestable list (drag & drop)                                 */
/* ================================================================== */

/* Contenedor nestable */
body.pw-sneat #tamanios .dd {
    max-width: none;
}

body.pw-sneat #tamanios .dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Cada item */
body.pw-sneat #tamanios .dd-item {
    position: relative;
}

/* Drag handle — reset visual sin tocar el mecanismo de nestable.
   IMPORTANTE: NO cambiar position/overflow/text-indent del handle ni del
   :before (nestable usa text-indent:100% + overflow:hidden en el handle y un
   :before absoluto para mostrar el grip). Solo recoloreamos y cambiamos glyph. */
body.pw-sneat #tamanios .dd3-handle,
body.pw-sneat #tamanios .dd3-handle:hover,
body.pw-sneat #tamanios .dd3-handle:focus,
body.pw-sneat #tamanios .dd3-handle:active {
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
}

body.pw-sneat #tamanios .dd3-handle {
    width: 32px;
    height: 58px;
    background-color: transparent !important;
    cursor: grab;
    transition: background-color 0.15s ease;
}

body.pw-sneat #tamanios .dd3-handle:hover {
    background-color: rgba(105, 108, 255, 0.08) !important;
}

body.pw-sneat #tamanios .dd3-handle:active {
    cursor: grabbing;
}

/* Grip icon: mantenemos el :before absoluto de nestable, solo glyph + color.
   ⠿ (U+283F) = grip moderno de 6 puntos (2 columnas x 3 filas). */
body.pw-sneat #tamanios .dd3-handle:before {
    content: '\283F';
    color: #B4B7BD;
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    transition: color 0.15s ease;
}

body.pw-sneat #tamanios .dd3-handle:hover:before {
    color: var(--pw-accent);
}

/* Content area de cada item */
body.pw-sneat #tamanios .dd3-content {
    height: auto;
    min-height: 58px;
    margin: 0;
    /* 32px handle + gap + 18px checkbox + gap = 70px */
    padding: 0 8px 0 70px;
    border: 0 none;
    border-bottom: 1px solid var(--pw-border-soft);
    border-radius: 0;
    background: transparent;
    background-image: none;
    color: #566A7F;
    display: flex;
    align-items: center;
    /* NUNCA position:relative acá: el content viene después del handle en el
       DOM y al posicionarlo se pinta encima → tapa el grip y se come el
       mousedown del drag. El checkbox se ancla al li (positioned x nestable). */
    position: static;
    transition: background-color 0.12s ease;
}

body.pw-sneat #tamanios .dd3-content:hover {
    background-color: #F9FAFB;
    color: #566A7F;
}

/* Primera fila sin borde superior */
body.pw-sneat #tamanios .dd-list > .dd-item:first-child .dd3-content {
    border-top: 1px solid var(--pw-border-soft);
}

/* Item inactivo: atenuar SOLO el texto/nombre, no los controles (el switch) —
   si no, al activar el switch queda verde-transparente hasta que vuelve el AJAX. */
body.pw-sneat #tamanios .dd3-content.pw_disabled_row .col-text {
    opacity: 0.55;
}

/* Nombre del ítem. Clases REALES del override Tamanios::colInputsEdicion():
   .col-text > .dd-item-text (nombre) + .dd-item-edit (lápiz inline). */
body.pw-sneat #tamanios .col-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat #tamanios .dd-item-text {
    font-size: 14px;
    font-weight: 600;
    color: #566A7F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    float: none;
    height: auto;
}

/* Ocultar el lápiz de edición inline de PW_DragDropEditor en SNEAT
   (usamos el modal; el botón modal es .page-content__table-button--edit). */
body.pw-sneat #tamanios .dd-item-edit {
    display: none !important;
}

/* Botones de acción en el extremo derecho.
   position:static es CLAVE: CSS legacy lo posiciona y eso lo convertía en
   offset parent del checkbox absoluto (caía junto al toggle en vez de a la
   izquierda). Con static, el offset parent pasa a ser el li.dd-item. */
body.pw-sneat #tamanios .col-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    position: static !important;
}

/* Reset btn-group de BS2 */
body.pw-sneat #tamanios .col-buttons .btn-group {
    display: flex;
    gap: 2px;
}

/* Botón editar — circular violeta */
body.pw-sneat #tamanios .page-content__table-button--edit,
body.pw-sneat #tamanios .col-buttons .page-content__table-button--edit {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #tamanios .page-content__table-button--edit:hover,
body.pw-sneat #tamanios .page-content__table-button--edit:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* Botón eliminar — circular rojo */
body.pw-sneat #tamanios .btnBorrarTamanio {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #tamanios .btnBorrarTamanio:hover,
body.pw-sneat #tamanios .btnBorrarTamanio:focus,
body.pw-sneat #tamanios .btnBorrarTamanio:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* Ocultar botón vacío (spacer) de BS2 en SNEAT */
body.pw-sneat #tamanios .btn-empty {
    display: none;
}

/* Coherencia de tamaño de iconos de acción (lápiz FA vs tacho bootstrap-icons). */
body.pw-sneat #tamanios .col-buttons .page-content__table-button--edit i,
body.pw-sneat #tamanios .col-buttons .btnEditarTamanio i,
body.pw-sneat #tamanios .col-buttons .btnBorrarTamanio i {
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

/* Toggle activo */
body.pw-sneat #tamanios .col-buttons .button-toggle {
    float: none;
    margin: 0;
}

/* Checkbox de fila: aunque en el HTML vive dentro de .col-buttons (derecha),
   lo extraemos del flujo y lo anclamos a la IZQUIERDA de la fila, justo
   después del drag handle de 32px. Su offset parent es el li.dd-item
   (position:relative por nestable.css) gracias al .col-buttons static. */
body.pw-sneat #tamanios .dd3-content .dd-check-row {
    position: absolute !important;
    left: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--pw-accent);
    z-index: 2;
}

/* Dropdown select de acciones mobile — ocultar en SNEAT desktop */
body.pw-sneat #tamanios .dd-item-actions {
    display: none;
}

/* Drag placeholder y ghost */
body.pw-sneat #tamanios .dd-placeholder {
    background: rgba(105, 108, 255, 0.06);
    border: 1px dashed var(--pw-accent);
    border-radius: 4px;
    min-height: 58px;
    margin: 0;
}

body.pw-sneat #tamanios .dd-dragel .dd3-content {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
    border-radius: 6px;
    border: 1px solid var(--pw-border-soft);
}

/* ================================================================== */
/* Modal SNEAT: #modal-crear-tamanio                                  */
/* ================================================================== */

body.pw-sneat #modal-crear-tamanio {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat #modal-crear-tamanio .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

body.pw-sneat #modal-crear-tamanio .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-crear-tamanio .modal-header .tamanios-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

/* Cruz de cerrar: estandar SNEAT (ver SNEAT-PATTERNS). */
body.pw-sneat #modal-crear-tamanio .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-crear-tamanio .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-crear-tamanio .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    /* Usar la altura de pantalla: BS2 fija max-height:400px y fuerza scroll aunque
       haya lugar. Con un tope relativo al viewport el contenido entra sin scroll
       cuando cabe (y solo scrollea si es muy alto). */
    max-height: calc(88vh - 120px);
    overflow-y: auto;
}

/* Posicionar el modal arriba (no centrado) para que, si el contenido crece,
   no se corte contra el borde superior. */
body.pw-sneat #modal-crear-tamanio.in {
    top: 5vh;
    margin-top: 0;
}

body.pw-sneat #modal-crear-tamanio .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__field { margin-bottom: 16px; }

body.pw-sneat #modal-crear-tamanio .tamanios-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__field--inline {
    margin-bottom: 14px;
    padding: 10px 12px;
    background: #F8F8FC;
    border-radius: 8px;
    border: 1px solid var(--pw-border-soft);
    display: flex;
    gap: 20px;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__label--checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
    cursor: pointer;
    margin: 0;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__label--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
    flex-shrink: 0;
}

body.pw-sneat #modal-crear-tamanio input[type="text"] {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

body.pw-sneat #modal-crear-tamanio input[type="text"]:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__required {
    color: var(--pw-danger);
    font-size: 12px;
    margin-left: 2px;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-tamanio .tamanios-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

body.pw-sneat #modal-crear-tamanio .modal-footer .btn-primary,
body.pw-sneat #modal-crear-tamanio .modal-footer .btnGuardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-tamanio .modal-footer .btn-primary:hover,
body.pw-sneat #modal-crear-tamanio .modal-footer .btn-primary:focus,
body.pw-sneat #modal-crear-tamanio .modal-footer .btn-primary:active,
body.pw-sneat #modal-crear-tamanio .modal-footer .btnGuardar:hover,
body.pw-sneat #modal-crear-tamanio .modal-footer .btnGuardar:focus,
body.pw-sneat #modal-crear-tamanio .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* Responsive */
@media (max-width: 767px) {
    body.pw-sneat #tamanios .row-fluid { flex-direction: column; }
    body.pw-sneat #tamanios .row-fluid > .span5,
    body.pw-sneat #tamanios .row-fluid > .span7 { flex: 1 1 100%; max-width: 100%; width: 100% !important; }

    /* Mostrar el combo de acciones masivas TAMBIEN en mobile (hay espacio). El
       diseño global (sneat-base) lo oculta en mobile porque asumia el combo
       por-fila; pero ese combo por-fila ya no existe aca, asi que el masivo es
       la unica via de acciones en lote. Mayor especificidad (#tamanios) que la
       global => gana sin tocar sneat-base. Queda arriba, alineado con Agregar. */
    body.pw-sneat #tamanios .table-actions--top {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    body.pw-sneat #tamanios .table-actions--top .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat #tamanios .table-actions--top button.table-actions__button-action {
        display: inline-flex;
    }
    body.pw-sneat #tamanios .table-actions--top .tamanios-btn-nueva {
        margin-left: auto; /* Agregar a la derecha, en linea con el combo */
    }
}


/* catalogo-categorias.css */

/* ================================================================== */
/* SNEAT: Listado de Categorías (Drag & Drop, 3 niveles)              */
/* Scoped a body.pw-sneat #categorias — regresion cero en clasico.    */
/* ================================================================== */

/* --- Layout dos columnas: help (span4) + content (span8) --- */
body.pw-sneat #categorias .row-fluid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

body.pw-sneat #categorias .row-fluid > .span4 {
    flex: 0 0 30%;
    max-width: 30%;
    width: 30% !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #categorias .row-fluid > .span8 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

body.pw-sneat #categorias .row-fluid > .span8:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

/* --- Panel de ayuda --- */
body.pw-sneat #categorias .row-fluid > .span4 .pw-ayuda,
body.pw-sneat #categorias .row-fluid > .span4 > div {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-soft);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    font-size: 13px;
    color: #697A8D;
    line-height: 1.6;
}

/* ================================================================== */
/* Toolbar SNEAT: botón "Nueva categoría"                             */
/* ================================================================== */

body.pw-sneat #categorias .categorias-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
}

body.pw-sneat #categorias .categorias-btn-nueva {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #categorias .categorias-btn-nueva:hover,
body.pw-sneat #categorias .categorias-btn-nueva:focus,
body.pw-sneat #categorias .categorias-btn-nueva:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* ================================================================== */
/* Card contenedor del árbol nestable                                  */
/* ================================================================== */

body.pw-sneat #categorias .categorias-tree-card {
    background: #FFFFFF;
    border: 1px solid var(--pw-border-soft);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.06);
    overflow: hidden;
}

body.pw-sneat #categorias #contenedor-categorias {
    border: 0 none;
    padding: 0;
    margin: 0;
}

/* ================================================================== */
/* Botones Abrir todo / Cerrar todo                                    */
/* ================================================================== */

body.pw-sneat #categorias #nestable-menu {
    padding: 10px 16px;
    border-top: 1px solid var(--pw-border-soft);
    display: flex;
    gap: 8px;
    background: transparent;
}

body.pw-sneat #categorias #nestable-menu .btn {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: #566A7F;
    font-size: 12px;
    padding: 5px 12px;
}

body.pw-sneat #categorias #nestable-menu .btn:hover {
    background: #F5F6FA;
    background-image: none;
    color: #384551;
}

/* ================================================================== */
/* Nestable: contenedor                                                 */
/* ================================================================== */

body.pw-sneat #categorias .dd {
    max-width: none;
}

body.pw-sneat #categorias .dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}


body.pw-sneat #categorias .dd-item {
    position: relative;
}

/* ================================================================== */
/* Botón expand/collapse generado por nestable.js                      */
/* Bootstrap 2 lo convierte en un cuadro con borde — reset completo.  */
/* ================================================================== */

body.pw-sneat #categorias .dd-item > button[data-action] {
    position: absolute;
    left: 32px;
    top: 13px;  /* (46px fila - 20px botón) / 2 — centrado en la fila, NO en el li completo */
    width: 20px;
    height: 20px;
    line-height: 18px;
    padding: 0;
    margin: 0;
    float: none;
    border: 1px solid var(--pw-divider) !important;
    border-radius: 4px;
    background: #FFFFFF !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-accent);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    z-index: 2;
    transition: background-color 0.15s ease, color 0.15s ease;
}

body.pw-sneat #categorias .dd-item > button[data-action]:hover {
    background: var(--pw-accent-soft) !important;
    border-color: var(--pw-accent) !important;
    color: var(--pw-accent);
}

/* Ajuste de padding-left cuando hay botón expand/collapse (items con hijos) */
body.pw-sneat #categorias .dd-item > button[data-action] ~ .dd3-content {
    padding-left: 62px;
}

/* ================================================================== */
/* Drag handle — reset visual, mantener mecanismo de nestable          */
/* NO tocar position/overflow/text-indent — ver patrón 14 trampa #3   */
/* ================================================================== */

body.pw-sneat #categorias .dd3-handle,
body.pw-sneat #categorias .dd3-handle:hover,
body.pw-sneat #categorias .dd3-handle:focus,
body.pw-sneat #categorias .dd3-handle:active {
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
}

body.pw-sneat #categorias .dd3-handle {
    width: 32px;
    height: 46px;
    background-color: transparent !important;
    cursor: move;
    transition: background-color 0.15s ease;
}

body.pw-sneat #categorias .dd3-handle:hover {
    background-color: rgba(105, 108, 255, 0.08) !important;
}

/* Grip icon — solo cambiar glyph y color, el :before sigue siendo absoluto */
body.pw-sneat #categorias .dd3-handle:before {
    content: '\283F';
    color: #B4B7BD;
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    transition: color 0.15s ease;
}

body.pw-sneat #categorias .dd3-handle:hover:before {
    color: var(--pw-accent);
}

/* ================================================================== */
/* Content area de cada item                                           */
/* IMPORTANTE: position:static — ver patrón 14 trampa #1              */
/* Separadores: border-top (no border-bottom) → así el primer hijo     */
/* de un padre también tiene su línea divisoria.                       */
/* ================================================================== */

body.pw-sneat #categorias .dd3-content {
    height: auto;
    min-height: 46px;
    margin: 0;
    padding: 0 8px 0 40px;
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    border-radius: 0;
    background: transparent;
    background-image: none;
    color: #566A7F;
    display: flex;
    align-items: center;
    position: static;
    transition: background-color 0.12s ease;
}

/* Primer ítem raíz — sin borde superior (ya lo da la card) */
body.pw-sneat #categorias .dd > .dd-list > .dd-item:first-child > .dd3-content {
    border-top: 0 none;
}

body.pw-sneat #categorias .dd3-content:hover {
    background-color: #F9FAFB;
    color: #566A7F;
}

/* Item inactivo: fondo gris (a cualquier nivel, no solo anidado -- pedido
   explicito del usuario con captura). La regla global "SNEAT — Filas/
   items inactivos" (pw-panel.css) pone background:transparent!important
   en TODO .pw_disabled_row para que la fila herede el fondo de su card;
   se la pisa aca con mas especificidad + !important porque en el árbol
   de Categorías sí se quiere ver la banda gris (a diferencia del resto
   de los listados). */
body.pw-sneat #categorias .dd3-content.pw_disabled_row {
    background-color: var(--pw-page-bg) !important;
}

/* Contraste sobre esa banda gris: el atenuado por opacity (0.55) que
   usaba este archivo antes daba texto casi ilegible ahi -- calculado con
   la formula de contraste WCAG, el color mas oscuro (nivel 1, #384551)
   dimeado a 0.55 cae a ~2.8:1 contra #F5F6FA (por debajo del minimo
   aceptable de 3:1), y el mas claro (nivel 3, #8592A3) ya estaba al
   limite AUN sin dimear. Se saca el opacity (el fondo gris ya es la
   señal de "inactivo", no hace falta atenuar el texto encima) y se
   fuerza el color de nivel 3 al de nivel 2 (#566A7F, ~5:1 de contraste)
   solo cuando esta inactivo -- nivel 1 y 2 ya tienen contraste de sobra
   sin dimear y no necesitan override. */
body.pw-sneat #categorias .dd-list .dd-list .dd-list .dd3-content.pw_disabled_row .dd-item-text {
    color: #566A7F;
}

/* ================================================================== */
/* Nombre de la categoría                                              */
/* ================================================================== */

body.pw-sneat #categorias .col-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat #categorias .dd-item-text {
    font-size: 14px;
    font-weight: 600;
    color: #566A7F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: none;
    float: none;
    height: auto;
}

/* Ocultar lápiz de edición inline — la edición va al modal */
body.pw-sneat #categorias .dd-item-edit {
    display: none !important;
}

/* ================================================================== */
/* Botones de acción en el extremo derecho                             */
/* position:static CLAVE — ver patrón 14 trampa #2                    */
/* ================================================================== */

body.pw-sneat #categorias .col-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    position: static !important;
}

/* Reset btn-group de BS2 */
body.pw-sneat #categorias .col-buttons .btn-group {
    display: flex;
    gap: 2px;
}

/* Botón editar modal — circular, hover azul */
body.pw-sneat #categorias .col-buttons .page-content__table-button--edit,
body.pw-sneat #categorias .col-buttons .btnEditarCategoria {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light) !important;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.pw-sneat #categorias .col-buttons .page-content__table-button--edit:hover,
body.pw-sneat #categorias .col-buttons .page-content__table-button--edit:focus,
body.pw-sneat #categorias .col-buttons .btnEditarCategoria:hover,
body.pw-sneat #categorias .col-buttons .btnEditarCategoria:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent) !important;
}

/* Botón fotos — circular, hover naranja */
body.pw-sneat #categorias .col-buttons .btnFotos {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light) !important;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #categorias .col-buttons .btnFotos:hover,
body.pw-sneat #categorias .col-buttons .btnFotos:focus {
    background: rgba(255, 159, 67, 0.12) !important;
    color: #FF9F43 !important;
}

/* Botón eliminar — circular, hover rojo */
body.pw-sneat #categorias .col-buttons .btnBorrarCategoria {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light) !important;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #categorias .col-buttons .btnBorrarCategoria:hover,
body.pw-sneat #categorias .col-buttons .btnBorrarCategoria:focus,
body.pw-sneat #categorias .col-buttons .btnBorrarCategoria:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger) !important;
}

/* Ocultar botón vacío spacer de BS2 */
body.pw-sneat #categorias .btn-empty {
    display: none;
}

/* Coherencia de tamaño de iconos de acción (lápiz FA vs foto/tacho bootstrap-icons). */
body.pw-sneat #categorias .col-buttons .page-content__table-button--edit i,
body.pw-sneat #categorias .col-buttons .btnFotos i,
body.pw-sneat #categorias .col-buttons .btnBorrarCategoria i {
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

/* ================================================================== */
/* Toggle activo y estrella destacado                                  */
/* ================================================================== */

body.pw-sneat #categorias .col-buttons .button-toggle {
    float: none;
    margin: 0;
    flex-shrink: 0;
}

body.pw-sneat #categorias .col-buttons .button-star {
    float: none;
    height: auto;
    line-height: 1;
    margin: 0;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

body.pw-sneat #categorias .col-buttons .button-star__icon {
    font-size: 16px;
    color: #C5CDD6;
    transition: color 0.15s ease;
}

body.pw-sneat #categorias .col-buttons .button-star--active .button-star__icon {
    color: #FF9F43;
}

body.pw-sneat #categorias .col-buttons .button-star:hover .button-star__icon {
    color: #FF9F43;
}

/* Dropdown acciones mobile — ocultar en SNEAT desktop */
body.pw-sneat #categorias .dd-item-actions {
    display: none;
}

/* ================================================================== */
/* Anidamiento visual — árbol con conectores por ítem                 */
/* ------------------------------------------------------------------ */
/* Técnica: cada <li> dibuja SU PROPIO conector dentro del canal       */
/* (gutter) que crea el padding-left del <ol> anidado:                 */
/*   ::before = segmento vertical (full-height, salvo último hijo)     */
/*   ::after  = tick horizontal hacia el handle                        */
/* El último hijo corta el vertical en el centro → esquina L limpia.   */
/* Así los segmentos de hermanos se encadenan en un carril continuo.   */
/* ================================================================== */

/* --- Nivel 1 (raíz): bold oscuro — categoría principal --- */
body.pw-sneat #categorias .dd > .dd-list > .dd-item > .dd3-content .dd-item-text {
    font-weight: 700;
    color: #384551;
}

/* --- Sangría: el padding-left del ol crea el canal del conector --- */
body.pw-sneat #categorias .dd-list .dd-list {
    margin-left: 0;
    padding-left: 30px;
    border-left: 0 none;
}

/* --- Segmento vertical del carril (por ítem) ---
   height:100% (NO top/bottom:0 — en pseudo-elementos no estira en Chrome).
   Cada ítem pinta su tramo → los hermanos se encadenan en un rail continuo;
   en ítems con hijos el 100% abarca también el subárbol y enlaza al siguiente. */
body.pw-sneat #categorias .dd-list .dd-list > .dd-item::before {
    content: '';
    position: absolute;
    left: -16px;          /* centro del canal de 30px, a la izq. del li */
    top: 0;
    height: 100%;
    width: 2px;
    background: #DDE1E6;
    pointer-events: none;
    z-index: 1;
}

/* Último hijo: el vertical se corta en el centro de la fila → esquina L */
body.pw-sneat #categorias .dd-list .dd-list > .dd-item:last-child::before {
    height: 23px;         /* centro de la fila de 46px */
}

/* --- Tick horizontal: del carril hacia el handle, esquina redondeada --- */
body.pw-sneat #categorias .dd-list .dd-list > .dd-item::after {
    content: '';
    position: absolute;
    left: -16px;
    top: 22px;            /* centro de la fila */
    width: 14px;
    height: 2px;
    background: #DDE1E6;
    border-bottom-left-radius: 6px;
    pointer-events: none;
    z-index: 1;
}

/* En el último hijo el tick nace de la esquina L → redondeo arriba-izq. */
body.pw-sneat #categorias .dd-list .dd-list > .dd-item:last-child::after {
    top: 21px;
}

/* Fondos de profundidad — RETIRADO a pedido explicito del usuario (con
   captura): las filas anidadas activas se seguian viendo con un tinte
   gris aunque §132 ya habia igualado ese tinte contra las inactivas al
   mismo nivel -- el pedido real no era "que se vean iguales entre si"
   sino que NINGUNA fila anidada tenga fondo gris, activa o no. La
   jerarquia del arbol ya se lee por la indentacion + las lineas
   conectoras (::before/::after mas arriba en este archivo), asi que el
   tinte de fondo no hace falta. Se elimina tanto la regla base
   (profundidad) como el override .pw_disabled_row de §132 -- ese
   override ya no tiene sentido sin la regla que pisaba. */
body.pw-sneat #categorias .dd-list .dd-list > .dd-item > .dd3-content:hover {
    background-color: #F5F6FA;
}

/* Separador más suave en ítems anidados */
body.pw-sneat #categorias .dd-list .dd-list .dd3-content {
    border-top-color: rgba(234, 236, 240, 0.6);
}

/* --- Tipografía nivel 2 --- */
body.pw-sneat #categorias .dd-list .dd-list .dd-item-text {
    font-weight: 500;
    color: #566A7F;
}

/* --- Tipografía nivel 3 --- */
body.pw-sneat #categorias .dd-list .dd-list .dd-list .dd-item-text {
    font-weight: 400;
    color: #8592A3;
    font-size: 13px;
}

/* ================================================================== */
/* Drag placeholder y ghost                                             */
/* ================================================================== */

body.pw-sneat #categorias .dd-placeholder {
    background: rgba(105, 108, 255, 0.06);
    border: 1px dashed var(--pw-accent);
    border-radius: 4px;
    min-height: 46px;
    margin: 0;
}

body.pw-sneat #categorias .dd-dragel .dd3-content {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
    border-radius: 6px;
    border: 1px solid var(--pw-border-soft);
}

/* ================================================================== */
/* Modal SNEAT: #modal-crear-categoria                                 */
/* ================================================================== */

body.pw-sneat #modal-crear-categoria {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
    /* Modal mas ancho (el ancho va en la base; el alto se fija en .in para no
       dejar un overlay invisible cuando esta oculto -> gotcha SNEAT-PATTERNS). */
    width: 760px;
    max-width: calc(100vw - 32px);
    margin-left: -380px;
}

/* Alto: el modal crece con su contenido hasta 92vh (posicionado arriba); el que
   scrollea es el .modal-body (su max-height deja lugar para header+tabs+footer).
   Asi aprovecha la altura de pantalla y solo scrollea si el contenido no entra.
   Solo en .in para no crear un overlay invisible cuando esta oculto. */
body.pw-sneat #modal-crear-categoria.in {
    top: 3vh;
    margin-top: 0;
    height: auto;
    max-height: 92vh;
}

body.pw-sneat #modal-crear-categoria .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* El <button class="close"> va ANTES que el <h4> en el markup; sin
       row-reverse quedaria a la izquierda (orden de DOM) en vez de a la
       derecha (convencion de modal). */
    flex-direction: row-reverse;
}

body.pw-sneat #modal-crear-categoria .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #384551;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-crear-categoria .modal-header .categoria-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

/* Cruz de cerrar: estandar SNEAT (ver SNEAT-PATTERNS) — mas grande (28px) y
   centrada verticalmente con el titulo via flex en .modal-header (float:none),
   con padding para un area de toque comoda. */
body.pw-sneat #modal-crear-categoria .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-crear-categoria .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-crear-categoria .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    /* Tope relativo al viewport (deja lugar para header ~56 + tabs ~44 + footer
       ~64). El modal crece hasta 92vh; recien ahi el body scrollea. */
    max-height: calc(92vh - 175px);
    overflow-y: auto;
}

body.pw-sneat #modal-crear-categoria .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__field {
    margin-bottom: 16px;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__required {
    color: var(--pw-danger);
    margin-left: 2px;
}

/* Estilos del label generado por pw_select_categoria() */
body.pw-sneat #modal-crear-categoria .categoria-modal__field > label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

body.pw-sneat #modal-crear-categoria input[type="text"],
body.pw-sneat #modal-crear-categoria select {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    height: 38px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

body.pw-sneat #modal-crear-categoria input[type="text"]:focus,
body.pw-sneat #modal-crear-categoria select:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__field--inline {
    margin-bottom: 14px;
    padding: 10px 16px;
    background: #F8F8FC;
    border-radius: 8px;
    border: 1px solid var(--pw-border-soft);
    display: flex;
    gap: 24px;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__label--checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
    cursor: pointer;
    margin: 0;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__label--checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
    flex-shrink: 0;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-categoria .categoria-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

body.pw-sneat #modal-crear-categoria .modal-footer .btn-primary,
body.pw-sneat #modal-crear-categoria .modal-footer [name="btnGuardarSalir"] {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-categoria .modal-footer .btn-primary:hover,
body.pw-sneat #modal-crear-categoria .modal-footer .btn-primary:focus,
body.pw-sneat #modal-crear-categoria .modal-footer .btn-primary:active,
body.pw-sneat #modal-crear-categoria .modal-footer [name="btnGuardarSalir"]:hover {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* ================================================================== */
/* Modal: solapas (Contenido / Imagen / SEO)                          */
/* ================================================================== */

body.pw-sneat #modal-crear-categoria .categoria-modal__tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat #modal-crear-categoria .categoria-modal__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    box-shadow: none;
    padding: 12px 12px;
    margin-bottom: -1px;
    font-size: 13px;
    font-weight: 500;
    color: #697A8D;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
body.pw-sneat #modal-crear-categoria .categoria-modal__tab i {
    font-size: 15px;
}
body.pw-sneat #modal-crear-categoria .categoria-modal__tab:hover {
    color: var(--pw-accent);
}
body.pw-sneat #modal-crear-categoria .categoria-modal__tab.is-active {
    color: var(--pw-accent);
    border-bottom-color: var(--pw-accent);
}

/* Panes: solo el activo visible. */
body.pw-sneat #modal-crear-categoria .categoria-modal__pane {
    display: none;
}
body.pw-sneat #modal-crear-categoria .categoria-modal__pane.is-active {
    display: block;
}

/* Iconos en los labels de los campos. */
body.pw-sneat #modal-crear-categoria .categoria-modal__label i {
    color: var(--pw-accent);
    font-size: 14px;
    margin-right: 4px;
}

/* Chevron del combo "Mostrar dentro de..." (y cualquier select del modal). */
body.pw-sneat #modal-crear-categoria select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 34px;
    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='%23697A8D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

/* Placeholder / loading de los panes. */
body.pw-sneat #modal-crear-categoria .categoria-modal__pane-placeholder,
body.pw-sneat #modal-crear-categoria .categoria-modal__pane-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 180px;
    text-align: center;
    color: #8592A3;
    font-size: 14px;
}
body.pw-sneat #modal-crear-categoria .categoria-modal__pane-placeholder i {
    font-size: 32px;
    color: var(--pw-border-card, #D9DEE3);
}
body.pw-sneat #modal-crear-categoria .categoria-modal__pane-placeholder p {
    margin: 0;
}

/* Imagen reusa el uploader de mod_fotos; SEO reusa el form de metatags: ocultar
   su columna de ayuda (angosta dentro del modal) y usar todo el ancho. */
body.pw-sneat #modal-crear-categoria .categoria-modal__fotos .mod-fotos .row-fluid > .span4,
body.pw-sneat #modal-crear-categoria .categoria-modal__seo > .row-fluid > .span5 {
    display: none;
}
body.pw-sneat #modal-crear-categoria .categoria-modal__fotos .mod-fotos .row-fluid > .span8,
body.pw-sneat #modal-crear-categoria .categoria-modal__seo > .row-fluid > .span7 {
    width: 100%;
    margin-left: 0;
}

/* ================================================================== */
/* Modal: Configuración del menú de categorías (switches)             */
/* Mismo botón "gear" compartido que Tamaños/Colores (.pw-btn-        */
/* renombrar-variante en pw-panel.css) + mismo modal chico reutilizable */
/* (.pw-modal-sneat). Los 4 checkboxes de configuración (Destacados/    */
/* Nuevos/Marcas/Categorías horizontal en el menú) se ven como switch   */
/* SNEAT -- reskin CSS-only, mismo patrón ya usado en el modal de       */
/* Widgets (ver SNEAT-PATTERNS.md #100/#131): siguen siendo             */
/* <input type="checkbox"> reales con su name/value de siempre, el      */
/* guardado (mod_cc_categorias/configuracion/ajax_post.php) no cambió.  */
/* Deliberadamente NO se usó pw_html_button_toggle() (ese dispara un    */
/* AJAX inmediato al togglear, pensado para un switch de fila de tabla; */
/* acá los 4 valores viajan juntos recién al tocar "Guardar").          */
/* ================================================================== */

body.pw-sneat #categorias #modal-categorias-config label.checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 400;
    color: #4B4B4B;
    cursor: pointer;
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox + label.checkbox {
    margin-top: 14px;
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: none;
    width: 38px;
    height: 22px;
    margin: 0;
    border-radius: 11px;
    background-color: #c1bdbd;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease;
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox input[type="checkbox"]:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox input[type="checkbox"]:checked::after {
    left: 18px;
}

body.pw-sneat #categorias #modal-categorias-config label.checkbox input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
}

/* ================================================================== */
/* Responsive                                                          */
/* ================================================================== */

@media (max-width: 767px) {

    /* ------------------------------------------------------------------ */
    /* Prioridad de acciones en mobile: se oculta el boton de imagen y    */
    /* queda SIEMPRE visible el de borrar.                                */
    /* ------------------------------------------------------------------ */
    body.pw-sneat #categorias .col-buttons .btnFotos {
        display: none;
    }

    /* El boton de borrar quedaba fuera de pantalla, no por su posicion   */
    /* sino porque la fila entera medía 499px dentro de un contenedor de  */
    /* 426px y .categorias-tree-card (overflow:hidden) recortaba el       */
    /* extremo derecho. Causa: <fieldset> trae min-width:min-content      */
    /* INTRINSECO (no alcanza con width:100%), asi que se estiraba al     */
    /* ancho minimo de su contenido. min-width:0 es la unica forma de     */
    /* liberarlo.                                                         */
    body.pw-sneat #categorias .contenedor-categorias,
    body.pw-sneat #categorias #contenedor-categorias {
        min-width: 0;
    }

    /* Y que el nombre encoja (con ellipsis) en vez de empujar la fila.   */
    body.pw-sneat #categorias .dd3-content .col-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    body.pw-sneat #categorias .row-fluid {
        flex-direction: column;
    }
    body.pw-sneat #categorias .row-fluid > .span4,
    body.pw-sneat #categorias .row-fluid > .span8 {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100% !important;
    }

    /* Modal casi a pantalla completa en mobile; solapas con nombre visible. */
    body.pw-sneat #modal-crear-categoria {
        width: auto;
        max-width: none;
        left: 8px;
        right: 8px;
        margin-left: 0;
    }
    body.pw-sneat #modal-crear-categoria.in {
        top: 2vh;
        max-height: 96vh;
    }
    body.pw-sneat #modal-crear-categoria .categoria-modal__tab {
        flex: 1 1 auto;
        justify-content: center;
        padding: 12px 6px;
        gap: 5px;
        font-size: 12px;
    }
}


/* catalogo-productos.css */

.productos-listado__orden-destacado {
    text-align: center !important;
}

@media (max-width: 979px) {
    /*.productos-listado__orden-destacado {
        display: none;
    }*/
    .productos-listado__destacado {
        display: none;
    }
    .productos-listado__nuevo {
        display: none;
    }
}

@media (max-width: 767px) {
    .productos-listado__orden {
        display: none;
    }
    .catalogo .btnImportar {
        display: none;
    }
}

@media (max-width: 624px) {
    .productos-listado__activo {
        display: none;
    }
    .productos-listado__codigo {
        display: none;
    }
    .productos-listado .btnFotos,
    .productos-listado .btnPrecios,
    .productos-listado .btnStock {
        display: none;
    }
}

/* ================================================================== */
/* Sprint 4: Listado de Productos SNEAT                                */
/* Scoped a body.pw-sneat .catalogo — regresion cero en modo clasico. */
/* ================================================================== */

/* --- Card unificada: wrapper de layout, sin apariencia de card propia ---
   El fondo blanco + border-radius + overflow:hidden hacía que el área de
   filtro se viera como una "caja". Se elimina todo para que el filtro
   quede limpio sobre el fondo de página. */
body.pw-sneat .catalogo-table-card {
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    margin-bottom: 20px;
}

/* El área de filtro (span8) va dentro de .catalogo-filtro-card (card blanca),
   que ya provee la separación visual; no necesita border-bottom propio. */

/* Toolbar: anular el card global de pw-panel.css (.table-actions--top)
   que aplica background + border + shadow a TODOS los toolbars en SNEAT.
   En el catálogo usamos solo border-bottom como separador con la tabla. */
body.pw-sneat .catalogo-table-card .table-actions--top {
    padding: 12px 16px;
    background: transparent;
    border: 0 none;
    /* border-bottom: 1px solid var(--pw-divider); */
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 0;
    flex-wrap: wrap;
}

body.pw-sneat .catalogo-table-card .table-actions--bottom {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-divider);
}

/* --- Tabla: fondo blanco propio (ya no lo hereda de la card) --- */
body.pw-sneat .catalogo .page-content__table {
    border: 0 none;
    box-shadow: none;
    background-color: #FFFFFF;
}

/* base page-content__table.css tiene font-size: 12px !important → necesitamos !important */
body.pw-sneat .catalogo .page-content__table thead th,
body.pw-sneat .catalogo .page-content__table thead td {
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

body.pw-sneat .catalogo .page-content__table tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}

body.pw-sneat .catalogo .page-content__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .catalogo .page-content__table tbody tr:hover {
    background-color: #F9FAFB;
}

/* Fila inactiva: SOLO el texto se atenua (nunca los controles ni los botones de
   accion). Ver comentario extenso en catalogo-colores.css / SNEAT-PATTERNS. */
body.pw-sneat .catalogo .page-content__table tbody tr[data-item_disabled="1"] > td:not(:has(.btn)):not(:has(input)),
body.pw-sneat .catalogo .page-content__table tbody tr.pw_disabled_row > td:not(:has(.btn)):not(:has(input)) {
    opacity: 0.55;
}

/* Nombre del producto: prominente igual que col. principal en usuarios */
body.pw-sneat .catalogo .productos-listado__nombre a {
    font-size: 15px;
    font-weight: 600;
    color: #384551;
    text-decoration: none;
}

body.pw-sneat .catalogo .productos-listado__nombre a:hover {
    color: var(--pw-accent);
}

/* Código del producto: muted */
body.pw-sneat .catalogo .productos-listado__codigo {
    color: var(--pw-gray-light);
    font-size: 13px;
}

/* --- Botones de acción: 38px/18px (igual que usuarios) + token --pw-gray-light --- */
body.pw-sneat .catalogo .page-content__table-button--edit,
body.pw-sneat .catalogo .page-content__table-button--images,
body.pw-sneat .catalogo .page-content__table-button--prices,
body.pw-sneat .catalogo .page-content__table-button--stock,
body.pw-sneat .catalogo .page-content__table-button--ai {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .catalogo .page-content__table-button--edit:hover,
body.pw-sneat .catalogo .page-content__table-button--edit:focus,
body.pw-sneat .catalogo .page-content__table-button--images:hover,
body.pw-sneat .catalogo .page-content__table-button--images:focus,
body.pw-sneat .catalogo .page-content__table-button--prices:hover,
body.pw-sneat .catalogo .page-content__table-button--prices:focus,
body.pw-sneat .catalogo .page-content__table-button--stock:hover,
body.pw-sneat .catalogo .page-content__table-button--stock:focus,
body.pw-sneat .catalogo .page-content__table-button--ai:hover,
body.pw-sneat .catalogo .page-content__table-button--ai:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

body.pw-sneat .catalogo .page-content__table-button--delete {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .catalogo .page-content__table-button--delete:hover,
body.pw-sneat .catalogo .page-content__table-button--delete:focus,
body.pw-sneat .catalogo .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* --- Ordenamiento: icono nativo centrado (igual que usuarios) --- */
body.pw-sneat .catalogo .page-content__table-header--sort {
    cursor: pointer;
}

body.pw-sneat .catalogo .page-content__table-sort-icon {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    font-size: 14px;
    color: var(--pw-accent);
}

/* --- Stat-cards: números 24px/700/#384551 (igual que usuarios) --- */
body.pw-sneat .catalogo .counter__values,
body.pw-sneat .catalogo .counter__values--js {
    font-size: 24px;
    font-weight: 700;
    color: #384551;
}

/* --- Combos acciones masivas: estándar 38px/radius 8 --- */
body.pw-sneat .catalogo-table-card .table-actions--top .table-actions__select {
    height: 38px;
    width: auto;
    min-width: 150px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    color: #566A7F;
    font-size: 13px;
}

body.pw-sneat .catalogo-table-card .table-actions--top button.table-actions__button-action {
    height: 38px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    background: #FFFFFF;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: #566A7F;
}

/* --- Botones del toolbar superior (Importar / Agregar) --- */
body.pw-sneat .catalogo .button-bar--top .btn {
    background-image: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
}

body.pw-sneat .catalogo .button-bar--top .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat .catalogo .button-bar--top .btnCrear:hover,
body.pw-sneat .catalogo .button-bar--top .btnCrear:focus,
body.pw-sneat .catalogo .button-bar--top .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

body.pw-sneat .catalogo .button-bar--top .btnImportar {
    background-color: transparent;
    background-image: none;
    border-color: var(--pw-divider);
    color: #697A8D;
}

body.pw-sneat .catalogo .button-bar--top .btnImportar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

/* ================================================================== */
/* Toolbar SNEAT: row-fluid vertical + acciones masivas izq / btns der */
/* ================================================================== */

/* Apila search (span8) encima del toolbar (span4), ambos ancho completo.
   ⚠️ Scoped a .catalogo--list: en el form (catalogo--form) este column
   rompía el layout ayuda-izquierda / campos-derecha. */
body.pw-sneat.catalogo--list .catalogo .row-fluid {
    margin-left: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

/* El clearfix de Bootstrap 2 (.row-fluid:before/:after { content:"";
   display:table }) se "blockifica" como item de flex real bajo
   display:flex y, con flex-wrap:wrap, puede terminar en su propia línea
   -- huecos de ~20px arriba/abajo en cualquier .row-fluid de un solo hijo
   (ej. el que arma PW_PanelDeControl_Html_List::table() dentro de
   Colores/Marcas/Listas de precios). Neutralizarlo acá, en el mismo
   selector que aplica display:flex, evita reabrir este bug módulo por
   módulo. */
body.pw-sneat.catalogo--list .catalogo .row-fluid::before,
body.pw-sneat.catalogo--list .catalogo .row-fluid::after {
    display: none;
}

body.pw-sneat.catalogo--list .catalogo .row-fluid > .span8,
body.pw-sneat.catalogo--list .catalogo .row-fluid > .span4,
body.pw-sneat.catalogo--list .catalogo .row-fluid > .span12 {
    float: none;
    width: 100% !important;
    margin-left: 0;
}

/* Toolbar: acciones masivas a la izquierda, botones a la derecha */
body.pw-sneat .catalogo .table-actions--top {
    justify-content: flex-start;
}

/* Grupo de botones inyectados: empujar a la derecha via order + margin-left */
body.pw-sneat .catalogo .catalogo-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat .catalogo .catalogo-actions-buttons .btn {
    background-image: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
}

body.pw-sneat .catalogo .catalogo-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat .catalogo .catalogo-actions-buttons .btnCrear:hover,
body.pw-sneat .catalogo .catalogo-actions-buttons .btnCrear:focus,
body.pw-sneat .catalogo .catalogo-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

body.pw-sneat .catalogo .catalogo-actions-buttons .btnImportar {
    background-color: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
}

body.pw-sneat .catalogo .catalogo-actions-buttons .btnImportar:hover {
    background-color: var(--pw-btn-secondary-bg-hover);
    background-image: none;
    border-color: var(--pw-btn-secondary-border);
}

/* --- Separación entre stat-cards y zona de filtro ---
   Sin línea: la card blanca del filtro ya delimita el bloque (igual que
   en Ventas). Solo dejamos aire entre los KPIs y el filtro. */
body.pw-sneat.catalogo--list .catalogo .button-bar--top {
    margin-bottom: 16px;
}

/* --- Bloque de filtro como card blanca (título + buscador + avanzado) ---
   Mismo patrón que Ventas (.pedidos-filtro-card) para coherencia UI. */
body.pw-sneat.catalogo--list .catalogo-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* --- Override: suscriptores.css da card global a #formBuscar ---
   Dentro de .catalogo-filtro-card el form no debe tener caja propia
   (la card exterior ya la provee). */
body.pw-sneat.catalogo--list #formBuscar {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0 !important;  /* anula style="margin-bottom:20px" inline del form */
}

/* --- Título de sección "Filtrar" (SNEAT only) --- */
body.pw-sneat.catalogo--list .catalogo .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #384551;
    margin-bottom: 12px;
}

/* --- Botón "Filtros Avanzados": fluye junto al input en lugar de absoluto --- */
body.pw-sneat #formBuscar .form-search__search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat #formBuscar #buscar_producto {
    flex: 1;
    padding-right: 8px !important; /* ya no necesita reservar 40px para btn absoluto */
}

body.pw-sneat #formBuscar #btnFiltros {
    position: static !important;
    width: auto !important;
    height: 38px;
    padding: 6px 12px;
    border: 1px solid var(--pw-divider) !important;
    border-radius: 8px;
    color: #697A8D;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    background-color: #FFFFFF;
    box-shadow: none !important;
}

body.pw-sneat #formBuscar #btnFiltros .fa {
    margin-right: 4px;
}

/* Ocultar celda de botones del counter-bar (ya estan en el toolbar) */
body.pw-sneat .catalogo .button-bar__table-cell--buttons {
    display: none;
}

/* Counters: horizontal en lugar de apilados verticalmente */
/* --- Counters: horizontal en lugar de apilados verticalmente --- */
body.pw-sneat .catalogo .button-bar__table-cell--counters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
}

body.pw-sneat .catalogo .counter {
    width: auto !important;
    min-width: 130px;
    flex: 0 0 auto;
}

/* Fix: form_buscar.php tiene .form-search select { height: 20px !important }
   que pisa nuestra regla sin !important. Con mayor especificidad + !important
   ganamos (ambas tienen !important; gana la de mayor especificidad). */
body.pw-sneat #formBuscar.form-buscar-productos select {
    height: 38px !important;
    padding: 6px 34px 6px 12px;
}

/* Restaurar borde del fieldset avanzado (nuestro #formBuscar fieldset
   lo quita con border:0, pero en productos la separacion es util). */
body.pw-sneat #formBuscar.form-buscar-productos .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-soft) !important;
    border-radius: 8px;
    padding: 12px 16px !important;
}

/* --- Selector de cantidad por pagina en el toolbar (SNEAT) --- */
body.pw-sneat .catalogo .table-actions--top .catalogo-page-size {
    display: inline-flex;
    align-items: center;
}

body.pw-sneat .catalogo .table-actions--top .catalogo-page-size .table-actions__select-page-size {
    width: auto;
    min-width: 72px;
    height: 38px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    color: #566A7F;
}

/* Ocultar selector duplicado del pie */
body.pw-sneat .catalogo .table-actions--bottom .table-actions__select-page-size {
    display: none;
}

/* span2 del page-size oculto deja hueco del 16%; expandir span10 al 100% */
body.pw-sneat .catalogo .table-actions--bottom .row-fluid > .span2 {
    display: none;
}

body.pw-sneat .catalogo .table-actions--bottom .row-fluid > .span10 {
    width: 100%;
    margin-left: 0;
}

/* ================================================================== */
/* SNEAT — Envío de campañas de email desde el catálogo               */
/* (body.pw-sneat.catalogo--emarketing)                               */
/* La tabla la arma PW_Html_Table (BS2 striped/bordered) con id        */
/* #pw_table_productos y celdas .td_activo/.td_destacado/.td_codigo/   */
/* .td_nombre/.td_acciones. Mismo patrón que publicaciones emarketing. */
/* ================================================================== */

/* Fix scroll horizontal: .main{display:table} crecía al ancho natural */
/* de la tabla (nombres largos sin cortar). table-layout:fixed lo clava */
/* al viewport; word-break corta los strings largos.                   */
body.pw-sneat.catalogo--emarketing .main {
    table-layout: fixed;
    width: 100%;
}

/* El toggle "Mostrar filtros de búsqueda" es redundante en SNEAT       */
/* (la card de filtro ya está siempre visible).                        */
body.pw-sneat.catalogo--emarketing .btnMostrarFormBuscar {
    display: none;
}

/* Card contenedora de la tabla */
body.pw-sneat.catalogo--emarketing .catalogo-emarketing__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Reset de la tabla BS2 + layout fijo */
body.pw-sneat.catalogo--emarketing #pw_table_productos {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border: 0 none;
    background-color: transparent;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos thead th {
    background-color: var(--pw-thead-bg);
    border: 0 none;
    border-bottom: 1px solid var(--pw-divider);
    color: var(--pw-text-strong);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos tbody td {
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    padding: 12px 16px;
    color: #566A7F;
    font-size: 14px;
    vertical-align: middle;
    background-color: transparent;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos tbody tr:first-child td {
    border-top: 0 none;
}

/* Neutraliza el striping BS2 */
body.pw-sneat.catalogo--emarketing #pw_table_productos tbody tr:nth-child(odd) td {
    background-color: transparent;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos tbody tr:hover td {
    background-color: #F9FAFB;
}

/* Columnas Activo / Destacado: angostas y centradas, icono coloreado */
body.pw-sneat.catalogo--emarketing #pw_table_productos .th_activo,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_activo,
body.pw-sneat.catalogo--emarketing #pw_table_productos .th_destacado,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_destacado {
    width: 70px;
    text-align: center;
    white-space: nowrap;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos .td_activo .fa-check,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_destacado .fa-check {
    color: #28C76F;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos .td_activo .fa-times,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_destacado .fa-times {
    color: #C6CCD4;
}

/* Columna Código: angosta, gris */
body.pw-sneat.catalogo--emarketing #pw_table_productos .th_codigo,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_codigo {
    width: 140px;
    color: var(--pw-gray-light);
    font-size: 13px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Columna Nombre: ocupa el resto y CORTA strings largos (fix scroll) */
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_nombre {
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos .td_nombre a {
    color: var(--pw-text-strong);
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.catalogo--emarketing #pw_table_productos .td_nombre a:hover {
    color: var(--pw-accent);
}

/* Borrador en gris itálico */
body.pw-sneat.catalogo--emarketing #pw_table_productos .pw-nombre-borrador,
body.pw-sneat.catalogo--emarketing #pw_table_productos .borrador {
    font-size: 11px;
    color: #8592A3;
    font-style: italic;
    margin-left: 4px;
}

/* Columna Email/acciones: angosta y centrada */
body.pw-sneat.catalogo--emarketing #pw_table_productos .th_acciones,
body.pw-sneat.catalogo--emarketing #pw_table_productos .td_acciones {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

/* ================================================================== */
/* MOBILE (<=624px): mantener visibles switch/estrella y checkbox      */
/* masivo del listado de productos.                                    */
/* ================================================================== */
@media (max-width: 624px) {
    /* .productos-listado__activo{display:none} (arriba, sin scope) ocultaba
       el switch; en SNEAT activar/desactivar es la unica via desde el listado
       (no hay campo Activo en el form completo tampoco para toggle rapido),
       asi que debe seguir visible. Idem el checkbox de seleccion masiva
       (acciones masivas ya se muestran en mobile). */
    body.pw-sneat .catalogo .productos-listado__activo,
    body.pw-sneat .catalogo [class*="table-cell-multiple-action"],
    body.pw-sneat .catalogo [class*="table-header--multiple-action"] {
        display: table-cell !important;
    }
}

/* ================================================================== */
/* MOBILE (<=767px): stat-cards compactas + boton "Agregar" corto.     */
/* ================================================================== */
@media (max-width: 767px) {

    /* Stat-cards mas chicas: 2 por fila, ancho equitativo, menos padding. */
    body.pw-sneat .catalogo .button-bar__table-cell--counters {
        gap: 8px;
    }
    body.pw-sneat .catalogo .button-bar__table-cell--counters .counter {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        box-sizing: border-box;
        padding: 8px 10px !important;
        margin: 0 !important;
    }
    /* .button-bar--top .counter__values (24px) empata en especificidad y va
       mas abajo en el bundle; sumamos .catalogo para ganarle. */
    body.pw-sneat .catalogo .button-bar--top .counter__values,
    body.pw-sneat .catalogo .button-bar--top .counter__values--js {
        font-size: 18px;
        line-height: 1.15;
    }
    body.pw-sneat .catalogo .counter__caption {
        font-size: 10px;
        line-height: 1.2;
    }
    body.pw-sneat .catalogo .counter__icon {
        width: 32px;
        height: 32px;
        font-size: 15px;
        flex: 0 0 32px;
    }
    body.pw-sneat .catalogo .counter__body {
        min-width: 0;
    }

    /* El boton "Agregar" corto (font-size:0 + ::after "Agregar") y el
       layout de 2 filas [page-size/Importar/Exportar] + [masivas/Agregar]
       ahora son un patron GLOBAL en sneat-base.css ("Toolbar con
       Importar/Exportar/Agregar"), disparado por la clase marcadora
       .pw-toolbar-actions-group en .catalogo-actions-buttons (ver
       administracion/tabla.php) + :has() -> ya no hace falta duplicar las
       reglas de order/::after aca por modulo (y elimina el riesgo de fuga
       entre tabs que tuvo la version anterior, scopeada a #contenido).
       Ver SNEAT-PATTERNS.md para el detalle. */

    /* Mostrar el combo de acciones masivas TAMBIEN en mobile (mismo patron
       que Marcas/Tamanios/Colores): sneat-base lo oculta en mobile
       globalmente; mayor especificidad (.catalogo) gana sin tocar sneat-base. */
    body.pw-sneat .catalogo .table-actions--top .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat .catalogo .table-actions--top button.table-actions__button-action {
        display: inline-flex;
    }

    /* --- Listado a ancho completo ---
       El .tab-pane trae padding lateral de 18px que en mobile es ancho
       desperdiciado. Se reduce a 10px y la card del listado se saca a
       sangre (full-bleed) para que la tabla use los 100% del viewport;
       el toolbar recupera su margen con padding propio (arriba). */
    body.pw-sneat.catalogo--list .tab-content > .tab-pane {
        padding-left: 10px;
        padding-right: 10px;
    }
    body.pw-sneat.catalogo--list .catalogo-table-card {
        margin-left: -10px;
        margin-right: -10px;
    }

    /* Iconos de alerta por fila (sin fotos / sin stock / opiniones
       pendientes): en mobile ocupan espacio valioso y son secundarios;
       se ocultan para aprovechar mejor el ancho de la fila. */
    body.pw-sneat .catalogo .pw_producto_sin_stock,
    body.pw-sneat .catalogo .pw_producto_opiniones_pendientes {
        display: none !important;
    }
}


/* catalogo-producto-form.css */

/* ================================================================== */
/* SNEAT: Formulario de Producto (TAB Productos, op=form)             */
/* Scoped a body.pw-sneat.catalogo--form — regresion cero en clasico. */
/* Regla de diseño: la ayuda contextual va a la IZQUIERDA del bloque. */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* Encabezado del producto (nombre + ID + fecha)                      */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .page-content__tab-header {
    padding: 16px 18px 14px;
    display: flex;
    align-items: center;
}

body.pw-sneat.catalogo--form .page-content__tab-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}

body.pw-sneat.catalogo--form .page-content__tab-header-title {
    font-size: 15px;
    font-weight: 600;
    color: #566A7F;
    line-height: 1.4;
}

/* Icono de tipo (fa-tag) antes del nombre: más pequeño y desaturado */
body.pw-sneat.catalogo--form .page-content__tab-header-title > i.fa:first-child {
    font-size: 13px;
    color: #8592A3;
    margin-right: 4px;
}

/* Link al producto en el sitio — badge pill */
body.pw-sneat.catalogo--form .page-content__tab-header-title a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(105, 108, 255, 0.10);
    color: var(--pw-accent);
    border: 1px solid rgba(105, 108, 255, 0.25);
    border-radius: 20px;
    padding: 3px 12px 3px 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: background 0.15s ease;
    vertical-align: middle;
    line-height: 1.5;
}

body.pw-sneat.catalogo--form .page-content__tab-header-title a:hover {
    background: rgba(105, 108, 255, 0.18);
    color: var(--pw-accent);
    text-decoration: none;
}

/* Icono external-link dentro del badge */
body.pw-sneat.catalogo--form .page-content__tab-header-title a .fa-external-link {
    font-size: 10px;
    opacity: 0.8;
    margin-left: 0;
    vertical-align: middle;
}

body.pw-sneat.catalogo--form .page-content__tab-header-subtitle {
    color: #8592A3;
    font-size: 12px;
    margin-top: 0;
}

/* ------------------------------------------------------------------ */
/* Sub-tabs del producto (#tabsItem) — estilo solapa con borde       */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form #tabsItem.nav-tabs,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs {
    border-bottom: 1px solid #C0C4CC;
    margin-bottom: 0;
}

body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li > a,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li > a {
    border: 1px solid #C0C4CC;
    border-radius: 8px 8px 0 0;
    background-color: #F5F5F6;
    background-image: none;
    color: #697A8D;
    padding: 9px 16px;
    margin-right: 4px;
    text-shadow: none;
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li > a:hover,
body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li > a:focus,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li > a:hover,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li > a:focus {
    border-color: #C0C4CC;
    background-color: #ECEEF2;
    color: var(--pw-accent);
}

body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li.active > a,
body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li.active > a:hover,
body.pw-sneat.catalogo--form #tabsItem.nav-tabs > li.active > a:focus,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li.active > a,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li.active > a:hover,
body.pw-sneat.catalogo--form #tabsItemIdiomas.nav-tabs > li.active > a:focus {
    border: 1px solid #C0C4CC;
    border-bottom-color: transparent;
    background-color: #FFFFFF;
    color: #384551;
    font-weight: 600;
    cursor: default;
}

/* Tabs de idioma dentro del pane — flat underline                    */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) {
    border-bottom: 2px solid var(--pw-border-soft);
    margin-bottom: 16px;
}

body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li > a {
    border: 0 none !important;
    border-radius: 0;
    background: transparent !important;
    background-image: none !important;
    color: var(--pw-gray-light);
    font-weight: 500;
    padding: 8px 14px;
    margin-bottom: -2px;
    border-bottom: 2px solid transparent !important;
    text-shadow: none;
    box-shadow: none !important;
    transition: color 0.15s, border-color 0.15s;
}

body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li > a:hover,
body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li > a:focus {
    color: var(--pw-accent);
    background: transparent !important;
}

body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li.active > a,
body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li.active > a:hover,
body.pw-sneat.catalogo--form .tab-pane .nav-tabs:not(#tabsItemIdiomas) > li.active > a:focus {
    color: var(--pw-accent);
    border-bottom: 2px solid var(--pw-accent) !important;
    background: transparent !important;
    font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Panel de contenido del tab: superficie blanca tipo card            */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .tab-pane.pw_pc_form_background {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-soft);
    border-top: 0 none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 24px;
}

/* ------------------------------------------------------------------ */
/* Bloques del formulario: secciones con separador sutil              */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .form__block {
    border-bottom: 1px solid var(--pw-border-soft);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

/* ------------------------------------------------------------------ */
/* Layout del bloque: AYUDA IZQUIERDA (span4) + CAMPOS DERECHA (span8)*/
/* El span4 de ayuda es siempre el primer hijo del row del bloque.    */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .form__block > .row-fluid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 24px;
    margin-left: 0;
}

/* Columna de ayuda (izquierda, ancho fijo) */
body.pw-sneat.catalogo--form .form__block > .row-fluid > .span4:first-child {
    flex: 0 0 300px;
    max-width: 300px;
    width: auto !important;
    margin-left: 0;
    float: none;
}

/* Columna de campos (derecha, ocupa el resto) */
body.pw-sneat.catalogo--form .form__block > .row-fluid > .span8 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

/* Bloque sin ayuda: el span8 es primer hijo y toma todo el ancho */
body.pw-sneat.catalogo--form .form__block > .row-fluid > .span8:first-child {
    flex: 1 1 100%;
}

/* ------------------------------------------------------------------ */
/* Rows anidados dentro de los campos: columnas proporcionales        */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .form__block .span8 .row-fluid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-left: 0;
}

/* ------------------------------------------------------------------ */
/* GOTCHA BS2: .row-fluid trae ::before/::after de clearfix. Al pasar  */
/* el contenedor a flex esos pseudos se vuelven FLEX ITEMS, y con gap  */
/* inyectan un hueco fantasma ANTES del primer hijo y DESPUES del      */
/* ultimo (no es el gap entre columnas: es espacio muerto en los dos   */
/* extremos, x2 por cada row-fluid y en todo el formulario).           */
/* El clearfix ya no hace falta: los hijos tienen float:none.          */
/* ------------------------------------------------------------------ */
body.pw-sneat.catalogo--form .form__block > .row-fluid::before,
body.pw-sneat.catalogo--form .form__block > .row-fluid::after,
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid::before,
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid::after {
    display: none;
}

body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > [class*="span"] {
    float: none;
    margin-left: 0;
    width: auto !important;
    min-width: 0;
}

body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span12 { flex: 1 1 100%; }
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span8  { flex: 2 1 0; }
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span6  { flex: 1 1 0; }
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span4  { flex: 1 1 0; }
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span3  { flex: 1 1 0; }

/* Marca: un .span4 SOLO en su propio .row-fluid (a diferencia de
   Categorías/Talle/Variante 1, que comparten fila de a 3). flex:1 1 0 en
   un item sin hermanos crece al 100% de la fila -- el combo terminaba
   pegado al borde derecho del form en vez de medir lo mismo que la
   columna de Categorías (reportado con captura). Con :only-child se
   limita SOLO este caso (una sola columna en la fila) al ancho que le
   tocaría si tuviera otras 2 al lado (mismo cálculo que usa el
   row-fluid de 3 columnas: gap 16px x2 repartido entre 3). */
body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > .span4:only-child {
    flex: 0 1 calc((100% - 32px) / 3);
    max-width: calc((100% - 32px) / 3);
}

/* El alto fijo de 60px del row Activo/Destacado/Nuevo (css.php inline)
   asume 3 columnas en línea — con wrap puede desbordar. Altura libre. */
body.pw-sneat.catalogo--form .form__block-item--activo {
    height: auto !important;
}

/* ------------------------------------------------------------------ */
/* Ayuda contextual (cfg-ayuda): card suave                           */
/* ------------------------------------------------------------------ */

/* Cubre tanto la ayuda de Contenido (.form_ayuda) como la de los demás
   sub-tabs (Imágenes, Videos, etc.) que no usan el wrapper .form_ayuda. */
body.pw-sneat.catalogo--form .tab-pane .cfg-ayuda__item {
    background-color: #F8F8FC;
    border: 1px solid var(--pw-border-soft);
    border-radius: 10px;
    padding: 16px 18px;
    color: #697A8D;
    font-size: 13px;
    line-height: 1.6;
}

body.pw-sneat.catalogo--form .tab-pane .cfg-ayuda__item a {
    color: var(--pw-accent);
}

/* ------------------------------------------------------------------ */
/* Labels y campos                                                    */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .form__block-label {
    color: #566A7F;
    font-size: 13px;
    font-weight: 600;
}

body.pw-sneat.catalogo--form .form__block-item {
    margin-bottom: 14px;
}

body.pw-sneat.catalogo--form .form input[type="text"],
body.pw-sneat.catalogo--form .form input[type="number"],
body.pw-sneat.catalogo--form .form input[type="email"],
body.pw-sneat.catalogo--form .form input[type="url"],
body.pw-sneat.catalogo--form .form select,
body.pw-sneat.catalogo--form .form textarea {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    /*background-image: none;*/
    color: #566A7F;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat.catalogo--form .form input[type="text"]:focus,
body.pw-sneat.catalogo--form .form input[type="number"]:focus,
body.pw-sneat.catalogo--form .form input[type="email"]:focus,
body.pw-sneat.catalogo--form .form input[type="url"]:focus,
body.pw-sneat.catalogo--form .form select:focus,
body.pw-sneat.catalogo--form .form textarea:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* ------------------------------------------------------------------ */
/* Botones "Tipo de producto" (físico / digital / servicio)           */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .tipo-producto {
    background-color: #FFFFFF;
    color: #697A8D;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    border-radius: 8px;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

body.pw-sneat.catalogo--form .tipo-producto:hover {
    background-color: #FFFFFF;
    border-color: var(--pw-accent);
    color: var(--pw-accent);
}

body.pw-sneat.catalogo--form .tipo-producto--activo,
body.pw-sneat.catalogo--form .tipo-producto--activo:hover {
    background-color: var(--pw-accent-soft);
    border-color: var(--pw-accent);
    color: var(--pw-accent);
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Paneles de selección (Categorías / Tamaños / Colores): altura      */
/* acotada con scroll — el árbol de categorías puede medir +6000px    */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .page-content__panel--border-full {
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--pw-border-soft);
    border-radius: 10px;
    background-color: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* Wells (Precios y otros sub-tabs): card suave                       */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .tab-pane .well {
    background-color: #F8F8FC;
    background-image: none;
    border: 1px solid var(--pw-border-soft);
    border-radius: 10px;
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Barra fija superior (Guardar / Cancelar): oculta hasta cambios     */
/* El toggle display:none/is-visible ahora es GLOBAL (pw-panel.css,   */
/* selector body.pw-sneat .pw_watch_form_changes .button-bar--fixed-top, */
/* ver SNEAT-PATTERNS.md #67) — no se repite aca.                     */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* Acciones del formulario (Guardar / Cancelar / Eliminar al pie)     */
/* ------------------------------------------------------------------ */

body.pw-sneat.catalogo--form .form-actions {
    background-color: transparent;
    background-image: none;
    border: 0 none;
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
}

body.pw-sneat.catalogo--form .form-actions .btn,
body.pw-sneat.catalogo--form .button-bar .btn {
    background-image: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
}

body.pw-sneat.catalogo--form .form-actions .btn-primary,
body.pw-sneat.catalogo--form .button-bar .btn-primary {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat.catalogo--form .form-actions .btn-primary:hover,
body.pw-sneat.catalogo--form .form-actions .btn-primary:focus,
body.pw-sneat.catalogo--form .form-actions .btn-primary:active,
body.pw-sneat.catalogo--form .button-bar .btn-primary:hover,
body.pw-sneat.catalogo--form .button-bar .btn-primary:focus,
body.pw-sneat.catalogo--form .button-bar .btn-primary:active {
    background-color: var(--pw-accent-hover);
    border-color: var(--pw-accent-hover);
}

body.pw-sneat.catalogo--form .form-actions .btnBorrar,
body.pw-sneat.catalogo--form .form-actions .btn-danger {
    background-color: transparent;
    border: 1px solid var(--pw-danger);
    color: var(--pw-danger);
}

body.pw-sneat.catalogo--form .form-actions .btnBorrar:hover,
body.pw-sneat.catalogo--form .form-actions .btn-danger:hover {
    background-color: var(--pw-danger-soft);
    color: var(--pw-danger);
}

/* ------------------------------------------------------------------ */
/* Imagen principal: thumbnail chico, no la imagen a tamaño real.     */
/* ------------------------------------------------------------------ */

/* La regla base (pw-panel.css, sin scope) usa display:table-cell +
   height:128px para mostrar .primera_foto como una miniatura, con
   max-width/max-height:100% en el <img> para que nunca exceda esa caja.
   Gotcha de CSS: dentro de un table-cell el alto NO es "definido" para
   el motor de layout (lo calcula el propio table-cell a partir de su
   contenido), así que un max-height en % sobre un hijo de table-cell no
   tiene contra qué resolverse y el navegador lo trata como si no
   existiera -- la celda termina estirándose al tamaño NATIVO de la
   imagen en vez de recortarla a 128px. Reportado con captura: en el
   producto de la captura la imagen "chica" en disco (getFotoChica())
   resultó tener 640x640 (confirmado: mismo tamaño en bytes que la
   "grande", un .gif -- ver PW_Controller_Images::copyImageLargeAsThumbnail(),
   el fallback que copia el original tal cual cuando no se puede generar
   un thumbnail redimensionado). El cap roto es el problema real: pasa
   con cualquier foto "chica" más grande que 128px, sea o no un caso como
   este.
   Fix: pasar a flex (alto REALMENTE fijo, no heredado del layout de
   tabla) + mismo tamaño de miniatura (128px) que ya usa el resto del
   panel para fotos (ver sortable.css, galería de Imágenes de este mismo
   formulario). Solo en desktop: la regla mobile de más abajo (dentro de
   @media max-width:767px, ya existente) sigue mandando en pantallas
   chicas sin tocarla. */
body.pw-sneat.catalogo--form .primera_foto {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
    padding: 8px;
    box-sizing: border-box;
}

body.pw-sneat.catalogo--form .primera_foto img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* ------------------------------------------------------------------ */
/* Responsive: en pantallas chicas la ayuda pasa arriba del bloque    */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {

    body.pw-sneat.catalogo--form .form__block > .row-fluid {
        flex-direction: column;
        gap: 12px;
        /* En desktop es flex-start (alinea las columnas arriba). Al pasar a
           column el eje cruzado es el HORIZONTAL, y flex-start dejaba las
           columnas con el ancho de su contenido (~60%) en vez de a lo ancho. */
        align-items: stretch;
    }

    body.pw-sneat.catalogo--form .form__block > .row-fluid > .span4:first-child {
        flex: 1 1 auto;
        max-width: 100%;
    }

    body.pw-sneat.catalogo--form .form__block .span8 .row-fluid {
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
    }

    body.pw-sneat.catalogo--form .tab-pane.pw_pc_form_background {
        padding: 16px;
    }

    /* ------------------------------------------------------------------ */
    /* FIX CRITICO: columnas colapsadas -> todo el form se superponia.     */
    /*                                                                    */
    /* Las reglas de desktop dan flex-basis 0 a las columnas              */
    /* (.span8 {flex: 1 1 0}, .span8 .row-fluid > .span8 {flex: 2 1 0},   */
    /* etc.) para repartir el ANCHO. Al pasar el contenedor a             */
    /* flex-direction:column aca arriba, el eje principal pasa a ser el   */
    /* VERTICAL y ese mismo flex-basis:0 empieza a significar ALTO 0: las */
    /* columnas quedaban en 30px (el min-height de BS2) y su contenido    */
    /* desbordaba encima de los bloques siguientes.                       */
    /* Con flex-basis:auto la altura vuelve a salir del contenido.        */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .form__block > .row-fluid > [class*="span"],
    body.pw-sneat.catalogo--form .form__block .span8 .row-fluid > [class*="span"] {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* ------------------------------------------------------------------ */
    /* Encabezado: ID y fecha de creacion DEBAJO del link al producto.    */
    /* En desktop van a la derecha; en mobile compiten por el ancho con   */
    /* el nombre y lo parten en varias lineas.                            */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .page-content__tab-header-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    body.pw-sneat.catalogo--form .page-content__tab-header-subtitle {
        text-align: left;
    }

    /* ------------------------------------------------------------------ */
    /* Activo / Destacado / Nuevo: en linea horizontal dentro de una card  */
    /* (son 3 toggles chicos; apilados desperdiciaban 3 filas enteras).    */
    /* Especificidad con .form__block-items para ganarle al               */
    /* flex-direction:column generico de ".form__block .span8 .row-fluid". */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .form__block .form__block-items .form__block-item--activo > .row-fluid {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
        gap: 12px;
        padding: 12px 10px;
        background-color: #FFFFFF;
        border: 1px solid var(--pw-border-card);
        border-radius: 8px;
        box-sizing: border-box;
    }

    body.pw-sneat.catalogo--form .form__block .form__block-items .form__block-item--activo > .row-fluid > [class*="span"] {
        flex: 0 1 auto;
        width: auto;
        min-width: 0;
        margin-left: 0;
        text-align: center;
    }

    /* El control (switch / estrella / check) centrado bajo su label. */
    body.pw-sneat.catalogo--form .form__block-item--activo .button-toggle,
    body.pw-sneat.catalogo--form .form__block-item--activo .button-star,
    body.pw-sneat.catalogo--form .form__block-item--activo .button-check {
        margin-left: auto;
        margin-right: auto;
    }

    /* Tipo de producto: el valor pasa a badge, justo debajo de la card
       de los 3 toggles (es su hermano inmediato en el markup). */
    body.pw-sneat.catalogo--form .form__block-item--activo + .form__block-item > p {
        display: inline-block;
        margin: 0;
        padding: 4px 10px;
        border-radius: 6px;
        background-color: var(--pw-accent-soft);
        color: var(--pw-accent);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
    }

    /* ------------------------------------------------------------------ */
    /* Compactar el espaciado vertical: en mobile los 24px de separacion  */
    /* entre bloques + los 24px de gap interno dejaban huecos enormes.    */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .form__block {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    body.pw-sneat.catalogo--form .form__block-item {
        margin-bottom: 10px;
    }

    /* Varios .form__block-item quedan sin contenido segun el estado del
       producto (p.ej. #form-block-item-tipo-producto-por-defecto solo se
       llena en borrador) pero seguian aportando su margen: aire muerto
       acumulado. :empty no sirve porque conservan espacios en blanco;
       :not(:has(*)) los detecta por no tener hijos-elemento. */
    body.pw-sneat.catalogo--form .form__block-item:not(:has(*)) {
        margin-bottom: 0;
    }

    /* (La ayuda colapsada se resuelve como ESTANDAR global en pw-panel.css:
       ver "ayuda contextual colapsada en mobile". Antes estaba aca, scopeado
       solo a catalogo--form.) */

    /* ------------------------------------------------------------------ */
    /* Imagen principal a la mitad del ancho (a futuro: slider de fotos). */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .primera_foto {
        /* Viene como table-cell, que ignora max-width y se estira al ancho
           de la "tabla": hay que pasarlo a bloque para poder achicarlo. */
        display: block;
        width: 50%;
        max-width: 50%;
    }

    body.pw-sneat.catalogo--form .primera_foto img {
        width: 100%;
        height: auto;
    }

    /* Arrastraba 20px de margen inferior = hueco muerto bajo la imagen. */
    body.pw-sneat.catalogo--form .primera_foto {
        margin-bottom: 0;
    }

    /* ------------------------------------------------------------------ */
    /* Barra flotante Guardar/Cancelar: compacta y dentro de pantalla.    */
    /* Los .btn se estiraban al 100% y quedaban apilados pegados a ambos  */
    /* bordes (86px de alto). Pasan a fila unica alineada a la derecha.   */
    /* OJO: el display de la barra lo togglea el JS inline (block/none),  */
    /* asi que NO se puede hacer flex la barra: se alinea con text-align  */
    /* y botones inline.                                                  */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .button-bar--fixed-top {
        text-align: right;
        white-space: nowrap;
    }

    /* margin 0 + separacion solo ENTRE botones (.btn + .btn): con un
       margin-left parejo el primer boton tambien lo recibia y el marco
       quedaba con 12px a la izquierda contra 4px a la derecha. */
    body.pw-sneat.catalogo--form .button-bar--fixed-top .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        max-width: 48%;
        margin: 0;
        vertical-align: middle;
        /* alto fijo: uno es <a> y el otro <button>, y diferian 1px, con lo
           que el marco quedaba desparejo. font-size explicito porque el
           contenedor lo pone en 0 (ver pw-panel.css). */
        height: 36px;
        box-sizing: border-box;
        font-size: 13px;
        line-height: 1.2;
        /* min-width parejo: con anchos fraccionarios (94.25 / 92.79) el
           redondeo de la caja de linea dejaba ~1.3px de sobra que, por el
           text-align:right, caia toda del lado izquierdo y desbalanceaba
           el marco. Con enteros iguales queda 6px exactos de cada lado. */
        min-width: 96px;
    }

    body.pw-sneat.catalogo--form .button-bar--fixed-top .btn + .btn {
        margin-left: 8px;
    }

    /* ------------------------------------------------------------------ */
    /* Bloque "Marca": misma card que los selectores de variantes, con    */
    /* titulo + botones editar/agregar + combo, todo en una sola fila.    */
    /* El .span4 contenedor no tiene clase propia -> se lo agarra por     */
    /* :has() sobre su <h5 for="marca_id">.                               */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form .span4:has(> .form__block-title[for="marca_id"]) {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        padding: 8px 14px;
        background-color: #FFFFFF;
        border: 1px solid var(--pw-border-card);
        border-radius: 8px;
        margin-bottom: 0;
    }

    /* Titulo + botones: sin float (el markup trae pull-right, que en un
       contenedor flex se ignora y respeta el orden del DOM: editar, +). */
    body.pw-sneat.catalogo--form .form__block-title[for="marca_id"] {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        margin: 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-text-strong);
    }

    body.pw-sneat.catalogo--form .span4:has(> .form__block-title[for="marca_id"]) > select {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin: 0;
    }

    /* ------------------------------------------------------------------ */
    /* Acordeon de los selectores de variantes                            */
    /* (Categorias / Variante primaria / Variante secundaria)             */
    /* Arrancan colapsados y se abre de a uno: en mobile los 3 paneles    */
    /* con scroll propio no entran a lo alto y se pisaban entre si.       */
    /* ------------------------------------------------------------------ */
    body.pw-sneat.catalogo--form #columna_categorias,
    body.pw-sneat.catalogo--form #columna_tamanios,
    body.pw-sneat.catalogo--form #columna_colores {
        background-color: #FFFFFF;
        border: 1px solid var(--pw-border-card);
        border-radius: 8px;
        /* sin margin-bottom: el gap del .row-fluid padre ya las separa;
           sumar margen daba doble separacion + sobrante al final. */
        margin-bottom: 0;
        box-sizing: border-box;
    }

    /* El <h5> existente pasa a ser el header clickeable del acordeon. */
    body.pw-sneat.catalogo--form #columna_categorias > .form__block-title,
    body.pw-sneat.catalogo--form #columna_tamanios > .form__block-title,
    body.pw-sneat.catalogo--form #columna_colores > .form__block-title {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 12px 14px;
        font-size: 14px;
        font-weight: 600;
        color: var(--pw-text-strong);
        cursor: pointer;
        -webkit-user-select: none;
        user-select: none;
    }

    /* Badge con la cantidad de seleccionados (lo completa el JS).
       margin-right:auto empuja los botones +/editar y el chevron a la
       derecha sin depender del orden del markup. */
    body.pw-sneat.catalogo--form .pw-var-count {
        margin-right: auto;
    }

    body.pw-sneat.catalogo--form .has-seleccion > .form__block-title .pw-var-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background-color: var(--pw-accent);
        color: #FFFFFF;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
    }

    /* Chevron dibujado con bordes (no depende de la fuente de iconos). */
    body.pw-sneat.catalogo--form #columna_categorias > .form__block-title::after,
    body.pw-sneat.catalogo--form #columna_tamanios > .form__block-title::after,
    body.pw-sneat.catalogo--form #columna_colores > .form__block-title::after {
        content: "";
        flex: 0 0 auto;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        margin-left: 4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    body.pw-sneat.catalogo--form #columna_categorias.is-open > .form__block-title::after,
    body.pw-sneat.catalogo--form #columna_tamanios.is-open > .form__block-title::after,
    body.pw-sneat.catalogo--form #columna_colores.is-open > .form__block-title::after {
        margin-top: 2px;
        transform: rotate(-135deg);
    }

    /* Cuerpo colapsable: el panel de checkboxes y (en tamanios) el well
       de "precio por variante". Los inputs siguen en el <form> -> el
       guardado no se altera. */
    body.pw-sneat.catalogo--form #columna_categorias > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_tamanios > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_colores > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_tamanios .well {
        display: none;
    }

    body.pw-sneat.catalogo--form #columna_categorias.is-open > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_tamanios.is-open > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_colores.is-open > .page-content__panel,
    body.pw-sneat.catalogo--form #columna_tamanios.is-open .well {
        display: block;
        border: 0 none;
        border-top: 1px solid var(--pw-border-card);
        border-radius: 0 0 8px 8px;
    }

    /* ------------------------------------------------------------------ */
    /* Campos avanzados (Codigo de producto + Categoria Catalogo Dinamico) */
    /* -> fuera del flujo, accesibles desde el boton "Avanzado".           */
    /* Los inputs NO se mueven del <form>: solo se ocultan visualmente.    */
    /* ------------------------------------------------------------------ */
    /* "Avanzado" es un item mas de la fila Activo/Destacado/Nuevo: mismo
       formato label-arriba / icono-abajo que sus hermanos. */
    body.pw-sneat.catalogo--form .pw-adv-open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        width: 100%;
        margin: 0;
        padding: 0;
        background: none;
        border: 0 none;
        box-shadow: none;
        cursor: pointer;
    }

    body.pw-sneat.catalogo--form .pw-adv-open__label {
        color: #566A7F;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
    }

    body.pw-sneat.catalogo--form .pw-adv-open__icon {
        color: #A5A3AE;
        font-size: 22px;
        line-height: 1;
    }

    body.pw-sneat.catalogo--form .pw-adv-open:hover .pw-adv-open__icon {
        color: var(--pw-accent);
    }

    /* Cuadro de tipo de producto en modo lectura: no es clickeable. */
    body.pw-sneat.catalogo--form .tipo-producto--lectura,
    body.pw-sneat.catalogo--form .tipo-producto--lectura:hover {
        margin-bottom: 0;
        cursor: default;
    }

    /* Solapas de idioma pegadas a su panel + panel compacto: entre las
       solapas y el campo "Nombre" habia 56px de aire (16 del margen del ul
       + 18 del padding del pane + margenes del label). */
    body.pw-sneat.catalogo--form #tabsItemIdiomas ~ .tab-content > .tab-pane {
        padding-top: 12px;
    }

    body.pw-sneat.catalogo--form #tabsItemIdiomas ~ .tab-content .control-group {
        margin-top: 0;
        margin-bottom: 8px;
    }

    body.pw-sneat.catalogo--form .pw-adv-fields {
        display: none;
    }

    body.pw-sneat.catalogo--form .pw-adv-fields.is-open {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        align-items: center;
        justify-content: center;
        padding: 16px;
        background-color: rgba(0, 0, 0, 0.5);
    }

    body.pw-sneat.catalogo--form .pw-adv-modal__card {
        width: 100%;
        max-width: 420px;
        max-height: 80vh;
        overflow-y: auto;
        padding: 16px;
        background-color: #FFFFFF;
        border-radius: 12px;
        box-sizing: border-box;
    }

    body.pw-sneat.catalogo--form .pw-adv-modal__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }

    body.pw-sneat.catalogo--form .pw-adv-modal__title {
        font-size: 15px;
        font-weight: 700;
        color: var(--pw-text-strong);
    }

    body.pw-sneat.catalogo--form .pw-adv-modal__close {
        padding: 0;
        border: 0 none;
        background: none;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
        color: var(--pw-text-muted);
        cursor: pointer;
    }

}

/* ------------------------------------------------------------------ */
/* Piezas que el JS inyecta siempre pero que SOLO deben verse en       */
/* mobile: en desktop quedan ocultas (el acordeon no aplica ahi).      */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {

    body.pw-sneat.catalogo--form .pw-var-count,
    body.pw-sneat.catalogo--form .pw-adv-open__cell,
    body.pw-sneat.catalogo--form .pw-adv-open,
    body.pw-sneat.catalogo--form .pw-adv-modal__header {
        display: none;
    }

}


/* catalogo-importacion.css */

.catalogo__importacion td {
    padding: 2px;
    margin: 0 0 10px;
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
    font-size: 12px;
    line-height: 20px;        
    /*word-break: break-all;
    word-wrap: break-word;*/
}

.catalogo__importacion .csv_popup_formato td {
    text-align: center;
}

.catalogo__importacion .csv_popup_formato td.csv_popup_formato_nota_columna {
    font-size: 10px;
    line-height: 12px;
}    

#tab_importacion_productos_fotos .well {
    background: none;
    border: 0 none;
}

.catalogo__importacion .form-actions .alert {
    margin-bottom: 0px;
}

.catalogo__importacion-popup {
    left: 36%;
    width: 70%;
}

.catalogo__importacion-popup th {
    font-size: 12px !important;
    padding: 2px !important;
    border-top: 0 none !important;
}

/* catalogo-stock.css */

#stock #formBuscar input {
    text-align: left;
}

#stock .td_cantidad {
    text-align: right;
}

/* El text-align del <td> no lo hereda el <input> (los form controls no
   heredan text-align en la mayoria de los navegadores) -> hay que ponerlo
   explicito en el input. Scopeado a SNEAT: en clasico el input.cantidad
   ya se ve bien tal cual esta hace anios, no tocar esa regresion-cero. */
body.pw-sneat #stock input.cantidad {
    text-align: right;
}

#stock thead .td_dimensiones {
    text-align: right;
}

/*.popup-stock__label {
    height: 30px;
    line-height: 2;
}

.popup-stock__input {
    height: 30px !important;
}*/

#popup_stock_dimensiones .popup-stock__input {
    text-align: right;
} 

#popup_stock_dimensiones .input-append {
    margin-bottom: 0px;
}

#popup_stock_dimensiones .add-on {
    height: 30px;
    line-height: 2;
}

.popup-stock__multiplicacion {
    height: 90px; 
    padding-top: 35px; 
    text-align: center;
} 

.popup-stock__alert {
    float: left;
    margin: 0;
    padding: 8px 14px;
}

.popup-stock__ejemplo {
    font-size: 12px;
    color: #999999;
}

@media (max-width: 767px) {

    .popup-stock__multiplicacion {
        display: none !important;
    }

    .popup-stock__ejemplo {
        margin-bottom: 10px;
    }

}

/* ================================================================== */
/* SNEAT: filtro como card blanca (patron canonico, ver SNEAT-PATTERNS */
/* 19). El grid/spacing del avanzado y de la barra simple ya los da   */
/* pw-panel.css de forma global (misma clases .form-search* / .b5-*   */
/* que Catalogo/Ventas/Contacto) -- aca solo va la card en si.        */
/* ================================================================== */

body.pw-sneat #stock .stock-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* El form no debe traer caja propia: la card exterior ya la da. */
body.pw-sneat #stock .stock-filtro-card #formBuscar {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0 !important;
}

body.pw-sneat #stock .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #384551;
    margin-bottom: 12px;
}



/* catalogo-listas-precios.css */

/* ================================================================== */
/* SNEAT: Listas de precios -- filtro como card blanca (patron         */
/* canonico, ver SNEAT-PATTERNS 19). El grid/spacing del avanzado y   */
/* de la barra simple ya los da pw-panel.css de forma global (mismas  */
/* clases .form-search* / .b5-* que Catalogo/Ventas/Contacto) -- aca  */
/* solo van la card en si y el card secundario de Ordenar/Acciones.   */
/* Scoped a body.pw-sneat #listas -- regresion cero en modo clasico.  */
/* ================================================================== */

body.pw-sneat #listas .listas-precios-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* El form no debe traer caja propia: la card exterior ya la da. */
body.pw-sneat #listas .listas-precios-filtro-card #formBuscar {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0 !important;
}

body.pw-sneat #listas .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #384551;
    margin-bottom: 12px;
}

/* --- Card secundaria: Ordenar por / Otras acciones ---
   En clasico son 2 columnas span2 al lado del filtro; en SNEAT se
   apilan debajo del filtro (full width, sin competir por el ancho
   angosto en mobile) en 2 secciones dentro de una misma card. */
body.pw-sneat #listas .listas-precios-acciones-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

body.pw-sneat #listas .listas-precios-acciones-card__section {
    flex: 1 1 220px;
    min-width: 0;
}

body.pw-sneat #listas .listas-precios-acciones-card__buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.pw-sneat #listas .listas-precios-acciones-card__buttons .btn {
    width: 100%;
    box-sizing: border-box;
}

/* ⚠️ El <select> de "Orden" viene con class="span12", que en el grid FIJO de
   Bootstrap 2 significa width:940px -- un ancho pensado para vivir dentro de
   un .row de 940px, no dentro de una columna flex de ~335px. Medido: el
   select ocupaba 724px dentro de una seccion de 335px, o sea se metia por
   debajo de la columna de botones y se veia como si "Imprimir"/"Exportar"
   estuvieran encima del campo. Los botones nunca estuvieron mal ubicados:
   las dos secciones de la card no se superponen (verificado), el que
   desbordaba era el control.
   Se acota cualquier control de la card a su columna, no solo este select,
   para que el mismo span* heredado no vuelva a romperlo en otro campo. */
body.pw-sneat #listas .listas-precios-acciones-card select,
body.pw-sneat #listas .listas-precios-acciones-card input[type="text"],
body.pw-sneat #listas .listas-precios-acciones-card [class*="span"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    float: none;
    margin-left: 0;
}

/* Mobile: apilar las 2 secciones a lo ancho completo (no lado a lado). */
@media (max-width: 767px) {
    body.pw-sneat #listas .listas-precios-acciones-card {
        flex-direction: column;
        gap: 16px;
    }
    body.pw-sneat #listas .listas-precios-acciones-card__section {
        flex: 1 1 100%;
    }
}


/* contacto.css */

@media(max-width: 767px) {
    .contactos-listado__suscripto {
        display: none;
    }
    .contactos-listado__origen {
        display: none;
    }
}

@media(max-width: 624px) {
    .contactos-listado__telefono {
        display: none;
    }
}

@media(max-width: 480px) {
    .contactos-listado__nombre {
        display: none;
    }
}

/* SNEAT: la columna Nombre/Email es el contenido principal del listado, NO
   debe desaparecer nunca (a diferencia de clasico, que la ocultaba a
   <=480px dejando solo fecha+comunicacion+acciones — casi sin informacion
   util). Mayor especificidad (body.pw-sneat) gana sobre la regla de arriba
   sin tocarla, clasico sigue igual. */
body.pw-sneat .contactos-listado__nombre {
    display: table-cell !important;
}

/* ==========================================================================
   SNEAT — Módulo Contactos
   Scopeado bajo body.pw-sneat (.contacto--list para overrides page-specific)
   ========================================================================== */

/* Título de sección "Filtrar" (estilo canónico, igual que Ventas/Catálogo) */
body.pw-sneat.contacto--list .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

/* El shell usa .main{display:table} + .main__right{display:table-cell}, que se
   expanden al ancho natural del contenido y generan scroll horizontal (agravado
   por usar 100vw, que incluye la scrollbar). table-layout:fixed + width:100%
   rompe ese loop: el contenido se ajusta al viewport (sidebar + resto). Válido
   aquí porque la tabla de contactos cabe; para tablas anchas usar overflow-x. */
body.pw-sneat.contacto--list .main {
    table-layout: fixed;
    width: 100%;
}

/* --- Mobile: el listado (toolbar + tabla) va a sangre, sin margen ---
   Contacto vive dentro de un <div class="tab-pane"> con padding:18px de
   clasico (a diferencia de Usuarios, que es standalone). Ese padding le
   da margen gratis a las stat-cards y a la card de filtro (correcto, se
   deja como esta) pero TAMBIEN al toolbar y a la tabla, que deben quedar
   full-bleed en mobile (mismo criterio que el resto de los listados,
   ver SNEAT-PATTERNS.md §39 "el margen no va en el listado"). Como
   Contacto no envuelve su tabla en una card propia (a proposito: "Tabla:
   fondo blanco, sin card", ver mas abajo), se le resta el padding del
   tab-pane con margin negativo -18px en vez de mover el padding a otro
   contenedor. El padding propio de las celdas (12px 14px) sigue dando
   aire al contenido pegado al borde. */
@media (max-width: 767px) {
    body.pw-sneat.contacto--list .table-actions--top,
    body.pw-sneat.contacto--list .contactos-listado {
        margin-left: -18px;
        margin-right: -18px;
    }
    /* El baseline anti-overflow (sneat-responsive.css) y el propio
       bootstrap.min.css ("table { max-width:100% }") ponen un cap de
       max-width:100% -> tapaba cualquier intento de ensanchar la tabla
       con el margen negativo de arriba (max-width siempre gana sobre
       width cuando es menor). El selector por clases
       (body.pw-sneat.contacto--list .contactos-listado) tiene mas
       especificidad en el papel pero NO le ganaba en la practica -> se
       usa el id de la tabla (#pw_table_contactos, unico en la pagina)
       + !important para no dejar dudas. Sin el cap, width:auto deja que
       el block-level box se estire naturalmente hasta cubrir exactamente
       el margen negativo en ambos lados (confirmado en vivo: pasa de
       455px a los 491px reales del viewport). */
    body.pw-sneat.contacto--list #pw_table_contactos {
        max-width: none !important;
        width: auto !important;
    }
}

/* Bloque de filtro como card blanca (igual que Ventas/Catálogo).
   Toma el ancho del contenedor (ya contenido por el .main de arriba); no usa
   100vw para no incluir la scrollbar ni volverse desproporcionada. */
body.pw-sneat.contacto--list .contacto-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Form flat dentro de la card (anula la card global de suscriptores.css) */
body.pw-sneat.contacto--list #formBuscar {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

/* Fieldset del panel avanzado: borde suave + leyenda visible */
body.pw-sneat.contacto--list #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat.contacto--list #formBuscar .form-search__advanced legend {
    display: inline;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    width: auto;
    border: 0 none;
    margin-bottom: 0;
    text-transform: none;
}
body.pw-sneat.contacto--list #formBuscar .form-search__advanced label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-text-strong);
    margin-bottom: 4px;
}

/* Botones del filtro avanzado (Borrar filtros / Filtrar): ocupan su columna */
body.pw-sneat.contacto--list #formBuscar .form-search__advanced .btn {
    width: 100%;
    height: 38px;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}

/* Override card global de pw-panel.css en .table-actions--top */
body.pw-sneat.contacto--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 10px 4px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--pw-divider);
}

/* Botón Exportar inyectado en toolbar (SNEAT) */
body.pw-sneat.contacto--list .contacto-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

/* Selector "Mostrar N ítems" en el toolbar, a la izquierda del Exportar */
body.pw-sneat.contacto--list .contacto-page-size {
    display: inline-flex;
    align-items: center;
}
/* Ocultar el texto "Total: N ítems" que el helper imprime a la izquierda */
body.pw-sneat.contacto--list .contacto-page-size small {
    display: none;
}
/* Mismo estilo que el combo de acciones masivas. El chevron y el padding-right
   los provee la regla global select:not([multiple]) — NO sobreescribir el
   background-image (eso mataba la flecha). */
body.pw-sneat.contacto--list .contacto-page-size .pw_select_page_rows {
    width: auto;
    min-width: 120px;
    height: 38px;
    margin: 0;
    padding-left: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    box-shadow: none;
    color: var(--pw-text-strong);
}
body.pw-sneat.contacto--list .contacto-actions-buttons .btn {
    background-color: var(--pw-btn-secondary-bg);
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    border: 1px solid var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
    font-size: 13px;
    height: var(--pw-control-height);  /* misma altura que el combo "Mostrar N ítems" */
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
}
body.pw-sneat.contacto--list .contacto-actions-buttons .btn:hover {
    background-color: var(--pw-btn-secondary-bg-hover);
    border-color: var(--pw-btn-secondary-border);
}

/* Tabla: fondo blanco, sin card */
body.pw-sneat .contactos-listado {
    background-color: #FFFFFF;
    border: 0 none;
    box-shadow: none;
}

/* Encabezados: gris de fondo */
body.pw-sneat .contactos-listado thead th {
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

/* Filas */
body.pw-sneat .contactos-listado tbody td {
    padding: 12px 14px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}
body.pw-sneat .contactos-listado tbody tr:first-child td {
    border-top: 0 none;
}
body.pw-sneat .contactos-listado tbody tr:hover td {
    background-color: #F9FAFB;
}

/* Texto secundario en celdas */
body.pw-sneat .contactos-listado .page-content__table-text--muted {
    color: var(--pw-gray-light);
    font-size: 11px;
}

/* Fecha, Telefono y Comunicacion tienen contenido de ancho fijo (una fecha,
   un telefono, 3 iconos) que no necesita crecer con el viewport -- por eso
   se les da un ancho en PX fijo (no %) via CSS, en vez de dejar que
   listado.php declare un "width" en % en el <th>. Con table-layout:fixed
   el ancho de columna sale de las celdas de la PRIMERA fila (el thead), y
   un % ahi se resuelve como % del ancho TOTAL de la tabla: a un viewport
   angosto un 28% podia alcanzar justo para 3 botones de 32px, pero al
   ensanchar la ventana ese mismo 28% volvia la columna larguisima (llegó a
   333px) dejando franjas en blanco a los costados de los iconos -- eso es
   lo que se veia como "espacio desaprovechado". Fijar el ancho en px hace
   que la columna se mantenga del tamaño justo pase lo que pase con el
   viewport; el espacio que sobra lo absorben Nombre/Origen (las columnas
   con texto, que si se benefician de mas ancho).
   El padding horizontal tambien se recorta (14px -> 8px por lado) en estas
   3 columnas para no desperdiciar esos px fijos en aire. */
body.pw-sneat .contactos-listado__fecha,
body.pw-sneat .contactos-listado__telefono,
body.pw-sneat .contactos-listado__comunicacion {
    padding-left: 8px !important;
    padding-right: 8px !important;
}
body.pw-sneat .contactos-listado__fecha {
    width: 95px !important;
}
body.pw-sneat .contactos-listado__telefono {
    width: 150px !important;
}
body.pw-sneat .contactos-listado__comunicacion {
    width: 132px !important;
}

/* Telefono: mismo criterio que Fecha, un solo renglon para el numero
   (pedido explicito del usuario: "aplicar nowrap tambien al numero de
   telefono"). white-space se hereda a los hijos (bandera/pais), asi que
   tampoco esos se parten. El numero y el boton de copiar van en su propia
   fila flex para no empujar la bandera de abajo. */
body.pw-sneat .contactos-listado__telefono {
    white-space: nowrap;
}
body.pw-sneat .contactos-listado__telefono-row {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Boton de copiar (telefono y email): icono chico, discreto, con el mismo
   hover circular violeta que el resto de los botones de accion del
   listado. Reutiliza el componente global .pw-button-copy
   (panel_de_control/js/button_copy.js) que ya usa Cupones. */
body.pw-sneat .contactos-listado .pw-button-copy {
    border: none;
    background: transparent;
    color: var(--pw-gray-light);
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    vertical-align: middle;
    transition: background-color 0.15s, color 0.15s;
}
body.pw-sneat .contactos-listado .pw-button-copy:hover {
    background-color: var(--pw-accent-soft);
    color: var(--pw-accent);
}
/* Feedback de copiado/error (button_copy.js alterna estas clases en el
   <i> del boton al hacer click). */
body.pw-sneat .contactos-listado .pw-button-copy .fa.text-success {
    color: var(--pw-success, #28a745);
}
body.pw-sneat .contactos-listado .pw-button-copy .fa.text-error {
    color: var(--pw-danger);
}

/* Email: el boton de copiar va pegado al final de la direccion, antes del
   check/x de suscripto. */
body.pw-sneat .contactos-listado__email-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

/* Botones de acción: quitar colores sólidos, usar hover circular.
   Tamaño 38px/18px, igual al estándar SNEAT de Catálogo/Usuarios
   (--pw-control-height). width/height con !important: List.php envuelve
   el botón "Ver" en un .btn-group y la regla global
   ".page-content__table tbody .btn-group > button.btn { width:40px;
   height:40px }" tiene más elementos en el selector (2 vs 1) que esta
   regla aunque igualen en clases -> empataba en especificidad "b" y
   ganaba por "c", dejando el botón Ver en 40px suelto del tamaño de
   Editar/Borrar (mismo gotcha ya resuelto en promociones.css). */
body.pw-sneat .contactos-listado .page-content__table-button--edit,
body.pw-sneat .contactos-listado .page-content__table-button--delete,
body.pw-sneat .contactos-listado .btnVerContacto {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 none !important;
    box-shadow: none !important;
    border-radius: 50% !important;
    color: #8592A3 !important;
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
body.pw-sneat .contactos-listado .page-content__table-button--edit:hover {
    color: var(--pw-accent) !important;
    background-color: var(--pw-accent-soft) !important;
}
body.pw-sneat .contactos-listado .page-content__table-button--delete:hover {
    color: var(--pw-danger) !important;
    background-color: var(--pw-danger-soft) !important;
}
body.pw-sneat .contactos-listado .btnVerContacto:hover {
    color: #566A7F !important;
    background-color: #F5F6FA !important;
}

/* Botones de comunicación: contenedor flex, más grandes para que sean
   fáciles de ver/clickear. flex-wrap + row-gap: si la columna llega a
   quedar angosta (ventana chica, sidebar expandido, etc.) los botones se
   apilan solos en vez de desbordar o quedar apretados, sin depender de un
   breakpoint puntual. */
body.pw-sneat .communication {
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    row-gap: 6px;
}
body.pw-sneat .communication__button {
    width: 32px;
    height: 32px;
    font-size: 15px;
    line-height: 32px;
    margin-right: 0;
}

/* Copia de los botones de comunicación inyectada en la celda Nombre
   (ver listado.php: pw_contacto_comunicacion_html(..., 'communication--mobile')).
   Oculta en desktop; en mobile (ver @media mas abajo) reemplaza a la
   columna Comunicacion, que se oculta entera. */
body.pw-sneat .communication--mobile {
    display: none;
}

/* ESTANDAR — la columna Fecha nunca debe partir la fecha ("10/11/2025") ni
   la hora ("13:41:05") en 2 renglones cada una (pedido explicito del
   usuario): un solo renglon para la fecha, un solo renglon debajo para la
   hora. No se resuelve recortando margenes ni achicando la fuente, sino
   con nowrap (siempre, no solo mobile) + el ancho de columna ampliado en
   listado.php (5% -> 8%), que es lo que realmente causaba el corte. */
body.pw-sneat .contactos-listado__fecha,
body.pw-sneat .contactos-listado__fecha .page-content__table-text--muted {
    white-space: nowrap;
}

/* En mobile se libera toda la columna Comunicacion: sus 3 botones
   (email/telefono/whatsapp) se muestran apilados debajo del email, dentro
   de la celda Nombre. */
@media (max-width: 767px) {
    body.pw-sneat .contactos-listado__comunicacion {
        display: none !important;
    }
    body.pw-sneat .contactos-listado__nombre .communication--mobile {
        display: flex;
        justify-content: flex-start;
        margin-top: 6px;
    }
}

/* Iconos de acción: tamaño consistente con patrón SNEAT (Catálogo/Usuarios) */
body.pw-sneat .contactos-listado .page-content__table-button--edit i,
body.pw-sneat .contactos-listado .page-content__table-button--delete i,
body.pw-sneat .contactos-listado .btnVerContacto i {
    font-size: 18px;
}

/* ==========================================================================
   SNEAT — Formulario edición de contacto (#formContacto)
   ========================================================================== */

/* Layout dos columnas */
body.pw-sneat #formContacto .contacto-two-cols {
    display: flex;
    gap: 0;
}
body.pw-sneat #formContacto .contacto-col {
    padding: 0 16px;
}
body.pw-sneat #formContacto .contacto-col:first-child {
    padding-left: 0;
    border-right: 1px solid #C5CDD6;
    padding-right: 24px;
}
body.pw-sneat #formContacto .contacto-col:last-child {
    padding-left: 24px;
    padding-right: 0;
}

/* Separadores de sección h5: contraste visible */
body.pw-sneat #formContacto h5 {
    border-top: 1px solid #C5CDD6;
    padding-top: 16px;
    color: #384551;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 14px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Iconos en h5 de sección */
body.pw-sneat #formContacto .contacto-section-icon {
    color: var(--pw-accent);
    font-size: 14px;
    width: 20px;
    text-align: center;
}

/* Labels de campos: bloque con texto pequeño encima del input */
body.pw-sneat #formContacto label {
    display: block;
    color: #566A7F;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

/* Input/select/textarea dentro del label: separar del texto */
body.pw-sneat #formContacto label > input,
body.pw-sneat #formContacto label > select,
body.pw-sneat #formContacto label > textarea {
    margin-top: 4px;
}

/* Etiqueta vacía del teléfono: invisible pero ocupa espacio (alinea inputs) */
body.pw-sneat #formContacto .empty_label {
    visibility: hidden;
    display: block;
}

/* Espaciado entre filas de campos */
body.pw-sneat #formContacto .row-fluid {
    margin-bottom: 16px;
}
body.pw-sneat #formContacto .row-fluid:last-child {
    margin-bottom: 0;
}

/* Metadatos de cabecera (Fecha / Enviado a) */
body.pw-sneat #formContacto .row-fluid:first-child label {
    font-size: 11px;
    color: #8592A3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.pw-sneat #formContacto .row-fluid:first-child label br + * {
    display: block;
    color: #384551;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

/* Panel como card SNEAT */
body.pw-sneat #formContacto .panel {
    border: 0 none;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.12);
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding: 20px 24px;
}

/* Inputs SNEAT: borde con contraste visible */
body.pw-sneat #formContacto input[type="text"],
body.pw-sneat #formContacto input[type="email"],
body.pw-sneat #formContacto input[type="tel"],
body.pw-sneat #formContacto input[type="url"],
body.pw-sneat #formContacto input[type="number"],
body.pw-sneat #formContacto select,
body.pw-sneat #formContacto textarea {
    border-radius: 8px;
    border: 1px solid #B4BBC3;
    box-shadow: none;
    background-image: none;
    color: #384551;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat #formContacto input[type="text"]:focus,
body.pw-sneat #formContacto input[type="email"]:focus,
body.pw-sneat #formContacto input[type="tel"]:focus,
body.pw-sneat #formContacto input[type="url"]:focus,
body.pw-sneat #formContacto input[type="number"]:focus,
body.pw-sneat #formContacto select:focus,
body.pw-sneat #formContacto textarea:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Mensaje del cliente: estilo alert-warning */
body.pw-sneat #formContacto .contacto-mensaje-content {
    background-color: #FFF3CD;
    border: 1px solid #FFCD39;
    border-radius: 8px;
    padding: 14px 16px;
    color: #5D4037;
    font-size: 14px;
    line-height: 1.65;
}

/* Botón Imprimir */
body.pw-sneat .contacto-btn-imprimir {
    background-color: transparent;
    background-image: none;
    border: 1px solid #C5CDD6;
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    font-size: 13px;
    padding: 6px 14px;
}
body.pw-sneat .contacto-btn-imprimir:hover {
    background-color: #F5F6FA;
    border-color: #B4BBC3;
}
body.pw-sneat .contacto-btn-imprimir .fa {
    margin-right: 4px;
}

/* Footer con botón Imprimir al pie */
body.pw-sneat .contacto-form-footer {
    padding: 12px 0 20px;
    display: flex;
    justify-content: flex-end;
}

/* Form-actions al pie: oculto en SNEAT */
body.pw-sneat #formContacto .form-actions {
    display: none;
}

/* Impresión del formulario de contacto:
   print.css oculta .main y muestra #print-container (vacío por defecto).
   Cuando se activa .printing-contacto en body, mostramos .main directamente. */
@media print {
    body.printing-contacto #print-container {
        display: none !important;
    }
    body.printing-contacto .main {
        display: block !important;
    }
    body.printing-contacto .navbar,
    body.printing-contacto .main__left,
    body.printing-contacto .button-bar--fixed-top,
    body.printing-contacto .contacto-form-footer,
    body.printing-contacto .form-actions,
    body.printing-contacto .main-right__page-header {
        display: none !important;
    }
    body.printing-contacto .main__right {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }
    body.printing-contacto #formContacto .panel {
        box-shadow: none !important;
        border: 1px solid var(--pw-divider) !important;
    }
}


/* cupones.css */

@media (max-width: 624px) {
    .cupones-listado__activo {
        display: none;
    }
    .cupones-listado__expiracion {
        display: none;
    } 
    .cupones-listado__maximo {
        display: none;
    }    
}

@media (max-width: 480px) {
    .cupones-listado__porcentaje {
        display: none;
    }    
}

/* ================================================================== */
/* SNEAT — Listado de cupones (body.pw-sneat.cupones--list)           */
/* ================================================================== */

/* Evita scroll horizontal por .main{display:table} (tabla angosta). */
body.pw-sneat.cupones--list .main {
    table-layout: fixed;
    width: 100%;
}

/* Bloque de filtro como card blanca (patrón SNEAT) */
body.pw-sneat .cupones-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .cupones-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

/* Form flat dentro de la card (anula la card global de #formBuscar) */
body.pw-sneat .cupones-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Restaurar card blanca del toolbar (css.php global lo sobreescribe con transparent) */
body.pw-sneat.cupones--list .table-actions--top {
    background: #FFFFFF;
    border: 1px solid var(--pw-border-soft);
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 10px 14px;
}

/* Wrapper del botón Agregar (.pw-toolbar-actions-group, ver
   mod_cc_cupones/index.php): empujarlo a la derecha de la toolbar, mismo
   patrón que Inmuebles/Vehículos/Catálogo (order:99 + margin-left:auto en
   el WRAPPER, no en el link -- el link no es hijo directo del flex
   container .table-actions--top, así que poner esas propiedades en él
   no tenía ningún efecto). */
body.pw-sneat.cupones--list .table-actions--top .pw-toolbar-actions-group {
    display: flex;
    align-items: center;
    margin-left: auto;
    order: 99;
}

/* Botón Agregar: acento SNEAT */
body.pw-sneat.cupones--list .table-actions--top .js-cupon-modal-agregar {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: #FFFFFF;
    border-radius: 8px;
    font-weight: 600;
    white-space: nowrap;
}

body.pw-sneat.cupones--list .table-actions--top .js-cupon-modal-agregar:hover,
body.pw-sneat.cupones--list .table-actions--top .js-cupon-modal-agregar:focus,
body.pw-sneat.cupones--list .table-actions--top .js-cupon-modal-agregar:active {
    background: var(--pw-accent-hover);
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
}

/* ================================================================== */
/* SNEAT — Modal alta/edición de cupón (#modal-crear-cupon)           */
/* ================================================================== */

body.pw-sneat #modal-crear-cupon {
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.18);
    border: 0 none;
    width: 500px;
    max-width: calc(100vw - 32px);
}

body.pw-sneat #modal-crear-cupon .modal-header {
    border-bottom: 1px solid var(--pw-border-card);
    border-radius: 12px 12px 0 0;
    padding: 16px 20px;
}

body.pw-sneat #modal-crear-cupon .modal-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: #384551;
    margin: 0;
}

body.pw-sneat #modal-crear-cupon .modal-body {
    padding: 20px;
}

body.pw-sneat #modal-crear-cupon .modal-footer {
    border-top: 1px solid var(--pw-border-card);
    border-radius: 0 0 12px 12px;
    padding: 12px 20px;
    background: #FAFBFC;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Campos */
body.pw-sneat .cupones-modal__field {
    margin-bottom: 16px;
}

body.pw-sneat .cupones-modal__field:last-child {
    margin-bottom: 0;
}

body.pw-sneat .cupones-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #697A8D;
    margin-bottom: 6px;
}

body.pw-sneat .cupones-modal__required {
    color: var(--pw-danger);
}

/* Fila código + botón generar */
body.pw-sneat .cupones-modal__codigo-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

body.pw-sneat .cupones-modal__codigo-row input[type="text"] {
    flex: 1;
    height: var(--pw-control-height, 38px) !important;
}

body.pw-sneat #modal-cupon-generar {
    flex-shrink: 0;
    height: var(--pw-control-height, 38px);
    border-radius: 6px;
    border: 1px solid #C0C4CC;
    background: #ECEEF2;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: #697A8D;
    font-size: 13px;
    font-weight: 600;
    padding: 0 12px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

body.pw-sneat #modal-cupon-generar:hover {
    background: #E2E5EA;
    background-image: none;
}

/* Checkbox activo (inline) */
body.pw-sneat .cupones-modal__field--inline {
    display: flex;
    align-items: center;
}

body.pw-sneat .cupones-modal__label--checkbox {
    font-size: 14px;
    color: #384551;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Radio buttons en fila */
body.pw-sneat .cupones-modal__radios {
    display: flex;
    gap: 20px;
}

/* Group de campos condicionales */
body.pw-sneat .cupones-modal__field-group {
    background: #F8F9FA;
    border: 1px solid var(--pw-border-card);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

body.pw-sneat .cupones-modal__field-group .cupones-modal__field:last-child {
    margin-bottom: 0;
}

/* Sufijo de input (% o $) */
body.pw-sneat .cupones-modal__append {
    display: flex;
    height: var(--pw-control-height, 38px);
    align-items: stretch;
}

body.pw-sneat .cupones-modal__append input {
    flex: 1;
    height: auto !important;
    border-radius: 6px 0 0 6px !important;
}

body.pw-sneat .cupones-modal__append .add-on {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: auto;
    border-radius: 0 6px 6px 0;
    background: #ECEEF2;
    border: 1px solid #C0C4CC;
    border-left: 0;
    color: #697A8D;
    font-weight: 600;
    font-size: 13px;
    padding: 0 10px;
    flex-shrink: 0;
    line-height: 1;
}

/* Badge tipo descuento (modo edición) */
body.pw-sneat .cupones-modal__badge-tipo {
    display: inline-block;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    border-radius: 20px;
    padding: 2px 12px;
    font-size: 12px;
    font-weight: 600;
}

/* Inputs dentro del modal */
body.pw-sneat #modal-crear-cupon input[type="text"] {
    height: var(--pw-control-height, 38px);
    border-radius: 6px;
    border: 1px solid #C0C4CC;
    box-shadow: none;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 10px;
}

body.pw-sneat #modal-crear-cupon input[type="text"]:focus {
    border-color: var(--pw-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
}

/* Botón cancelar en footer */
body.pw-sneat .cupones-modal__btn-cancelar {
    background: #F5F5F6 !important;
    color: #697A8D !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 8px;
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
}

body.pw-sneat .cupones-modal__btn-cancelar:hover {
    background: #ECEEF2 !important;
}

/* ================================================================== */
/* SNEAT — Badges de tipo de descuento en la tabla                    */
/* ================================================================== */

body.pw-sneat .cupones-badge {
    display: inline-block;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

body.pw-sneat .cupones-badge--porcentaje {
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
}

body.pw-sneat .cupones-badge--importe {
    background: rgba(40, 199, 111, 0.15);
    color: #1FAA57;
}

/* ================================================================== */
/* SNEAT — Alineación vertical de celdas del listado                  */
/* El switch de Activo (22px) agranda la fila y el checkbox de        */
/* selección múltiple quedaba pegado arriba (td con vertical-align:   */
/* top). Centrado vertical para toda la fila del listado.             */
/* ================================================================== */

body.pw-sneat .cupones-listado tbody td {
    vertical-align: middle;
}

/* Boton de copiar codigo (celda Codigo, desktop y mobile) */
body.pw-sneat .cupones-listado__codigo .pw-button-copy {
    border: none;
    background: transparent;
    color: #8A8D93;
    padding: 2px 4px;
    cursor: pointer;
}

body.pw-sneat .cupones-listado__codigo .pw-button-copy:hover {
    color: var(--pw-accent, #696CFF);
}

/* ================================================================== */
/* SNEAT — Mobile: tabla -> tarjetas apiladas (una columna por fila)  */
/* Anula las reglas clasicas sin scope de las lineas 1-17 de este     */
/* mismo archivo (que ocultan columnas por ancho) con mayor           */
/* especificidad. data-label viene del array en index.php y se usa   */
/* via content:attr(data-label) como etiqueta de cada campo.          */
/* ================================================================== */
@media (max-width: 767px) {

    body.pw-sneat .cupones-listado thead {
        display: none;
    }

    body.pw-sneat .cupones-listado,
    body.pw-sneat .cupones-listado tbody,
    body.pw-sneat .cupones-listado tbody tr,
    body.pw-sneat .cupones-listado tbody td {
        display: block;
        width: 100% !important;
    }

    body.pw-sneat .cupones-listado tbody tr {
        border: 1px solid var(--pw-border-card, #E7E7EA);
        border-radius: 10px;
        margin-bottom: 12px;
        padding: 10px 12px;
        position: relative;
    }

    body.pw-sneat .cupones-listado tbody td {
        border: none !important;
        padding: 6px 0 !important;
        text-align: left !important;
        vertical-align: top !important;
        /* Restaurar columnas que las reglas clasicas (lineas 1-17) ocultan a este ancho */
        display: block !important;
    }

    body.pw-sneat .cupones-listado tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: #8A8D93;
        margin-bottom: 2px;
    }

    /* Checkbox de seleccion multiple: arriba a la derecha de la tarjeta, sin etiqueta */
    body.pw-sneat .cupones-listado tbody td.page-content__table-cell-multiple-actions {
        position: absolute;
        top: 10px;
        right: 12px;
        width: auto !important;
        padding: 0 !important;
    }

    /* Acciones (editar/borrar): fila propia al pie de la tarjeta, sin etiqueta */
    body.pw-sneat .cupones-listado tbody td.page-content__table-cell-actions {
        padding-top: 10px !important;
        margin-top: 4px;
        border-top: 1px solid var(--pw-border-card, #E7E7EA) !important;
    }

    /* Deja lugar al checkbox absoluto de arriba */
    body.pw-sneat .cupones-listado tbody td.cupones-listado__activo {
        padding-right: 40px !important;
    }

    /* Codigo + boton de copiar en la misma linea */
    body.pw-sneat .cupones-listado tbody td.cupones-listado__codigo {
        display: flex !important;
        align-items: center;
        gap: 8px;
        flex-wrap: wrap;
    }

    body.pw-sneat .cupones-listado tbody td.cupones-listado__codigo::before {
        width: 100%;
    }

    body.pw-sneat .cupones-listado__codigo-text {
        font-weight: 600;
        word-break: break-all;
    }

    body.pw-sneat .pw-button-copy {
        flex-shrink: 0;
    }
}


/* cursos-estadisticas.css */

/* ==================================================================== */
/* SNEAT - Estadisticas de Cursos Online (mod_cursos.php?op=productos y  */
/* ?op=usuarios) + popup de progreso del usuario en un curso.            */
/* Todo bajo body.pw-sneat: el modo clasico conserva su markup original  */
/* (regresion cero). Archivo ASCII puro (el bundle mezcla encodings).    */
/* ==================================================================== */

/* ==== Layout de dos columnas (ayuda a la izquierda + listado) ==== */
body.pw-sneat .cursos-estadisticas-productos .row-fluid {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span4 {
    flex: 0 0 32%;
    max-width: 32%;
    width: 32% !important;
    margin-left: 0;
    float: none;
}
body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span8 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}
body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span8:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 0;
}
body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span3 {
    flex: 0 0 32%;
    max-width: 32%;
    width: 32% !important;
    margin-left: 0;
    float: none;
}
body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span9 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}
body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span9:first-child {
    flex: 1 1 100%;
    max-width: 100%;
}

/* Columna de ayuda como card blanca */
body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span4 > div,
body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span3 > div {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-card);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    font-size: 13px;
    color: #697A8D;
    line-height: 1.6;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    body.pw-sneat .cursos-estadisticas-productos .row-fluid,
    body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child {
        flex-direction: column;
    }
    body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span4,
    body.pw-sneat .cursos-estadisticas-productos .row-fluid > .span8,
    body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span3,
    body.pw-sneat .estadisticas-usuarios > .row-fluid:first-child > .span9 {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100% !important;
    }
}

/* Titulo del curso + contador de resultados (usuarios de un curso) */
body.pw-sneat .estadisticas-usuarios__titulo-listado {
    color: var(--pw-text-strong);
    font-size: 18px;
}
body.pw-sneat .estadisticas-usuarios__cantidad-resultados {
    color: #8592A3;
    font-size: 13px;
}

/* ==== Card de filtro (titulo "Filtrar" + buscador + avanzado) ==== */
body.pw-sneat .cursos-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
body.pw-sneat .cursos-filtro-card #formBuscar {
    border: 0 none;
    background: transparent;
    padding: 0;
    margin-bottom: 0 !important;
}

/* ==== Boton de accion por fila (Ver usuarios / Ver avance) ==== */
body.pw-sneat .cursos-listado__btn-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-accent);
    border-radius: 50%;
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body.pw-sneat .cursos-listado__btn-accion:hover,
body.pw-sneat .cursos-listado__btn-accion:focus,
body.pw-sneat .cursos-listado__btn-accion:active {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* Alineacion vertical: el boton circular de 34px descentra el checkbox/texto
   si la celda queda vertical-align:top por defecto. */
body.pw-sneat .cursos-listado tbody td {
    vertical-align: middle;
}

/* Texto secundario (fecha de alta, email, hora) mas suave que el principal */
body.pw-sneat .cursos-listado__fecha,
body.pw-sneat .cursos-listado__email,
body.pw-sneat .cursos-listado__creado-hora,
body.pw-sneat .cursos-listado__ultimo-hora {
    color: #8592A3;
    font-size: 12px;
}
body.pw-sneat .cursos-listado__nombre > a {
    color: var(--pw-text-strong);
    font-weight: 600;
    text-decoration: none;
}
body.pw-sneat .cursos-listado__nombre > a:hover {
    color: var(--pw-accent);
}

/* Columna Progreso: numero + barra fina moderna */
body.pw-sneat .cursos-listado__porcentaje {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-weight: 700;
    color: var(--pw-text-strong);
    font-size: 13px;
    margin-bottom: 4px;
}
body.pw-sneat .cursos-listado__progreso .progress {
    margin: 0 !important;
    height: 6px !important;
    background-color: #EEF0F4;
    background-image: none !important;
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
}
body.pw-sneat .cursos-listado__progreso .progress .bar {
    background: linear-gradient(90deg, var(--pw-accent-soft), var(--pw-accent));
    background-image: linear-gradient(90deg, var(--pw-accent-soft), var(--pw-accent));
    box-shadow: none;
}

/* ==== Popup de progreso del usuario (modal Bootstrap 2) ==== */
body.pw-sneat #popup-avances {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

/* Gotcha: modal BS2 con clase .fade queda cortado arriba en Chrome porque la
   transicion de "top" (-25% -> 10%) no termina de asentarse. Se fija "top"
   y se deja solo la transicion de opacidad. */
body.pw-sneat #popup-avances.fade {
    top: 10%;
    transition: opacity 0.15s linear;
}

body.pw-sneat #popup-avances .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-divider);
    padding: 16px 20px;
}
body.pw-sneat #popup-avances .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--pw-text-strong);
}
body.pw-sneat #popup-avances .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    max-height: 65vh;
}

body.pw-sneat #popup-avances .page-content__table {
    border: 1px solid var(--pw-border-card);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
}
body.pw-sneat #popup-avances .page-content__table-header {
    vertical-align: middle;
}
body.pw-sneat #popup-avances .page-content__table-cell {
    padding: 10px 12px;
    color: #566A7F;
}

/* Barra de progreso: version moderna del .progress de Bootstrap 2. */
body.pw-sneat #popup-avances .cursos__progreso-barra {
    display: inline-block;
    width: 100%;
}
body.pw-sneat #popup-avances .progress {
    margin: 0 !important;
    height: 10px !important;
    background-color: #EEF0F4;
    background-image: none !important;
    border-radius: 999px;
    box-shadow: none;
    overflow: hidden;
}
body.pw-sneat #popup-avances .progress .bar {
    background: linear-gradient(90deg, var(--pw-accent-soft), var(--pw-accent));
    background-image: linear-gradient(90deg, var(--pw-accent-soft), var(--pw-accent));
    box-shadow: none;
    transition: width 0.2s ease;
}


/* emarketing-outbox.css */

/* ==================================================================== */
/* SNEAT - Bandeja de salida de email marketing                         */
/* (body.pw-sneat.emarketing--outbox)                                   */
/*                                                                      */
/* mod_emarketing.php?option=outbox&type=email. La pagina no usa la     */
/* clase PW_PanelDeControl_Page, asi que la clase de body se inyecta a  */
/* mano en mod_emarketing.php. La tabla la arma PW_Html_Table           */
/* (#pw_table_emarketing_suscriptores). En SNEAT el borrado multiple    */
/* NO usa el mecanismo por defecto (checkbox a la derecha + boton en el  */
/* tfoot): se arma a mano con el checkbox en la PRIMERA columna y un     */
/* combo "Acciones masivas" arriba a la izquierda (patron SNEAT).        */
/* Archivo ASCII puro.                                                  */
/* ==================================================================== */

/* El contenedor gris clasico (.pw_pc_form_background) envuelve filtro +
   tabla; en SNEAT se neutraliza para que cada bloque sea su propia card. */
body.pw-sneat.emarketing--outbox .pw_pc_form_background {
    background: transparent;
    border: 0 none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Fix scroll horizontal: .main{display:table} crece al ancho natural de la
   tabla; table-layout:fixed la clava al viewport. */
body.pw-sneat.emarketing--outbox .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card de filtro ==== */
body.pw-sneat.emarketing--outbox .emarketing-outbox__filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat.emarketing--outbox .emarketing-outbox__filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    background: transparent;
    box-shadow: none;
}

/* Fieldset/legend del avanzado (mismo look que el resto de modulos) */
body.pw-sneat.emarketing--outbox .emarketing-outbox__filtro-card .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat.emarketing--outbox .emarketing-outbox__filtro-card .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat.emarketing--outbox .emarketing-outbox__filtro-card .form-search__advanced .btn {
    width: 100%;
}

/* ==== Toolbar de acciones masivas (arriba a la izquierda) ==== */
body.pw-sneat.emarketing--outbox .emarketing-outbox__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

body.pw-sneat.emarketing--outbox .emarketing-outbox__acciones {
    height: var(--pw-control-height);
    box-sizing: border-box;
    min-width: 210px;
    margin: 0;
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    color: #566A7F;
    background-color: #FFFFFF;
    line-height: normal;
    vertical-align: middle;
    cursor: pointer;
}

body.pw-sneat.emarketing--outbox .emarketing-outbox__aplicar {
    height: var(--pw-control-height);
    margin: 0;
    vertical-align: middle;
}

/* ==== Card de la tabla ==== */
body.pw-sneat.emarketing--outbox .emarketing-outbox__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

body.pw-sneat.emarketing--outbox .emarketing-outbox__card #outbox-delete-form {
    margin: 0;
}

/* ==== Tabla (reset BS2 striped/bordered + layout fijo) ==== */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border: 0 none;
    background-color: transparent;
}

body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores thead th {
    background-color: var(--pw-thead-bg);
    border: 0 none;
    border-bottom: 1px solid var(--pw-divider);
    color: var(--pw-text-strong);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
}

body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody td {
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    padding: 12px 16px;
    color: #566A7F;
    font-size: 14px;
    vertical-align: middle;
    background-color: transparent;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody tr:first-child td {
    border-top: 0 none;
}

/* Neutraliza el striping BS2 */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody tr:nth-child(odd) td {
    background-color: transparent;
}

body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody tr:hover td {
    background-color: #F9FAFB;
}

/* Subtexto (hora, email destinatario) en gris chico */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .muted {
    color: #8592A3;
    font-size: 12px;
}

/* ==== Columna de seleccion masiva (PRIMERA, izquierda) ==== */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .outbox-col-check {
    width: 44px;
    text-align: center;
    white-space: nowrap;
    word-break: normal;
}

body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .outbox-row-check,
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .outbox-check-all {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
}

/* Fechas (2a y 3a columna): no cortar */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody td:nth-child(2),
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody td:nth-child(3) {
    white-space: nowrap;
    word-break: normal;
}

/* Columna del boton Enviar: ancho fijo para que el boton circular no quede
   cortado por el overflow:hidden de la card. */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .outbox-col-send {
    width: 64px;
    text-align: center;
    white-space: nowrap;
    word-break: normal;
}

/* ==== Boton Enviar: mismo criterio que las acciones de fila SNEAT ==== */
/* (transparente, icono coloreado, circular, hover suave) en vez del boton  */
/* verde solido clasico.                                                    */
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: transparent !important;
    background-image: none !important;
    border: 0 none !important;
    box-shadow: none !important;
    text-shadow: none;
    color: #28C76F !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .btn-success:hover,
body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores .btn-success:focus {
    background: rgba(40, 199, 111, 0.14) !important;
    color: #1DA851 !important;
}

/* ==== Mobile: la tabla se recortaba en vez de poder scrollear ====
   Reportado con captura: no se ve el boton Enviar y las columnas se
   amontonan. Causa medida en vivo (scrollWidth de la tabla vs. la
   card): las columnas de fecha tienen white-space:nowrap ("no cortar
   la fecha", regla de arriba) -- eso es correcto en desktop, pero en
   un viewport angosto ese contenido no-wrap fuerza el ancho de la
   tabla mas alla del 100% aunque tenga table-layout:fixed (fixed solo
   fija las PROPORCIONES entre columnas, no evita que el contenido
   nowrap empuje el ancho total). Medido: tabla en 580px de ancho real
   contra una card de 360px -- como la card tiene overflow:hidden (para
   los bordes redondeados), el sobrante quedaba directamente CORTADO
   (invisible), no scrolleable, y ahi vivia el boton Enviar.
   Fix: a <=767px la card pasa a overflow-x:auto (scroll horizontal
   propio, mismo patron que sneat-responsive.css usa para
   .page-content__table) y la tabla se libera de table-layout:fixed +
   width:100% para poder crecer a su ancho de contenido real dentro de
   ese scroll. */
@media (max-width: 767px) {
    body.pw-sneat.emarketing--outbox .emarketing-outbox__card {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores {
        table-layout: auto;
        width: auto;
        /* min-width:100% (relativo al contenedor) no alcanzaba: un
           <table> con table-layout:auto dentro de un contenedor con
           overflow:auto no siempre "empuja" el scrollWidth del padre
           aunque su contenido interno (celdas nowrap) pida mas ancho
           -- medido en vivo, table.scrollWidth (1022px) no se
           reflejaba en card.scrollWidth (se quedaba en 358px, igual
           al contenedor, sin nada para scrollear). Con un min-width
           en PIXELES fijos (no relativo), el navegador tiene un
           numero concreto para reservarle a la tabla, y ESE numero
           si se propaga como overflow real del contenedor. */
        min-width: 700px;
    }
    /* Ancho minimo de contenido por columna, para que no se compriman
       tanto que el texto vuelva a apilarse feo dentro de su celda --
       ahora el ancho extra lo resuelve el scroll de la card, no la
       compresion de las columnas. */
    body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody td {
        white-space: nowrap;
    }
    body.pw-sneat.emarketing--outbox #pw_table_emarketing_suscriptores tbody td:last-child {
        white-space: normal;
    }
}


/* emarketing-reports.css */

/* ==================================================================== */
/* SNEAT - Reportes de campanias de email                                */
/* (body.pw-sneat.emarketing--reports)                                  */
/*                                                                      */
/* mod_emarketing.php?option=reports&type=email. Dos pantallas:          */
/*  - listado de campanias (campanias/listado.php): PW_Html_Table         */
/*    #pw_table_emarketing_campaigns.                                    */
/*  - detalle de una campania (campanias/detalle/*): cards de totales +   */
/*    chart chartist + filtro + tabla de mensajes                        */
/*    (#pw_table_emarketing_suscriptores, .page-content__table).         */
/* La clase de body se inyecta a mano en mod_emarketing.php. ASCII puro. */
/* ==================================================================== */

/* Fix scroll horizontal: .main{display:table} crece al ancho natural. */
body.pw-sneat.emarketing--reports .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card generica (envuelve las tablas) ==== */
body.pw-sneat.emarketing--reports .emarketing-reports__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 16px;
}

/* ==== Tablas (listado y mensajes): reset BS2 + look SNEAT ==== */
body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border: 0 none;
    background-color: transparent;
}

body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns thead th,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores thead th {
    background-color: var(--pw-thead-bg);
    border: 0 none;
    border-bottom: 1px solid var(--pw-divider);
    color: var(--pw-text-strong);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
    height: auto;
}

body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody td,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores tbody td {
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    padding: 12px 16px;
    color: #566A7F;
    font-size: 14px;
    vertical-align: middle;
    background-color: transparent;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody tr:first-child td,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody tr:nth-child(odd) td,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores tbody tr:nth-child(odd) td {
    background-color: transparent;
}

body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody tr:hover td,
body.pw-sneat.emarketing--reports #pw_table_emarketing_suscriptores tbody tr:hover td {
    background-color: #F9FAFB;
}

/* Listado: 1a col (fecha) sin cortar, ultima col (detalle) angosta/centrada */
body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody td:first-child {
    white-space: nowrap;
    word-break: normal;
    color: var(--pw-gray-light);
    font-size: 13px;
}
body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns thead th:last-child,
body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns tbody td:last-child {
    width: 64px;
    text-align: center;
}

/* Boton "Ver detalle": accion de fila SNEAT (icono circular, hover suave) */
body.pw-sneat.emarketing--reports .btnVerCampania {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    background: transparent !important;
    background-image: none !important;
    border: 0 none !important;
    box-shadow: none !important;
    text-shadow: none;
    color: var(--pw-accent) !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
body.pw-sneat.emarketing--reports .btnVerCampania:hover,
body.pw-sneat.emarketing--reports .btnVerCampania:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent) !important;
}
/* La celda del boton viene en un .btn-group: quitar estilos BS2 */
body.pw-sneat.emarketing--reports #pw_table_emarketing_campaigns .btn-group {
    box-shadow: none;
}

/* ==== Iconos de la tabla de mensajes (leido/visitado/desuscripto) ==== */
body.pw-sneat.emarketing--reports .reports-icon--yes {
    color: #28C76F;
}
body.pw-sneat.emarketing--reports .reports-icon--no {
    color: #D5DAE0;
}

/* ==================================================================== */
/* DETALLE de campania                                                   */
/* ==================================================================== */

/* Layout de las dos cajas de totales (info + chart). Scopeado al wrapper
   propio para NO afectar el row-fluid anidado del chart (span3/span9), que
   sigue con el layout BS2 original. */
body.pw-sneat.emarketing--reports .emarketing-reports__totales-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 0;
}
body.pw-sneat.emarketing--reports .emarketing-reports__totales-row > .span4 {
    flex: 0 0 32%;
    max-width: 32%;
    width: 32% !important;
    margin-left: 0;
    float: none;
}
body.pw-sneat.emarketing--reports .emarketing-reports__totales-row > .span8 {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    margin-left: 0;
    float: none;
}

/* El filtro (form_buscar) es un row-fluid propio dentro de la card: que su
   grid interno NO herede el flex de arriba. */
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card .b5-row {
    display: flex;
}

/* Las cajas .well -> cards SNEAT */
body.pw-sneat.emarketing--reports .well {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat.emarketing--reports .pw-campaign-info {
    margin: 0;
}
body.pw-sneat.emarketing--reports .pw-campaign-info li {
    margin-bottom: 14px;
    color: #566A7F;
    font-size: 14px;
    list-style: none;
}
body.pw-sneat.emarketing--reports .pw-campaign-info li:last-child {
    margin-bottom: 0;
}
body.pw-sneat.emarketing--reports .pw-campaign-info strong {
    color: var(--pw-text-strong);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Referencias del chart: cuadraditos redondeados */
body.pw-sneat.emarketing--reports #pw-bar-chart .unstyled {
    margin: 0;
}
body.pw-sneat.emarketing--reports #pw-bar-chart .unstyled li {
    list-style: none;
    margin-bottom: 10px;
    color: #566A7F;
    font-size: 13px;
}
body.pw-sneat.emarketing--reports .reference {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Contenedor del chart chartist: borde suave en vez del gris duro */
body.pw-sneat.emarketing--reports .ct-chart {
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    padding: 8px;
    box-sizing: border-box;
}

/* ==== Filtro card ==== */
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    background: transparent;
    box-shadow: none;
}
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat.emarketing--reports .emarketing-reports__filtro-card .form-search__advanced .btn {
    width: 100%;
}

@media (max-width: 767px) {
    body.pw-sneat.emarketing--reports .emarketing-reports__totales-row {
        flex-direction: column;
    }
    body.pw-sneat.emarketing--reports .emarketing-reports__totales-row > .span4,
    body.pw-sneat.emarketing--reports .emarketing-reports__totales-row > .span8 {
        flex: 1 1 100%;
        max-width: 100%;
        width: 100% !important;
    }
}


/* estadisticas.css */

/* ==================================================================== */
/* SNEAT - Estadisticas Generales (mod_estadisticas.php?option=general) */
/*                                                                      */
/* Dashboard: KPIs (componente global .counter de sneat-base.css) +     */
/* cards de graficos ECharts. Todo bajo body.pw-sneat: regresion cero   */
/* en el modo clasico (que conserva su chart original de 5 ejes).       */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

/* ==== Zona de busqueda: sin el divisor gris del css.php inline ==== */
body.pw-sneat .stats .stats__search {
    border-bottom: 0 none;
    margin-bottom: 4px;
}

/* ==== Card del filtro de periodo (patron 19) ==== */
body.pw-sneat .stats-sneat__filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .stats-sneat__filtro-card .stats__title {
    display: none; /* el titulo lo pone .pw-filter-section-title */
}

body.pw-sneat .stats-sneat__filtro-card .stats__form {
    margin-bottom: 8px;
}

/* Botones de periodo como control segmentado */
body.pw-sneat .stats-sneat__filtro-card .stats__button-period {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 14px;
    font-size: 13px;
    color: var(--pw-gray-light);
}

body.pw-sneat .stats-sneat__filtro-card .stats__button-period:first-child {
    border-radius: 8px 0 0 8px;
}

body.pw-sneat .stats-sneat__filtro-card .stats__button-period:last-child {
    border-radius: 0 8px 8px 0;
}

body.pw-sneat .stats-sneat__filtro-card .stats__button-period.active {
    background: var(--pw-accent-soft);
    border-color: var(--pw-accent);
    color: var(--pw-accent);
    font-weight: 600;
    box-shadow: none;
}

/* Boton Consultar: primario violeta */
body.pw-sneat .stats-sneat__filtro-card .stats__button-submit {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: 600;
}

body.pw-sneat .stats-sneat__filtro-card .stats__button-submit:hover,
body.pw-sneat .stats-sneat__filtro-card .stats__button-submit:focus,
body.pw-sneat .stats-sneat__filtro-card .stats__button-submit:active {
    background: var(--pw-accent-hover);
    background-image: none;
    color: #FFFFFF;
}

body.pw-sneat .stats-sneat__filtro-card .stats__comparison label {
    font-size: 13px;
    color: #566A7F;
}

/* ==== KPIs: heredan el componente global .counter; aca solo los
   numeros en monoespaciada y el badge de delta ==== */
body.pw-sneat .stats-sneat__kpis {
    margin-bottom: 16px;
}

/* Valores muy largos (montos grandes con separador de miles) no deben
   reventar la card: .counter__body es flex item sin min-width:0 propio
   (el componente global .counter no lo fija), asi que la fila entera
   (icono + texto, .counter es display:flex) se estiraba mas ancha que
   la card y el icono (order:2) terminaba visualmente afuera del marco.
   overflow:hidden en la card es el seguro final. */
body.pw-sneat .stats-sneat__kpis .counter {
    overflow: hidden;
}

body.pw-sneat .stats-sneat__kpis .counter__body {
    min-width: 0;
}

/* font-size base: fallback antes de que corra el JS, o si el numero es
   corto y no hace falta achicar nada. chart-sneat.js#fitKpiText mide el
   ancho real del numero contra la card y va bajando el font-size hasta
   que entra en una sola linea (achicado dinamico, no un breakpoint
   fijo) - mientras mide/ajusta deja el elemento en white-space:nowrap.
   white-space:normal (aca) es el ultimo respaldo si un numero es TAN
   largo que ni al font-size minimo entra: en ese caso el JS lo libera y
   el texto quiebra antes de "ARS" (nunca parte la palabra, a diferencia
   de overflow-wrap:break-word que se uso antes). */
body.pw-sneat .stats-sneat__kpis .counter__values {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 20px;
    white-space: normal;
}

/* Mismo patron que Pedidos/Usuarios (SNEAT-PATTERNS.md 39/43): las KPI
   cards necesitan margen propio en mobile (el listado/contenido de abajo
   se deja full-bleed, pero las cards no). width:auto porque
   .page-content__counters trae width:100% calculado ANTES del margen
   nuevo (pw-panel.css, componente compartido) - sin esto la caja queda
   36px mas ancha que el viewport y desborda por la derecha. */
@media (max-width: 767px) {
    body.pw-sneat .stats-sneat__kpis {
        margin-left: 18px;
        margin-right: 18px;
        width: auto;
    }
}

body.pw-sneat .stats-sneat__kpi-delta {
    display: inline-block;
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body.pw-sneat .stats-sneat__kpi-delta--up {
    color: #28C76F;
}

body.pw-sneat .stats-sneat__kpi-delta--down {
    color: var(--pw-danger);
}

/* ==== Cards de graficos ==== */
body.pw-sneat .stats-sneat__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 18px 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
    /* .main { display:table } se expande con contenido ancho: contener */
    max-width: 100%;
    overflow: hidden;
}

body.pw-sneat .stats-sneat__card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 4px;
}

body.pw-sneat .stats-sneat__card-subtitle {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--pw-gray-light);
    margin-top: 2px;
}

body.pw-sneat .stats-sneat__chart {
    position: relative;
    height: 260px;
    margin-top: 10px;
}

body.pw-sneat .stats-sneat__chart--wide {
    height: 320px;
}

/* Fila de dos cards lado a lado */
body.pw-sneat .stats-sneat__row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Las cards DENTRO de una .stats-sneat__row no llevan margen lateral
   propio (la fila ya lo tiene, y el gap de flex separa las cards entre
   si) - margin-left/right:0 cancela la regla de mas abajo para estas
   cards especificamente (3 clases le gana a 2, sin importar el orden). */
body.pw-sneat .stats-sneat__row .stats-sneat__card {
    flex: 1 1 380px;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Margen lateral en mobile para TODAS las cards de este patron (nace en
   Vision general, tambien usado por ROAS y Origenes de venta - se
   arregla una sola vez aca en vez de repetirlo por modulo). Sin esto
   las cards quedan pegadas al borde del viewport (izq:0). Mismo patron
   que Pedidos/Usuarios/KPIs (SNEAT-PATTERNS.md 39/43/45): ninguna de
   estas clases fija width:100% (a diferencia de .page-content__counters),
   asi que el margen no necesita el ajuste extra de width:auto. */
@media (max-width: 767px) {
    body.pw-sneat .stats-sneat__filtro-card,
    body.pw-sneat .stats-sneat__card,
    body.pw-sneat .stats-sneat__row {
        margin-left: 18px;
        margin-right: 18px;
    }
}

/* Titulos de periodo seleccionado (debajo del form) */
body.pw-sneat .stats-sneat__filtro-card + .stats__dates .stats__date1,
body.pw-sneat .stats-sneat__filtro-card + .stats__dates .stats__date2 {
    color: var(--pw-gray-light);
}


/* estadisticas-paginas.css */

/* ==================================================================== */
/* SNEAT - Estadisticas > Paginas mas vistas (mod_estadisticas.php?      */
/* option=paginas).                                                     */
/*                                                                       */
/* Reusa el form clasico de anio/mes (formulario.php) envuelto en una    */
/* card (mismo patron que Estadisticas > Vision general, patron 19: no   */
/* se reconstruye el filtro desde cero). Todo bajo body.pw-sneat: el     */
/* modo clasico y el widget embebido en el Escritorio (resumen.php)      */
/* quedan intactos. Archivo ASCII puro (el bundle mezcla encodings).     */
/* ==================================================================== */

body.pw-sneat .paginas-sneat__filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .paginas-sneat__filtro-card .row-fluid {
    margin-bottom: 0;
}

body.pw-sneat .paginas-sneat__filtro-card label {
    color: #566A7F;
    font-size: 13px;
    font-weight: 500;
}

body.pw-sneat .paginas-sneat__filtro-card select {
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    background-image: none;
}

body.pw-sneat .paginas-sneat__filtro-card .btn {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    color: #FFFFFF;
    width: 100%;
}

body.pw-sneat .paginas-sneat__filtro-card .btn:hover,
body.pw-sneat .paginas-sneat__filtro-card .btn:focus {
    background: var(--pw-accent-hover);
    background-image: none;
    color: #FFFFFF;
}

/* ==== Card de la tabla ==== */
body.pw-sneat .paginas-sneat__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 18px 20px;
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

body.pw-sneat .paginas-sneat__card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .paginas-sneat__table {
    width: 100%;
}


/* estadisticas-origenes.css */

/* ==================================================================== */
/* SNEAT - Estadisticas > Origenes de venta (mod_estadisticas.php?        */
/* option=origenes).                                                    */
/*                                                                       */
/* Reusa las cards genericas .stats-sneat__filtro-card / .stats-sneat__card
   / .stats-sneat__row (nacieron en Vision general, el nombre no es      */
/* especifico de ese modulo). Los 6 pie charts (ECharts) no se tocan -   */
/* cada uno ya dibuja su propio titulo/subtitulo adentro del canvas      */
/* (chart.js), asi que las cards NO le agregan un titulo HTML propio     */
/* salvo la de "Dominios" (unica, va con card-title) y la de UTM (agrupa */
/* el texto de ayuda arriba de la fila de 5 charts). El texto de ayuda   */
/* (.cfg-ayuda) ya tiene su propio colapso mobile global (SNEAT-PATTERNS */
/* 30-ter, en pw-panel.css) - no hace falta nada especifico aca.         */
/* Todo bajo body.pw-sneat: el modo clasico queda intacto.               */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

body.pw-sneat .stats-sneat__filtro-card label {
    color: #566A7F;
    font-size: 13px;
    font-weight: 500;
}

body.pw-sneat .stats-sneat__filtro-card select {
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    background-image: none;
}

/* Card "Dominios": chart grande, unico en su card. */
body.pw-sneat #chart-domains.stats-sneat__chart {
    height: 340px;
}

/* Grid de 5 pie charts UTM: mismo alto por defecto que el resto de
   .stats-sneat__chart (260px, definido en estadisticas.css) alcanza -
   un pie chart no tiene el problema de datalabels rotados que si tenia
   el bar chart de ROAS (ver estadisticas-roas.css), escala su radio sin
   perder legibilidad. */
body.pw-sneat .stats-sneat__row .stats-sneat__card {
    padding: 14px;
}

body.pw-sneat .stats-sneat__row .stats-sneat__chart {
    height: 280px;
    margin-top: 0;
}

/* La card de ayuda de UTM no tiene chart propio, solo titulo + texto -
   sin esto el padding-bottom de la card queda pegado al texto de ayuda
   (el ultimo elemento ya trae su propio margen inferior). */
body.pw-sneat .stats-sneat__card .cfg-ayuda:last-child {
    margin-bottom: 0;
}


/* estadisticas-roas.css */

/* ==================================================================== */
/* SNEAT - Estadisticas > ROAS / Retorno de inversion publicitaria       */
/* (mod_estadisticas.php?option=roas).                                  */
/*                                                                       */
/* Reusa las cards genericas .stats-sneat__filtro-card / .stats-sneat__card
   ya definidas en estadisticas.css (nacieron en Vision general, el      */
/* nombre no es especifico de ese modulo) - aca solo la cosmetica propia */
/* del filtro de anio y el ajuste de alto del chart. Todo bajo           */
/* body.pw-sneat: el modo clasico queda intacto. El grafico (ECharts) es */
/* 100% ajax (mod_estadisticas/roas/chart.js#search) - no se toco ni una */
/* linea de JS, solo el markup/CSS que lo envuelve.                     */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

body.pw-sneat .stats-sneat__filtro-card label {
    color: #566A7F;
    font-size: 13px;
    font-weight: 500;
}

body.pw-sneat .stats-sneat__filtro-card #roas-year {
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    background-image: none;
}

body.pw-sneat #roas-search {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-weight: 600;
}

body.pw-sneat #roas-search:hover,
body.pw-sneat #roas-search:focus {
    background: var(--pw-accent-hover);
    background-image: none;
    color: #FFFFFF;
}

/* El #chart-roas clasico (css.php, sin scope) fija height:600px con un
   selector de ID -- en la card compacta de SNEAT hace falta pisarlo con
   la misma especificidad (ID + clase le gana a un ID solo). Se achica
   bastante menos que el resto de las cards de chart de este modulo
   (.stats-sneat__chart--wide usa 320px): esta serie tiene datalabels
   ROTADOS 90 grados encima de cada barra (chart/ingresos.js) - a menos
   alto, ECharts encoge la fuente/el barGap y el texto rotado se
   amontona hasta ser ilegible. 480px es lo minimo donde sigue legible
   (verificado en mobile real via iframe a 390px).*/
body.pw-sneat #chart-roas {
    height: 480px;
    overflow: visible;
}


/* favoritos-ranking.css */

/* ==================================================================== */
/* SNEAT - Ranking de productos favoritos (mod_favoritos.php).          */
/*                                                                      */
/* Dos vistas comparten el mismo shell .favoritos-sneat: ranking de     */
/* toda la cuenta (listado_cuenta.php) y favoritos de un usuario        */
/* puntual (listado_usuario.php). Todo bajo body.pw-sneat: el modo      */
/* clasico conserva su tabla plana original (regresion cero).           */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

body.pw-sneat .favoritos-sneat__kpis {
    margin-bottom: 16px;
}

/* Mismo patron que Estadisticas > Vision general (SNEAT-PATTERNS.md 45):
   .counter__body no trae min-width:0 propio (flex-item que no se puede
   achicar), asi que un valor largo estira toda la fila mas ancha que la
   card y el icono (order:2) termina visualmente afuera del marco.
   overflow:hidden en la card es el seguro final. Riesgo menor aca que en
   Vision general (son conteos enteros de number_format, no montos), pero
   el mismo bug de layout existe si la cuenta acumula muchos favoritos. */
body.pw-sneat .favoritos-sneat__kpis .counter {
    overflow: hidden;
}

body.pw-sneat .favoritos-sneat__kpis .counter__body {
    min-width: 0;
}

/* Mismo patron de margen mobile que Pedidos/Usuarios/Estadisticas
   (SNEAT-PATTERNS.md 39/43/45): sin margen lateral propio en
   @media(max-width:767px). width:auto porque .page-content__counters
   ya trae width:100% (pw-panel.css, componente compartido) calculado
   ANTES del margen nuevo. */
@media (max-width: 767px) {
    body.pw-sneat .favoritos-sneat__kpis {
        margin-left: 18px;
        margin-right: 18px;
        width: auto;
    }
}

/* KPI "producto mas favorito": el nombre puede ser largo, truncar en
   una linea en vez de romper el layout de la card. */
body.pw-sneat .favoritos-sneat__kpi-top {
    min-width: 220px;
}

body.pw-sneat .favoritos-sneat__kpi-top-name {
    font-size: 15px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* ==== Card de filtro (busqueda instantanea client-side) ==== */
body.pw-sneat .favoritos-sneat__filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .favoritos-sneat__search {
    position: relative;
    max-width: 420px;
}

body.pw-sneat .favoritos-sneat__search-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: #8592A3;
    font-size: 14px;
    pointer-events: none;
}

body.pw-sneat .favoritos-sneat__search-input {
    width: 100%;
    box-sizing: border-box;
    height: var(--pw-control-height);
    padding: 6px 12px 6px 34px;
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    box-shadow: none;
    background-color: #FFFFFF;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat .favoritos-sneat__search-input:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* ==== Card de la tabla ==== */
body.pw-sneat .favoritos-sneat__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

body.pw-sneat .favoritos-sneat__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}

body.pw-sneat .favoritos-sneat__table thead th {
    background-color: var(--pw-thead-bg);
    border-bottom: 1px solid var(--pw-divider);
    color: var(--pw-text-strong);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 12px 16px;
    text-align: left;
}

body.pw-sneat .favoritos-sneat__table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #566A7F;
    font-size: 14px;
    vertical-align: middle;
}

body.pw-sneat .favoritos-sneat__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .favoritos-sneat__table tbody tr:hover {
    background-color: #F9FAFB;
}

body.pw-sneat .favoritos-sneat__table a {
    color: var(--pw-text-strong);
    font-weight: 600;
    text-decoration: none;
}

body.pw-sneat .favoritos-sneat__table a:hover {
    color: var(--pw-accent);
}

body.pw-sneat .favoritos-sneat__col-rank {
    width: 1%;
    white-space: nowrap;
}

body.pw-sneat .favoritos-sneat__col-nombre {
    max-width: 0; /* fuerza a que el ellipsis del nombre no empuje la tabla */
}

body.pw-sneat .favoritos-sneat__codigo {
    color: #8592A3;
    font-size: 13px;
}

/* Columna Codigo oculta en mobile: aprovecha el espacio para el Nombre,
   que es la columna que realmente importa para identificar el producto.
   El <th> y el <td> tienen nombres de clase DISTINTOS
   (favoritos-sneat__col-codigo / favoritos-sneat__codigo) -- hay que
   ocultar los dos o el thead/tbody quedan con cantidad de columnas
   visibles desincronizada y el table-layout:auto del browser se rompe
   para toda la tabla (gotcha ya visto en Usuarios, SNEAT-PATTERNS.md 39). */
@media (max-width: 767px) {
    body.pw-sneat .favoritos-sneat__col-codigo,
    body.pw-sneat .favoritos-sneat__codigo {
        display: none;
    }
}

body.pw-sneat .favoritos-sneat__fecha {
    color: #8592A3;
    font-size: 13px;
    white-space: nowrap;
}

/* Badge "Inactivo" junto al nombre del producto */
body.pw-sneat .favoritos-sneat__inactivo {
    margin-left: 8px;
    vertical-align: middle;
}

/* ==== Numero de ranking: circulo neutro; top-3 con medalla ==== */
body.pw-sneat .favoritos-sneat__rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #F1F2F6;
    color: #8592A3;
    font-size: 12px;
    font-weight: 700;
}

body.pw-sneat .favoritos-sneat__rank--1 {
    background-color: rgba(255, 193, 7, 0.16);
    color: #B8860B;
}

body.pw-sneat .favoritos-sneat__rank--2 {
    background-color: rgba(148, 163, 184, 0.20);
    color: #64748B;
}

body.pw-sneat .favoritos-sneat__rank--3 {
    background-color: rgba(205, 127, 50, 0.16);
    color: #A85C2A;
}

/* ==== Columna Cantidad: numero + barra de progreso sutil ==== */
body.pw-sneat .favoritos-sneat__cantidad {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    width: 100%;
}

body.pw-sneat .favoritos-sneat__cantidad-value {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-weight: 700;
    color: var(--pw-text-strong);
    min-width: 18px;
    text-align: right;
}

body.pw-sneat .favoritos-sneat__bar {
    display: inline-block;
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background-color: #EEF0F4;
    overflow: hidden;
}

body.pw-sneat .favoritos-sneat__bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pw-accent-soft), var(--pw-accent));
}

/* ==== Empty states ==== */
body.pw-sneat .favoritos-sneat__empty,
body.pw-sneat .favoritos-sneat__empty-search {
    text-align: center;
    color: #8592A3;
    font-size: 14px;
    padding: 48px 20px;
}

body.pw-sneat .favoritos-sneat__empty i,
body.pw-sneat .favoritos-sneat__empty-search i {
    display: block;
    font-size: 32px;
    color: #D5DAE0;
    margin-bottom: 10px;
}

body.pw-sneat .favoritos-sneat__empty {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
}

/* ==== Card del usuario (listado_usuario.php) ==== */
body.pw-sneat .favoritos-sneat__usuario-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .favoritos-sneat__usuario-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 17px;
    font-weight: 700;
}

body.pw-sneat .favoritos-sneat__usuario-info {
    flex: 1;
    min-width: 0;
}

body.pw-sneat .favoritos-sneat__usuario-nombre a {
    color: var(--pw-text-strong);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

body.pw-sneat .favoritos-sneat__usuario-nombre a:hover {
    color: var(--pw-accent);
}

body.pw-sneat .favoritos-sneat__usuario-email {
    color: #8592A3;
    font-size: 13px;
    margin-top: 2px;
}

body.pw-sneat .favoritos-sneat__usuario-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--pw-danger-soft);
    color: var(--pw-danger);
    font-size: 13px;
    font-weight: 700;
}


/* inmuebles.css */

/* ==================================================================== */
/* SNEAT - Modulo Inmuebles (body.pw-sneat.inmuebles--list)             */
/*                                                                      */
/* mod_inmuebles.php. El listado usa PW_PanelDeControl_Html_List (igual  */
/* que Publicaciones/Catalogo): switch Activo, estrella Destacado,       */
/* checkbox masivo a la izquierda. El combo "Acciones masivas" necesita  */
/* el marcador .pw-toolbar-actions-group en el toolbar inyectado (ver    */
/* mod_inmuebles/listado.php) o queda oculto en mobile — mismo gotcha    */
/* que Cupones/Contacto/Publicaciones, ver SNEAT-PATTERNS.md.            */
/* La tabla reusa la clase .publicaciones-listado */
/* (thead/filas/hover ya estilados globalmente). Aca solo: card de       */
/* filtro, toolbar y boton Agregar. Archivo ASCII puro.                  */
/* ==================================================================== */

/* Evita scroll horizontal cuando .main{display:table} expande la tabla */
body.pw-sneat.inmuebles--list .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card de filtro ==== */
body.pw-sneat .inmuebles-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .inmuebles-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .inmuebles-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

body.pw-sneat .inmuebles-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .inmuebles-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .inmuebles-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* ==== Toolbar de acciones (la card del filtro ya delimita) ==== */
body.pw-sneat.inmuebles--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Boton Agregar inyectado en el toolbar: empujar a la derecha */
body.pw-sneat.inmuebles--list .inmuebles-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat.inmuebles--list .inmuebles-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat.inmuebles--list .inmuebles-actions-buttons .btnCrear:hover,
body.pw-sneat.inmuebles--list .inmuebles-actions-buttons .btnCrear:focus,
body.pw-sneat.inmuebles--list .inmuebles-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

/* La columna Tipo trae un <img> de icono: alinearlo con el texto */
body.pw-sneat.inmuebles--list .productos-listado__col-tipo img {
    vertical-align: middle;
    margin-right: 4px;
}

/* Copia de Referencia mostrada debajo de Tipo (ver listado.php) — oculta
   en desktop, donde Referencia sigue siendo su propia columna. */
body.pw-sneat.inmuebles--list .inmuebles-listado__referencia-mobile {
    display: none;
}

/* Mobile: no entraban los items (4 columnas + checkbox + acciones en
   poco ancho). Se oculta la columna Destacado entera (pedido explicito
   del usuario) y se oculta Referencia como columna propia, mostrando en
   su lugar la copia que ya viaja debajo de Tipo (arriba). */
@media (max-width: 767px) {
    body.pw-sneat.inmuebles--list .productos-listado__col-destacado,
    body.pw-sneat.inmuebles--list .productos-listado__col-referencia {
        display: none !important;
    }
    body.pw-sneat.inmuebles--list .inmuebles-listado__referencia-mobile {
        display: block;
        font-size: 12px;
        color: var(--pw-gray-light);
        margin-top: 2px;
    }
}

/* ==================================================================== */
/* SNEAT - Formulario de alta/edicion de inmueble                       */
/* (body.pw-sneat.inmuebles--form)                                      */
/* Reskin sobre todo por CSS (.well + .control-group + label.checkbox). */
/* Excepcion: Activo/Destacado si se reemplazan por switch/estrella      */
/* (pw_html_button_toggle()/pw_html_button_star(), mismos widgets que el */
/* listado) en contenido.php, dual-mode con la rama clasica intacta.     */
/* Las tabs nivel 2 (#tabsItem) y los inputs ya los estiliza el SNEAT    */
/* global.                                                              */
/* ==================================================================== */

/* Fila switch/estrella + label, uno al lado del otro. margin-bottom en
   TODAS las filas (tambien la ultima): Activo/Destacado viven en su
   propio .span3, seguido de OTRO .span3 (Estado) que en mobile se
   apila debajo (row-fluid colapsa a una columna) — sin margen en la
   ultima fila, Destacado y el combo Estado quedaban pegados sin
   separacion (reportado por el usuario, capturas). */
body.pw-sneat.inmuebles--form .inmuebles-form__switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
body.pw-sneat.inmuebles--form .inmuebles-form__switch-row label {
    margin-bottom: 0;
    cursor: pointer;
}
/* La estrella del listado es chica/gris por defecto (bi-star simple);
   en el form se agranda un poco para que no desaparezca al lado del
   switch (36x20px) que tiene mucho mas peso visual. */
body.pw-sneat.inmuebles--form .inmuebles-form__switch-row .button-star__icon {
    font-size: 20px;
    color: #8592A3;
}
body.pw-sneat.inmuebles--form .inmuebles-form__switch-row .button-star--active .button-star__icon {
    color: #FFAB00;
}

/* Cada caja gris .well pasa a card blanca SNEAT */
body.pw-sneat.inmuebles--form #formItem .well {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Labels de los controles */
body.pw-sneat.inmuebles--form #formItem .control-label,
body.pw-sneat.inmuebles--form #formItem > form label,
body.pw-sneat.inmuebles--form #formItem label {
    color: var(--pw-text-strong);
    font-weight: 500;
    font-size: 13px;
}

/* Checkboxes con color de marca (se conserva el layout float de BS2, que
   ya muestra el check a la izquierda del texto). */
body.pw-sneat.inmuebles--form #formItem input[type="checkbox"] {
    accent-color: var(--pw-accent);
    cursor: pointer;
}
body.pw-sneat.inmuebles--form #formItem label.checkbox,
body.pw-sneat.inmuebles--form #formItem label.checkbox.inline {
    color: #566A7F;
    font-weight: 500;
}

/* input-append (superficie m2) */
body.pw-sneat.inmuebles--form #formItem .input-append input {
    border-radius: 8px 0 0 8px;
}
body.pw-sneat.inmuebles--form #formItem .input-append .add-on {
    border-radius: 0 8px 8px 0;
    background: #F1F2F6;
    border: 1px solid var(--pw-border-input);
    color: #566A7F;
    box-shadow: none;
}

/* alert info ("No utilice decimales") */
body.pw-sneat.inmuebles--form #formItem .alert-info {
    background: var(--pw-accent-soft);
    border: 1px solid var(--pw-accent-soft);
    color: var(--pw-accent);
    border-radius: 8px;
    text-shadow: none;
}

/* Fieldset "Informacion de uso interno" */
body.pw-sneat.inmuebles--form #formItem fieldset {
    border: 0 none !important;
    margin-top: 8px;
    padding: 0;
}
body.pw-sneat.inmuebles--form #formItem fieldset > legend {
    border: 0 none;
    color: var(--pw-text-strong);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
    width: auto;
}
body.pw-sneat.inmuebles--form #formItem fieldset > legend small {
    color: #8592A3;
    font-weight: 400;
    font-size: 12px;
}

/* Campos de texto largo (descripcion, notas) con fondo amarillo tipo nota */
body.pw-sneat.inmuebles--form #formItem textarea {
    background-color: #FFF8E1;
    border: 1px solid #EEDFA2;
    border-radius: 8px;
    color: #6E6033;
    box-shadow: none;
}
body.pw-sneat.inmuebles--form #formItem textarea:focus {
    background-color: #FFFBEB;
    border-color: #F1C50E;
    box-shadow: 0 0 0 3px rgba(241, 197, 14, 0.18);
    outline: none;
}
body.pw-sneat.inmuebles--form #formItem textarea::placeholder {
    color: #BBAA6B;
}

/* Boton "Seleccionar ubicacion" (mapa): gris secundario SNEAT */
body.pw-sneat.inmuebles--form #formItem #btnAbrirMapa {
    border-radius: 8px;
}

/* ------------------------------------------------------------------ */
/* Iconos en las solapas nivel 2 (Contenido / Imagenes / Videos)       */
/* via ::before, sin tocar el markup (FontAwesome 4).                  */
/* ------------------------------------------------------------------ */
body.pw-sneat.inmuebles--form #tabsItem > li > a::before {
    font-family: FontAwesome;
    margin-right: 6px;
    font-weight: normal;
}
body.pw-sneat.inmuebles--form #tabsItem > li > a[href="#tabItemContenido"]::before {
    content: "\f0f6"; /* fa-file-text-o */
}
body.pw-sneat.inmuebles--form #tabsItem > li > a[href="#tabItemFotos"]::before {
    content: "\f03e"; /* fa-picture-o */
}
body.pw-sneat.inmuebles--form #tabsItem > li > a[href="#tabItemVideos"]::before {
    content: "\f03d"; /* fa-video-camera */
}

/* ------------------------------------------------------------------ */
/* Titulo de seccion dentro de cada card del formulario (mas diseno)   */
/* ------------------------------------------------------------------ */
body.pw-sneat.inmuebles--form #formItem .inmuebles-form__section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.inmuebles--form #formItem .inmuebles-form__section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 14px;
}


/* menu-paginas.css */

/* ==================================================================== */
/* SNEAT - Paginas > Agregar, borrar y modificar (mod_menu.php).        */
/*                                                                      */
/* ABM nestable del arbol de paginas/secciones (patrones 14/17 del      */
/* doc SNEAT-PATTERNS.md) + form de alta como card (patron 15/19).      */
/* Scope: ids propios de la pantalla (#form-crear-seccion,              */
/* #contenedor-paginas, #nestable, #nestable-menu) bajo body.pw-sneat:  */
/* el modo clasico queda intacto (regresion cero).                      */
/* Archivo ASCII puro (el bundle mezcla encodings).                     */
/* ==================================================================== */

/* ==== Layout Container (ancho fijo, centrado) en vez de Fluid ====
   El wrapper .container-fluid (panel_de_control/html/main/index.php) es
   compartido por TODO el panel SNEAT -- no se toca ahi (otros modulos,
   ej. Productos/Usuarios, dependen a proposito del ancho completo, ver
   comentarios en usuarios-registrados.css). Se pisa el max-width SOLO en
   esta pantalla (body.pw-sneat.paginas). 1320px = el max-width de
   .b5-container-xxl en el bundle de Bootstrap 5 (bootstrap-grid.css),
   mismo valor que usaria el resto del panel si esto se extiende a
   futuro.

   OJO con el selector: hay DOS .container-fluid en el DOM del panel --
   el del contenido (html/index.php, hijo directo de .main__right) y el
   de la barra superior (html/menu/barra_superior.php,
   .container-fluid.pw-navbar-small dentro de .navbar-inner). Un
   selector `.container-fluid` a secas capturaba TAMBIEN la barra y la
   dejaba con max-width:1320px + margenes laterales de ~84px, mientras
   el resto del panel la muestra a sangre. Por eso se ancla con
   `.main__right > `. Ver seccion 112 de SNEAT-PATTERNS.md. */
body.pw-sneat.paginas .main__right > .container-fluid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}

/* ==== Ayuda del modulo: oculta por ahora ====
   mod_menu/index.php arma un row-fluid con .span5 para la ayuda (cuando
   el modulo tiene ayuda configurada) y .span7 (7/12) para el listado --
   con Layout Fluid ya era angosto, y sumado al ancho fijo de arriba
   dejaba el listado (switches/botones) apretado. Se oculta la ayuda y el
   listado pasa a 100% del contenedor. A futuro va a un drawer lateral
   tipo offcanvas en vez de esta columna fija -- por eso el ocultamiento
   es solo visual (CSS), sin tocar el PHP que sigue armando el bloque. */
body.pw-sneat.paginas .row-fluid > .span5 {
    display: none;
}

body.pw-sneat.paginas .row-fluid > .span7 {
    width: 100%;
    margin-left: 0;
}

/* ==== Form de alta como card blanca ==== */
body.pw-sneat #form-crear-seccion {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat #form-crear-seccion fieldset {
    border: 0 none;
    margin: 0;
    padding: 0;
}

body.pw-sneat #form-crear-seccion legend {
    width: 100%;
    border: 0 none;
    margin-bottom: 14px;
    padding: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    line-height: 1.2;
}

body.pw-sneat #form-crear-seccion label {
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
}

/* Los inputs/selects heredan el estilo global SNEAT (borde, foco,
   chevron). Solo contener el ancho del span12 de BS2. */
body.pw-sneat #form-crear-seccion input[type="text"],
body.pw-sneat #form-crear-seccion select {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    height: var(--pw-control-height);
    border-radius: 8px;
}

/* Boton Agregar: primario violeta (reset BS2) */
body.pw-sneat #form-crear-seccion #btn-crear-seccion {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: 600;
}

body.pw-sneat #form-crear-seccion #btn-crear-seccion:hover,
body.pw-sneat #form-crear-seccion #btn-crear-seccion:focus,
body.pw-sneat #form-crear-seccion #btn-crear-seccion:active {
    background: var(--pw-accent-hover);
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
}

/* ==== Card del arbol de paginas ==== */
/* Pisa el <style> inline de index.php (#contenedor-paginas). */
body.pw-sneat #contenedor-paginas {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 12px 16px 12px 34px;
    box-sizing: border-box;
}

/* ==== Nestable: handle con grip ==== */
/* Solo recolorear y cambiar glyph. NO tocar el mecanismo de nestable
   (position absolute + text-indent + overflow hidden + :before). */
body.pw-sneat #nestable .dd3-handle {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: grab;
}

body.pw-sneat #nestable .dd3-handle:before {
    content: "\283F"; /* grip de 6 puntos */
    color: #B4B7BD;
    font-size: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* ==== Filas: flat con divisor suave ==== */
/* position static: el content viene despues del handle en el DOM; si se
   posiciona, tapa el handle y mata el drag (trampa 1 del patron 14). */
body.pw-sneat #nestable .dd3-content {
    position: static;
    border: 0 none;
    border-bottom: 1px solid var(--pw-border-soft);
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
}

body.pw-sneat #nestable .dd3-content:hover {
    background-color: rgba(67, 89, 113, 0.04);
}

/* ==== Fila con la pagina desactivada (switch "Activo" apagado) ====
   El estandar global (pw-panel.css, "Filas/items inactivos") deja
   .pw_disabled_group sin NINGUN cambio visual (background:transparent,
   color:inherit) -- pensado para listados en tabla, donde una banda gris
   se veia mal contra la card blanca. Reportado por el usuario con captura:
   en este arbol, sin ninguna marca, no se nota facil cual pagina esta
   apagada. Se pisa esa neutralizacion SOLO aca (selector mas especifico
   que el global, no hace falta !important) con un fondo gris suave en la
   fila + el nombre atenuado. Ninguno de los dos toca switches/drag handle/
   lapiz de edicion: son elementos hermanos/hijos con su propio color
   explicito (no heredado), un background-color detras no los altera. */
body.pw-sneat #nestable .dd3-content.pw_disabled_group,
body.pw-sneat .paginas-fuera__item .dd3-content.pw_disabled_group {
    background-color: var(--pw-page-bg, #F5F6FA) !important;
}

body.pw-sneat #nestable .pw_disabled_group .buttonStartEdition,
body.pw-sneat .paginas-fuera__item .pw_disabled_group .buttonStartEdition {
    color: var(--pw-gray-light) !important;
}

/* Panel de edicion inline abierto (engranaje): destacar suave */
body.pw-sneat #nestable .col-inputs-open {
    background-color: #F8F8FC;
    border-radius: 8px;
}

/* Nombre de la pagina */
body.pw-sneat #nestable .buttonStartEdition {
    color: var(--pw-text-strong);
    font-size: 14px;
    font-weight: 600;
}

body.pw-sneat #nestable .buttonStartEdition:hover {
    color: var(--pw-accent);
}

body.pw-sneat #nestable .col-inputs .fa-cog {
    color: #B0BAC5;
}

body.pw-sneat #nestable .buttonStartEdition:hover .fa-cog {
    color: var(--pw-accent);
}

/* Icono del tipo de seccion */
body.pw-sneat #nestable .icono-tipo {
    color: var(--pw-gray-light);
}

/* ==== Checkbox Activo -> switch (CSS-only sobre el input existente,
   el flujo JS de .checkboxActivar no se toca) ==== */
body.pw-sneat #nestable .checkboxActivar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 0 none;
    border-radius: 999px;
    background-color: #D9DEE3;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: background-color 0.15s ease;
}

body.pw-sneat #nestable .checkboxActivar::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform 0.15s ease;
}

body.pw-sneat #nestable .checkboxActivar:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat #nestable .checkboxActivar:checked::before {
    transform: translateX(14px);
}

body.pw-sneat #nestable .menu-row__col--activar label {
    font-size: 12px;
    color: var(--pw-gray-light);
    cursor: pointer;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* ==== Botonera por fila: flat circular (reset de btn-success/danger,
   que traen color #fff !important - gotcha de categorias) ==== */
body.pw-sneat #nestable .col-buttons .btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light) !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #nestable .col-buttons .btnEditar:hover,
body.pw-sneat #nestable .col-buttons .btnEditar:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent) !important;
}

body.pw-sneat #nestable .col-buttons .btnBorrar:hover,
body.pw-sneat #nestable .col-buttons .btnBorrar:focus {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger) !important;
}

body.pw-sneat #nestable .col-buttons .btnIr:hover,
body.pw-sneat #nestable .col-buttons .btnIr:focus {
    background: rgba(67, 89, 113, 0.08) !important;
    color: var(--pw-text-strong) !important;
}

body.pw-sneat #nestable .col-buttons .btn.disabled,
body.pw-sneat #nestable .col-buttons .btn.disabled:hover {
    color: #D5DAE0 !important;
    background: transparent !important;
    cursor: default;
}

/* Botones del panel de edicion inline (guardar/cancelar) */
body.pw-sneat #nestable .buttonSubmitEdition {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: #FFFFFF;
}

body.pw-sneat #nestable .buttonSubmitEdition:hover {
    background: var(--pw-accent-hover);
    color: #FFFFFF;
}

body.pw-sneat #nestable .buttonCancelEdition {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: var(--pw-text-strong);
}

/* ==== Conectores del arbol (niveles 2/3), patron 17 ==== */
/* Canal de sangria por padding (no margin: el rail quedaria pegado).
   48px y no 30px: el handle mide 26px, asi que con 30px de sangria entre
   el handle del padre y el del hijo quedaban 4px y el codo del conector
   terminaba a 2px del handle -- se leian como un solo elemento pegoteado. */
body.pw-sneat #nestable .dd-list .dd-list {
    margin-left: 0;
    padding-left: 48px;
    border-left: 0 none;
}

/* Rail vertical por item — height:100%, NO top:0;bottom:0 (gotcha
   Chrome: el pseudo absoluto con top+bottom renderiza con height 0). */
body.pw-sneat #nestable .dd-list .dd-list > .dd-item {
    position: relative;
}

/* left:-30px (no -18px): el boton +/- de expandir/colapsar de nestable
   (jquery.nestable.js, float:left + margin-left:-20px, sprite de 20px de
   Bootstrap 2 "icon-plus"/"icon-minus") cae en el rango [-20px, 0] relativo
   al <li>. Con el rail en -18px quedaba adentro de ese rango y el simbolo
   +/- se veia partido por la linea. Medido: con -30px el rail queda en
   [-30,-28] y el boton en [-20,0] -- 8px de aire limpio entre ambos. */
body.pw-sneat #nestable .dd-list .dd-list > .dd-item::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #DDE1E6;
    z-index: 1;
}

/* Ultimo hermano: corta el rail en el centro de la fila -> esquina L */
body.pw-sneat #nestable .dd-list .dd-list > .dd-item:last-child::before {
    height: 24px;
}

/* Tick horizontal: se acorta (12px -> 8px) para terminar ANTES de donde
   arranca el boton +/- (-20px), no debajo de el -- si no, el tick vuelve a
   quedar tapado por el boton en las filas que tienen hijas propias. */
body.pw-sneat #nestable .dd-list .dd-list > .dd-item::after {
    content: "";
    position: absolute;
    left: -30px;
    top: 23px;
    width: 8px;
    height: 2px;
    background: #DDE1E6;
    border-bottom-left-radius: 6px;
    z-index: 1;
}

/* ==== Botones Abrir todo / Cerrar todo ==== */
body.pw-sneat #nestable-menu .btn {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 5px 12px;
    color: var(--pw-text-strong);
    font-size: 12px;
}

body.pw-sneat #nestable-menu .btn:hover,
body.pw-sneat #nestable-menu .btn:focus {
    background: var(--pw-btn-secondary-bg-hover);
    color: var(--pw-text-strong);
}

/* ==================================================================== */
/* SNEAT - Listado en dos zonas ("Menu principal" / "Fuera del menu").  */
/*                                                                      */
/* Reemplaza el arbol unico por dos secciones: la zona menu (arrastrable,*/
/* dentro de #nestable, sin cambios de estilo respecto de lo anterior)  */
/* y la zona fuera (lista plana alfabetica, #paginas-fuera__list, SIN   */
/* handle ni anidamiento). El contenido interno de cada fila (nombre,   */
/* engranaje, columna "en el menu", switch Activo, botonera) es el      */
/* MISMO html en ambas zonas (Zonas::menuRowCols(), reusado), asi que   */
/* las reglas de esta seccion duplican deliberadamente -sin modificar-  */
/* las de #nestable de mas arriba, con selector .paginas-fuera__item en */
/* vez de #nestable. Ver PW_Helper_Menu_PanelDinamico_Zonas.            */
/* ==================================================================== */

/* ==== Titulo y separacion entre zonas ==== */
body.pw-sneat .paginas-zona {
    margin-bottom: 24px;
}

body.pw-sneat .paginas-zona__titulo {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pw-gray-light);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pw-border-soft);
}

/* ==== Alerta: paginas marcadas para el menu que no van a aparecer ====
   Oculta a pedido del usuario (junto con el badge por fila de arriba).
   El PHP (Zonas::alertaInalcanzables()) la sigue armando igual, solo se
   esconde por CSS. */
body.pw-sneat .paginas-alerta-inalcanzables {
    display: none;
    align-items: center;
    gap: 8px;
    background: #FFF4E5;
    border: 1px solid #FFE0B2;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    color: #8A5A00;
    font-size: 13px;
}

body.pw-sneat .paginas-alerta-inalcanzables .fa {
    color: #F0A202;
}

/* ==== Filas con posicion ficticia (promovidas a la raiz por render()) ====
   Su orden y anidamiento no significan nada -- estan dibujadas ahi porque
   su madre quedo fuera del menu. Se les esconde el handle para que nadie
   intente reordenarlas: el JS ya las excluye del payload, esto evita que
   la accion parezca posible y no haga nada. */
body.pw-sneat #nestable .paginas-promovida > .dd3-handle {
    visibility: hidden;
}

/* ==== Badge de advertencia por fila (icono con tooltip) ====
   Oculto a pedido del usuario (no le encontraba sentido al aviso por
   fila). El PHP (Zonas::colEnElMenu()) lo sigue armando igual -- es
   position:absolute, asi que nunca ocupo espacio propio en el flujo del
   switch (ver el comentario original mas abajo); ocultarlo no libera
   ancho de columna, solo saca el icono/tooltip. Ver tambien la alerta
   agregada .paginas-alerta-inalcanzables, que SI se mantiene (pendiente
   de decision del usuario). */
body.pw-sneat .paginas-badge-inalcanzable {
    display: none;
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    color: #F0A202;
    font-size: 13px;
    cursor: help;
}

/* ==== Columna "en el menu": switch propio (violeta, distinto del verde
   de Activo para diferenciar visualmente ambos toggles) ==== */
body.pw-sneat #nestable .checkboxPublicarMenu1,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 0 none;
    border-radius: 999px;
    background-color: #D9DEE3;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: background-color 0.15s ease;
}

body.pw-sneat #nestable .checkboxPublicarMenu1::before,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform 0.15s ease;
}

body.pw-sneat #nestable .checkboxPublicarMenu1:checked,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat #nestable .checkboxPublicarMenu1:checked::before,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1:checked::before {
    transform: translateX(14px);
}

body.pw-sneat #nestable .checkboxPublicarMenu1:disabled,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ==== Scroll horizontal de toda la pantalla ====
   #contenedor-paginas es un <fieldset>, y el UA stylesheet de Chrome le
   pone min-inline-size: min-content. Con las filas en flex, ese min-content
   crecia a ~846px dentro de un padre (.span7) de ~701px, empujando el
   documento a 1646px de scrollWidth sobre 1521px de viewport. Anularlo es
   lo unico que hace falta: medido antes 1646 / despues 1521. */
body.pw-sneat #contenedor-paginas {
    min-width: 0;
}

/* ==== Fila mientras se arrastra (clon de nestable) ====
   nestable.js, al arrancar el drag, DESENGANCHA el <li> de adentro de
   #nestable y lo cuelga de .dd-dragel, que appendea directo a <body>
   (jquery.nestable.js:266-269 dragItem[0].parentNode.removeChild(...) +
   $(document.body).append(this.dragEl)). Mientras se arrastra, la fila deja
   de ser descendiente de #nestable, asi que TODO el CSS scopeado como
   "body.pw-sneat #nestable ..." (los switches, los botones circulares) deja
   de aplicar y se ve el checkbox/boton nativo del navegador -- eso era el
   "checkbox y botones viejos" del reporte. Ocultar esas columnas durante el
   drag (en vez de duplicar cada regla bajo .dd-dragel) es mas simple y es
   ademas lo que se pidio: no ver ninguno de esos controles mientras se
   arrastra, solo el icono y el nombre. visibility (no display) para no
   correr el ancho que nestable ya fijo por JS al iniciar el drag. */
body.pw-sneat .dd-dragel .menu-row__col--en-menu,
body.pw-sneat .dd-dragel .menu-row__col--activar,
body.pw-sneat .dd-dragel .menu-row__col--botones {
    visibility: hidden;
}

/* ==== Layout horizontal de las columnas de cada fila ====
   .menu-row nunca tuvo display:flex, asi que sus 5 columnas
   (icono/configuracion/en-menu/activar/botones) caian en flujo block,
   apiladas en vertical, desbordando los 46px fijos de .dd3-content
   (nestable.css) y solapando con la fila siguiente. */
body.pw-sneat #nestable .menu-row,
body.pw-sneat .paginas-fuera__item .menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

/* Las columnas arrastran padding/margin del CSS clasico (la de icono trae
   padding-top:12px y margin:3px). Con el layout viejo eso alineaba a ojo;
   con flex descentra cada celda respecto del eje de la fila -- era lo que
   dejaba el icono ~7px por debajo del nombre. El centrado lo hace flex. */
body.pw-sneat #nestable .menu-row__col,
body.pw-sneat .paginas-fuera__item .menu-row__col {
    padding: 0;
    margin: 0;
}

/* Ancho FIJO (no auto): los .btn-group de BS2 colapsan margenes distinto
   segun que botones esten deshabilitados, asi que esta columna medida en
   filas reales daba 91 / 87 / 82px. Al estar anclada a la derecha, esa
   variacion corria las columnas de switches hasta 9px y les rompia la
   alineacion vertical. 91px = el ancho de la columna en su caso completo. */
body.pw-sneat #nestable .menu-row__col--botones,
body.pw-sneat .paginas-fuera__item .menu-row__col--botones {
    flex: 0 0 91px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Ancho fijo para que el nombre arranque siempre en la misma X (salvo la
   sangria del arbol, que si es intencional). */
body.pw-sneat #nestable .menu-row__col--icono,
body.pw-sneat .paginas-fuera__item .menu-row__col--icono {
    flex: 0 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* El icono es un glyph de Bootstrap Icons: inline + vertical-align baseline,
   con la caja colgando por debajo de la linea base. Sacarlo del flujo inline
   y centrarlo con flex es lo que lo pone en el eje de la fila. */
body.pw-sneat #nestable .menu-row__col--icono > span,
body.pw-sneat .paginas-fuera__item .menu-row__col--icono > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat #nestable .icono-tipo,
body.pw-sneat .paginas-fuera__item .icono-tipo {
    display: block;
    line-height: 1;
}

/* Unica columna que crece: empuja los switches y la botonera a la derecha. */
body.pw-sneat #nestable .menu-row__col--configuracion,
body.pw-sneat .paginas-fuera__item .menu-row__col--configuracion {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Excepcion solo para la zona plana: cuando la fila trae el subtitulo
   "dentro de: X" (Zonas::subtituloDentroDe()), va apilado debajo del
   nombre, no al lado -- antes se agregaba como hermano de .dd3-content y
   quedaba pegado a la derecha de toda la fila, centrado verticalmente.
   Misma especificidad que la regla de arriba pero declarada despues, asi
   que gana en cascada sin necesitar !important. */
body.pw-sneat .paginas-fuera__item .menu-row__col--configuracion {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* El <style> inline del modulo declara .menu-row__col{height:30px} y
       pw-panel.css .col-inputs{overflow:hidden} -- pensados para la fila de
       UNA sola linea del arbol. Con el subtitulo "dentro de: X" la columna
       lleva dos lineas: el nombre se comia los 30px y al subtitulo le
       quedaban 7px de alto, o sea se veia cortado a la mitad (medido en
       browser). Alto automatico + overflow visible SOLO en la zona plana,
       que es la unica que tiene subtitulo; el arbol queda intacto. */
    height: auto;
    overflow: visible;
}

/* Columnas de switch: ancho fijo, para que queden alineadas entre filas y
   debajo de su titulo en .paginas-zona__head. */
body.pw-sneat #nestable .menu-row__col--en-menu,
body.pw-sneat .paginas-fuera__item .menu-row__col--en-menu,
body.pw-sneat #nestable .menu-row__col--activar,
body.pw-sneat .paginas-fuera__item .menu-row__col--activar {
    flex: 0 0 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* El <input> del switch es un flex-item mas: sin esto toma flex-shrink:1,
   se colapsa a width 0 y queda visible solo su knob (::before, 16px), que
   se monta encima del texto de al lado. Era exactamente el sintoma de
   "Activo" pisado por un circulo blanco. */
body.pw-sneat #nestable .checkboxActivar,
body.pw-sneat #nestable .checkboxPublicarMenu1,
body.pw-sneat .paginas-fuera__item .checkboxActivar,
body.pw-sneat .paginas-fuera__item .checkboxPublicarMenu1 {
    flex: 0 0 34px;
}

/* Los labels de ambos switches se ocultan visualmente (el de "en el menu"
   es una oracion entera pensada para un form, no para una fila densa). El
   significado lo da la cabecera de columnas; el texto sigue en el DOM para
   lectores de pantalla y sigue asociado por for/id. */
body.pw-sneat .menu-row__col--en-menu label,
body.pw-sneat .menu-row__col--activar label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 none;
}

/* ==== Modal de renombrado ====
   Aloja el mismo #colInput_ID que antes se expandia dentro de la fila (lo
   mueve modulo_sneat.js). Mismo lenguaje visual que #pw-sneat-confirm. */
body.pw-sneat #pw-paginas-editar {
    display: none;
}

body.pw-sneat #pw-paginas-editar.pw-paginas-editar--visible {
    display: block;
}

body.pw-sneat .pw-paginas-editar__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(67, 89, 113, 0.45);
    z-index: 1050;
}

body.pw-sneat .pw-paginas-editar__dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 460px;
    max-width: calc(100vw - 32px);
    /* 100vh en mobile no descuenta la barra de direcciones del navegador
       (bug clasico de mobile web): el dialogo podia quedar mas alto que el
       viewport realmente visible y cortarse arriba o abajo. dvh (dynamic
       viewport height) si la descuenta. La linea con vh queda antes como
       fallback para navegadores viejos sin soporte de dvh -- si no entienden
       la propiedad con dvh, la ignoran entera y se quedan con la anterior. */
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(67, 89, 113, 0.25);
    padding: 20px 24px 24px;
    z-index: 1051;
    box-sizing: border-box;
}

/* En pantallas angostas el dialogo puede tener bastante mas contenido
   (switches + botones que se mudan de la fila, ver pwPaginasAbrirModal()):
   centrado vertical con top:50% se corta mas facil que anclado cerca del
   tope, con menos padding para aprovechar el ancho. */
@media (max-width: 767px) {
    body.pw-sneat .pw-paginas-editar__dialog {
        top: 16px;
        transform: translate(-50%, 0);
        padding: 16px 18px 18px;
    }
}

body.pw-sneat .pw-paginas-editar__header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}

body.pw-sneat .pw-paginas-editar__header .fa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 13px;
    flex: 0 0 28px;
}

body.pw-sneat .pw-paginas-editar__titulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* El form heredado trae el layout horizontal de BS2; dentro del modal
   conviene apilado, con el label del idioma arriba de su input.
   OJO: nada de "display: ... !important" aca. El cierre del modal se apoya
   en que modulo.js le pone display:none inline al form; un !important lo
   pisaria y el modal no cerraria nunca (ya paso). Un <form> ya es block. */
body.pw-sneat .pw-paginas-editar__body form {
    margin: 0;
}

body.pw-sneat .pw-paginas-editar__body .control-group {
    margin-bottom: 14px;
}

body.pw-sneat .pw-paginas-editar__body .control-label {
    display: block;
    float: none;
    width: auto;
    text-align: left;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
}

body.pw-sneat .pw-paginas-editar__body .controls {
    margin-left: 0;
}

body.pw-sneat .pw-paginas-editar__body input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    height: var(--pw-control-height);
    border-radius: 8px;
    margin: 0;
}

body.pw-sneat .pw-paginas-editar__body .help-inline {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--pw-danger);
}

/* ==== Switches y botones movidos al modal (ver pwPaginasAbrirModal() en
   modulo_sneat.js) ====
   en-menu/activar se mudan al modal en TODOS los anchos (guardado
   unificado, ver modulo.js buttonSubmitEdition); la botonera editar/
   borrar/ir solo en mobile. Estos controles son los MISMOS nodos de la
   fila (movidos, no clonados), asi que conservan su estado/handlers, pero
   pierden TODO el CSS que dependia de vivir adentro de #nestable /
   .paginas-fuera__item (el aspecto de switch, el ancho fijo del checkbox,
   los botones circulares) porque esos selectores exigen ese ancestro
   exacto -- el mismo problema que .dd-dragel durante el drag (ver mas
   arriba), resuelto aca duplicando el aspecto en vez de reestructurar
   selectores compartidos (misma convencion que ya usa el resto de este
   archivo entre #nestable y .paginas-fuera__item). */
body.pw-sneat #pw-paginas-editar .pw-paginas-editar__extra {
    display: none;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--pw-border-soft);
}

body.pw-sneat #pw-paginas-editar .pw-paginas-editar__extra--visible {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Los switches dejan de ser columnas angostas centradas: en el modal son
   una fila de formulario normal, con su label (antes sr-only) visible.
   display:flex explicito porque includes_css.php (clasico, sin scope a
   body.pw-sneat) trae ".col-checkboxes"/".menu-row__col--activar { display:
   none }" a <=500px -- sin pisarlo aca el switch Activo desaparece adentro
   del modal en mobile angosto (el selector con #pw-paginas-editar ya gana
   por especificidad, sin necesitar !important). */
body.pw-sneat #pw-paginas-editar .menu-row__col--en-menu,
body.pw-sneat #pw-paginas-editar .menu-row__col--activar {
    display: flex;
    flex: none;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    margin-bottom: 14px;
}

/* Los switches ahora viven ADENTRO del form, justo antes de Guardar/
   Cancelar (.pw-paginas-editar__acciones, ver pwPaginasAbrirModal() en
   modulo_sneat.js) -- separador visual para que no se lean pegados a los
   inputs de nombre de arriba. */
body.pw-sneat #pw-paginas-editar .pw-paginas-editar__acciones {
    margin-top: 4px;
    padding-top: 16px;
    border-top: 1px solid var(--pw-border-soft);
}

/* Guardar/Cancelar del modal: sin esto heredan el azul clasico de
   Bootstrap 2 (.btn-primary) -- mismo tratamiento que ya usa la edicion
   inline del listado (#nestable .buttonSubmitEdition/.buttonCancelEdition,
   ver mas arriba), duplicado aca porque el form vive en otro contenedor
   mientras el modal esta abierto. */
body.pw-sneat #pw-paginas-editar .buttonSubmitEdition {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: #FFFFFF;
}

body.pw-sneat #pw-paginas-editar .buttonSubmitEdition:hover {
    background: var(--pw-accent-hover);
    color: #FFFFFF;
}

body.pw-sneat #pw-paginas-editar .buttonCancelEdition {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: var(--pw-text-strong);
}

body.pw-sneat #pw-paginas-editar .menu-row__col--en-menu label,
body.pw-sneat #pw-paginas-editar .menu-row__col--activar label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 13px;
    color: var(--pw-text-strong);
    cursor: pointer;
}

/* El badge de "no aparecera en el sitio" ya es position:absolute con
   right:2px (pensado para flotar sobre el switch en la columna angosta);
   en el modal, con el label ahora visible al lado, se lo separa a la
   derecha de todo el bloque en vez de superponerlo. */
body.pw-sneat #pw-paginas-editar .paginas-badge-inalcanzable {
    position: static;
    margin-left: 8px;
    transform: none;
}

body.pw-sneat #pw-paginas-editar .checkboxActivar,
body.pw-sneat #pw-paginas-editar .checkboxPublicarMenu1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 0 none;
    border-radius: 999px;
    background-color: #D9DEE3;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease;
}

body.pw-sneat #pw-paginas-editar .checkboxActivar::before,
body.pw-sneat #pw-paginas-editar .checkboxPublicarMenu1::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform 0.15s ease;
}

body.pw-sneat #pw-paginas-editar .checkboxActivar:checked,
body.pw-sneat #pw-paginas-editar .checkboxPublicarMenu1:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat #pw-paginas-editar .checkboxActivar:checked::before,
body.pw-sneat #pw-paginas-editar .checkboxPublicarMenu1:checked::before {
    transform: translateX(14px);
}

body.pw-sneat #pw-paginas-editar .checkboxActivar:disabled,
body.pw-sneat #pw-paginas-editar .checkboxPublicarMenu1:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Botonera: en el modal hay lugar, se muestran como botones con texto en
   vez de circulos solo-icono (ver .col-buttons .btn mas abajo). flex-wrap
   por las dudas en el ancho minimo del modal (calc(100vw - 32px)). */
body.pw-sneat #pw-paginas-editar .menu-row__col--botones {
    flex: none;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
}

/* Adentro del modal hay lugar de sobra (la fila real es la que esta
   apretada de espacio): en vez de circulos con solo icono, botones con
   texto -- el texto sale del propio atributo title que estos links ya
   traen desde funciones.php (linkEditar/linkBorrar/linkIr), sin duplicar
   el string en ningun lado ni tocar ese archivo (compartido por todo el
   panel). */
body.pw-sneat #pw-paginas-editar .col-buttons .btn {
    width: auto;
    height: 36px;
    line-height: 34px;
    padding: 0 14px 0 12px;
    background: var(--pw-btn-secondary-bg) !important;
    background-image: none !important;
    border: 1px solid var(--pw-btn-secondary-border) !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-text-strong) !important;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
}

/* El plugin de tooltip (pw-tooltip, data-toggle="tooltip") mueve title a
   data-original-title y vacia el title original apenas inicializa -- attr()
   tiene que leer de ahi, no de title (que en la practica siempre llega
   vacio aca). */
body.pw-sneat #pw-paginas-editar .col-buttons .btn::after {
    content: attr(data-original-title);
}

body.pw-sneat #pw-paginas-editar .col-buttons .btnEditar:hover,
body.pw-sneat #pw-paginas-editar .col-buttons .btnEditar:focus {
    background: var(--pw-accent-soft) !important;
    border-color: var(--pw-accent) !important;
    color: var(--pw-accent) !important;
}

body.pw-sneat #pw-paginas-editar .col-buttons .btnBorrar:hover,
body.pw-sneat #pw-paginas-editar .col-buttons .btnBorrar:focus {
    background: var(--pw-danger-soft) !important;
    border-color: var(--pw-danger) !important;
    color: var(--pw-danger) !important;
}

body.pw-sneat #pw-paginas-editar .col-buttons .btnIr:hover,
body.pw-sneat #pw-paginas-editar .col-buttons .btnIr:focus {
    background: rgba(67, 89, 113, 0.08) !important;
    border-color: var(--pw-text-strong) !important;
    color: var(--pw-text-strong) !important;
}

body.pw-sneat #pw-paginas-editar .col-buttons .btn.disabled,
body.pw-sneat #pw-paginas-editar .col-buttons .btn.disabled:hover {
    color: #D5DAE0 !important;
    background: var(--pw-btn-secondary-bg) !important;
    border-color: var(--pw-btn-secondary-border) !important;
    cursor: default;
}

/* ==== Cabecera de columnas de cada zona ==== */
body.pw-sneat .paginas-zona__head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 2px 6px 0;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pw-gray-light);
}

body.pw-sneat .paginas-zona__head-col {
    flex: 0 0 92px;
    text-align: center;
}

/* Igual de ancha que .col-buttons, para que los titulos caigan sobre sus
   switches y no sobre la botonera. */
body.pw-sneat .paginas-zona__head-col--acciones {
    flex: 0 0 91px;
}

/* ==== Mobile: la fila no entra (icono + nombre + 2 switches + 3 botones
   no caben en una pantalla angosta sin scroll horizontal). Los switches y
   los botones se ocultan de la fila y se MUEVEN al modal de renombrado
   (pwPaginasAbrirModal() en modulo_sneat.js), que ya se abre con el lapiz
   -- ahi entran comodos, con su label visible y sin competir por espacio.
   La fila en mobile queda solo con icono + nombre + lapiz. Las cabeceras
   de columna se esconden junto con sus columnas: no tiene sentido un
   titulo "EN EL MENU"/"ACTIVO" flotando sin nada debajo. ==== */
@media (max-width: 767px) {
    body.pw-sneat #nestable .menu-row__col--en-menu,
    body.pw-sneat .paginas-fuera__item .menu-row__col--en-menu,
    body.pw-sneat #nestable .menu-row__col--activar,
    body.pw-sneat .paginas-fuera__item .menu-row__col--activar,
    body.pw-sneat #nestable .menu-row__col--botones,
    body.pw-sneat .paginas-fuera__item .menu-row__col--botones,
    body.pw-sneat .paginas-zona__head-col--en-menu,
    body.pw-sneat .paginas-zona__head-col--activo,
    body.pw-sneat .paginas-zona__head-col--acciones {
        display: none;
    }
}

/* ==== Zona plana ("Fuera del menu"): lista sin handle ni anidamiento ==== */
body.pw-sneat .paginas-fuera__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pw-sneat .paginas-fuera__vacio {
    color: var(--pw-gray-light);
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

body.pw-sneat .paginas-fuera__item .dd3-content {
    display: flex;
    align-items: center;
    border: 0 none;
    border-bottom: 1px solid var(--pw-border-soft);
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    padding: 6px 0;
}

body.pw-sneat .paginas-fuera__item:last-child .dd3-content {
    border-bottom: 0 none;
}

body.pw-sneat .paginas-fuera__item .dd3-content:hover {
    background-color: rgba(67, 89, 113, 0.04);
}

body.pw-sneat .paginas-fuera__item .col-inputs-open {
    background-color: #F8F8FC;
    border-radius: 8px;
}

/* width:100% para que el ellipsis tenga contra que truncar: el padre es
   flex-direction:column con align-items:flex-start, asi que sin esto el
   div se encoge al ancho de su propio texto (nunca desborda a si mismo) y
   un nombre de padre largo ensancharia toda la columna en vez de cortarse. */
body.pw-sneat .paginas-fuera__dentro-de {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    color: var(--pw-gray-light);
    margin-top: 1px;
}

/* Nombre de la pagina (mismas reglas que en la zona menu) */
body.pw-sneat .paginas-fuera__item .buttonStartEdition {
    color: var(--pw-text-strong);
    font-size: 14px;
    font-weight: 600;
}

body.pw-sneat .paginas-fuera__item .buttonStartEdition:hover {
    color: var(--pw-accent);
}

body.pw-sneat .paginas-fuera__item .col-inputs .fa-cog {
    color: #B0BAC5;
}

body.pw-sneat .paginas-fuera__item .buttonStartEdition:hover .fa-cog {
    color: var(--pw-accent);
}

body.pw-sneat .paginas-fuera__item .icono-tipo {
    color: var(--pw-gray-light);
}

/* Switch Activo (mismas reglas que en la zona menu) */
body.pw-sneat .paginas-fuera__item .checkboxActivar {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
    width: 34px;
    height: 20px;
    margin: 0;
    border: 0 none;
    border-radius: 999px;
    background-color: #D9DEE3;
    cursor: pointer;
    vertical-align: middle;
    outline: none;
    transition: background-color 0.15s ease;
}

body.pw-sneat .paginas-fuera__item .checkboxActivar::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
    transition: transform 0.15s ease;
}

body.pw-sneat .paginas-fuera__item .checkboxActivar:checked {
    background-color: var(--pw-accent);
}

body.pw-sneat .paginas-fuera__item .checkboxActivar:checked::before {
    transform: translateX(14px);
}

body.pw-sneat .paginas-fuera__item .menu-row__col--activar label {
    font-size: 12px;
    color: var(--pw-gray-light);
    cursor: pointer;
    margin-left: 6px;
    display: inline-block;
    vertical-align: middle;
}

/* Botonera por fila (mismas reglas que en la zona menu) */
body.pw-sneat .paginas-fuera__item .col-buttons .btn {
    width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light) !important;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat .paginas-fuera__item .col-buttons .btnEditar:hover,
body.pw-sneat .paginas-fuera__item .col-buttons .btnEditar:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent) !important;
}

body.pw-sneat .paginas-fuera__item .col-buttons .btnBorrar:hover,
body.pw-sneat .paginas-fuera__item .col-buttons .btnBorrar:focus {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger) !important;
}

body.pw-sneat .paginas-fuera__item .col-buttons .btnIr:hover,
body.pw-sneat .paginas-fuera__item .col-buttons .btnIr:focus {
    background: rgba(67, 89, 113, 0.08) !important;
    color: var(--pw-text-strong) !important;
}

body.pw-sneat .paginas-fuera__item .col-buttons .btn.disabled,
body.pw-sneat .paginas-fuera__item .col-buttons .btn.disabled:hover {
    color: #D5DAE0 !important;
    background: transparent !important;
    cursor: default;
}

/* Botones guardar/cancelar de la edicion inline (mismas reglas que en la
   zona menu) */
body.pw-sneat .paginas-fuera__item .buttonSubmitEdition {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: #FFFFFF;
}

body.pw-sneat .paginas-fuera__item .buttonSubmitEdition:hover {
    background: var(--pw-accent-hover);
    color: #FFFFFF;
}

body.pw-sneat .paginas-fuera__item .buttonCancelEdition {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    color: var(--pw-text-strong);
}

/* ====================================================================== */
/* Filtro de la zona "Fuera del menu" (patron canonico 19: card blanca +  */
/* barra de busqueda + avanzado colapsable). Ver seccion 115 del doc.     */
/*                                                                        */
/* La estructura interna del filtro (alturas, grid, selects, el panel     */
/* .form-search__advanced) la da el patron global de pw-panel.css: aca    */
/* solo va la card y lo especifico de esta pantalla.                      */
/* ====================================================================== */
body.pw-sneat .paginas-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* El form interno queda flat: la card ya es el marco. */
body.pw-sneat .paginas-filtro-card #formBuscarPaginasFuera {
    border: 0 none;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

/* Contador "Mostrando N de M paginas": solo aparece con filtro activo (lo
   muestra/oculta el JS), separado del form por una linea suave. */
body.pw-sneat .paginas-filtro-card__contador {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--pw-border-soft);
    font-size: 13px;
    color: var(--pw-gray-light);
}

/* Con filas ocultas por el filtro, ":last-child" ya no es la ultima fila
   VISIBLE: sin esto quedaba un borde inferior colgando en el medio de la
   lista. El JS marca cual es la ultima visible en cada pasada. */
body.pw-sneat .paginas-fuera__item--ultimo-visible .dd3-content {
    border-bottom: 0 none;
}

/* ...y la que era ultima en el DOM recupera su borde si el filtro la dejo
   en el medio de las visibles. */
body.pw-sneat .paginas-fuera__item:last-child:not(.paginas-fuera__item--ultimo-visible) .dd3-content {
    border-bottom: 1px solid var(--pw-border-soft);
}

/* ====================================================================== */
/* CORTE VISUAL entre las dos zonas: cada una es su propia card blanca y  */
/* entre ambas queda una franja con el gris de fondo de la pagina, donde  */
/* vive el titulo de la zona. Sin esto las dos zonas se leian como una    */
/* sola lista larga dentro de un unico recuadro.                          */
/*                                                                        */
/* El wrapper #contenedor-paginas deja de ser la card (pasa a ser un      */
/* contenedor transparente) y la card baja un nivel, a .paginas-zona__card*/
/* -- una por zona. El titulo queda como hermano, FUERA del recuadro.     */
/* Ver seccion 116 del doc.                                               */
/* ====================================================================== */
body.pw-sneat #contenedor-paginas {
    background-color: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

body.pw-sneat .paginas-zona__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    /* Mismo padding que tenia #contenedor-paginas: los 34px de la izquierda
       son el carril del handle de drag del nestable, no un margen estetico
       -- si se achica, el grip se come el icono de tipo de pagina. */
    padding: 12px 16px 12px 34px;
    box-sizing: border-box;
}

/* La franja gris del corte. El titulo ya no necesita su linea divisoria:
   ahora lo que separa es el aire entre las dos cards. */
body.pw-sneat .paginas-zona__titulo {
    border-bottom: 0 none;
    padding-bottom: 0;
    margin-bottom: 10px;
}

/* El aire de arriba del titulo ES el corte: sobre el fondo gris de
   .main__right, con las cards blancas arriba y abajo. */
body.pw-sneat .paginas-zona + .paginas-zona .paginas-zona__titulo {
    margin-top: 26px;
}

/* ====================================================================== */
/* "Borrar filtros" alineado con los selects.                             */
/*                                                                        */
/* Las columnas de select miden label(20) + margen(6) + control(38) = 64, */
/* pero la fila mide 76, asi que un `align-content:end` pegaba el boton   */
/* al fondo de la fila y lo dejaba 12px MAS ABAJO que los selects.        */
/* En vez de compensar con un margen magico, la columna del boton repite  */
/* la estructura de las otras: un <label> vacio reserva exactamente el    */
/* mismo espacio, asi el boton arranca a la altura del control de al lado */
/* por construccion (si el label cambia de tamano, esto acompana).        */
/* ====================================================================== */
body.pw-sneat .paginas-filtro-card__label-hueco {
    display: block;
}

/* ====================================================================== */
/* "Abrir todo" / "Cerrar todo" al pie de la card del arbol.              */
/* Antes colgaban al final de TODA la pagina (debajo de la zona plana),   */
/* lejos de lo unico sobre lo que actuan: el arbol anidable.              */
/* ====================================================================== */
body.pw-sneat .paginas-zona--menu .paginas-zona__card #nestable-menu {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--pw-border-soft);
}

/* Reset del .btn-mini de Bootstrap 2 al lenguaje SNEAT (gris plano, sin
   gradiente ni text-shadow), mismo criterio que .pw-btn-secondary. */
body.pw-sneat #nestable-menu .btn-mini {
    background: #FFFFFF;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 5px 12px;
    font-size: 12px;
    color: #697A8D;
    line-height: 1.4;
}

body.pw-sneat #nestable-menu .btn-mini:hover {
    background: #F5F6FA;
    color: var(--pw-text-strong);
}

/* ====================================================================== */
/* MOBILE: el titulo de zona quedaba pegado al borde de la pantalla.      */
/*                                                                        */
/* En <=767px Bootstrap-responsive pone .container-fluid{padding:0} y el  */
/* listado va a sangre a proposito (patron del panel: aprovechar todo el  */
/* ancho). Pero el titulo NO es parte del listado: es texto suelto sobre  */
/* el fondo gris, y sin padding propio arranca en x=0, pegado al borde.   */
/* El mismo problema tendria cualquier elemento que quede fuera de las    */
/* cards en esta pantalla.                                                */
/* ====================================================================== */
@media (max-width: 767px) {
    body.pw-sneat .paginas-zona__titulo {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ====================================================================== */
/* Tooltips de ayuda ("?") — patron 29.                                  */
/*                                                                        */
/* ⚠️ Bootstrap 2 inserta el .tooltip como HERMANO del elemento, o sea   */
/* DENTRO del contenedor que lo dispara: el globo hereda los estilos de   */
/* texto de ese contenedor. Los titulos de zona y las cabeceras de        */
/* columna estan en uppercase + letter-spacing, asi que el texto de       */
/* ayuda salia GRITADO Y ESPACIADO (verificado en browser, no deducido).  */
/* Hay que neutralizarlo en el globo, no en el contenedor.                */
/* ====================================================================== */
body.pw-sneat .paginas-zona__titulo .tooltip,
body.pw-sneat .paginas-zona__head-col .tooltip {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
}

/* El "?" no debe empujar ni desalinear el texto al que acompana. */
body.pw-sneat .paginas-zona__titulo .pw-tooltip-help,
body.pw-sneat .paginas-zona__head-col .pw-tooltip-help {
    margin-left: 2px;
    vertical-align: middle;
    text-decoration: none;
}


/* paginas.css */

/* ==================================================================== */
/* SNEAT - Modulo Paginas administrables (mod_paginas.php)              */
/*                                                                      */
/* body.pw-sneat.paginas--form (body class agregada en Page/Generica,   */
/* que usa unicamente mod_paginas.php).                                 */
/*                                                                      */
/* La pantalla es un unico formulario con el editor WYSIWYG (TinyMCE)   */
/* dentro de las solapas de idioma. Las solapas nivel 1 y 2 ya las      */
/* estiliza el SNEAT global; aca: card contenedora, titulo de seccion,  */
/* look SNEAT del editor y fix de la banda gris. Archivo ASCII puro.    */
/* ==================================================================== */

/* Card que contiene el editor */
body.pw-sneat.paginas--form .paginas-form__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Titulo de seccion con icono badge */
body.pw-sneat.paginas--form .paginas-form__section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.paginas--form .paginas-form__section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 14px;
}

/* Dentro de la card, el control-group/controls de BS2 no necesita margenes */
body.pw-sneat.paginas--form .paginas-form__card .control-group {
    margin-bottom: 0;
}
body.pw-sneat.paginas--form .paginas-form__card .controls {
    margin-left: 0;
}

/* ------------------------------------------------------------------ */
/* Editor TinyMCE con aspecto SNEAT (el skin sigue siendo lightgray,   */
/* solo se ajusta el marco para que combine con las cards).            */
/* ------------------------------------------------------------------ */
body.pw-sneat.paginas--form .mce-tinymce {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: none !important;
}
body.pw-sneat.paginas--form .mce-tinymce .mce-panel {
    border-color: var(--pw-border-soft);
}

/* Textarea de respaldo (cuando no hay multi-idioma y no carga TinyMCE) */
body.pw-sneat.paginas--form .paginas-form__card textarea {
    width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
}


/* ==================================================================== */
/* Encabezado de la card: titulo a la izquierda, boton "Generar con IA" */
/* a la derecha. El borde inferior pasa del titulo al header, para que  */
/* cruce el ancho completo por debajo de los dos.                       */
/* ==================================================================== */
body.pw-sneat.paginas--form .paginas-form__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.paginas--form .paginas-form__header .paginas-form__section-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* Boton "Generar con IA" ------------------------------------------- */
/* Base sin scope: el boton tambien existe en modo clasico, donde solo  */
/* hereda el .btn de Bootstrap 2.                                       */
.paginas-form__ia-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.paginas-form__ia-clasico {
    margin: 0 0 10px;
    text-align: right;
}
body.pw-sneat.paginas--form .paginas-form__ia-btn {
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
body.pw-sneat.paginas--form .paginas-form__ia-btn:hover,
body.pw-sneat.paginas--form .paginas-form__ia-btn:focus {
    background: var(--pw-accent);
    color: #FFFFFF;
    text-decoration: none;
}

/* ==================================================================== */
/* Modal "Generar con IA" (#modal-generar-ia-pagina)                    */
/*                                                                      */
/* SIN scope body.pw-sneat: el modal es markup nuevo que no existia en  */
/* modo clasico, asi que estilarlo en los dos modos no es una regresion */
/* -- es lo unico que evita que en clasico se vea sin formato. La capa  */
/* con tokens SNEAT va aparte, mas abajo.                               */
/* ==================================================================== */

/* 680px (no 720) para que entre completo en una viewport de 768px, que */
/* es justo el limite donde Bootstrap 2 todavia NO hace fluido el modal. */
.pw-modal-ia {
    width: 680px;
    margin-left: -340px;
}
.pw-modal-ia .modal-body {
    max-height: 62vh;
    overflow-y: auto;
}
.pw-modal-ia__intro {
    margin: 0 0 14px;
    font-size: 13px;
    color: #697A8D;
}

.pw-modal-ia__card {
    background: #FFFFFF;
    border: 1px solid #DBDADE;
    border-radius: 10px;
    padding: 14px 16px 4px;
    margin-bottom: 12px;
}
.pw-modal-ia__card-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: none;
    letter-spacing: normal;
}

.pw-modal-ia__field {
    margin-bottom: 12px;
}
.pw-modal-ia__field > label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
/* Los controles de Bootstrap 2 traen ancho fijo (select: 220px) y      */
/* margin-bottom propio, que dentro de la grilla b5- descuadra todo.    */
.pw-modal-ia__field input[type="text"],
.pw-modal-ia__field select,
.pw-modal-ia__field textarea {
    width: 100%;
    height: auto;
    margin-bottom: 0;
    box-sizing: border-box;
}
.pw-modal-ia__req {
    color: #EA5455;
    font-weight: 700;
}

/* Gotcha de Bootstrap 2: el .tooltip se inserta DENTRO del elemento    */
/* que lo dispara, asi que hereda su tipografia. Sin esto, el tooltip   */
/* de un label sale en negrita y con el tamano del label.               */
.pw-modal-ia .tooltip {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
}

/* Estado "generando" ------------------------------------------------ */
.pw-modal-ia__loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    margin-top: 4px;
    border-radius: 10px;
    background: #F5F5F9;
}
/* Dos clases para ganarle a .pw-modal-ia__loading{display:flex}, que   */
/* con una sola clase empata con .hide de Bootstrap y se impone por     */
/* orden de aparicion. */
.pw-modal-ia__loading.hide {
    display: none;
}
.pw-modal-ia__loading-text {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.pw-modal-ia__loading-text small {
    display: block;
    font-weight: 400;
    color: #697A8D;
}
.pw-modal-ia__spinner {
    display: inline-block;
    font-size: 22px;
    color: var(--pw-accent, #696CFF);
    animation: pw-modal-ia-spin 1s linear infinite;
}
@keyframes pw-modal-ia-spin {
    to { transform: rotate(360deg); }
}

/* Capa SNEAT: solo los tokens, la estructura ya esta resuelta arriba.  */
body.pw-sneat .pw-modal-ia__card {
    border-color: var(--pw-border-card);
}
body.pw-sneat .pw-modal-ia__card-title {
    color: var(--pw-text-strong);
}

/* Responsive: por debajo de 768px Bootstrap 2 hace el modal fluido     */
/* (top/left/right + width auto). El ancho fijo de arriba pisa eso por  */
/* orden de aparicion, asi que hay que devolverlo explicitamente.       */
@media (max-width: 767px) {
    .pw-modal-ia {
        width: auto;
        margin-left: 0;
    }
    .pw-modal-ia .modal-body {
        max-height: 70vh;
    }
    body.pw-sneat.paginas--form .paginas-form__header {
        align-items: flex-start;
    }
}

/* Switch "Incluir espacios para ilustraciones" ---------------------- */
.pw-modal-ia__switch-field {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.pw-modal-ia__switch-field .pw-switch {
    flex-shrink: 0;
    margin-top: 1px;
}
.pw-modal-ia__switch-label {
    margin-bottom: 0;
    cursor: pointer;
}
.pw-modal-ia__switch-label small {
    display: block;
    margin-top: 2px;
    color: #697A8D;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

/* Modo clasico: .pw-switch vive bajo body.pw-sneat, asi que aca no hay   */
/* slider y el input quedaria con el opacity:0 de nadie. Sin scope, el    */
/* input nunca se oculta, con lo cual en clasico se ve un checkbox nativo */
/* normal y el campo sigue siendo usable.                                 */
.pw-modal-ia__switch-field .pw-switch__slider {
    display: none;
}
body.pw-sneat .pw-modal-ia__switch-field .pw-switch__slider {
    display: block;
}


/* pedidos.css */

.table tbody tr.arrepentido > td {
    background-color: #eac1b8;
}

.pedidos {
    /* bloque principal de la p�gina */
}

.pedidos #formBuscar .btn {
    margin-top: 20px;
}

.pedidos .page-content__form-search-buttons-mobile {
    display: none;
}

@media (max-width: 767px) {
    
    .pedidos .page-content__form-search-buttons {
        display: none;
    }    
    
    .pedidos .page-content__form-search-buttons-mobile {
        display: block;
    }    
    
}

@media (max-width: 600px) {
    
    .pedidos-formulario__izquierda {
        padding-bottom: 20px;
    }
    
    .pedidos-formulario__izquierda,
    .pedidos-formulario__derecha {
        padding-left: 10px;
        padding-right: 10px;
    }
    
}

.pedidos-formulario__seccion {
   /* border-bottom: 1px solid #E3E3E3;*/
}

.pedidos-formulario__forma-pago,
.pedidos-formulario__forma-envio {
    border-bottom: 1px solid #E3E3E3;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.pedidos-formulario__numero-venta,
.pedidos-formulario__comprador {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.5;
    padding-top: 10px;
    padding-left: 10px;
}

@media (max-width: 767px) {
    .pedidos-formulario__comprador-contenedor {
        display: none !important;
    }
}

@media (max-width: 600px) {
    
    .pedidos-formulario__numero-venta {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .pedidos-formulario__botones-imprimir {
        padding-left: 10px;
        padding-right: 10px;
    }    
    
}

.pedidos-formulario__fecha {
    font-size: 12px;
}

.pedidos-formulario__operacion {
    padding-top: 3px;
}

.pedidos-formulario__titulo {
    font-weight: bold;
    margin-bottom: 6px;
}

.pedidos-formulario__titulo-icono--grande {
    font-size: 20px;
}

.pedidos-formulario__titulo-icono--transparente {
    color: transparent;
}

.pedidos-formulario__forma-envio {
    /* 
    Margin para quedar igual de altura que .pedidos-formulario__forma-envio, 
    que es un div m�s alto por tener .row-fluid y .span adentro.
    */    
    margin-bottom: 8px;
}

.pedidos-formulario__lista-estados,
.pedidos-formulario__lista-estados-envio {
    display: inline;
    margin: 0px;
}

.pedidos-formulario__lista-estados .pedidos__estado:last-child {
    margin-right: 0px;
}

.pedidos-formulario__orden-detalle label {
    font-size: 12px;
}









.pedidos__estado {
    border: 1px solid #dedede;
    border-radius: 4px;
    text-align: center;
}

.pedidos__estado--listado {
    width: 100px;
    margin: auto;
}

.pedidos__estado--formulario {
    display: inline-block;
    line-height: 30px;
    width: 86px;
    height: 22px;  
    margin-right: 3px;
    margin-bottom: 3px;
    text-align: center;
}

@media (max-width: 400px) {
    .pedidos__estado--formulario,
	.pedidos_estado-envio--formulario {        
        display: block;
        width: 50%;
        margin-right: 0px;
        margin-bottom: 5px;
        padding-left: 5px;
        text-align: left !important;
    }
}

.pedidos__estado--historial {
    display: inline-block;
    line-height: 25px;
    width: 100%;
    height: 22px;
    margin-top: 3px;
}

.pedidos__estado--formulario .radio.inline {
    padding-top: 0px;
    line-height: 1;
    font-size: 12px;
}

.pedidos__estado--formulario input {
    margin-top: -1px;
}

.pedidos__estado--iniciado {
    background-color: #FFFFFF;
    border-color: #474950;
    color: #474950;
}

.pedidos__estado--confirmado {
    background-color: #fcf8e3;
    border-color: #c09853;
    color: #c09853;
}

.pedidos__estado--pagado {
    background-color: #dff0d8;
    border-color: #468847;
    color: #468847;
}

.pedidos__estado--pendiente {
    background-color: #d9edf7;
    border-color: #3a87ad;    
    color: #3a87ad;
}

.pedidos__estado--cancelado {
    background-color: #f2dede;
    border-color: #b94a48;    
    color: #b94a48;
}

.pedidos__estado-envio {
    border: 1px dashed #dedede;
    border-radius: 4px;
    text-align: center;
}

.pedidos__estado-envio--listado {
    width: 100px;
    margin: auto;
}

.pedidos__estado-envio--historial {
    margin-top: 3px;
}

.pedidos__estado-envio--no-iniciado {
    background-color: #FFFFFF;
    border-color: #474950;
    color: #474950;
}

.pedidos__estado-envio--iniciado {
    background-color: #fcf8e3;
    border-color: #c09853;
    color: #c09853;
}

.pedidos__estado-envio--listo {
    background-color: #f7ecc6;
    border-color: #af920e;    
    color: #af920e;
}

.pedidos__estado-envio--enviado {
    background-color: #dff0d8;
    border-color: #468847;
    color: #468847;
}

.pedidos__estado-envio--entregado {
    background-color: #d9edf7;
    border-color: #3a87ad;    
    color: #3a87ad;
}

.pedidos__estado-envio--cancelado {
    background-color: #f2dede;
    border-color: #b94a48;    
    color: #b94a48;
}

.pedidos__estado-envio--devuelto {
    background-color: #CCCCCC;
    border-color: #474950;
    color: #474950;
}

.pedidos__estado--formulario.pedidos__estado-envio--devuelto {
    margin-right: 0px !important;
}

/* pedidos: listado */

.pedidos-listado__texto-secundario {
    font-size: 12px;
    font-weight: normal;
    color: #AAAAAA;
}

.pedidos-listado__texto-secundario--centrado {
    text-align: center;
}

.page-content__table thead .pedidos-listado__importe {
    text-align: right !important;
    
}

.page-content__table tbody .pedidos-listado__importe {
    text-align: right !important;
}

.pedido-listado__total-sin-decimales {
    display: none;
}

.page-content__table tbody .pedidos-listado__numero-venta {
    font-weight: bold;
}

.page-content__table tbody .pedidos-listado__estado {
    text-align: center !important;
}

.page-content__table tbody .pedidos-listado__estado-envio {
    text-align: center !important;
}

.pedidos-listado__estado-envio .main__icon--alerta,
.pedidos-listado__estado-envio--mobile .main__icon--alerta {
    margin-left: 10px;
    color: #b94a48;
}

.pedidos-listado__importe {
    font-weight: bold;
}

.pedidos-listado__fecha--mobile,
.pedidos-listado__hora--mobile,
.pedidos-listado__usuario--mobile,
.pedidos-listado__importe--mobile,
.pedidos-listado__estado--mobile,
.pedidos-listado__estado-envio--mobile {
    margin-top: 5px;
    margin-bottom: 5px;
}

.pedidos-listado__fecha--mobile {
    display: inline;
}

.pedidos-listado__hora--mobile {
    display: inline;
    margin-left: 5px;
}

.pedidos-listado__usuario--mobile {
    margin-top: 5px;
}

.pedidos-listado__importe--mobile {
    font-weight: bold;
}

.pedidos-listado__estado--mobile .pedidos-listado__estado-titulo {
    font-weight: bold;
    margin-right: 5px;
}

.pedidos-listado__estado-envio--mobile .pedidos-listado__estado-envio-titulo {
    font-weight: bold;
    margin-right: 5px;
}

.page-content__table-header--mobile {
    display: none;
}

@media (min-width: 768px) {
    .pedidos-listado__comprador--mobile {
        display: none;
    }
}

@media (max-width: 767px) {
    
    .page-content__table-header--desktop {
        display: none;
    }
    
    .page-content__table-header--mobile {
        display: table-row;
    }
    
    .page-content__table-header--mobile .pedidos-listado__numero-venta {
        text-align: center;
    }
    
    .page-content__table-header--mobile .pedidos-listado__numero-venta .page-content__table-sort-icon {
        float: none;
    }
    
    .pedidos-listado__fecha-facturacion,
    .pedidos-listado__estado,
    .pedidos-listado__importe,
    .pedidos-listado__estado-envio {
        display: none;
    }
    
    .pedidos-listado__comprador {
        display: none;
    }    
    
    .pedidos-listado__comprador--mobile .pedidos-listado__estado-titulo,
    .pedidos-listado__comprador--mobile .pedidos-listado__estado-envio-titulo {
        display: inline-block;
        width: 110px;
    }
    
    .pedidos-listado__comprador--mobile .pedidos__estado--listado {
        display: inline-block;
        margin: 4px 0px 4px 0px;
    }
    
    .pedidos-listado__comprador--mobile .pedidos__estado-envio--listado {
        display: inline-block;
        margin: 4px 0px 4px 0px;
    }    
    
}

.pedidos-formulario__observaciones-cliente {
    color: #c09853;
    background-color: #fcf8e3;
    padding: 10px;
}

/* USUARIO */

.pedidos-formulario__usuario-titulo {
    display: none;
}

@media (max-width: 767px) {
    .pedidos-formulario__usuario-titulo {
        display: block;
    }
}

.pedidos-formulario__usuario-nombre {
    font-size: 16px;
}

.pedidos-formulario__usuario-boton {
    float: right;
    font-size: 12px;
}

/* FORMULARIO: HISTORIAL */

.pedidos-formulario__historial-tabla {
    width: 100%;
}

.pedidos-formulario__historial-item {
    border-top: 1px solid #E3E3E3;
}

.pedidos-formulario__historial-item td {
    vertical-align: top !important;
    font-size: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.pedidos-formulario__historial-item:last-child td {
    padding-bottom: 0px;
}

.pedidos-formulario__historial-texto-secundario {
    color: #AAAAAA;
    font-size: 12px;
}

.pedidos-formulario__historial-icono {
    color: #777777;
}

.pedidos-formulario__historial-icono--cliente {
    color: #3a87ad;
}

.pedidos-formulario__historial-icono--administrador {
    color: #468847;
}

.pedidos-formulario__historial-icono--super {
    color: #b94a48;
}

.pedidos-formulario__historial-icono-detalle {
    margin-right: 5px;
}

.pedidos-formulario__historial-icono--enviado {
    color: #cccccc;
}

.pedidos-formulario__historial-icono--leido {
    color: #0088cc;
}

.pedidos-formulario__historial-descripcion--oculta {
    display: none;
}

.pedidos-formulario__historial-popup .modal-body.alert {
    margin-bottom: 0px;
}

.pedidos-formulario__historial-popup-payer th,
.pedidos-formulario__historial-popup-payer td {
    border: 0 none !important;
}

.pedidos-formulario__historial-popup-payments td {
    vertical-align: top !important;
}

@media (max-width: 767px) {
    .pw-tooltip-estado-pago,
    .pw-tooltip-estado-envio {
        display: none;
    }
}





@media (max-width: 767px) {
    
    .main-right__page-footer {
        /* 
        para poder hacer scroll hasta abajo y que el pie no quede tapado con
        la barra de botones:
        */
        margin-bottom: 50px;
    }
    
    .pedidos-formulario .button-bar--left {
        position: fixed;
        bottom: 0;
        background: rgba(0,0,0,0.3);
        width: 100%;
        text-align: center;
        padding: 5px;
    }
    
    .pedidos-formulario .button-bar__buttons-save {
        margin: 0px;
    }    
    
    .pedidos-formulario .button-bar__buttons-print .btn {
        width: auto;
    }    
     
    .pedidos-formulario .button-bar__buttons-print .btnImprimir {
        margin-right: 5px;
    }    
    
}

@media (max-width: 600px) {
        
    .pedidos-formulario .button-bar--left {
        margin-left: -10px;
    } 

}

@media (max-width: 400px) {   
    
    .pedidos-formulario .button-bar--left .btnGuardarSalir {
        display: none;
    }    
    
    .pedidos-formulario__botones-imprimir .button-bar--right {
        text-align: left;
    }
    
    .pedidos-formulario .button-bar__buttons-save .btn {
        width: 40%;
    }
    
}

.pedidos-formulario__orden-detalle {
    text-align: right;
}

@media (max-width: 767px) {
    .pedidos-formulario__orden-detalle {
        text-align: left;
    }
}

#pedido_orden_detalle {
    width: 100px;
    height: 22px;
    font-size: 12px;
    padding: 2px 4px;
    margin-left: 10px;
    margin-bottom: 0px;
}

.pedido_detalles_envio_gratis {
    color: #b08483;
}

.pedido_detalles_error_forma_envio {
    padding: 10px;
    text-align: left;
}

/* ================================================================== */
/* Sprint 3: Listado de Pedidos SNEAT                                  */
/* Scoped a body.pw-sneat .pedidos — regresion cero en modo clasico.  */
/* ================================================================== */

/* --- Tabla aireada y limpia --- */
body.pw-sneat .pedidos .page-content__table {
    border: 0 none;
    box-shadow: none;
    background-color: #FFFFFF;
}

body.pw-sneat .pedidos .page-content__table thead th {
    /* Gris algo más oscuro que el fondo general (#F5F6FA) para que la barra
       de títulos no se mezcle con el fondo ni con las filas blancas. */
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;  /* texto del encabezado en gris oscuro */
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

/* La celda de acciones del thead es un <td> (no <th>) y traía bg #F1F1F1
   distinto: igualarla al resto del encabezado. */
body.pw-sneat .pedidos .page-content__table thead .page-content__table-cell-actions {
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
}

/* Subtítulo del encabezado (Origen, Hora, Email, Moneda...): 10px. */
body.pw-sneat .pedidos .page-content__table thead .pedidos-listado__texto-secundario {
    font-size: 10px;
}

body.pw-sneat .pedidos .page-content__table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}

/* vertical-align:top en mobile para esta tabla: globalizado en
   sneat-responsive.css #9 (regla de producto, cubre TODOS los
   listados de una sola vez, con !important porque le gana a este
   mismo selector de mas arriba). No repetir aca. */

body.pw-sneat .pedidos .page-content__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .pedidos .page-content__table tbody tr:hover {
    background-color: #F9FAFB;
}

/* --- Número de orden semibold --- */
body.pw-sneat .pedidos .page-content__table tbody .pedidos-listado__numero-venta {
    font-weight: 700;
    color: #384551;
}

/* Mobile: la columna quedaba con 8% de ancho (heredado del <th> mobile,
   pensado solo para un simbolo "#" chico) pero el <td> del body siempre
   muestra el numero completo ("#2091" + origen), sin importar el modo.
   Con overflow-wrap:anywhere (baseline global anti-overflow) y una columna
   de ~8px, el texto se partia letra por letra en un stack vertical
   (bug real reportado por captura). Se le da ancho propio, sin forzar el
   wrap de caracteres. */
@media (max-width: 767px) {
    body.pw-sneat .pedidos .page-content__table tbody .pedidos-listado__numero-venta,
    body.pw-sneat .pedidos .page-content__table thead .pedidos-listado__numero-venta {
        width: 62px !important;
        white-space: nowrap;
        word-break: normal;
        overflow-wrap: normal;
    }
}

/* --- Texto secundario (hora, email, moneda...) --- */
body.pw-sneat .pedidos .pedidos-listado__texto-secundario {
    color: var(--pw-gray-light);
    font-size: 12px;
}

/* --- Monto según estado del pago: pagado=verde, cancelado=rojo --- */
body.pw-sneat .pedidos .pedidos-listado__importe--pagado {
    color: #28C76F;
    font-weight: 700;
}

body.pw-sneat .pedidos .pedidos-listado__importe--cancelado {
    color: var(--pw-danger);
    font-weight: 700;
}

/* --- Botón editar: circular con hover violeta --- */
body.pw-sneat .pedidos .page-content__table-button--edit {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .pedidos .page-content__table-button--edit:hover,
body.pw-sneat .pedidos .page-content__table-button--edit:focus,
body.pw-sneat .pedidos .page-content__table-button--edit:active {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* --- Bloque de filtro como card blanca (título + buscador + avanzado) --- */
body.pw-sneat .pedidos .pedidos-filtro-card {
    max-width: calc(100vw - 290px);
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* BUG REAL: el max-width de arriba resta 290px asumiendo que el sidebar
   fijo de escritorio siempre ocupa ese ancho. En mobile el sidebar es
   offcanvas (no ocupa espacio del viewport) -> a 451px de ancho la cuenta
   daba max-width:161px, colapsando toda la card de filtro ("Filtrar"
   apenas entraba, el input de busqueda directamente no cabia). Se anula
   el cap por debajo del breakpoint donde el sidebar deja de ser fijo
   (979px, mismo breakpoint que el resto del proyecto usa para sidebar). */
@media (max-width: 979px) {
    body.pw-sneat .pedidos .pedidos-filtro-card {
        max-width: none;
    }
}

/* Mobile: margen lateral en KPI y en la card de filtro (mismo criterio
   que Usuarios/Contacto, SNEAT-PATTERNS.md §39/§41) - el listado abajo se
   deja full-bleed, sin margen, a proposito. */
@media (max-width: 767px) {
    body.pw-sneat .pedidos .page-content__counters,
    body.pw-sneat .pedidos .pedidos-filtro-card {
        margin-left: 18px;
        margin-right: 18px;
    }
    /* .page-content__counters trae width:100% (pw-panel.css, componente
       compartido entre modulos) calculado ANTES de agregarle margen aca
       -> con margin-left/right sumado, la caja quedaba 36px mas ancha
       que el viewport (100% + 18 + 18), desbordando por la derecha
       (bug real, medido: wrap.right = 469px con viewport en 451px).
       width:auto deja que el ancho se recalcule DESCONTANDO los margenes
       nuevos, en vez de sumarse a un 100% ya fijo. */
    body.pw-sneat .pedidos .page-content__counters {
        width: auto;
    }
}

/* Form de búsqueda dentro de la card: sin caja propia */
body.pw-sneat .pedidos #formBuscar.form-buscar-pedidos {
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 0;
}

body.pw-sneat .pedidos .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #384551;
    margin-bottom: 12px;
}

/* Barra principal: número de orden pequeño + comprador wide + btn filtros */
body.pw-sneat .pedidos-buscar__simple {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

body.pw-sneat .pedidos-buscar__numero {
    flex: 0 0 90px;
    max-width: 90px;
    overflow: hidden;
}

body.pw-sneat .pedidos-buscar__comprador {
    flex: 1;
    min-width: 0;
}

body.pw-sneat .pedidos-buscar__simple input[type="text"] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px;
    box-shadow: none;
    background-image: none;
    color: #384551;
    height: 38px;
    margin-bottom: 0;
}

/* Botón Filtros avanzados: inline en SNEAT */
body.pw-sneat .pedidos #btnFiltros {
    position: static !important;
    width: auto !important;
    height: 38px;
    margin-top: 0 !important;  /* anula .pedidos #formBuscar .btn { margin-top:20px } que lo desalinea */
    padding: 6px 14px;
    border: 1px solid var(--pw-divider) !important;
    border-radius: 8px !important;
    color: #384551;
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    background-color: #FFFFFF;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
}

body.pw-sneat .pedidos #btnFiltros:hover {
    background-color: #F5F6FA !important;
    border-color: #B4BBC3 !important;
}

body.pw-sneat .pedidos #btnFiltros .fa {
    margin-right: 4px;
}

/* Panel avanzado colapsable */
body.pw-sneat .pedidos .form-search__advanced {
    padding-top: 12px;
}

body.pw-sneat .pedidos .form-search__advanced fieldset {
    border: 1px solid #c6c6c6 !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}

body.pw-sneat .pedidos .form-search__advanced legend {
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    width: auto;
    border: 0 none;
    margin-bottom: 0;
}

body.pw-sneat .pedidos .form-search__advanced label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #384551;
    margin-bottom: 4px;
}

/* Estructura del filtro avanzado (alturas, anchos, grid, multi-select)
   se hereda del patrón global SNEAT en pw-panel.css. Aquí solo cosmética. */
body.pw-sneat .pedidos .form-search__advanced input[type="text"],
body.pw-sneat .pedidos .form-search__advanced select {
    border-radius: 8px;
    box-shadow: none;
    /*background-image: none;*/
    color: #384551;
    margin-bottom: 0;
}

body.pw-sneat .pedidos .form-search__advanced .btn {
    background-image: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    width: 100%;
    margin-top: 0;
}

body.pw-sneat .pedidos .form-search__advanced .btn-primary {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat .pedidos .form-search__advanced .btn-primary:hover {
    background-color: var(--pw-accent-hover);
    border-color: var(--pw-accent-hover);
}

body.pw-sneat .pedidos .form-search__advanced .btn-default {
    background-color: var(--pw-btn-secondary-bg);
    border-color: var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
}

body.pw-sneat .pedidos .form-search__advanced .btn-default:hover {
    background-color: var(--pw-btn-secondary-bg-hover);
    border-color: var(--pw-btn-secondary-border);
}

body.pw-sneat .pedidos .pedidos-mostrar-total-label {
    font-size: 13px;
    color: #384551;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

/* --- Pie del listado: paginación a la izq, Exportar + selector a la der --- */
body.pw-sneat .pedidos .pedidos-listado__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

body.pw-sneat .pedidos .pedidos-listado__pie > .span10 {
    flex: 1 1 auto;
    width: auto;
    margin-left: 0;
}

body.pw-sneat .pedidos .pedidos-listado__pie > .span2.pedidos-listado__pie-derecha {
    flex: 0 0 auto;
    width: auto;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Botón Exportar al pie, a la izquierda del selector de cantidad */
body.pw-sneat .pedidos .pedidos-listado__exportar-pie {
    background-image: none;
    background-color: transparent;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #384551;
    box-shadow: none;
    text-shadow: none;
    font-size: 13px;
    padding: 6px 14px;
    height: 38px;
    white-space: nowrap;
    flex-shrink: 0;
}

body.pw-sneat .pedidos .pedidos-listado__exportar-pie:hover {
    background-color: #F5F6FA;
    border-color: #B4BBC3;
}

/* --- Estado de pago: badges SNEAT (pill redondeado) --- */
body.pw-sneat .pedidos .pedidos__estado {
    border-radius: 20px;
    border: 0 none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    width: auto;
    min-width: 80px;
    text-align: center;
}

body.pw-sneat .pedidos .pedidos__estado--iniciado {
    background-color: rgba(67, 89, 113, 0.10);
    color: #566A7F;
}

body.pw-sneat .pedidos .pedidos__estado--confirmado {
    background-color: rgba(255, 180, 0, 0.12);
    color: #B07900;
    border: 0 none;
}

body.pw-sneat .pedidos .pedidos__estado--pagado {
    background-color: rgba(113, 221, 55, 0.12);
    color: #3D8E23;
    border: 0 none;
}

body.pw-sneat .pedidos .pedidos__estado--pendiente {
    background-color: rgba(3, 195, 236, 0.12);
    color: #0891B2;
    border: 0 none;
}

body.pw-sneat .pedidos .pedidos__estado--cancelado {
    background-color: var(--pw-danger-soft);
    color: var(--pw-danger);
    border: 0 none;
}

/* --- Estado de envío: badges SNEAT (borde punteado → pill sólido) --- */
body.pw-sneat .pedidos .pedidos__estado-envio {
    border-radius: 20px;
    border: 0 none;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    width: auto;
    min-width: 80px;
    text-align: center;
}

body.pw-sneat .pedidos .pedidos__estado-envio--no-iniciado {
    background-color: rgba(67, 89, 113, 0.10);
    color: #566A7F;
}

body.pw-sneat .pedidos .pedidos__estado-envio--iniciado {
    background-color: rgba(255, 180, 0, 0.12);
    color: #B07900;
}

body.pw-sneat .pedidos .pedidos__estado-envio--listo {
    background-color: rgba(255, 145, 0, 0.12);
    color: #A35F00;
}

body.pw-sneat .pedidos .pedidos__estado-envio--enviado {
    background-color: rgba(105, 108, 255, 0.12);
    color: var(--pw-accent);
}

body.pw-sneat .pedidos .pedidos__estado-envio--entregado {
    background-color: rgba(113, 221, 55, 0.12);
    color: #3D8E23;
}

body.pw-sneat .pedidos .pedidos__estado-envio--cancelado {
    background-color: var(--pw-danger-soft);
    color: var(--pw-danger);
}

body.pw-sneat .pedidos .pedidos__estado-envio--devuelto {
    background-color: rgba(67, 89, 113, 0.10);
    color: #566A7F;
}

/* Carritos abandonados (iniciados.php): la tabla solo tiene 3 columnas,
   dos con % fijo (Fecha 13%, Importe 15%) y una sin ancho declarado
   (Comprador, pensada para absorber el resto). La regla global de
   sneat-responsive.css fuerza display:block + overflow-x:auto en TODA
   .page-content__table para poder scrollear tablas angostas en mobile -
   pero con display:block, <thead>/<tbody> siguen siendo
   table-header-group/table-row-group (UA stylesheet, no se les toco el
   display), y arman un "anonymous table box" INTERNO que calcula su
   propio ancho por contenido en vez de heredar el 100% del <table>
   exterior. Resultado real (medido): <table> en 1224.8px (su 100% real)
   pero <thead>/<tbody> en apenas 819px de ancho de contenido, dejando
   una franja vacia a la derecha de la card en desktop. Con solo 3
   columnas y pocas filas por pagina, no hace falta el truco de
   display:block (Ventas SI lo necesita: 6 columnas angostas que
   realmente empujan el ancho en mobile) - se revierte a display:table
   para esta tabla puntual, que activa el algoritmo de tabla real y
   estira la columna sin % declarado (Comprador) para llenar el
   sobrante. El scroll horizontal en mobile, si hiciera falta, lo cubre
   el contenedor padre en vez de la tabla misma. */
body.pw-sneat #pw_table_pedidos_iniciados {
    display: table;
    width: 100%;
    max-width: 100%;
}

/* Mismo bug, mismo arreglo, en el listado de Ventas (#pw_table_pedidos) y
   en la tabla de artículos del detalle de una venta (#pw_table_pedido).
   La duda original de "Ventas necesita el scroll propio de la tabla
   porque tiene 6 columnas angostas" no aplica: por debajo de 767px este
   listado ya colapsa a una sola columna "mobile" apilada (ver reglas
   .pedidos-listado__comprador--mobile más abajo), así que nunca llega a
   necesitar el truco de display:block -- el scroll horizontal real, si
   hiciera falta, ya lo cubre el overflow-x:auto del contenedor padre de
   abajo (compartido por toda página de pedidos, listado y detalle). */
body.pw-sneat #pw_table_pedidos,
body.pw-sneat #pw_table_pedido {
    display: table;
    width: 100%;
    max-width: 100%;
}

body.pw-sneat #pw_table_pedidos .page-content__table-cell-actions {
    width: 1%;
    white-space: nowrap;
}

body.pw-sneat .main-right__page-content.pedidos {
    overflow-x: auto;
}

/* Carritos abandonados en mobile: con la columna de acciones (icono
   editar solo) angosta liberamos espacio para Fecha/Importe, que a
   ancho completo (13%/15% pensados para desktop) quedaban demasiado
   angostos y el texto se partia en 3 renglones ("$230.00" / "0,00" /
   "ARS"). white-space:nowrap + overflow-wrap:normal pisan la regla
   global anti-overflow (sneat-responsive.css, word-break:break-word +
   overflow-wrap:anywhere en TODA celda de .page-content__table) -- el
   id de la tabla le gana en especificidad sin necesitar !important. */
body.pw-sneat #pw_table_pedidos_iniciados .pedidos-listado-iniciados__fecha,
body.pw-sneat #pw_table_pedidos_iniciados .pedidos-listado-iniciados__importe,
body.pw-sneat #pw_table_pedidos_iniciados .pedidos-listado__texto-secundario {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* La clase .pedidos-listado-iniciados__importe se reusa tal cual en el
   <td> (table-cell, no tocar su display) Y en un <div> interno que
   envuelve el monto -- el selector con "div." de prefijo matchea SOLO
   el div (los selectores de tipo nunca matchean un <td>, aunque
   comparta la clase). Sin el width:100% explicito, el div (bloque,
   width:auto) quedaba con un ancho angosto tipo shrink-to-fit dentro
   de la table-cell en layout auto + white-space:nowrap, y el
   text-align:right heredado terminaba alineando el texto contra el
   borde derecho de ESE ancho angosto en vez del borde derecho real de
   la columna -- se veia pegado a la izquierda de la celda. */
body.pw-sneat #pw_table_pedidos_iniciados div.pedidos-listado-iniciados__importe {
    display: block;
    width: 100%;
}

/* Columna de acciones (solo el icono editar): sin ancho declarado,
   table-layout:auto le repartia ~22% del ancho total (mas que
   Comprador, la columna que en realidad deberia ser la flexible).
   width:1% + white-space:nowrap es el truco estandar para que una
   columna de tabla se achique a su contenido minimo. */
body.pw-sneat #pw_table_pedidos_iniciados .page-content__table-cell-actions {
    width: 1%;
    white-space: nowrap;
}

@media (max-width: 767px) {
    /* table-layout:auto (el de desktop) con columnas nowrap + % chicos
       hace que el navegador ESTIRE la tabla entera mas alla de su
       100% declarado para no cortar el contenido sin wrap -- medido:
       tabla en 535px dentro de un contenedor de 375px, con scroll
       horizontal feo (el "espacio de sobra" original en realidad era
       la tabla ya desbordando, no un desperdicio real). table-layout:
       fixed respeta los % declarados de forma estricta (nunca estira
       la tabla), asi que en mobile TODAS las columnas necesitan su %
       explicito (con auto no haria falta, ahi Comprador se queda con
       "lo que sobra" solo). Los 4 suman 100%. */
    body.pw-sneat #pw_table_pedidos_iniciados {
        table-layout: fixed;
    }
    body.pw-sneat #pw_table_pedidos_iniciados .pedidos-listado-iniciados__fecha {
        width: 20%;
    }
    body.pw-sneat #pw_table_pedidos_iniciados .pedidos-listado-iniciados__importe {
        width: 22%;
    }
    body.pw-sneat #pw_table_pedidos_iniciados .page-content__table-cell-actions {
        width: 15%;
    }
    /* "td./th." de prefijo: .pedidos-listado-iniciados__usuario
       TAMBIEN es la clase del <div> interno que envuelve el nombre
       (mismo patron de colision que __importe, patron 52) -- sin el
       prefijo de tipo, el div interno tambien heredaria este ancho.
       Ademas, table-layout:fixed calcula el ancho de columna leyendo
       la PRIMERA fila de la tabla (el <thead>, con <th>) -- un
       selector "td." solo (sin "th.") deja a esa columna sin ancho
       declarado en el thead y el navegador la vuelve a autocalcular
       por contenido, ignorando el 43% por completo (bug real: media
       solo 89px de 375px en vez de los ~161px esperados). */
    body.pw-sneat #pw_table_pedidos_iniciados td.pedidos-listado-iniciados__usuario,
    body.pw-sneat #pw_table_pedidos_iniciados th.pedidos-listado-iniciados__usuario {
        width: 43%;
    }
}


/* pedidos-iniciados.css */

@media (max-width: 624px) {
    /* Scopeado a clasico: en SNEAT el email de Comprador debe verse
       siempre (regla de oro: regresion cero en clasico, pero tampoco
       heredar sus recortes sin querer -- esta regla no tenia scope y
       el email desaparecia tambien en la tabla SNEAT de Carritos
       abandonados sin que nadie la hubiera tocado a proposito). */
    body:not(.pw-sneat) .pedidos-listado-iniciados__email {
        display: none;
    }
}


/* preguntas-frecuentes.css */

/* ==================================================================== */
/* SNEAT - Modulo Preguntas Frecuentes                                  */
/* (body.pw-sneat.preguntas-frecuentes--list / --form)                  */
/*                                                                      */
/* Listado nestable (drag & drop, PW_Helper_Menu_Ordenable), calcado    */
/* del patron de Tamanios (SNEAT-PATTERNS.md #14): switch Activo con    */
/* pw_html_button_toggle(), boton editar que abre modal, item inactivo  */
/* atenuado en gris. Filtro canonico (card + avanzado colapsable, #19). */
/* Archivo ASCII puro.                                                  */
/* ==================================================================== */

/* Evita scroll horizontal cuando .main{display:table} expande la tabla */
body.pw-sneat.preguntas-frecuentes--list .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card de filtro ==== */
body.pw-sneat .preguntas-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .preguntas-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .preguntas-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* ==== Quitar borde y padding del fieldset contenedor del listado ==== */
/* min-width:0 es CLAVE: un <fieldset> tiene un min-width implicito basado
   en el contenido (quirk historico del navegador, ignora el ancho del
   padre) -- con .col-inputs en white-space:nowrap adentro, el fieldset se
   expandia mas alla de su contenedor en mobile en vez de contener el texto
   (los controles de la fila quedaban recortados/inalcanzables). */
body.pw-sneat.preguntas-frecuentes--list #contenedor-preguntas {
    border: 0 none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* ==== Toolbar: acciones masivas a la izquierda ==== */
body.pw-sneat.preguntas-frecuentes--list .table-actions--top {
    justify-content: flex-start;
}

/* ==== Boton Agregar ==== */
body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
    margin-left: auto;
}

body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva:hover,
body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva:focus,
body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* Texto del boton Agregar: version corta en mobile para aprovechar el
   espacio (el toolbar ya tiene el combo de acciones masivas + el select
   de cantidad compitiendo por ancho). */
body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva__text-short {
    display: none;
}
@media (max-width: 767px) {
    body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva__text-full {
        display: none;
    }
    body.pw-sneat.preguntas-frecuentes--list .preguntas-btn-nueva__text-short {
        display: inline;
    }
}

/* ==================================================================== */
/* SNEAT: Nestable list (drag & drop)                                   */
/* ==================================================================== */

body.pw-sneat.preguntas-frecuentes--list .dd {
    max-width: none;
}

body.pw-sneat.preguntas-frecuentes--list .dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

body.pw-sneat.preguntas-frecuentes--list .dd-item {
    position: relative;
}

/* Drag handle -- reset visual sin tocar el mecanismo de nestable.
   NO cambiar position/overflow/text-indent del handle ni del :before
   (nestable usa text-indent:100% + overflow:hidden en el handle y un
   :before absoluto para mostrar el grip). Solo recoloreamos y cambiamos glyph. */
body.pw-sneat.preguntas-frecuentes--list .dd3-handle,
body.pw-sneat.preguntas-frecuentes--list .dd3-handle:hover,
body.pw-sneat.preguntas-frecuentes--list .dd3-handle:focus,
body.pw-sneat.preguntas-frecuentes--list .dd3-handle:active {
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
}

body.pw-sneat.preguntas-frecuentes--list .dd3-handle {
    width: 32px;
    height: 46px;
    background-color: transparent !important;
    cursor: grab;
    transition: background-color 0.15s ease;
}

body.pw-sneat.preguntas-frecuentes--list .dd3-handle:hover {
    background-color: rgba(105, 108, 255, 0.08) !important;
}

body.pw-sneat.preguntas-frecuentes--list .dd3-handle:active {
    cursor: grabbing;
}

/* Grip icon: mantenemos el :before absoluto de nestable, solo glyph + color.
   U+283F = grip moderno de 6 puntos (2 columnas x 3 filas). */
body.pw-sneat.preguntas-frecuentes--list .dd3-handle:before {
    content: '\283F';
    color: #B4B7BD;
    font-size: 16px;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
    transition: color 0.15s ease;
}

body.pw-sneat.preguntas-frecuentes--list .dd3-handle:hover:before {
    color: var(--pw-accent);
}

/* Content area de cada item */
body.pw-sneat.preguntas-frecuentes--list .dd3-content {
    height: auto;
    min-height: 46px;
    margin: 0;
    /* 32px handle + gap + 18px checkbox + gap = 70px */
    padding: 0 8px 0 70px;
    border: 0 none;
    border-bottom: 1px solid var(--pw-border-soft);
    border-radius: 0;
    background: transparent;
    background-image: none;
    color: #566A7F;
    display: flex;
    align-items: center;
    /* NUNCA position:relative aca: el content viene despues del handle en el
       DOM y al posicionarlo se pinta encima -> tapa el grip y se come el
       mousedown del drag. El checkbox se ancla al li (positioned x nestable). */
    position: static;
    transition: background-color 0.12s ease;
}

body.pw-sneat.preguntas-frecuentes--list .dd3-content:hover {
    background-color: #F9FAFB;
    color: #566A7F;
}

/* Primera fila sin borde superior */
body.pw-sneat.preguntas-frecuentes--list .dd-list > .dd-item:first-child .dd3-content {
    border-top: 1px solid var(--pw-border-soft);
}

/* Texto de la pregunta (colInputs() SNEAT: un solo div .col-inputs, sin
   .col-text/.dd-item-text -- este modulo no usa colInputsEdicion()). */
body.pw-sneat.preguntas-frecuentes--list .dd3-content .col-inputs {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    font-weight: 600;
    color: #566A7F;
}

/* Item inactivo: atenuar SOLO el texto, no los controles (el switch) -- si
   no, al activar el switch queda gris-transparente hasta que vuelve el AJAX. */
body.pw-sneat.preguntas-frecuentes--list .dd3-content.pw_disabled_row .col-inputs {
    opacity: 0.55;
}

/* Botones de accion en el extremo derecho.
   position:static es CLAVE: CSS legacy lo posiciona y eso lo convertia en
   offset parent del checkbox absoluto (caia junto al toggle en vez de a la
   izquierda). Con static, el offset parent pasa a ser el li.dd-item. */
body.pw-sneat.preguntas-frecuentes--list .col-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-left: auto;
    position: static !important;
}

body.pw-sneat.preguntas-frecuentes--list .col-buttons .btn-group {
    display: flex;
    gap: 2px;
}

/* Boton editar -- circular violeta */
body.pw-sneat.preguntas-frecuentes--list .page-content__table-button--edit,
body.pw-sneat.preguntas-frecuentes--list .col-buttons .page-content__table-button--edit {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat.preguntas-frecuentes--list .page-content__table-button--edit:hover,
body.pw-sneat.preguntas-frecuentes--list .page-content__table-button--edit:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

/* Boton eliminar -- circular rojo */
body.pw-sneat.preguntas-frecuentes--list .btnBorrarPreguntaFrecuente {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.pw-sneat.preguntas-frecuentes--list .btnBorrarPreguntaFrecuente:hover,
body.pw-sneat.preguntas-frecuentes--list .btnBorrarPreguntaFrecuente:focus,
body.pw-sneat.preguntas-frecuentes--list .btnBorrarPreguntaFrecuente:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* Ocultar boton vacio (spacer) de BS2 en SNEAT. !important necesario: algo
   con mayor especificidad (o !important propio) lo deja en display:flex --
   sin ocultar, ocupaba 32px reales entre Editar y Borrar (el gap grande
   reportado). */
body.pw-sneat.preguntas-frecuentes--list .btn-empty {
    display: none !important;
}

body.pw-sneat.preguntas-frecuentes--list .col-buttons .page-content__table-button--edit i,
body.pw-sneat.preguntas-frecuentes--list .col-buttons .btnBorrarPreguntaFrecuente i {
    font-size: 16px;
    line-height: 1;
    vertical-align: middle;
}

/* Toggle activo */
body.pw-sneat.preguntas-frecuentes--list .col-buttons .button-toggle {
    float: none;
    margin: 0;
}

/* Checkbox de fila: aunque en el HTML vive dentro de .col-buttons (derecha),
   lo extraemos del flujo y lo anclamos a la IZQUIERDA de la fila, justo
   despues del drag handle de 32px. Su offset parent es el li.dd-item
   (position:relative por nestable.css) gracias al .col-buttons static. */
body.pw-sneat.preguntas-frecuentes--list .dd3-content .dd-check-row {
    position: absolute !important;
    left: 38px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--pw-accent);
    z-index: 2;
}

/* Header "seleccionar todo": alinear el checkbox con la columna de checkboxes
   de las filas (left:38px) y quitar el recuadro pesado heredado de BS2. */
body.pw-sneat.preguntas-frecuentes--list .preguntas-checkall-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 4px 0 6px 38px;
}

body.pw-sneat.preguntas-frecuentes--list .preguntas-checkall-wrap .page-content__table-header--multiple-actions {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    border: 0 none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

body.pw-sneat.preguntas-frecuentes--list .preguntas-checkall-wrap .page-content__table-check-all {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
}

/* Dropdown select de acciones mobile -- ocultar en SNEAT desktop */
body.pw-sneat.preguntas-frecuentes--list .dd-item-actions {
    display: none;
}

/* Drag placeholder y ghost */
body.pw-sneat.preguntas-frecuentes--list .dd-placeholder {
    background: rgba(105, 108, 255, 0.06);
    border: 1px dashed var(--pw-accent);
    border-radius: 4px;
    min-height: 46px;
    margin: 0;
}

body.pw-sneat.preguntas-frecuentes--list .dd-dragel .dd3-content {
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
    border-radius: 6px;
    border: 1px solid var(--pw-border-soft);
}

/* ==================================================================== */
/* Modal SNEAT: #modal-crear-pregunta                                   */
/* ==================================================================== */

body.pw-sneat #modal-crear-pregunta {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat #modal-crear-pregunta .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}

body.pw-sneat #modal-crear-pregunta .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #modal-crear-pregunta .modal-header .preguntas-modal__title-icon {
    color: var(--pw-accent);
    font-size: 18px;
}

body.pw-sneat #modal-crear-pregunta .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

body.pw-sneat #modal-crear-pregunta .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat #modal-crear-pregunta .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    max-height: calc(88vh - 120px);
    overflow-y: auto;
}

body.pw-sneat #modal-crear-pregunta.in {
    top: 5vh;
    margin-top: 0;
}

body.pw-sneat #modal-crear-pregunta .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__idioma-block {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--pw-border-soft);
}
body.pw-sneat #modal-crear-pregunta .preguntas-modal__idioma-block:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0 none;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__idioma-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pw-accent);
    margin-bottom: 8px;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__field { margin-bottom: 16px; }

body.pw-sneat #modal-crear-pregunta .preguntas-modal__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #566A7F;
    margin-bottom: 6px;
}

body.pw-sneat #modal-crear-pregunta textarea {
    border-radius: 8px;
    border: 1px solid var(--pw-divider);
    box-shadow: none;
    background-image: none;
    color: #566A7F;
    font-size: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}

body.pw-sneat #modal-crear-pregunta textarea:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__required {
    color: var(--pw-danger);
    font-size: 12px;
    margin-left: 2px;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__btn-cancelar {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 7px 16px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-pregunta .preguntas-modal__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

body.pw-sneat #modal-crear-pregunta .modal-footer .btn-primary,
body.pw-sneat #modal-crear-pregunta .modal-footer .btnGuardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 20px;
    font-size: 13px;
}

body.pw-sneat #modal-crear-pregunta .modal-footer .btn-primary:hover,
body.pw-sneat #modal-crear-pregunta .modal-footer .btn-primary:focus,
body.pw-sneat #modal-crear-pregunta .modal-footer .btn-primary:active,
body.pw-sneat #modal-crear-pregunta .modal-footer .btnGuardar:hover,
body.pw-sneat #modal-crear-pregunta .modal-footer .btnGuardar:focus,
body.pw-sneat #modal-crear-pregunta .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* Responsive */
@media (max-width: 767px) {
    /* Mostrar el combo de acciones masivas TAMBIEN en mobile (hay espacio). El
       diseno global (sneat-base) lo oculta en mobile porque asumia el combo
       por-fila; pero ese combo por-fila ya no existe aca, asi que el masivo es
       la unica via de acciones en lote. Mayor especificidad que la global
       (body.pw-sneat.preguntas-frecuentes--list) => gana sin tocar sneat-base. */
    body.pw-sneat.preguntas-frecuentes--list .table-actions--top {
        justify-content: flex-start;
        align-items: center;
        gap: 8px;
    }
    body.pw-sneat.preguntas-frecuentes--list .table-actions--top .table-actions__select-action {
        display: inline-block;
    }
    body.pw-sneat.preguntas-frecuentes--list .table-actions--top button.table-actions__button-action {
        display: inline-flex;
    }
    body.pw-sneat.preguntas-frecuentes--list .table-actions--top .preguntas-btn-nueva {
        margin-left: auto;
    }
}


/* suscriptores.css */

@media (max-width: 624px) {
    .suscriptores-listado__fecha {
        display: none;
    }
    .suscriptores-listado__activo {
        display: none;
    }
    .suscriptores-listado__origen {
        display: none;
    }
}

@media (max-width: 480px) {       
    .suscriptores-listado__email {
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    
    .suscriptores-listado .page-content__table-button--edit {
        border-radius: 4px;
    }    
    
    .suscriptores-listado .page-content__table-button--delete {
        display: none;
    }
    .suscriptores-listado .page-content__table-button--private {
        display: none;
    }
}

/* ==================================================================== */
/* Rediseño SNEAT del Listado de Suscriptores.                          */
/* TODO bajo body.pw-sneat: solo aplica con el feature flag encendido,  */
/* asi la UI clasica queda intacta (regresion cero).                    */
/* Se gana por especificidad sin abusar de !important en celdas.        */
/* Las reglas GLOBALES que nacieron acá viven ahora en sneat-base.css.  */
/* ==================================================================== */

/* --- Botones del toolbar propio del módulo --- */
body.pw-sneat .suscriptores-actions-buttons .btn-primary {
    background: var(--pw-accent);
    background-image: none;
    border: 0 none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: 600;
}

body.pw-sneat .suscriptores-actions-buttons .btn-primary:hover,
body.pw-sneat .suscriptores-actions-buttons .btn-primary:focus,
body.pw-sneat .suscriptores-actions-buttons .btn-primary:active {
    background: var(--pw-accent-hover);
    background-image: none;
    box-shadow: none;
    color: #FFFFFF;
}

body.pw-sneat .suscriptores-actions-buttons .btn:not(.btn-primary) {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--pw-text-strong);
}

body.pw-sneat .suscriptores-actions-buttons .btn:not(.btn-primary):hover,
body.pw-sneat .suscriptores-actions-buttons .btn:not(.btn-primary):focus {
    background: var(--pw-btn-secondary-bg-hover);
    color: var(--pw-text-strong);
}

/* --- Barra de filtros (rediseño SNEAT completo) ---
   Padding horizontal 16px = el de la barra de acciones de la card de
   tabla: los bordes del contenido quedan alineados entre cards. */
/* El shell .main{display:table} se expande al ancho del contenido y genera
   scroll horizontal (empujando "Filtros avanzados" fuera). table-layout:fixed
   ajusta el contenido al viewport. Válido porque la tabla de suscriptores cabe.
   (mismo fix que en Contacto) */
body.pw-sneat.suscriptores--list .main {
    table-layout: fixed;
    width: 100%;
}

/* Bloque de filtro como card blanca (igual que Ventas/Catálogo/Contacto) */
body.pw-sneat .suscriptores-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .suscriptores-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

/* El form dentro de la card queda flat (la card ya provee el marco) */
body.pw-sneat .suscriptores-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Fieldset del panel avanzado: borde suave + leyenda visible */
body.pw-sneat .suscriptores-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .suscriptores-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .suscriptores-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* (La card global de #formBuscar y sus inputs/rows/botones viven ahora
   en sneat-base.css) */

/* --- Tabla aireada y limpia (dentro de la card) --- */
body.pw-sneat .suscriptores-listado.page-content__table {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

/* La fecha/hora no debe partirse nunca en 2 renglones. El baseline global
   anti-overflow (sneat-responsive.css: "body.pw-sneat .page-content__table td
   { word-break:break-word; overflow-wrap:anywhere }", pensado para strings
   largas sin espacios como titulos/codigos) tambien alcanza a estas celdas
   y, con la columna angosta, corta la fecha a mitad de un numero
   ("16/09/202" + "5" en el renglon siguiente). Son 10-11 caracteres fijos
   -> mejor que la columna se lleve el ancho que necesite a que la fecha se
   lea partida. */
body.pw-sneat .suscriptores-listado__fecha-dia,
body.pw-sneat .suscriptores-listado__fecha-hora {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

body.pw-sneat .suscriptores-listado .page-content__table-header {
    height: auto;
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.pw-sneat .suscriptores-listado thead th {
    padding: 12px 16px;
}

body.pw-sneat .suscriptores-listado tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}

body.pw-sneat .suscriptores-listado tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .suscriptores-listado tbody tr:hover {
    background-color: #F9FAFB;
}

body.pw-sneat .suscriptores-listado__suscriptor .suscriptores-listado__nombre {
    color: #384551;
    font-size: 14px;
    font-weight: 600;
}

/* --- Botonera de accion: reset total de BS2 + hover circular SNEAT --- */
body.pw-sneat .suscriptores-listado .page-content__table-button--edit,
body.pw-sneat .suscriptores-listado .page-content__table-button--delete {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .suscriptores-listado .page-content__table-button--edit:hover,
body.pw-sneat .suscriptores-listado .page-content__table-button--edit:focus,
body.pw-sneat .suscriptores-listado .page-content__table-button--edit:active {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

body.pw-sneat .suscriptores-listado .page-content__table-button--delete:hover,
body.pw-sneat .suscriptores-listado .page-content__table-button--delete:focus,
body.pw-sneat .suscriptores-listado .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* (El switch .pw-switch es global: vive en sneat-base.css) */

/* (Los badges .pw-badge--c0..c5 son globales: viven en sneat-base.css) */

/* --- Selector de cantidad por pagina (movido al toolbar) --- */
body.pw-sneat .suscriptores-page-size {
    display: inline-flex;
    align-items: center;
}

body.pw-sneat .suscriptores-page-size .table-actions__select-page-size {
    width: auto;
    min-width: 72px;
    height: 38px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    color: #566A7F;
}

/* --- Barra de acciones masivas: botones del modulo a la derecha ---
   (la barra flat global vive en sneat-base.css) */
body.pw-sneat .table-actions--top .suscriptores-actions-buttons {
    order: 2;
    margin-left: auto;
}

/* (Checkboxes masivos y paginador SNEAT: viven en sneat-base.css) */

/* --- Mobile/tablet: toolbar en 2 filas ---
   El layout de 2 filas [page-size/Importar/Exportar] + [masivas/Agregar] y
   el boton "Agregar" corto ahora son un patron GLOBAL en sneat-base.css
   ("Toolbar con Importar/Exportar/Agregar"), disparado por la clase
   marcadora .pw-toolbar-actions-group en .suscriptores-actions-buttons
   (ver mod_suscriptos/listado.php) + :has() -> ya no hace falta duplicar
   las reglas de order/::after aca. Ver SNEAT-PATTERNS.md para el detalle. */
/* Checkboxes de seleccion masiva por fila/thead: el fix (antes duplicado
   por modulo) ahora es GLOBAL en sneat-base.css. Ver SNEAT-PATTERNS.md §41. */

/* ================================================================== */
/* SNEAT — Formulario de edición de suscriptor (#formSuscriptor)      */
/* Mismo patrón que Mensajes de contacto: barra transparente,         */
/* panels como cards, dos columnas, section headers con ícono.        */
/* ================================================================== */

/* Barra superior: sin fondo — solo flotan Guardar/Cancelar */
body.pw-sneat #formSuscriptor .button-bar--fixed-top {
    pointer-events: none; /* área transparente no captura clicks (no tapar breadcrumb) */
}
body.pw-sneat #formSuscriptor .button-bar--fixed-top .btn {
    pointer-events: auto;
}

/* Panels como cards SNEAT */
body.pw-sneat #formSuscriptor .panel {
    border: 0 none;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.10);
    background-color: #FFFFFF;
    margin-bottom: 20px;
    padding: 20px 24px;
}

/* form-actions al pie: oculto (botones en el top bar) */
body.pw-sneat #formSuscriptor .form-actions {
    display: none;
}

/* --- Panel de metadata (Activo / Fecha / Origen) — mismo patrón que #formContacto --- */
body.pw-sneat #formSuscriptor .suscriptor-meta-panel .row-fluid label {
    font-size: 11px;
    color: #8592A3;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 0;
}
body.pw-sneat #formSuscriptor .suscriptor-meta-panel .row-fluid label br + * {
    display: block;
    color: #384551;
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 4px;
}
body.pw-sneat #formSuscriptor .suscriptor-meta-panel .row-fluid label br + input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pw-accent);
    cursor: pointer;
    margin: 4px 0 0 0;
}

/* --- Layout dos columnas (igual que contacto) --- */
body.pw-sneat #formSuscriptor .suscriptor-two-cols {
    display: flex;
    gap: 0;
}
body.pw-sneat #formSuscriptor .suscriptor-col {
    padding: 0 16px;
}
body.pw-sneat #formSuscriptor .suscriptor-col:first-child {
    padding-left: 0;
    border-right: 1px solid #C5CDD6;
    padding-right: 24px;
}
body.pw-sneat #formSuscriptor .suscriptor-col:last-child {
    padding-left: 24px;
    padding-right: 0;
}

/* Section headers h5 con ícono */
body.pw-sneat #formSuscriptor h5 {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
    margin-bottom: 14px;
    color: #384551;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat #formSuscriptor .suscriptor-section-icon {
    color: var(--pw-accent);
    font-size: 14px;
    width: 20px;
    text-align: center;
}

/* Labels de campo: texto pequeño encima del input */
body.pw-sneat #formSuscriptor label {
    display: block;
    color: #566A7F;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 0.01em;
}
body.pw-sneat #formSuscriptor label > input {
    margin-top: 4px;
}

/* Espaciado entre filas */
body.pw-sneat #formSuscriptor .row-fluid {
    margin-bottom: 16px;
}
body.pw-sneat #formSuscriptor .row-fluid:last-child {
    margin-bottom: 0;
}

/* Inputs / selects / textarea SNEAT */
body.pw-sneat #formSuscriptor input[type="text"],
body.pw-sneat #formSuscriptor input[type="email"],
body.pw-sneat #formSuscriptor input[type="tel"],
body.pw-sneat #formSuscriptor input[type="url"],
body.pw-sneat #formSuscriptor input[type="number"],
body.pw-sneat #formSuscriptor select,
body.pw-sneat #formSuscriptor textarea {
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    box-shadow: none;
    background-image: none;
    color: var(--pw-text-strong);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body.pw-sneat #formSuscriptor input[type="text"]:focus,
body.pw-sneat #formSuscriptor input[type="email"]:focus,
body.pw-sneat #formSuscriptor input[type="tel"]:focus,
body.pw-sneat #formSuscriptor input[type="url"]:focus,
body.pw-sneat #formSuscriptor input[type="number"]:focus,
body.pw-sneat #formSuscriptor select:focus,
body.pw-sneat #formSuscriptor textarea:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Mensajes de error de email */
body.pw-sneat #formSuscriptor .pwError {
    display: block;
    margin-top: 4px;
    color: var(--pw-danger);
    font-size: 12px;
}

/* Panel de grupos: checkboxes aireados */
body.pw-sneat #formSuscriptor .suscriptor-grupos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 4px;
}
body.pw-sneat #formSuscriptor .suscriptor-grupos .checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    color: var(--pw-text-strong);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
body.pw-sneat #formSuscriptor .suscriptor-grupos .checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--pw-accent);
    cursor: pointer;
}

/* Botones de la barra superior en SNEAT */
body.pw-sneat #formSuscriptor + * .button-bar--fixed-top .btn-primary,
body.pw-sneat .button-bar--fixed-top .btn-primary {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
}
body.pw-sneat .button-bar--fixed-top .btn-primary:hover,
body.pw-sneat .button-bar--fixed-top .btn-primary:focus,
body.pw-sneat .button-bar--fixed-top .btn-primary:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}
body.pw-sneat .button-bar--fixed-top .btn:not(.btn-primary) {
    background-color: #ECEEF2;
    background-image: none;
    border-color: var(--pw-divider);
    color: #697A8D;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
}
body.pw-sneat .button-bar--fixed-top .btn:not(.btn-primary):hover {
    background-color: #F5F6FA;
    background-image: none;
    border-color: #C5CDD6;
}


/* promociones.css */

/* ================================================================== */
/* SNEAT — Listado de promociones (body.pw-sneat.promociones--list)   */
/* ================================================================== */

/* Evita scroll horizontal por .main{display:table} (tabla angosta). */
body.pw-sneat.promociones--list .main {
    table-layout: fixed;
    width: 100%;
}

/* Bloque de filtro como card blanca (patrón SNEAT) */
body.pw-sneat .promociones-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .promociones-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

/* Form flat dentro de la card (anula la card global de #formBuscar) */
body.pw-sneat .promociones-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Fieldset del panel avanzado: borde suave + leyenda visible */
body.pw-sneat .promociones-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .promociones-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .promociones-filtro-card #formBuscar .form-search__advanced label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-text-strong);
    margin-bottom: 4px;
}
body.pw-sneat .promociones-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* Toolbar sin "cuadro": anula la card global de .table-actions--top */
body.pw-sneat.promociones--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* ==================================================================== */
/* Tabla de listado: mismo patron que Pedidos/Cupones (thead canonico,   */
/* fila aireada, boton editar circular). Sin wrapper de card propio -    */
/* el fondo blanco de la tabla + el borde superior por fila alcanzan,    */
/* mismo criterio que el resto de los listados ya migrados.             */
/* ==================================================================== */

body.pw-sneat.promociones--list .page-content__table {
    border: 0 none;
    box-shadow: none;
    background-color: #FFFFFF;
}

body.pw-sneat.promociones--list .page-content__table thead th {
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 16px;
}

body.pw-sneat.promociones--list .page-content__table tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}

body.pw-sneat.promociones--list .page-content__table tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat.promociones--list .page-content__table tbody tr:hover {
    background-color: #F9FAFB;
}

/* Fila inactiva: solo el texto se atenua, nunca el switch ni el boton
   (patron establecido en Pedidos/Cupones/Usuarios, ver SNEAT-PATTERNS.md
   #21 -- :not(:has(input)) ya excluye la celda del switch, porque el
   toggle sigue teniendo su <input type=checkbox> real en el DOM). */
body.pw-sneat.promociones--list .page-content__table tbody tr[data-item_disabled="1"] > td:not(:has(.btn)):not(:has(input)) {
    opacity: 0.55;
}

/* --- Boton editar: circular con hover violeta ---
   width/height con !important: List.php envuelve la accion en un
   .btn-group aunque sea una sola, y ".page-content__table tbody
   .btn-group > button.btn { width:40px; height:40px }" (global) tiene
   mas elementos en su selector (2 vs 1) que empatan en clases contra
   este -- a igual cantidad de clases, gana el que tenga mas
   elementos/tipos, sin importar el orden en el archivo. */
body.pw-sneat.promociones--list .page-content__table-button--edit {
    width: 34px !important;
    height: 34px !important;
    line-height: 34px !important;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat.promociones--list .page-content__table-button--edit:hover,
body.pw-sneat.promociones--list .page-content__table-button--edit:focus,
body.pw-sneat.promociones--list .page-content__table-button--edit:active {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}


/* publicaciones.css */

/* ================================================================== */
/* Responsive — columnas ocultas en móvil (modo clásico y SNEAT)     */
/* ================================================================== */

@media(max-width: 624px) {
    .publicaciones-listado__activo { display: none; }
    .publicaciones-listado__destacado { display: none; }
}

@media(max-width: 480px) {
    .publicaciones-listado__fecha { display: none; }
}

/* ================================================================== */
/* SNEAT — Listado de publicaciones (body.pw-sneat.publicaciones--list)*/
/* ================================================================== */

/* Evita scroll horizontal cuando .main{display:table} expande la tabla */
body.pw-sneat.publicaciones--list .main {
    table-layout: fixed;
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Card de filtro                                                      */
/* ------------------------------------------------------------------ */

body.pw-sneat .publicaciones-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .publicaciones-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

/* Form flat dentro de la card */
body.pw-sneat .publicaciones-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* Fieldset del panel avanzado */
body.pw-sneat .publicaciones-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .publicaciones-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .publicaciones-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* ------------------------------------------------------------------ */
/* Toolbar de acciones (sin "caja" — la card del filtro ya delimita)  */
/* ------------------------------------------------------------------ */

body.pw-sneat.publicaciones--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Botones inyectados (Agregar): empujar a la derecha */
body.pw-sneat.publicaciones--list .publicaciones-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat.publicaciones--list .publicaciones-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat.publicaciones--list .publicaciones-actions-buttons .btnCrear:hover,
body.pw-sneat.publicaciones--list .publicaciones-actions-buttons .btnCrear:focus,
body.pw-sneat.publicaciones--list .publicaciones-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* Tabla                                                               */
/* ------------------------------------------------------------------ */

body.pw-sneat .publicaciones-listado .page-content__table-header {
    height: auto;
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.pw-sneat .publicaciones-listado thead th,
body.pw-sneat .publicaciones-listado thead td {
    padding: 12px 16px;
    background-color: #E7E9F0;
}

body.pw-sneat .publicaciones-listado tbody td {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #384551;
    vertical-align: middle;
}

body.pw-sneat .publicaciones-listado tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .publicaciones-listado tbody tr:hover {
    background-color: #F9FAFB;
}

/* Título de la publicación */
body.pw-sneat .publicaciones-listado__titulo a {
    color: #384551;
    font-weight: 500;
}
body.pw-sneat .publicaciones-listado__titulo a:hover {
    color: var(--pw-accent);
}

/* Fecha en gris suave */
body.pw-sneat .publicaciones-listado__fecha {
    color: var(--pw-gray-light);
    font-size: 13px;
}

/* Borrador badge */
body.pw-sneat .publicaciones-listado .pw-nombre-borrador,
body.pw-sneat .publicaciones-listado .borrador {
    font-size: 11px;
    color: #8592A3;
    font-style: italic;
    margin-left: 4px;
}

/* Mobile: ocultar los iconos intermedios (Imagenes/Videos/Archivos) de
   la columna de acciones, dejar solo Editar y Borrar (pedido explicito
   del usuario — en mobile ya se accede a fotos/videos/archivos desde
   las tabs del propio formulario de edicion). */
@media (max-width: 767px) {
    body.pw-sneat .publicaciones-listado .page-content__table-button--images,
    body.pw-sneat .publicaciones-listado .page-content__table-button--videos,
    body.pw-sneat .publicaciones-listado .page-content__table-button--files {
        display: none;
    }
}

/* ================================================================== */
/* SNEAT — Envío de campañas de email marketing                        */
/* (body.pw-sneat.publicaciones--emarketing)                           */
/* La tabla acá la arma PW_Html_Table (no el List class): clases BS2   */
/* table-striped/bordered + celdas .td_fecha/.td_titulo/.td_acciones.  */
/* ================================================================== */

/* Fix scroll horizontal: .main{display:table} se expandía al ancho     */
/* natural de la tabla (títulos larguísimos sin cortar la empujaban más  */
/* ancha que el viewport). table-layout:fixed + width:100% la contiene.  */
body.pw-sneat.publicaciones--emarketing .main {
    table-layout: fixed;
    width: 100%;
}

/* Card contenedora de la tabla */
body.pw-sneat.publicaciones--emarketing .publicaciones-emarketing__card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}

/* Reset de la tabla BS2 (quita striped/bordered/condensed) + fixed */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones {
    table-layout: fixed;
    width: 100%;
    margin: 0;
    border: 0 none;
    background-color: transparent;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones thead th {
    background-color: var(--pw-thead-bg);
    border: 0 none;
    border-bottom: 1px solid var(--pw-divider);
    color: var(--pw-text-strong);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones tbody td {
    border: 0 none;
    border-top: 1px solid var(--pw-border-soft);
    padding: 12px 16px;
    color: #566A7F;
    font-size: 14px;
    vertical-align: middle;
    background-color: transparent;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones tbody tr:first-child td {
    border-top: 0 none;
}

/* Neutraliza el striping BS2 (fondo alterno) */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones tbody tr:nth-child(odd) td {
    background-color: transparent;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones tbody tr:hover td {
    background-color: #F9FAFB;
}

/* Columna Fecha: angosta, gris, sin cortar */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .th_fecha,
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .td_fecha {
    width: 120px;
    color: var(--pw-gray-light);
    font-size: 13px;
    white-space: nowrap;
    text-align: left;
}

/* Columna Título: ocupa el resto y CORTA los strings largos (fix scroll) */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .td_titulo {
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .td_titulo a {
    color: var(--pw-text-strong);
    font-weight: 500;
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: anywhere;
}

body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .td_titulo a:hover {
    color: var(--pw-accent);
}

/* Borrador en gris itálico */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .pw-nombre-borrador,
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .borrador {
    font-size: 11px;
    color: #8592A3;
    font-style: italic;
    margin-left: 4px;
}

/* Columna Email/acciones: angosta y centrada */
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .th_acciones,
body.pw-sneat.publicaciones--emarketing #pw_table_publicaciones .td_acciones {
    width: 90px;
    text-align: center;
    white-space: nowrap;
}

/* ================================================================== */
/* SNEAT — Formulario Alta/Modificación (body.pw-sneat.publicaciones--form) */
/* ================================================================== */

/* Layout 2 columnas: contenido principal + sidebar */
body.pw-sneat.publicaciones--form .pub-form-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

body.pw-sneat.publicaciones--form .pub-form-main {
    flex: 1 1 0;
    min-width: 0;
}

body.pw-sneat.publicaciones--form .pub-form-sidebar {
    flex: 0 0 272px;
    width: 272px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Tarjetas (main y sidebar) */
body.pw-sneat.publicaciones--form .pub-form-card {
    background: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    box-sizing: border-box;
}

/* La tarjeta principal neutraliza cualquier .well interior (single-idioma) */
body.pw-sneat.publicaciones--form .pub-form-main .well {
    background: transparent;
    border: 0 none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* Título de card sidebar */
body.pw-sneat.publicaciones--form .pub-form-card__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pw-text-strong);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pw-border-card);
}

body.pw-sneat.publicaciones--form .pub-form-card__title .fa {
    color: var(--pw-accent);
    margin-right: 5px;
}

/* Labels en negrita */
body.pw-sneat.publicaciones--form .pub-form-sidebar label {
    font-weight: 600;
    font-size: 12px;
    color: var(--pw-text-strong);
    margin-bottom: 4px;
    display: block;
}

/* Checkboxes: fila con separador */
body.pw-sneat.publicaciones--form .pub-meta-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f4;
}

body.pw-sneat.publicaciones--form .pub-meta-check--last,
body.pw-sneat.publicaciones--form .pub-meta-check:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
}

body.pw-sneat.publicaciones--form .pub-meta-check label {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--pw-text-strong);
    cursor: pointer;
    flex: 1;
    display: block;
}

body.pw-sneat.publicaciones--form .pub-meta-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--pw-accent);
}

/* Grupos de fechas */
body.pw-sneat.publicaciones--form .pub-fecha-group {
    margin-bottom: 14px;
}

body.pw-sneat.publicaciones--form .pub-fecha-group--last {
    margin-bottom: 0;
}

body.pw-sneat.publicaciones--form .pub-fecha-group > label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--pw-gray-light);
    margin-bottom: 6px;
}

body.pw-sneat.publicaciones--form .pub-fecha-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat.publicaciones--form .pub-fecha-row .datepicker {
    flex: 1 1 0;
    min-width: 0;
    height: 34px !important;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid var(--pw-border-card);
    border-radius: 8px;
    box-sizing: border-box;
    width: auto !important;
}

body.pw-sneat.publicaciones--form .pub-fecha-row .datepicker:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
    outline: none;
}

body.pw-sneat.publicaciones--form .pub-fecha-check {
    display: flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--pw-gray-light) !important;
    cursor: pointer;
    margin: 0 !important;
}

body.pw-sneat.publicaciones--form .pub-fecha-check input[type="checkbox"] {
    width: 13px;
    height: 13px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--pw-accent);
}

/* Grupos de configuración */
body.pw-sneat.publicaciones--form .pub-config-group {
    margin-bottom: 12px;
}

body.pw-sneat.publicaciones--form .pub-config-group--last {
    margin-bottom: 0;
}

body.pw-sneat.publicaciones--form .pub-config-group input[type="text"],
body.pw-sneat.publicaciones--form .pub-config-group select {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--pw-border-card);
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat.publicaciones--form .pub-config-group input[type="text"]:focus,
body.pw-sneat.publicaciones--form .pub-config-group select:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px rgba(105, 108, 255, 0.12);
    outline: none;
}

/* Alerta Facebook */
body.pw-sneat.publicaciones--form .pub-facebook-alert {
    margin-top: 12px;
    margin-bottom: 0;
    font-size: 12px;
    border-radius: 8px;
}

/* Ocultar form-actions al pie (los botones están en el fixed-top) */
body.pw-sneat.publicaciones--form .form-actions {
    display: none;
}

/* Barra Guardar/Cancelar: el marco oscuro translucido (background
   rgba(0,0,0,.3) + border-radius) lo pone la regla canonica de
   pw-panel.css (SNEAT-PATTERNS.md §30-bis) — NO anularlo aca con
   background:transparent. Eso es justo el anti-patron que §30-bis
   advierte explicitamente ("eso fue justamente lo que dejo la barra
   sin recuadro"): esta hoja lo hacia igual que suscriptores.css, y
   ambos quedaban con los botones "flotando" sin marco. */
body.pw-sneat.publicaciones--form .button-bar--fixed-top {
    pointer-events: none;
}
body.pw-sneat.publicaciones--form .button-bar--fixed-top .btn {
    pointer-events: auto;
}

/* Switch Activo */
body.pw-sneat.publicaciones--form .pub-switch {
    position: relative;
    display: inline-flex !important;  /* override .pub-form-sidebar label { display:block } */
    flex: 0 0 36px !important;
    width: 36px !important;
    height: 20px;
    cursor: pointer;
}
body.pw-sneat.publicaciones--form .pub-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
body.pw-sneat.publicaciones--form .pub-switch__slider {
    position: absolute;
    inset: 0;
    background-color: #d0d3d6;
    border-radius: 20px;
    transition: background-color 0.2s ease;
}
body.pw-sneat.publicaciones--form .pub-switch__slider::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
body.pw-sneat.publicaciones--form .pub-switch input:checked + .pub-switch__slider {
    background-color: var(--pw-accent);
}
body.pw-sneat.publicaciones--form .pub-switch input:checked + .pub-switch__slider::before {
    transform: translateX(16px);
}

/* Thumbnail en el formulario: alinear arriba, borde SNEAT */
body.pw-sneat.publicaciones--form .pub-form-main .row-foto-nombre .col_primera_foto {
    border-color: var(--pw-border-card);
    border-radius: 8px;
}
body.pw-sneat.publicaciones--form .pub-form-main .primera_foto {
    vertical-align: top;
    border-radius: 8px;
    background-color: #f8f9fa;
    height: auto;
    min-height: 80px;
    /* display:table-cell (heredado de clasico) se dimensiona por el
       contenido (el glifo "sin foto"), no por el ancho real del padre:
       en esta grilla SNEAT col_primera_foto es mucho mas angosta (~65px,
       span2 de un row mas chico que en el form clasico) que los 80px
       que el icono necesitaba en table-cell, y el box se salia de su
       columna en cualquier viewport angosto (no solo mobile). flex SI
       respeta el ancho real del padre. */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}
body.pw-sneat.publicaciones--form .pub-form-main .primera_foto_contenedor {
    height: auto;
    width: 100%;
    display: block;
}
/* Icono "sin foto": a 80px/60px (clasico) no entraba en los ~65px de
   ancho real de la columna en esta grilla SNEAT. */
body.pw-sneat.publicaciones--form .pub-form-main .primera_foto .bi {
    font-size: 32px;
}

/* Responsive */
@media (max-width: 900px) {
    body.pw-sneat.publicaciones--form .pub-form-layout {
        flex-direction: column;
    }
    body.pw-sneat.publicaciones--form .pub-form-sidebar {
        width: 100%;
        flex: none;
    }
}

/* ================================================================== */
/* SNEAT — Tabs del formulario (Contenido | Imágenes | Videos | ...)  */
/* ================================================================== */

/* Tabs — estilo solapa con borde (igual que catálogo) */
body.pw-sneat.publicaciones--form #tabsItem.nav-tabs {
    border-bottom: 1px solid #C0C4CC;
    margin-bottom: 0;
}

body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li > a {
    border: 1px solid #C0C4CC;
    border-radius: 8px 8px 0 0;
    background-color: #F5F5F6;
    background-image: none;
    color: #697A8D;
    padding: 9px 16px;
    margin-right: 4px;
    text-shadow: none;
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li > a:hover,
body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li > a:focus {
    border-color: #C0C4CC;
    background-color: #ECEEF2;
    color: var(--pw-accent);
}

body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li.active > a,
body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li.active > a:hover,
body.pw-sneat.publicaciones--form #tabsItem.nav-tabs > li.active > a:focus {
    border: 1px solid #C0C4CC;
    border-bottom-color: transparent;
    background-color: #FFFFFF;
    color: #384551;
    font-weight: 600;
    cursor: default;
}

/* Tab panes secundarios — card blanca conectada a la solapa */
body.pw-sneat.publicaciones--form #tabItemFotos,
body.pw-sneat.publicaciones--form #tabItemVideos,
body.pw-sneat.publicaciones--form #tabItemArchivos,
body.pw-sneat.publicaciones--form #tabItemSeo {
    background: #FFFFFF;
    border: 1px solid #C0C4CC;
    border-top: 0 none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
}

/* ================================================================== */
/* SNEAT — Galería de imágenes (tab Imágenes)                         */
/* ================================================================== */

/* Botón "Seleccionar imágenes": violeta en lugar de verde Bootstrap 2 */
body.pw-sneat.publicaciones--form .qq-upload-button.btn-success {
    background-color: var(--pw-accent) !important;
    background-image: none !important;
    border-color: var(--pw-accent) !important;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    font-size: 14px;
}
body.pw-sneat.publicaciones--form .qq-upload-button.btn-success:hover,
body.pw-sneat.publicaciones--form .qq-upload-button.btn-success:active {
    background-color: var(--pw-accent-hover) !important;
    border-color: var(--pw-accent-hover) !important;
}

/* "Arrastrar y soltar..." — limpiar el .well */
body.pw-sneat.publicaciones--form .txt_info_ordenar_fotos .well {
    background: transparent;
    border: 0 none;
    box-shadow: none;
    padding: 6px 12px;
    margin: 0;
    font-size: 13px;
    color: var(--pw-gray-light);
}

/* pw_form_uploader — separador sutil */
body.pw-sneat.publicaciones--form .pw_form_uploader {
    border-bottom: 1px solid var(--pw-border-card);
    margin-bottom: 16px;
    padding-bottom: 16px;
}

/* Thumbnails — borde SNEAT + hover shadow */
body.pw-sneat.publicaciones--form #thumbnail-image-list li {
    border: 1px solid var(--pw-border-card) !important;
    border-radius: 8px;
    overflow: hidden;
    background-color: #FFFFFF !important;
    transition: box-shadow 0.15s ease;
}
body.pw-sneat.publicaciones--form #thumbnail-image-list li:hover {
    box-shadow: 0 4px 12px rgba(67, 89, 113, 0.15);
}

/* Botones de acción (editar / crop / eliminar) — overlay moderno */
body.pw-sneat.publicaciones--form #thumbnail-image-list .btn-toolbar {
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
    border-radius: 0 0 7px 7px;
    padding: 12px 6px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}
body.pw-sneat.publicaciones--form #thumbnail-image-list .btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 50%;
    padding: 0;
    font-size: 14px;
    border: 0 none !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none;
    transition: transform 0.1s ease;
}
body.pw-sneat.publicaciones--form #thumbnail-image-list .btn:hover {
    transform: scale(1.1);
}

/* ================================================================== */
/* SNEAT — Encabezado del formulario (título + link público)          */
/* ================================================================== */

/* padding-left:20px — mismo inset que usan las tabs de abajo
   (#tabsItem tiene padding-left:20px propio). Sin esto el icono+pill
   quedaban pegados al borde izquierdo real (x:0) mientras el resto del
   contenido (tabs "Contenido/Imagenes/...", breadcrumb) sí tiene
   sangría — se veían "flotando" fuera de línea con todo lo demás. */
body.pw-sneat.publicaciones--form .page-content__tab-header {
    padding: 16px 20px 14px;
    /* Fondo y borde izq/der: NO se pisan aca -- se dejan caer al valor
       base no-SNEAT de page-content.css (background:#FFFFFF; border-
       left/right:1px solid #DDDDDD), el mismo que ya usa sin tocar
       catalogo-producto-form.css para este mismo elemento en el form
       de Productos. Se probo fijar un color propio (--pw-border-soft,
       #C0C4CC) y en ambos casos quedaba mas oscuro/desparejo que el
       borde real de las tabs de abajo -- heredar el valor ya validado
       en Productos es mas prolijo que inventar uno nuevo. */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* display:inline-flex (no el "inline" que trae page-content.css):
   pegar el icono y el pill del link publico como una sola unidad. Con
   "inline" simple, en mobile el contenedor a veces no tiene ancho
   suficiente para el icono + el pill en la misma linea y el layout
   inline normal los separa en 2 renglones — el icono queda flotando
   arriba/lejos del pill, en vez de ir siempre juntos. */
body.pw-sneat.publicaciones--form .page-content__tab-header-title {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #566A7F;
    line-height: 1.4;
    max-width: 100%;
}

/* vertical-align:middle: el icono es un <i> inline suelto al lado de un
   <a> inline-flex (el "pill" del link publico) — sin esto, cada uno
   alinea por su propia baseline (la del glifo del icono vs la del
   contenido del pill) y quedan visiblemente descalzados verticalmente,
   el icono "flotando" mas arriba que el resto del titulo. */
body.pw-sneat.publicaciones--form .page-content__tab-header-title > i.fa:first-child {
    font-size: 13px;
    color: #8592A3;
    margin-right: 4px;
    vertical-align: middle;
}

body.pw-sneat.publicaciones--form .page-content__tab-header-title a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(105, 108, 255, 0.10);
    color: var(--pw-accent);
    border: 1px solid rgba(105, 108, 255, 0.25);
    border-radius: 20px;
    padding: 3px 12px 3px 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
    transition: background 0.15s ease;
    vertical-align: middle;
    line-height: 1.5;
    /* min-width:0 habilita el shrink dentro del flex nowrap de arriba;
       sin esto un titulo largo empuja el ancho del pill mas alla del
       viewport en vez de truncarse. */
    min-width: 0;
}

body.pw-sneat.publicaciones--form .page-content__tab-header-title a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.pw-sneat.publicaciones--form .page-content__tab-header-title a:hover {
    background: rgba(105, 108, 255, 0.18);
    color: var(--pw-accent);
    text-decoration: none;
}

body.pw-sneat.publicaciones--form .page-content__tab-header-title a .fa-external-link {
    font-size: 10px;
    opacity: 0.8;
    margin-left: 0;
    vertical-align: middle;
}


/* informacion-privada.css */

@media(max-width: 624px) {
    .informes-listado__activo {
        display: none;
    }
}

@media(max-width: 480px) {
    .informes-listado__fecha {
        display: none;
    }
}

/* ==================================================================== */
/* SNEAT - Modulo Informacion Privada (mod_informes.php)                */
/*                                                                      */
/* body.pw-sneat.informes--list / .informes--form                       */
/* Calcado de Vehiculos/Inmuebles: listado con el List class (solo      */
/* Activo=switch, sin destacado), checkbox masivo a la izquierda, combo */
/* "Acciones masivas" y card de filtro. La tabla reusa                  */
/* .publicaciones-listado (thead/filas/hover globales). ASCII puro.     */
/* ==================================================================== */

/* Evita scroll horizontal cuando .main{display:table} expande la tabla */
body.pw-sneat.informes--list .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card de filtro ==== */
body.pw-sneat .informes-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .informes-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .informes-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

/* ==== Toolbar de acciones (la card del filtro ya delimita) ==== */
body.pw-sneat.informes--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Boton Agregar inyectado en el toolbar: empujar a la derecha */
body.pw-sneat.informes--list .informes-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat.informes--list .informes-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat.informes--list .informes-actions-buttons .btnCrear:hover,
body.pw-sneat.informes--list .informes-actions-buttons .btnCrear:focus,
body.pw-sneat.informes--list .informes-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

/* ==================================================================== */
/* SNEAT - Formulario de alta/edicion de informacion privada            */
/* (body.pw-sneat.informes--form). El form es #formInforme (no formItem) */
/* Reskin 100% CSS sobre el markup existente (.well + .control-group).   */
/* ==================================================================== */

/* Cada caja gris .well pasa a card blanca SNEAT */
body.pw-sneat.informes--form #formInforme .well {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Labels de los controles */
body.pw-sneat.informes--form #formInforme .control-label,
body.pw-sneat.informes--form #formInforme label {
    color: var(--pw-text-strong);
    font-weight: 500;
    font-size: 13px;
}

/* Checkboxes con color de marca */
body.pw-sneat.informes--form #formInforme input[type="checkbox"] {
    accent-color: var(--pw-accent);
    cursor: pointer;
}
body.pw-sneat.informes--form #formInforme label.checkbox,
body.pw-sneat.informes--form #formInforme label.checkbox.inline {
    color: #566A7F;
    font-weight: 500;
}

/* ------------------------------------------------------------------ */
/* Iconos en las solapas nivel 2 via ::before, sin tocar el markup.    */
/* Tabs: Contenido / Permisos / Imagenes / Videos / Archivos.          */
/* ------------------------------------------------------------------ */
body.pw-sneat.informes--form #tabsItem > li > a::before {
    font-family: FontAwesome;
    margin-right: 6px;
    font-weight: normal;
}
body.pw-sneat.informes--form #tabsItem > li > a[href="#tabItemContenido"]::before {
    content: "\f0f6"; /* fa-file-text-o */
}
body.pw-sneat.informes--form #tabsItem > li > a[href="#tabItemPermisos"]::before {
    content: "\f023"; /* fa-lock */
}
body.pw-sneat.informes--form #tabsItem > li > a[href="#tabItemFotos"]::before {
    content: "\f03e"; /* fa-picture-o */
}
body.pw-sneat.informes--form #tabsItem > li > a[href="#tabItemVideos"]::before {
    content: "\f03d"; /* fa-video-camera */
}
body.pw-sneat.informes--form #tabsItem > li > a[href="#tabItemArchivos"]::before {
    content: "\f0c6"; /* fa-paperclip */
}

/* ------------------------------------------------------------------ */
/* Titulo de seccion dentro de cada card del formulario (mas diseno)   */
/* ------------------------------------------------------------------ */
body.pw-sneat.informes--form #formInforme .informes-form__section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.informes--form #formInforme .informes-form__section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 14px;
}

/* inicio.css */

/* SNEAT - Pagina de Inicio (mod_inicio): listado nestable (D&D) de las
   secciones que se muestran en la home del sitio. Ver patron 14
   (Listado con Drag & Drop) en SNEAT-PATTERNS.md. */

/* Layout Container en vez de Fluid + ocultar la columna de ayuda fija
   (.span5), mismo patron ya aplicado en Paginas/mod_menu (ver seccion
   83 de SNEAT-PATTERNS.md). 1320px = max-width de .b5-container-xxl del
   bundle de Bootstrap 5 ya presente en el proyecto, no es un numero
   inventado. El PHP de index.php sigue armando el bloque de ayuda
   igual (costo despreciable) -- el dia que exista un drawer offcanvas
   de ayuda alcanza con leer ese mismo HTML. .span7 pasa a width:100%
   explicito porque .span5 sigue en el DOM (display:none no lo saca del
   arbol), asi que Bootstrap 2 nunca lo hace :first-child solo.

   OJO con el selector: hay DOS .container-fluid en el DOM del panel --
   el del contenido (html/index.php, hijo directo de .main__right) y el
   de la barra superior (html/menu/barra_superior.php,
   .container-fluid.pw-navbar-small dentro de .navbar-inner). Un
   selector `.container-fluid` a secas capturaba TAMBIEN la barra y la
   dejaba con max-width:1320px + margenes laterales de ~84px, mientras
   el resto del panel la muestra a sangre. Por eso se ancla con
   `.main__right > `. Ver seccion 112 de SNEAT-PATTERNS.md. */
body.pw-sneat.inicio--list .main__right > .container-fluid {
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
}
body.pw-sneat.inicio--list .row-fluid > .span5 {
    display: none;
}
body.pw-sneat.inicio--list .row-fluid > .span7 {
    width: 100%;
    margin-left: 0;
}

/* Card blanca envolviendo cabecera + form de alta + listado + pie,
   mismo lenguaje visual que el resto del panel. */
body.pw-sneat.inicio--list .span7 {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
}

/* ---------------------------------------------------------------------
   Cabecera (carrusel de imagenes del header del sitio) y pie: mocks
   propios en SNEAT (el markup clasico -- un cuadro con borde y texto
   centrado -- se deja intacto, ver listado.php). Mismo link/texto que
   antes, solo cambia la presentacion.
   --------------------------------------------------------------------- */
body.pw-sneat.inicio--list .inicio-cabecera-sneat {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Mismo gris oscuro que el pie (el mas oscuro ya usado en los mocks
       del modulo, #D4D8E0 -- antes era el gris claro generico de fondo
       de pagina, quedaba muy parecido a la card blanca de alrededor). */
    background-color: #D4D8E0;
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 12px;
    text-decoration: none;
    flex-wrap: wrap;
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat:hover {
    border-color: var(--pw-accent);
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__nav {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pw-gray-light);
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__preview {
    flex: 1 1 200px;
    min-width: 0;
    height: 60px;
    border-radius: 6px;
    /* Un poco mas clara que el fondo oscuro del contenedor (#D4D8E0) --
       si no, la caja "imagen" se funde con el fondo y desaparece. */
    background-color: #E3E6EC;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__preview-icon {
    color: var(--pw-gray-light);
    font-size: 18px;
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__dots {
    display: flex;
    gap: 4px;
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6);
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__dots i.is-active {
    background-color: #FFFFFF;
}
body.pw-sneat.inicio--list .inicio-cabecera-sneat__label {
    flex: 0 0 100%;
    text-align: center;
    font-size: 12px;
    color: var(--pw-accent);
    font-weight: 600;
}

body.pw-sneat.inicio--list .inicio-pie-sneat {
    margin-top: 16px;
    /* Gris mas oscuro (mismo #D4D8E0 que el resto de los mocks del
       modulo) a pedido del usuario -- antes usaba el gris claro
       generico de fondo de pagina. */
    background-color: #D4D8E0;
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    padding: 14px;
}
body.pw-sneat.inicio--list .inicio-pie-sneat__cols {
    display: flex;
    gap: 20px;
}
body.pw-sneat.inicio--list .inicio-pie-sneat__col {
    flex: 1 1 0;
    min-width: 0;
}
body.pw-sneat.inicio--list .inicio-pie-sneat__col .inicio-preview__line + .inicio-preview__line {
    margin-top: 6px;
}
body.pw-sneat.inicio--list .inicio-pie-sneat__label {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--pw-border-soft);
    text-align: center;
    font-size: 12px;
    color: var(--pw-gray-light);
}

body.pw-sneat.inicio--list .form-crear-item legend {
    font-size: 15px;
    font-weight: 600;
    border-bottom: 1px solid var(--pw-border-card);
    padding-bottom: 8px;
}

/* El boton "Agregar" quedaba pegado al dropdown -- el grid de columnas
   de Bootstrap 2 (.span9/.span3) no trae gutter propio en .row-fluid
   (ni horizontal en desktop ni vertical cuando bootstrap-responsive.css
   los apila en mobile). Se reemplaza por flex con gap explicito, asi
   funciona igual en ambos casos sin depender del sistema de columnas
   viejo. */
body.pw-sneat.inicio--list .form-crear-item .row-fluid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
}
body.pw-sneat.inicio--list .form-crear-item .row-fluid .span9,
body.pw-sneat.inicio--list .form-crear-item .row-fluid .span3 {
    margin-left: 0;
    width: auto;
    float: none;
}
body.pw-sneat.inicio--list .form-crear-item .row-fluid .span9 {
    flex: 1 1 240px;
}
body.pw-sneat.inicio--list .form-crear-item .row-fluid .span3 {
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------
   Nestable: handle + fila. Mismo criterio que Tamanios/PreguntasFrecuentes
   (patron 14) -- solo recolorear/reposicionar, sin tocar el mecanismo de
   drag&drop (position absolute + text-indent:100% + overflow:hidden).
   ------------------------------------------------------------------- */
body.pw-sneat.inicio--list #nestable .dd3-handle {
    width: 32px;
    height: 46px;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: grab;
    /* Las cards ahora son mucho mas altas (preview mock debajo del
       header) que la fila fina de antes -- la pagina paso a necesitar
       scroll real. Sin esto, un touchmove que arranca en el handle
       puede ser interceptado por el scroll nativo del navegador en vez
       de llegar a nestable como gesto de drag (bug clasico de D&D touch
       en paginas largas). */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
/* Grilla de 6 puntos dibujada con box-shadow en vez del glifo Braille
   (\283F): un caracter de fuente escala mal y a tamanos grandes se ve
   borroso/desalineado segun la fuente del sistema; 6 circulos reales
   quedan nitidos a cualquier tamano y es el icono de "grip" que
   cualquier usuario ya reconoce (Trello, Notion, etc.). */
body.pw-sneat.inicio--list #nestable .dd3-handle:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: 0;
    text-indent: 0;
    border-radius: 50%;
    background: transparent;
    color: #B4B7BD;
    box-shadow:
        -5px -7px 0 0 currentColor,
         5px -7px 0 0 currentColor,
        -5px  0px 0 0 currentColor,
         5px  0px 0 0 currentColor,
        -5px  7px 0 0 currentColor,
         5px  7px 0 0 currentColor;
    transform: translate(-50%, -50%);
}
/* La fila crece: header (nombre + acciones) arriba, preview mock del
   tipo de bloque abajo -- .dd3-content pasa de fila unica centrada a
   columna. Cada item queda con aspecto de card individual (no solo una
   linea separada por borde), acorde al pedido de "vista previa fiel". */
body.pw-sneat.inicio--list #nestable .dd3-content {
    height: auto;
    min-height: 46px;
    padding: 10px 12px 14px 46px;
    border: 0 none;
    border-bottom: 8px solid var(--pw-page-bg);
    background: #FFFFFF;
    background-image: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: static;
}
body.pw-sneat.inicio--list #nestable li.dd-item:last-child .dd3-content {
    border-bottom: none;
}

body.pw-sneat.inicio--list #nestable .inicio-listado__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
}

/* Nombre: ya no es un link (a pedido del usuario, confundia con la edicion
   de la pagina) -- se muestra como texto plano con el icono de tipo de
   seccion. */
body.pw-sneat.inicio--list #nestable .inicio-listado__nombre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4B4B4B;
    font-size: 14px;
    font-weight: 600;
}

body.pw-sneat.inicio--list #nestable .col-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: static !important;
}

/* ---------------------------------------------------------------------
   Preview mock por tipo de bloque (PW_Helper_Inicio_BlockRenderer).
   100% esteticos -- sin datos reales, solo para dar una idea del tipo
   de contenido que representa cada pagina en el listado.
   --------------------------------------------------------------------- */
body.pw-sneat.inicio--list #nestable .inicio-preview {
    margin-top: 10px;
    background-color: var(--pw-page-bg);
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    padding: 12px;
}

body.pw-sneat.inicio--list .inicio-preview__line {
    height: 8px;
    border-radius: 4px;
    background-color: #E3E6EC;
}
body.pw-sneat.inicio--list .inicio-preview__line--title {
    height: 10px;
    background-color: #D4D8E0;
}
body.pw-sneat.inicio--list .inicio-preview__line + .inicio-preview__line {
    margin-top: 6px;
}
body.pw-sneat.inicio--list .inicio-preview__line--30  { width: 30%; }
body.pw-sneat.inicio--list .inicio-preview__line--40  { width: 40%; }
body.pw-sneat.inicio--list .inicio-preview__line--50  { width: 50%; }
body.pw-sneat.inicio--list .inicio-preview__line--60  { width: 60%; }
body.pw-sneat.inicio--list .inicio-preview__line--70  { width: 70%; }
body.pw-sneat.inicio--list .inicio-preview__line--90  { width: 90%; }

/* Familias "tienda" (Catalogo) y "listado" (Publicaciones, Inmuebles,
   ...): mismo esqueleto de grilla de 3 items -- comparten estructura,
   "tienda" suma el boton de carrito debajo para diferenciarse (a pedido
   del usuario: "son productos para comprar", el resto no). */
body.pw-sneat.inicio--list #nestable .inicio-preview--tienda,
body.pw-sneat.inicio--list #nestable .inicio-preview--listado {
    display: flex;
    gap: 10px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__grid-item {
    flex: 1 1 0;
    min-width: 0;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__thumb {
    width: 100%;
    height: 44px;
    border-radius: 6px;
    background-color: #D4D8E0;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA1AC;
    font-size: 18px;
}
/* Boton de carrito con forma de boton (pildora ancha), no circulo --
   a pedido del usuario ("darle forma de boton, no circulito"). */
body.pw-sneat.inicio--list #nestable .inicio-preview__cart-btn {
    width: 100%;
    height: 24px;
    margin-top: 6px;
    border-radius: 6px;
    background-color: var(--pw-accent);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Familias "fotos" y "videos" (galerias): 3 imagenes por fila. Fotos es
   solo la imagen (con icono, sin texto, a pedido del usuario); Videos
   es igual pero con un boton de play centrado encima. */
body.pw-sneat.inicio--list #nestable .inicio-preview--fotos,
body.pw-sneat.inicio--list #nestable .inicio-preview--videos {
    display: flex;
    gap: 10px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__photo {
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
    border-radius: 6px;
    background-color: #D4D8E0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA1AC;
    font-size: 20px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--pw-text-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Familia "media" (Mapa): simulacion de un mapa (grilla de "calles" +
   pin de ubicacion), no un icono de imagen generico -- se confundia con
   Fotos/Listado (a pedido del usuario). */
body.pw-sneat.inicio--list #nestable .inicio-preview--media {
    height: 70px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E3E6EC;
    overflow: hidden;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__map-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.7) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.7) 0 1px, transparent 1px 34px);
}
body.pw-sneat.inicio--list #nestable .inicio-preview__media-icon {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background-color: var(--pw-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
body.pw-sneat.inicio--list #nestable .inicio-preview__media-icon i {
    transform: rotate(45deg);
}

/* Familia "reviews" (Google Reviews): 1 sola fila de 4 mini-reviews,
   cada una con avatar de persona + 5 estrellas. */
body.pw-sneat.inicio--list #nestable .inicio-preview--reviews {
    display: flex;
    gap: 12px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__review {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__review .inicio-preview__line {
    width: 80%;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__review-avatar {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #D4D8E0;
    color: #9AA1AC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__review-stars {
    color: #FFC107;
    font-size: 10px;
    display: flex;
    gap: 2px;
}

/* Familia "formulario" (Contacto, Reservas, ...): campos + boton mock. */
body.pw-sneat.inicio--list #nestable .inicio-preview--formulario {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__field .inicio-preview__line {
    margin-bottom: 5px;
}
body.pw-sneat.inicio--list #nestable .inicio-preview__input {
    height: 20px;
    border-radius: 5px;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-input);
}
body.pw-sneat.inicio--list #nestable .inicio-preview__btn {
    align-self: flex-start;
    width: 70px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--pw-accent-soft);
}

/* Familia "texto" (default): parrafo generico + pildora de boton. */
body.pw-sneat.inicio--list #nestable .inicio-preview__btn--pill {
    margin-top: 8px;
    width: 90px;
    height: 22px;
    border-radius: 999px;
}

/* Editar (abre popup de configuracion) y Quitar: mismo lenguaje visual
   que los botones de accion por fila de las tablas SNEAT (patron 6) --
   antes salian con las clases clasicas btn-info/btn-danger (colores
   viejos, a pedido del usuario). */
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-editar,
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-quitar {
    width: 34px;
    height: 34px;
    line-height: 34px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-editar:hover,
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-editar:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}
/* Quitar es una accion reversible (no borra la pagina, solo la saca de
   Inicio) -- se le da un tono naranja/advertencia en hover en vez del
   rojo de borrado destructivo, para no mentirle al usuario sobre el
   riesgo real de la accion. */
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-quitar:hover,
body.pw-sneat.inicio--list #nestable .inicio-listado__btn-quitar:focus {
    background: rgba(255, 159, 67, 0.12) !important;
    color: #FF9F43;
}

/* Ocultar el select de acciones mobile de htmlLine() (no se usa aca,
   htmlRowSneat() arma sus propios botones siempre visibles). */
body.pw-sneat.inicio--list #nestable .dd-item-actions {
    display: none;
}

/* ---------------------------------------------------------------------
   Boton "Agregar": tokens SNEAT (antes btn-primary de Bootstrap 2, azul
   sin ningun tratamiento -- a pedido del usuario, "debe utilizar
   estrictamente las clases y tokens del Design System SNEAT"). Mismo
   patron que el boton "Agregar" de toolbar (patron 6/7 de
   SNEAT-PATTERNS.md).
   --------------------------------------------------------------------- */
body.pw-sneat.inicio--list .inicio-btn-agregar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 7px 16px;
    font-size: 13px;
    height: var(--pw-control-height);
}
body.pw-sneat.inicio--list .inicio-btn-agregar:hover,
body.pw-sneat.inicio--list .inicio-btn-agregar:focus,
body.pw-sneat.inicio--list .inicio-btn-agregar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* ---------------------------------------------------------------------
   Dropdown categorizado "Agregar pagina" (reemplaza el <select> nativo).
   Ver patron de evaluacion de componente en SNEAT-PATTERNS.md #91.
   --------------------------------------------------------------------- */
body.pw-sneat.inicio--list .inicio-dropdown {
    position: relative;
}

body.pw-sneat.inicio--list .inicio-dropdown__trigger {
    width: 100%;
    height: var(--pw-control-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    color: #8592A3;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
    background-image: none;
}
body.pw-sneat.inicio--list .inicio-dropdown__trigger.has-value {
    color: #566A7F;
}
body.pw-sneat.inicio--list .inicio-dropdown__trigger:focus,
body.pw-sneat.inicio--list .inicio-dropdown.is-open .inicio-dropdown__trigger {
    border-color: var(--pw-accent);
    outline: none;
}
body.pw-sneat.inicio--list .inicio-dropdown__trigger-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pw-sneat.inicio--list .inicio-dropdown.is-open .inicio-dropdown__trigger i {
    transform: rotate(180deg);
}
body.pw-sneat.inicio--list .inicio-dropdown__trigger i {
    color: var(--pw-gray-light);
    transition: transform 0.15s ease;
    flex: none;
    margin-left: 8px;
}

body.pw-sneat.inicio--list .inicio-dropdown__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(67, 89, 113, 0.16);
    max-height: 320px;
    display: none;
    flex-direction: column;
}
body.pw-sneat.inicio--list .inicio-dropdown.is-open .inicio-dropdown__panel {
    display: flex;
}

body.pw-sneat.inicio--list .inicio-dropdown__search {
    margin: 8px;
    height: 32px;
    border: 1px solid var(--pw-border-input);
    border-radius: 6px;
    padding: 0 10px;
    font-size: 13px;
    box-shadow: none;
    background-image: none;
}
body.pw-sneat.inicio--list .inicio-dropdown__search:focus {
    border-color: var(--pw-accent);
    outline: none;
}

body.pw-sneat.inicio--list .inicio-dropdown__groups {
    overflow-y: auto;
    padding-bottom: 8px;
}

body.pw-sneat.inicio--list .inicio-dropdown__group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pw-gray-light);
}

body.pw-sneat.inicio--list .inicio-dropdown__item {
    padding: 8px 12px 8px 30px;
    font-size: 13px;
    color: #566A7F;
    cursor: pointer;
}
body.pw-sneat.inicio--list .inicio-dropdown__item:hover,
body.pw-sneat.inicio--list .inicio-dropdown__item:focus {
    background-color: var(--pw-accent-soft);
    color: var(--pw-accent);
    outline: none;
}

body.pw-sneat.inicio--list .inicio-dropdown__empty {
    padding: 16px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--pw-gray-light);
}

/* ==================================================================== */
/* Bloques del Inicio: marco punteado + flechas de orden.                */
/*                                                                      */
/* Pedido: que se vea "a simple vista" que cada bloque es modificable y  */
/* movible. El borde punteado es la convencion habitual para eso (zona   */
/* manipulable), y a diferencia de un borde solido no compite con las    */
/* cards reales del panel ni sugiere que sea contenido fijo.             */
/* ==================================================================== */
body.pw-sneat.inicio--list #nestable li.dd-item {
    position: relative;
    border: 2px dashed var(--pw-border-card);
    border-radius: 10px;
    background: #FFFFFF;
    margin-bottom: 10px;
    /* El :hover no cambia el layout (mismo ancho de borde), solo el color:
       si el borde creciera al pasar por encima, el bloque "saltaria". */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.pw-sneat.inicio--list #nestable li.dd-item:hover {
    border-color: var(--pw-accent);
    box-shadow: 0 2px 8px rgba(67, 89, 113, 0.10);
}

/* El separador gris entre bloques lo daba un border-bottom de 8px del
   contenido; ahora separa el margin del <li>, y el contenido va a ras del
   marco punteado (con el radio por dentro, para que no asome en las
   esquinas). */
body.pw-sneat.inicio--list #nestable .dd3-content {
    border-bottom: 0 none;
    border-radius: 8px;
    background: transparent;
}

body.pw-sneat.inicio--list #nestable li.dd-item:last-child .dd3-content {
    border-bottom: 0 none;
}

/* Mientras se arrastra, el marco se marca en color de acento: refuerza
   que el bloque "se despego" y esta siguiendo al cursor. */
body.pw-sneat.inicio--list #nestable .dd-dragel > li.dd-item {
    border-color: var(--pw-accent);
    border-style: dashed;
    box-shadow: 0 8px 24px rgba(67, 89, 113, 0.18);
}

/* ---- Columna de controles de orden: handle arriba, flechas abajo ---- */

/* Handle mas grande (pedido), separado 8px del borde de la card en vez de
   pegado a el (antes left:0 -- se veia "cortado" contra el borde). */
body.pw-sneat.inicio--list #nestable .dd3-handle {
    left: 8px;
    width: 30px;
    height: 40px;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

body.pw-sneat.inicio--list #nestable .dd3-handle:before {
    width: 4.5px;
    height: 4.5px;
    box-shadow:
        -6px -8px 0 0 currentColor,
         6px -8px 0 0 currentColor,
        -6px  0px 0 0 currentColor,
         6px  0px 0 0 currentColor,
        -6px  8px 0 0 currentColor,
         6px  8px 0 0 currentColor;
    color: #9AA0A6;
}

/* Fondo suave al pasar el mouse: sin esto el handle no daba ninguna pista
   de que es interactivo hasta que el cursor ya estaba encima (el "grab"
   del cursor no alcanza en touch/trackpad). */
body.pw-sneat.inicio--list #nestable .dd3-handle:hover {
    background-color: var(--pw-page-bg) !important;
}
body.pw-sneat.inicio--list #nestable .dd3-handle:hover:before {
    color: var(--pw-accent);
}

/* Las flechas cuelgan debajo del handle, en el mismo carril (ahora
   separado 8px del borde de la card, igual que el handle). Antes eran
   dos cuadraditos sueltos con un gap entre ellos -- ahora es un solo
   control "segmentado" (borde + fondo compartidos, divisoria interna en
   vez de gap) para que se lea como una sola pieza prolija, no dos
   botones flotando. */
body.pw-sneat.inicio--list #nestable .inicio-mover {
    position: absolute;
    top: 44px;
    left: 8px;
    width: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    z-index: 2;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    background: var(--pw-page-bg, #F5F6FA);
    overflow: hidden;
}

body.pw-sneat.inicio--list #nestable .inicio-mover__btn {
    width: 100%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: #697A8D;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Divisoria entre las dos flechas en vez del gap suelto de antes. */
body.pw-sneat.inicio--list #nestable .inicio-mover__btn:first-child {
    border-bottom: 1px solid var(--pw-divider);
}

body.pw-sneat.inicio--list #nestable .inicio-mover__btn:hover:not(:disabled) {
    background: var(--pw-accent);
    color: #FFFFFF;
}

/* Deshabilitada = no hay a donde mover (primero / ultimo). Se atenua en vez
   de ocultarse: si desapareciera, los bloques de los extremos tendrian una
   botonera distinta y el ojo lo lee como un error. */
body.pw-sneat.inicio--list #nestable .inicio-mover__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* El contenido ya reservaba 46px a la izquierda para el handle; con las
   flechas debajo hace falta alto minimo para que no se superpongan con el
   preview del bloque. */
body.pw-sneat.inicio--list #nestable .dd3-content {
    min-height: 92px;
}

/* ==================================================================== */
/* Titulo del bloque en la MISMA linea que el handle de arrastre.        */
/*                                                                      */
/* El vertical de esta pantalla es escaso (cada bloque trae su preview), */
/* y el titulo caia 18px por debajo del grip, dejando aire muerto arriba.*/
/* Dos causas sumadas:                                                   */
/*  - el nombre heredaba line-height:38px de Bootstrap 2, o sea media    */
/*    38px de alto para un texto de 14px;                                */
/*  - el contenido reservaba 10px de padding-top ademas de eso.          */
/* ==================================================================== */
body.pw-sneat.inicio--list #nestable .inicio-listado__nombre,
body.pw-sneat.inicio--list #nestable .inicio-listado__nombre i {
    line-height: 1.3;
}

body.pw-sneat.inicio--list #nestable .dd3-content {
    padding-top: 6px;
}

/* El header (nombre + acciones) pasa a ocupar exactamente el alto del
   carril del handle, con todo centrado ahi adentro: asi el titulo, los
   botones de la derecha y el grip caen sobre la misma linea. */
body.pw-sneat.inicio--list #nestable .inicio-listado__header {
    min-height: 34px;
}

/* El handle arranca en el borde del <li>, pero el contenido arranca mas
   abajo (borde + padding): sin este top el grip quedaba por encima de la
   linea del titulo en vez de sobre ella. */
body.pw-sneat.inicio--list #nestable .dd3-handle {
    top: 11px;
    height: 46px;
}

/* Las flechas empiezan debajo del handle mas alto (11 + 46 + 2px de aire). */
body.pw-sneat.inicio--list #nestable .inicio-mover {
    top: 59px;
}

/* Las flechas estiran hasta el pie del bloque (mismo bottom que el
   padding del contenido) en vez de quedar como dos cuadraditos de 20px
   pegados arriba: mas alto = mas facil de ver y de clickear. */
body.pw-sneat.inicio--list #nestable .inicio-mover {
    bottom: 14px;
}
body.pw-sneat.inicio--list #nestable .inicio-mover__btn {
    flex: 1 1 0;
    height: auto;
}

/* Ultimos dos excedentes que empujaban el titulo hacia abajo, medidos uno
   por uno: el contenido arrastraba un margin-top de 5px (de la fila fina
   original) y el header quedaba en 41px de alto porque lo estiraban los
   botones de accion (34px + margen), no el texto (18px). */
body.pw-sneat.inicio--list #nestable .dd3-content {
    margin-top: 0;
}

/* ==================================================================== */
/* EL CLON QUE SIGUE AL CURSOR (.dd-dragel).                            */
/*                                                                      */
/* ⚠️ nestable hace $(document.body).append(this.dragEl): el clon queda  */
/* FUERA de #nestable, asi que NINGUNA regla scopeada bajo #nestable lo  */
/* alcanza y cae al CSS base de la libreria. Medido: el bloque original  */
/* mide 606x207 y el clon salia 603x84, con el handle en 26x46 (el de la */
/* libreria, no el nuestro) y las flechas -- que pierden el absolute --   */
/* ocupando los 603px de ancho. Eso es la "deformacion" al arrastrar.    */
/*                                                                      */
/* Por eso todo lo que define la forma del bloque se repite aca con el   */
/* mismo valor. El scope sigue existiendo: body.pw-sneat.inicio--list    */
/* alcanza al clon porque las clases estan en el <body>.                 */
/* ==================================================================== */
body.pw-sneat.inicio--list .dd-dragel > li.dd-item {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    border: 2px dashed var(--pw-accent);
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow: 0 8px 24px rgba(67, 89, 113, 0.18);
    /* Sin esto el clon se ve semitransparente sobre el listado. */
    opacity: 1;
}

body.pw-sneat.inicio--list .dd-dragel .dd3-content {
    height: auto;
    min-height: 92px;
    margin: 0;
    padding: 6px 12px 14px 46px;
    border: 0 none;
    border-radius: 8px;
    background: transparent;
    background-image: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: static;
}

body.pw-sneat.inicio--list .dd-dragel .dd3-handle {
    position: absolute;
    left: 0;
    top: 11px;
    width: 38px;
    height: 34px;
    margin: 0;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

body.pw-sneat.inicio--list .dd-dragel .dd3-handle:before {
    content: '\283F';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    text-align: center;
    text-indent: 0;
    transform: translateY(-50%);
    color: var(--pw-accent);
    font-size: 22px;
}

/* Flechas subir/bajar y botones editar/quitar: OCULTOS en el clon (a
   pedido del usuario, con captura). Sus contenedores SI quedaban bien
   posicionados aca (.inicio-mover en absolute, .inicio-listado__header en
   flex, ver el resto de este bloque), pero los <button> de adentro
   (.inicio-mover__btn, .inicio-listado__btn-editar/-quitar) no tienen
   reglas propias scopeadas a .dd-dragel -- caen al boton nativo del
   navegador (borde/fondo por defecto), y ese cuadrito sin estilo,
   flotando sobre el fantasma compacto, es justo lo que se ve "mal
   ubicado" en la captura. Más robusto que perseguir cada botón con su
   propio juego de reglas (la lista de controles de una fila puede
   crecer): ocultarlos todos durante el drag, ya que ninguno hace nada
   útil mientras se arrastra (no se puede clickear un botón del clon).
   El fantasma queda con handle + nombre, que es lo único que importa
   para ubicarse durante el arrastre. */
body.pw-sneat.inicio--list .dd-dragel .inicio-mover,
body.pw-sneat.inicio--list .dd-dragel .col-buttons {
    display: none !important;
}

body.pw-sneat.inicio--list .dd-dragel .inicio-listado__nombre,
body.pw-sneat.inicio--list .dd-dragel .inicio-listado__nombre i {
    line-height: 1.3;
}

body.pw-sneat.inicio--list .dd-dragel .inicio-listado__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 34px;
}

/* El preview interno tiene su propio juego de reglas, tambien scopeadas
   bajo #nestable, y fuera de ahi se estira (medido: 128px en la fila real,
   284px en el clon). En vez de duplicar todas, el clon muestra solo la
   cabecera: un "fantasma" compacto se sigue mejor con la vista que un
   bloque de 350px tapando media pantalla, y el hueco de destino
   (.dd-placeholder) ya conserva el ALTO REAL del bloque, que es lo que
   importa para saber donde va a caer. */
body.pw-sneat.inicio--list .dd-dragel .inicio-preview {
    display: none;
}

body.pw-sneat.inicio--list .dd-dragel .dd3-content {
    min-height: 0;
    padding-bottom: 6px;
}

/* El hueco de destino, con el mismo lenguaje que el bloque: punteado y en
   color de acento, para que se lea como "aca va a quedar". */
body.pw-sneat.inicio--list #nestable .dd-placeholder {
    background: var(--pw-accent-soft, #F0F0FF);
    border: 2px dashed var(--pw-accent);
    border-radius: 10px;
    margin: 0 0 10px;
    box-sizing: border-box;
}

/* ==================================================================== */
/* Popup del bloque: flechas para reordenar los sub-bloques del Catalogo */
/* (Marcas / Categorias / Productos). El markup lo pone                  */
/* pw_mod_inicio_subbloque_mover() y solo se muestra en el Catalogo, que */
/* es el unico bloque con tres sub-bloques.                              */
/* ==================================================================== */
body.pw-sneat .pw-subbloque {
    position: relative;
}

body.pw-sneat .pw-subbloque__mover {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    margin-bottom: 6px;
    /* Alto fijo aunque este oculto en los bloques que no son el Catalogo:
       asi las tres columnas arrancan a la misma altura y el titulo no queda
       desalineado entre una y otra. */
    min-height: 24px;
}

body.pw-sneat .pw-subbloque__btn {
    width: 26px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--pw-divider);
    border-radius: 5px;
    background: #FFFFFF;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    color: #697A8D;
    font-size: 15px;
    line-height: 1;
}

body.pw-sneat .pw-subbloque__btn:hover:not(:disabled) {
    background: var(--pw-accent);
    border-color: var(--pw-accent);
    color: #FFFFFF;
}

body.pw-sneat .pw-subbloque__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

/* ====================================================================== */
/* POPUP de configuracion de un bloque (#pw-popup-seccion).               */
/*                                                                        */
/* El popup usaba el modal de Bootstrap 2 crudo -- no habia una sola regla */
/* SNEAT para el. Ahora sus tres solapas (Formato / Texto / Fondo) usan el */
/* mismo lenguaje de cards que el resto del panel. Ver seccion 124 del doc.*/
/* ====================================================================== */
body.pw-sneat #pw-popup-seccion .pw-popup-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.06);
    padding: 14px 16px;
    margin-bottom: 12px;
    box-sizing: border-box;
}

body.pw-sneat #pw-popup-seccion .pw-popup-card__titulo {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--pw-border-soft);
    font-size: 14px;
    font-weight: 600;
    color: var(--pw-text-strong);
}

/* El <h5> de los titulos que llegan por ajax: sin margen ni tamanio propio,
   para que se vea igual que los titulos de texto fijo. */
body.pw-sneat #pw-popup-seccion .pw-popup-card__titulo h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

/* Las flechas de reordenar quedan al final del encabezado de la card. */
body.pw-sneat #pw-popup-seccion .pw-popup-card__titulo .pw-subbloque__mover {
    margin-left: auto;
    margin-bottom: 0;
    min-height: 0;
}

body.pw-sneat #pw-popup-seccion .pw-popup-card__campos {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Variante en fila para grupos de campos cortos (los ajustes de la imagen). */
body.pw-sneat #pw-popup-seccion .pw-popup-card__campos--fila {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

body.pw-sneat #pw-popup-seccion .pw-popup-card__campos--fila > .pw-popup-campo {
    flex: 1 1 180px;
    min-width: 0;
}

body.pw-sneat #pw-popup-seccion .pw-popup-campo > label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
}

/* Checkbox + su tooltip en una sola linea. */
body.pw-sneat #pw-popup-seccion .pw-popup-campo--check {
    display: flex;
    align-items: center;
    gap: 6px;
}

body.pw-sneat #pw-popup-seccion .pw-popup-campo--check > label.checkbox {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--pw-text-strong);
}

/* Controles: mismo alto y radio que el resto del panel. El span12 de BS2
   define un ancho fijo de 940px que aca no sirve. */
body.pw-sneat #pw-popup-seccion .pw-popup-campo select,
body.pw-sneat #pw-popup-seccion .pw-popup-campo input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    height: var(--pw-control-height);
    border-radius: 8px;
    margin-bottom: 0;
}

/* ---- Sub-bloques del Catalogo: lado a lado en desktop ---- */
body.pw-sneat #pw-popup-seccion .pw-popup-subbloques {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}

body.pw-sneat #pw-popup-seccion .pw-popup-subbloques > .pw-subbloque {
    flex: 1 1 240px;
    min-width: 0;
    margin-bottom: 0;
}

/* Una card de sub-bloque cuyo contenido esta oculto (los bloques que no son
   el Catalogo) no debe ocupar lugar NI dibujar su marco: si no, reaparece el
   hueco a la izquierda que empujaba el contenido -- el bug original. */
body.pw-sneat #pw-popup-seccion .pw-subbloque:not(.pw-popup-card--visible) {
    display: none;
}

body.pw-sneat #pw-popup-seccion .pw-popup-card--visible {
    display: block;
}

/* ⚠️ Bootstrap 2 inserta el .tooltip DENTRO del elemento que lo dispara, asi
   que hereda sus estilos de texto. El titulo de card es 600 y los labels 500:
   sin esto el globo de ayuda sale en semibold. Ver seccion 118. */
body.pw-sneat #pw-popup-seccion .tooltip {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 1.45;
}

/* ---- Mobile: las cards de sub-bloque apiladas ---- */
@media (max-width: 767px) {
    body.pw-sneat #pw-popup-seccion .pw-popup-subbloques > .pw-subbloque {
        flex: 1 1 100%;
    }
    body.pw-sneat #pw-popup-seccion .pw-popup-card__campos--fila {
        flex-direction: column;
        gap: 12px;
    }
}


/* ====================================================================== */
/* POPUP de un bloque en el PANEL CLASICO.                                */
/*                                                                        */
/* Todo lo de arriba esta scopeado a body.pw-sneat, asi que el clasico se */
/* quedo sin una sola regla para este popup. Y no es solo cosmetico: el   */
/* markup viejo estaba armado con la grilla fluida de Bootstrap 2         */
/* (.row-fluid + .span4) y de ahi salian DOS cosas que se perdieron al    */
/* reemplazarlo por clases propias:                                       */
/*                                                                        */
/*   1. la fila de tres columnas (.row-fluid .span4 = 31.914%);           */
/*   2. el ancho de los controles (.row-fluid .span12 = 100%). Fuera de   */
/*      un .row-fluid, .span12 vuelve al grid ESTATICO: 940px FIJOS,      */
/*      dentro de un modal que mide 560. Ese desborde es lo que mas se    */
/*      notaba, y afecta tambien a las solapas Texto y Fondo, que tenian  */
/*      4 y 2 .row-fluid respectivamente.                                 */
/*                                                                        */
/* Se reproduce ese comportamiento con flex en vez de floats: el          */
/* resultado visual es el mismo y, ademas, un sub-bloque oculto sale del  */
/* reparto solo -- con .span4 hacia falta la regla :first-child para los  */
/* margenes, que se rompe justo cuando hay bloques ocultos.               */
/* ====================================================================== */

/* Sin flex-wrap: las tres columnas nunca bajan de linea, cualquiera sea el
   ancho del modal (equivale al float de .span4). */
body:not(.pw-sneat) #pw-popup-seccion .pw-popup-subbloques {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

body:not(.pw-sneat) #pw-popup-seccion .pw-popup-subbloques > .pw-subbloque {
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 10px 12px;
}

/* Un sub-bloque cuyo contenido esta oculto (los bloques que no son el
   Catalogo) no debe ocupar una columna ni dibujar su borde. */
body:not(.pw-sneat) #pw-popup-seccion .pw-subbloque:not(.pw-popup-card--visible) {
    display: none;
}

/* Lo que daba .row-fluid .span12 y se perdio al sacar el markup de la grilla.
   Aplica a todo el popup, no solo a los sub-bloques: las solapas Texto y
   Fondo tienen los mismos controles desbordados. */
body:not(.pw-sneat) #pw-popup-seccion .span12 {
    width: 100%;
    box-sizing: border-box;
}

/* Mobile: apiladas, igual que en SNEAT. */
@media (max-width: 767px) {
    body:not(.pw-sneat) #pw-popup-seccion .pw-popup-subbloques {
        display: block;
    }
    body:not(.pw-sneat) #pw-popup-seccion .pw-popup-subbloques > .pw-subbloque {
        margin-bottom: 12px;
    }
}


/* usuarios-registrados.css */

/* Evita scroll horizontal por .main{display:table} (mismo fix que Contacto y
   Suscriptores). La tabla de usuarios cabe en el viewport. */
body.pw-sneat.usuarios--list .main {
    table-layout: fixed;
    width: 100%;
}

/* Checkboxes de seleccion masiva por fila/thead: el fix (antes duplicado
   por modulo) ahora es GLOBAL en sneat-base.css. Ver SNEAT-PATTERNS.md §41. */

/* La fecha/hora no debe partirse nunca en 2 renglones (mismo problema y fix
   que Suscriptores, ver SNEAT-PATTERNS.md §36 "Bonus"). */
body.pw-sneat.usuarios--list .usuarios-listado__fecha-dia,
body.pw-sneat.usuarios--list .usuarios-listado__fecha-hora {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* --- Mobile: margen lateral en KPI y filtro, pero NO en el listado ---
   Bootstrap 2 clasico saca el .container-fluid a sangre en mobile a
   proposito (bootstrap-responsive.min.css: "@media(max-width:767px)
   .container-fluid{padding:0}", full-bleed intencional). Otros modulos
   (ej. Suscriptores) no lo notan porque por casualidad viven dentro de un
   <div class="tab-pane"> que trae su propio padding:18px de clasico;
   Usuarios NO tiene ese wrapper y sneat-base.css ya puso
   .main-right__page-content en padding:0 (el shell SNEAT delega el
   padding a cada modulo) -> sin ningun margen propio, todo quedaba pegado
   al borde.

   OJO: el margen va SOLO en las stat-cards (.button-bar--top) y en la
   card de filtro — el listado (.usuarios-table-card) se dejo a proposito
   sin margen en mobile en otra tarea (mismo criterio "full-bleed" que
   Productos: la tabla aprovecha el 100% del ancho de pantalla). Un
   padding en el CONTENEDOR (.main-right__page-content) los afecta a los
   3 por igual -> hay que poner el margen en cada card puntual, no en el
   padre. */
@media (max-width: 767px) {
    body.pw-sneat.usuarios--list .button-bar--top,
    body.pw-sneat.usuarios--list .usuarios-filtro-card {
        margin-left: 18px;
        margin-right: 18px;
    }
}

/* --- Mobile: ocultar columnas Alta / Ultimo acceso ---
   Con Fecha de Alta + Ultimo acceso + Apellido/Nombre + Lista de precios +
   Estado no entran 5 columnas en una pantalla angosta; las 2 fechas son
   las menos criticas para una revision rapida en mobile (la lista de
   precios y el estado YA se ocultan a <=767px, ver arriba). Igual criterio
   que Suscriptores, que solo tiene 1 columna de fecha y la oculta a
   <=624px.
   OJO: el <th> de "Ultimo acceso" usa la clase usuarios-listado__fecha-historial
   (no fecha-acceso) — inconsistencia de nombres preexistente en listado.php
   entre el head (fecha-historial) y el body (fecha-acceso) de la MISMA
   columna. Si se oculta solo fecha-acceso, el <th> queda visible sin sus
   celdas de body -> thead y tbody con distinta cantidad de columnas
   visibles, lo que rompe por completo el algoritmo de ancho automatico de
   la tabla (confirmado en vivo: la columna de nombre/email quedaba de 13px
   de ancho con el texto partido letra por letra). Hay que ocultar AMBOS
   nombres de clase. */
@media (max-width: 767px) {
    body.pw-sneat.usuarios--list .usuarios-listado__fecha-alta,
    body.pw-sneat.usuarios--list .usuarios-listado__fecha-acceso,
    body.pw-sneat.usuarios--list .usuarios-listado__fecha-historial {
        display: none;
    }
}

@media (max-width: 980px) {
    .usuarios-listado__email {
        word-break: break-all;
    }

}

@media (max-width: 767px) {
    .usuarios-listado__fecha {
        display: none;
    }
    .usuarios-listado__estado {
        display: none;
    }
    .usuarios-listado__lista-precios {
        display: none;
    }
}

@media (max-width: 480px) {

    .usuarios-listado .page-content__table-button--edit {
        border-radius: 4px;
    }

    .usuarios-listado .page-content__table-button--delete {
        display: none;
    }
    .usuarios-listado .page-content__table-button--favorites {
        display: none;
    }
    .usuarios-listado .page-content__table-button--private {
        display: none;
    }
}

/* ================================================================== */
/* SNEAT: Listado de Usuarios Registrados                             */
/* Scoped a body.pw-sneat — regresion cero en modo clasico.           */
/* Los estilos globales (counter, formBuscar, pagination,             */
/* table-actions, checkboxes) viven en suscriptores.css.              */
/* Aqui solo estilos especificos de la tabla y el toolbar.            */
/* ================================================================== */

/* --- Tabla aireada --- */
body.pw-sneat .usuarios-listado.page-content__table {
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}

body.pw-sneat .usuarios-listado .page-content__table-header {
    height: auto;
    background-color: transparent;
    border-bottom: 1px solid var(--pw-border-soft);
    color: var(--pw-gray-light);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

body.pw-sneat .usuarios-listado thead th {
    padding: 12px 16px;
}

body.pw-sneat .usuarios-listado tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--pw-border-soft);
    color: #697A8D;
    vertical-align: middle;
}

body.pw-sneat .usuarios-listado tbody tr:first-child td {
    border-top: 0 none;
}

body.pw-sneat .usuarios-listado tbody tr:hover {
    background-color: #F9FAFB;
}

/* --- Nombre / Apellido en bold --- */
body.pw-sneat .usuarios-listado .usuarios-listado__nombre {
    color: #566A7F;
    font-size: 14px;
    font-weight: 600;
}

body.pw-sneat .usuarios-listado .usuarios-listado__email {
    color: var(--pw-gray-light);
    font-size: 13px;
}

/* --- Fecha: dia normal, hora muted --- */
body.pw-sneat .usuarios-listado .usuarios-listado__fecha-dia {
    color: #566A7F;
    font-size: 13px;
}

body.pw-sneat .usuarios-listado .usuarios-listado__fecha-hora {
    color: var(--pw-gray-light);
    font-size: 12px;
}

/* --- Lista de precios --- */
body.pw-sneat .usuarios-listado .usuarios-listado__lista-precios {
    font-size: 13px;
    color: #697A8D;
}

/* --- Botones de accion: reset BS2 + hover circular SNEAT --- */
body.pw-sneat .usuarios-listado .page-content__table-button--edit,
body.pw-sneat .usuarios-listado .page-content__table-button--private {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .usuarios-listado .page-content__table-button--edit:hover,
body.pw-sneat .usuarios-listado .page-content__table-button--edit:focus,
body.pw-sneat .usuarios-listado .page-content__table-button--private:hover,
body.pw-sneat .usuarios-listado .page-content__table-button--private:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

body.pw-sneat .usuarios-listado .page-content__table-button--delete {
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: var(--pw-gray-light);
    border-radius: 50%;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-sneat .usuarios-listado .page-content__table-button--delete:hover,
body.pw-sneat .usuarios-listado .page-content__table-button--delete:focus,
body.pw-sneat .usuarios-listado .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* --- Bloque de filtro como card blanca separada (patrón SNEAT) --- */
body.pw-sneat .usuarios-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .usuarios-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .usuarios-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

body.pw-sneat .usuarios-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .usuarios-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .usuarios-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* --- Card de la tabla (toolbar + tabla + paginador). Antes era la mitad
   inferior de una card continua con el filtro; ahora el filtro es una card
   aparte, así que esta lleva borde y radio completos. --- */
body.pw-sneat .usuarios-table-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-soft);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.06);
    overflow: hidden;
    margin-bottom: 20px;
}

/* --- Acciones masivas: padding interno dentro de la card.
   margin-bottom 0: el margen clasico dejaba una franja entre la barra
   y el encabezado de la tabla. --- */
body.pw-sneat .usuarios-table-card .table-actions--top {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pw-border-soft);
    margin-bottom: 0;
    flex-wrap: wrap;
}

/* --- Mensaje de exportacion: fila propia debajo de la barra (no debe
   empujar ni solaparse con los botones) --- */
body.pw-sneat .usuarios-actions-buttons #mensajeExportar {
    flex-basis: 100%;
    order: 100;
    margin: 8px 0 0;
    padding: 8px 12px;
    border: 1px solid rgba(40, 199, 111, 0.4);
    border-radius: 8px;
    background-color: rgba(40, 199, 111, 0.12);
    color: #28C76F;
    font-size: 13px;
    text-shadow: none;
    box-shadow: none;
}

/* Con el mensaje visible el grupo ocupa todo el ancho: botones a la derecha */
body.pw-sneat .usuarios-actions-buttons {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Botones Agregar/Exportar en la barra de acciones masivas (derecha) --- */
body.pw-sneat .table-actions--top .usuarios-actions-buttons {
    order: 99;
    margin-left: auto;
}

body.pw-sneat .table-actions--top .usuarios-actions-buttons .btnCrear,
body.pw-sneat .table-actions--top .usuarios-actions-buttons .btn-primary {
    background: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-weight: 600;
}

body.pw-sneat .table-actions--top .usuarios-actions-buttons .btnCrear:hover,
body.pw-sneat .table-actions--top .usuarios-actions-buttons .btnCrear:focus,
body.pw-sneat .table-actions--top .usuarios-actions-buttons .btn-primary:hover {
    background: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
}

body.pw-sneat .table-actions--top .usuarios-actions-buttons .btn:not(.btn-primary):not(.btnCrear) {
    background: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    box-shadow: none;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    padding: 8px 14px;
    color: var(--pw-text-strong);
}

body.pw-sneat .table-actions--top .usuarios-actions-buttons .btn:not(.btn-primary):not(.btnCrear):hover {
    background: var(--pw-btn-secondary-bg-hover);
    background-image: none;
    color: var(--pw-text-strong);
}

/* --- Paginador dentro de la card --- */
body.pw-sneat .usuarios-table-card .pagination {
    padding: 12px 16px;
    margin: 0;
    border-top: 1px solid var(--pw-border-soft);
}

/* --- Avatares con iniciales (columna usuario) --- */
body.pw-sneat .usuarios-listado__usuario {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.pw-sneat .usuarios-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

body.pw-sneat .usuarios-avatar--c0 { background: var(--pw-accent-soft);      color: var(--pw-accent); }
body.pw-sneat .usuarios-avatar--c1 { background: rgba(40, 199, 111, 0.12);  color: #28C76F; }
body.pw-sneat .usuarios-avatar--c2 { background: var(--pw-danger-soft);     color: var(--pw-danger); }
body.pw-sneat .usuarios-avatar--c3 { background: rgba(255, 159, 67, 0.12);  color: #FF9F43; }
body.pw-sneat .usuarios-avatar--c4 { background: rgba(0, 207, 232, 0.12);   color: #00CFE8; }
body.pw-sneat .usuarios-avatar--c5 { background: rgba(130, 134, 139, 0.12); color: #82868B; }

/* --- Combos de acciones masivas: tamaño estandar (38px, radius 8) --- */
body.pw-sneat .usuarios-table-card .table-actions--top .table-actions__select {
    width: auto;
    min-width: 150px;
    height: 38px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    background-color: #FFFFFF;
    color: #566A7F;
    font-size: 13px;
}

body.pw-sneat .usuarios-table-card .table-actions--top button.table-actions__button-action {
    height: 38px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    background: #FFFFFF;
    background-image: none;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    color: #566A7F;
}

/* --- Page-size a la DERECHA (dentro del grupo de botones) --- */
body.pw-sneat .table-actions--top .usuarios-page-size {
    display: inline-flex;
    align-items: center;
}

body.pw-sneat .table-actions--top .usuarios-page-size .table-actions__select-page-size {
    width: auto;
    min-width: 72px;
    height: 38px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--pw-divider);
    border-radius: 8px;
    box-shadow: none;
    color: #566A7F;
}

/* Ocultar SOLO el selector original del pie (el paginador vive en el
   mismo contenedor table-actions--bottom — no ocultar el contenedor). */
body.pw-sneat .usuarios-table-card .table-actions--bottom .table-actions__select-page-size {
    display: none;
}

/* El paginador del pie ocupa el ancho completo dentro de la card */
body.pw-sneat .usuarios-table-card .table-actions--bottom {
    padding: 12px 16px;
    border-top: 1px solid var(--pw-border-soft);
}

body.pw-sneat .usuarios-table-card .table-actions--bottom .pagination {
    padding: 0;
    margin: 0;
    border-top: 0 none;
}

/* El selector de cantidad esta oculto (display:none), pero el span2
   sigue ocupando el 16% del row-fluid. Expandir el span10 al 100%. */
body.pw-sneat .usuarios-table-card .table-actions--bottom .row-fluid > .span2 {
    display: none;
}

body.pw-sneat .usuarios-table-card .table-actions--bottom .row-fluid > .span10 {
    width: 100%;
    margin-left: 0;
}

/* --- Ordenamiento: se usa el icono nativo AZ/ZA (page-content__table-sort-icon).
   No agregar carets propios via ::after — quedan duplicados. --- */
body.pw-sneat .usuarios-listado .page-content__table-header--sort {
    cursor: pointer;
}

/* Centrado vertical: el top:6px del clasico lo deja pegado al divisor
   superior de la tabla */
body.pw-sneat .usuarios-listado .page-content__table-sort-icon {
    top: 50%;
    transform: translateY(-50%);
    right: 12px;
    font-size: 14px;
    color: var(--pw-accent);
}

/* ================================================================== */
/* Contraste y tipografia (referencia SNEAT User List)                */
/* ================================================================== */

/* Stat-cards: numeros mas grandes y oscuros */
body.pw-sneat .button-bar--top .counter__values,
body.pw-sneat .button-bar--top .counter__values--js {
    font-size: 24px;
    font-weight: 700;
    color: #384551;
}

/* Legend del panel de filtros */
body.pw-sneat #formBuscar legend {
    font-size: 16px;
    font-weight: 700;
    color: #384551;
}

/* Labels de filtros */
body.pw-sneat #formBuscar label {
    color: #566A7F;
    font-weight: 600;
}

/* Encabezados de tabla: gris oscuro, letra mas chica.
   !important: la base page-content__table.css trae 12px !important. */
body.pw-sneat .usuarios-listado thead th,
body.pw-sneat .usuarios-listado thead td,
body.pw-sneat .usuarios-listado .page-content__table-header {
    color: #384551;
    font-size: 10px !important;
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
}

body.pw-sneat .usuarios-listado .page-content__table-header .page-content__table-text--muted {
    color: var(--pw-gray-light);
    font-size: 10px;
}

/* Celdas con mas contraste */
body.pw-sneat .usuarios-listado tbody td {
    color: #566A7F;
}

/* Nombre del usuario mas prominente */
body.pw-sneat .usuarios-listado .usuarios-listado__nombre {
    font-size: 15px;
    font-weight: 600;
    color: #384551;
}

body.pw-sneat .usuarios-listado .usuarios-listado__email {
    font-size: 13px;
    color: var(--pw-gray-light);
}


/* vehiculos.css */

/* ==================================================================== */
/* SNEAT - Modulo Vehiculos (body.pw-sneat.vehiculos--list)             */
/*                                                                      */
/* mod_vehiculos.php. El listado usa PW_PanelDeControl_Html_List (igual */
/* que Inmuebles/Publicaciones): switch Activo, estrella Destacado,      */
/* checkbox masivo a la izquierda. El combo "Acciones masivas" necesita  */
/* el marcador .pw-toolbar-actions-group en el toolbar inyectado (ver    */
/* mod_vehiculos/listado.php) o queda oculto en mobile — mismo gotcha    */
/* que Cupones/Contacto/Publicaciones/Inmuebles, ver SNEAT-PATTERNS.md.  */
/* La tabla reusa la clase .publicaciones-listado */
/* (thead/filas/hover ya estilados globalmente). Aca solo: card de       */
/* filtro, toolbar y boton Agregar. Archivo ASCII puro.                  */
/* ==================================================================== */

/* Evita scroll horizontal cuando .main{display:table} expande la tabla */
body.pw-sneat.vehiculos--list .main {
    table-layout: fixed;
    width: 100%;
}

/* ==== Card de filtro ==== */
body.pw-sneat .vehiculos-filtro-card {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

body.pw-sneat .vehiculos-filtro-card .pw-filter-section-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-bottom: 12px;
}

body.pw-sneat .vehiculos-filtro-card #formBuscar {
    margin: 0;
    padding: 0;
    border: 0 none;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
}

body.pw-sneat .vehiculos-filtro-card #formBuscar .form-search__advanced fieldset {
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px;
    margin: 0 !important;
    padding: 16px !important;
}
body.pw-sneat .vehiculos-filtro-card #formBuscar .form-search__advanced legend {
    display: inline;
    width: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--pw-gray-light);
    padding: 0 6px;
    margin-bottom: 0;
    border: 0 none;
    text-transform: none;
}
body.pw-sneat .vehiculos-filtro-card #formBuscar .form-search__advanced .btn {
    width: 100%;
}

/* ==== Toolbar de acciones (la card del filtro ya delimita) ==== */
body.pw-sneat.vehiculos--list .table-actions--top {
    background: transparent;
    border: 0 none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    justify-content: flex-start;
}

/* Boton Agregar inyectado en el toolbar: empujar a la derecha */
body.pw-sneat.vehiculos--list .vehiculos-actions-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
    order: 99;
    margin-left: auto;
}

body.pw-sneat.vehiculos--list .vehiculos-actions-buttons .btnCrear {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: none;
    text-shadow: none;
}

body.pw-sneat.vehiculos--list .vehiculos-actions-buttons .btnCrear:hover,
body.pw-sneat.vehiculos--list .vehiculos-actions-buttons .btnCrear:focus,
body.pw-sneat.vehiculos--list .vehiculos-actions-buttons .btnCrear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}

/* La columna Tipo trae un <img> de icono: alinearlo con el texto */
body.pw-sneat.vehiculos--list .productos-listado__col-tipo img {
    vertical-align: middle;
    margin-right: 4px;
}

/* Copia de Referencia mostrada debajo de Tipo (ver listado.php) — oculta
   en desktop, donde Referencia sigue siendo su propia columna. */
body.pw-sneat.vehiculos--list .vehiculos-listado__referencia-mobile {
    display: none;
}

/* Mobile: no entraban los items (4 columnas + checkbox + acciones en
   poco ancho) — mismo problema y mismo fix que Inmuebles (#64a). Se
   oculta la columna Destacado entera y se oculta Referencia como
   columna propia, mostrando en su lugar la copia que ya viaja debajo
   de Tipo (arriba). */
@media (max-width: 767px) {
    body.pw-sneat.vehiculos--list .productos-listado__col-destacado,
    body.pw-sneat.vehiculos--list .productos-listado__col-referencia {
        display: none !important;
    }
    body.pw-sneat.vehiculos--list .vehiculos-listado__referencia-mobile {
        display: block;
        font-size: 12px;
        color: var(--pw-gray-light);
        margin-top: 2px;
    }
}

/* ==================================================================== */
/* SNEAT - Formulario de alta/edicion de vehiculo                       */
/* (body.pw-sneat.vehiculos--form)                                      */
/* Reskin sobre todo por CSS (.well + .control-group + label.checkbox). */
/* Excepcion: Activo/Destacado se reemplazan por switch/estrella         */
/* (pw_html_button_toggle()/pw_html_button_star(), mismos widgets que el */
/* listado) en contenido.php, dual-mode con la rama clasica intacta.     */
/* Las tabs nivel 2 (#tabsItem) y los inputs ya los estiliza el SNEAT    */
/* global.                                                              */
/* ==================================================================== */

/* Fila switch/estrella + label, uno al lado del otro. margin-bottom en
   TODAS las filas (tambien la ultima): Activo/Destacado viven en su
   propio .span3, seguido de OTRO .span3 (Estado) que en mobile se
   apila debajo (row-fluid colapsa a una columna) — sin margen en la
   ultima fila, Destacado y el combo Estado quedaban pegados sin
   separacion (mismo bug reportado en Inmuebles, ver SNEAT-PATTERNS.md). */
body.pw-sneat.vehiculos--form .vehiculos-form__switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
body.pw-sneat.vehiculos--form .vehiculos-form__switch-row label {
    margin-bottom: 0;
    cursor: pointer;
}
/* La estrella del listado es chica/gris por defecto (bi-star simple);
   en el form se agranda un poco para que no desaparezca al lado del
   switch (36x20px) que tiene mucho mas peso visual. */
body.pw-sneat.vehiculos--form .vehiculos-form__switch-row .button-star__icon {
    font-size: 20px;
    color: #8592A3;
}
body.pw-sneat.vehiculos--form .vehiculos-form__switch-row .button-star--active .button-star__icon {
    color: #FFAB00;
}

/* Cada caja gris .well pasa a card blanca SNEAT */
body.pw-sneat.vehiculos--form #formItem .well {
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 20px 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Labels de los controles */
body.pw-sneat.vehiculos--form #formItem .control-label,
body.pw-sneat.vehiculos--form #formItem > form label,
body.pw-sneat.vehiculos--form #formItem label {
    color: var(--pw-text-strong);
    font-weight: 500;
    font-size: 13px;
}

/* Checkboxes con color de marca (se conserva el layout float de BS2, que
   ya muestra el check a la izquierda del texto). */
body.pw-sneat.vehiculos--form #formItem input[type="checkbox"] {
    accent-color: var(--pw-accent);
    cursor: pointer;
}
body.pw-sneat.vehiculos--form #formItem label.checkbox,
body.pw-sneat.vehiculos--form #formItem label.checkbox.inline {
    color: #566A7F;
    font-weight: 500;
}

/* alert info ("No utilice decimales") */
body.pw-sneat.vehiculos--form #formItem .alert-info {
    background: var(--pw-accent-soft);
    border: 1px solid var(--pw-accent-soft);
    color: var(--pw-accent);
    border-radius: 8px;
    text-shadow: none;
}

/* Campos de texto largo (descripcion, observaciones) con fondo amarillo tipo nota */
body.pw-sneat.vehiculos--form #formItem textarea {
    background-color: #FFF8E1;
    border: 1px solid #EEDFA2;
    border-radius: 8px;
    color: #6E6033;
    box-shadow: none;
}
body.pw-sneat.vehiculos--form #formItem textarea:focus {
    background-color: #FFFBEB;
    border-color: #F1C50E;
    box-shadow: 0 0 0 3px rgba(241, 197, 14, 0.18);
    outline: none;
}
body.pw-sneat.vehiculos--form #formItem textarea::placeholder {
    color: #BBAA6B;
}

/* ------------------------------------------------------------------ */
/* Iconos en las solapas nivel 2 (Contenido / Imagenes / Videos)       */
/* via ::before, sin tocar el markup (FontAwesome 4).                  */
/* ------------------------------------------------------------------ */
body.pw-sneat.vehiculos--form #tabsItem > li > a::before {
    font-family: FontAwesome;
    margin-right: 6px;
    font-weight: normal;
}
body.pw-sneat.vehiculos--form #tabsItem > li > a[href="#tabItemContenido"]::before {
    content: "\f0f6"; /* fa-file-text-o */
}
body.pw-sneat.vehiculos--form #tabsItem > li > a[href="#tabItemFotos"]::before {
    content: "\f03e"; /* fa-picture-o */
}
body.pw-sneat.vehiculos--form #tabsItem > li > a[href="#tabItemVideos"]::before {
    content: "\f03d"; /* fa-video-camera */
}

/* ------------------------------------------------------------------ */
/* Titulo de seccion dentro de cada card del formulario (mas diseno)   */
/* ------------------------------------------------------------------ */
body.pw-sneat.vehiculos--form #formItem .vehiculos-form__section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-border-soft);
}
body.pw-sneat.vehiculos--form #formItem .vehiculos-form__section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pw-accent-soft);
    color: var(--pw-accent);
    font-size: 14px;
}


/* abono.css */

#pw_mensaje_estado_cuenta {
    width: 560px; 
    margin: auto;
    padding: 20px;
}

.pw_mensaje_estado_cuenta_pendiente {
    background-color: #f4eecb;
    border-top: 4px solid #e4b900;    
}

.pw_mensaje_estado_cuenta_prueba_gratis_vencida {
    background-color: #ffffff;
    border-top: 4px solid #0094dd;    
}

.pw_mensaje_estado_cuenta_vencido {
    background-color: #fcf1cd;
    border-top: 4px solid #e4b900;    
}

.pw_mensaje_estado_cuenta_suspendido {
    background-color: #f2bdb1;
    border-top: 4px solid #e40040;    
}

@media (max-width: 650px) {
    #pw_mensaje_estado_cuenta {
        width: 80%;
    }
}

/* enlaces.css */

/* ==================================================================== */
/* SNEAT - Enlace a una pagina (mod_enlaces.php), tab "Enlace".         */
/* Formulario simple: URL con prefijo fijo "https://" (input-group) +   */
/* switch "abrir en ventana nueva". Scope: body.pw-sneat (el modo       */
/* clasico queda intacto, regresion cero).                              */
/* ==================================================================== */

/* ==== Card blanca que envuelve el formulario ==== */
body.pw-sneat .enlaces-form__card {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 24px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* Orden visual invertido respecto al DOM (pedido del usuario: la URL
   arriba, el switch "abrir en ventana nueva" debajo) sin tocar el orden
   real del PHP -- ese es el mismo para clasico y SNEAT, asi que clasico
   no se ve afectado. La fila del switch es la PRIMERA en el DOM. */
body.pw-sneat .enlaces-form__card > .row-fluid {
    margin-bottom: 20px;
}

body.pw-sneat .enlaces-form__card > .row-fluid:first-child {
    order: 2; /* fila del switch: va abajo */
    margin-bottom: 0;
}

body.pw-sneat .enlaces-form__card > .row-fluid:last-child {
    order: 1; /* fila de la URL: va arriba */
}

body.pw-sneat .enlaces-form__field .control-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--pw-text-strong);
    margin-bottom: 8px;
}

/* ==== URL: input-group con "https://" fijo a la izquierda ====
   Bootstrap 5 real (.input-group/.input-group-text/.form-control) no esta
   cargado en este proyecto (panel clasico Bootstrap 2) -- se reusan esos
   mismos nombres de clase (pedido explicito del usuario, ejemplo del
   template Sneat) pero con CSS propio, scopeado a este modulo. */
body.pw-sneat .enlaces-form__url-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat .enlaces-form__card .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 420px;
}

body.pw-sneat .enlaces-form__card .input-group-text {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #F5F6FA;
    border: 1px solid var(--pw-border-card);
    border-right: 0 none;
    border-radius: 8px 0 0 8px;
    color: var(--pw-gray-light);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

body.pw-sneat .enlaces-form__card .input-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    margin: 0;
    border: 1px solid var(--pw-border-card);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--pw-text-strong);
    background-color: #FFFFFF;
    box-sizing: border-box;
}

body.pw-sneat .enlaces-form__card .input-group .form-control:focus {
    outline: none;
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 2px var(--pw-accent-soft);
}

/* ==== Switch "Abrir en una ventana nueva" (mismo <input> nativo,
   restyleado -- ver patron 29 de SNEAT-PATTERNS.md) ==== */
body.pw-sneat .enlaces-form__switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding-left: 46px;
    margin: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--pw-text-strong);
}

body.pw-sneat .enlaces-form__switch input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
    width: 36px;
    height: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #C1BDBD;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

body.pw-sneat .enlaces-form__switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 16px;
    height: 16px;
    background: #FFFFFF;
    border-radius: 50%;
    transition: left 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

body.pw-sneat .enlaces-form__switch input[type="checkbox"]:checked {
    background: var(--pw-accent);
}

body.pw-sneat .enlaces-form__switch input[type="checkbox"]:checked::before {
    left: 18px;
}

body.pw-sneat .enlaces-form__switch .fa-external-link {
    color: var(--pw-gray-light);
    font-size: 13px;
}

body.pw-sneat .enlaces-form__switch .pw-tooltip-help {
    margin-left: 2px;
}


/* widgets.css */

/* SNEAT - Widgets (mod_submenu): listado nestable (D&D) de widgets del
   submenu/pie del sitio + modal de alta/edicion. Ver patron 14 (Listado
   con Drag & Drop) y patron 8/9 (Modal) en SNEAT-PATTERNS.md. */

/* ---------------------------------------------------------------------
   Contenedores y margenes (mobile): el layout clasico (.row-fluid sin
   gutter propio dentro de .container-fluid sin max-width) dejaba los
   elementos pegados al borde de la pantalla en mobile.
   --------------------------------------------------------------------- */
body.pw-sneat.widgets--list .row-fluid {
    padding: 0 4px;
}

/* Titulo "Administrar widgets" (pw_configuracion_titulo_html) -- pedido
   explicito de sacarlo, la seccion "Widgets" del sidebar/breadcrumb ya
   deja claro donde esta parado el usuario. El link "Abrir ayuda" al
   lado (mismo .span5) NO se toca. */
body.pw-sneat.widgets--list .cfg-title {
    display: none;
}

/* El boton arrancaba a ancho completo (width:100%, ver mas abajo) --
   pedido explicito de sacarlo de esa forma "de barra" y alinearlo a
   la derecha, con margen alrededor en vez de pegado a los bordes.
   4px (el gutter fino que usa .row-fluid en este archivo) resulto
   invisible en la practica -- quedaba pegado al borde derecho de la
   PANTALLA, no solo de su contenedor (reportado con captura). 16px
   real. OJO: sneat-base.css le pone width:100% a .button-bar--top --
   sumarle margin-left/right ademas de ese 100% desborda el contenedor
   (100% + 32px de margenes), hay que pisar width:auto para que el
   margen empuje el elemento en vez de agrandarlo mas alla del padre. */
body.pw-sneat.widgets--list .button-bar--top {
    display: flex;
    justify-content: flex-end;
    width: auto;
    margin: 0 16px 16px;
}

/* Titulo "Widgets" del breadcrumb (icono + texto, compartido con otros
   modulos via .main__icon) -- el icono queda pegado al texto sin
   ningun gap (reportado con captura). Acotado a este modulo en vez de
   tocar la regla base .main__icon (transversal a todo el panel). */
body.pw-sneat.widgets--list .main__icon--widgets {
    margin-right: 8px;
}

/* Botón "Crear widget personalizado": tokens SNEAT (violeta) + padding
   comodo en pantallas chicas, en vez del btn-primary clasico de
   Bootstrap 2 sin tratamiento. */
body.pw-sneat.widgets--list .widgets-btn-crear {
    width: auto;
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 10px 16px;
    font-size: 14px;
}
body.pw-sneat.widgets--list .widgets-btn-crear:hover,
body.pw-sneat.widgets--list .widgets-btn-crear:focus,
body.pw-sneat.widgets--list .widgets-btn-crear:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}
/* El listado clasico repite el boton arriba Y abajo -- en SNEAT alcanza
   con el de arriba (patron del resto de los modulos migrados). */
body.pw-sneat.widgets--list .button-bar--bottom {
    display: none;
}

/* ---------------------------------------------------------------------
   Fila de cada widget: flexbox mobile-safe, sin overflow horizontal.
   Mismos criterios que Inicio (patron 14): handle + contenido en
   columna donde hace falta, touch targets >= 44px.
   --------------------------------------------------------------------- */
/* El plugin Nestable posiciona el handle con position:absolute; top:0
   (fijo arriba de .dd3-content) -- con .dd3-content mas alto que los
   46px del handle (56.6px reales, por los botones editar/borrar de
   44px), el handle quedaba pegado arriba en vez de centrado
   verticalmente en la fila (reportado con captura: el handle se ve
   mas alto/desalineado que el resto). Se pisa top:0 con la tecnica de
   auto-centrado (top:50% + translateY(-50%)), independiente de cuanto
   mida .dd3-content. */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .dd3-handle {
    width: 32px;
    height: 46px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: grab;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .dd3-handle:before {
    content: '\283F';
    color: #B4B7BD;
    /* Antes 16px -- se veia chico/tenue comparado con el resto de los
       iconos de la fila, ya agrandados (pedido explicito: "agrandar el
       icono de drag & drop... segun el tamano que esta seteado en el
       Patron SNEAT"). */
    font-size: 22px;
    top: 50%;
    transform: translateY(-50%);
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .dd3-content {
    height: auto;
    min-height: 44px;
    padding: 6px 8px 6px 46px;
    border: 0 none;
    border-bottom: 1px solid var(--pw-border-soft);
    background: #FFFFFF;
    background-image: none;
    display: flex;
    align-items: center;
    position: static;
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) li.dd-item:last-child .dd3-content {
    border-bottom: none;
}

body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__nombre {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
    color: #4B4B4B;
    font-size: 14px;
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__nombre i {
    flex: none;
    /* Heredaba el font-size:14px de .widgets-listado__nombre -- se veia
       chico comparado con el icono equivalente de las tablas SNEAT
       (main__icon dentro de .page-content__table-button, 18px, ver
       Productos). */
    font-size: 18px;
    color: var(--pw-gray-light);
}
/* Truncado con elipsis si el nombre es muy largo -- no debe desarmar la
   fila en pantallas angostas. */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__nombre-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__acciones {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: none;
}

/* Switch Activo: mismo componente button-toggle global, solo se le da
   aire para no chocar con los botones de al lado.
   El componente base (js/button-toggle/toggle.css) trae margin-top:7px
   pensado para su contexto clasico (alinearlo con texto en una celda
   de tabla) -- en la fila flex de SNEAT ese margen asimetrico (7px
   arriba, 0 abajo) descentraba el switch respecto al resto de los
   iconos/botones, que SI quedan centrados por align-items:center (el
   switch tambien es un flex item, pero centrar la CAJA con margen
   incluido no es lo mismo que centrar el switch en si -- reportado
   con captura de devtools, ~3.5px de diferencia medida). Se resetea
   a 0 para que el auto-centrado del flex padre funcione limpio. */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .button-toggle {
    margin-top: 0;
    margin-right: 4px;
}

/* Editar / Borrar: touch target minimo de 44px (a pedido del usuario),
   circular, mismo lenguaje que el resto de los listados SNEAT (patron 6).
   El icono adentro heredaba font-size:14px de mas arriba en el DOM --
   quedaba chico dentro de un circulo de 44px (pedido explicito:
   "agrandar los botones de edicion y borrado, segun el tamano que esta
   seteado en el Patron SNEAT" -- 18px es el tamano real del icono
   dentro de .page-content__table-button en Productos). */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-editar,
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 18px;
    padding: 0;
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
    filter: none;
    color: #8592A3;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-editar:hover,
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-editar:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar:hover,
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar:focus {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}
/* Borrar deshabilitado (widget de sistema): NO usa el atributo HTML
   "disabled" (ver comentario en Ordenable/Widgets.php -- rompe el
   tooltip en mobile), se simula con opacidad + cursor. */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar--disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar--disabled:hover,
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__btn-quitar--disabled:focus {
    background: transparent !important;
    color: #8592A3;
}

/* Ocultar controles clasicos que no se usan en SNEAT (checkbox de
   activo viejo -- se reemplaza por el switch de arriba, ya generado
   aparte por htmlRowSneat -- y el select de acciones mobile de
   htmlLine(), no usado por este modulo). */
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .col-checkboxes,
body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .dd-item-actions {
    display: none;
}

/* Bug real de drag & drop (reportado con captura): el clon flotante que
   sigue al cursor durante el arrastre (.dd-dragel) lo cuelga el plugin
   Nestable directo de <body>, AFUERA de #nestable -- ninguna regla de
   arriba (todas ancladas a "#nestable ...") le aplicaba durante el
   drag, asi que el clon caia al look crudo de nestable.css (sin fondo
   solido, 46px de alto en vez de los ~56px reales con los botones de
   44px) y el contenido de la fila de ABAJO se veia "a traves" del
   clon. Fix real: los selectores de toda esta seccion pasan de
   "#nestable X" a ":is(#nestable, .dd-dragel) X" (arriba), para que
   el clon reciba EXACTAMENTE el mismo estilo que la fila real en vez
   de duplicar cada regla.
   Placeholder (el hueco donde va a caer el item, .dd-placeholder):
   quedaba con el estilo demo del plugin (fondo celeste + borde
   punteado gris, sin relacion visual con las cards de SNEAT) --
   restyleado para que se vea como un hueco vacio consistente. */
body.pw-sneat.widgets--list #nestable .dd-placeholder {
    margin: 0;
    min-height: 44px;
    background: var(--pw-page-bg);
    border: 1px dashed var(--pw-border-input);
    border-radius: 8px;
}

@media (max-width: 767px) {
    body.pw-sneat.widgets--list :is(#nestable, .dd-dragel) .widgets-listado__acciones {
        gap: 0;
    }
}

/* ====================================================================
   SNEAT - Modal #modal-widget (alta/edicion de widget)
   El contenido interno (#modal-widget-body) es el form clasico
   (formulario.php, TODOS los tipos de widget) cargado por AJAX -- se
   reestiliza por CSS en vez de reconstruirse a mano (decision en
   SNEAT-PATTERNS.md). Mismas convenciones de chrome que
   #modal-mapa-marca (mapa.css) / #modal-crear-pregunta.
   ==================================================================== */

/* El modal completo (header+body+footer) se arma como columna flex con
   altura MAXIMA garantizada (94vh) -- antes el body tenia su propio
   max-height calculado a mano (calc(94vh - 120px), asumiendo header+
   footer = 120px) y si el alto real de esos dos era mayor (line-height,
   padding acumulado), el modal entero se salia por abajo del viewport
   ("no entra en una pagina del browser", reportado con captura). Con
   flex, header/footer se miden solos (flex:none) y el body absorbe TODO
   el resto del espacio disponible (flex:1, min-height:0 -- sin esto un
   flex item no se encoge por debajo de su contenido) y scrollea
   adentro -- el modal completo NUNCA puede superar max-height, sin
   importar cuanto midan header/footer en la practica. */
body.pw-sneat.widgets--list #modal-widget {
    display: flex;
    flex-direction: column;
    max-height: 94vh;
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
    /* Mas ancho (antes 640px): la relacion de aspecto angosta obligaba
       a mucho scroll vertical con formularios de varios campos --
       aprovechar mas el ancho disponible en desktop reduce esa altura. */
    width: 760px;
    max-width: calc(100vw - 32px);
    margin-left: -380px;
}
body.pw-sneat.widgets--list #modal-widget.in {
    top: 3vh;
    margin-top: 0;
}
body.pw-sneat.widgets--list #modal-widget .modal-header,
body.pw-sneat.widgets--list #modal-widget .modal-footer {
    flex: none;
}

body.pw-sneat.widgets--list #modal-widget .modal-header {
    background: #FFFFFF;
    border-bottom: 1px solid var(--pw-border-soft);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
}
body.pw-sneat.widgets--list #modal-widget .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
body.pw-sneat.widgets--list #modal-widget .modal-header .widgets-modal__title-icon {
    color: var(--pw-accent);
    font-size: 15px;
}
body.pw-sneat.widgets--list #modal-widget .modal-header .close {
    position: static;
    float: none;
    margin: 0;
    padding: 4px 6px;
    opacity: 0.6;
    color: #566A7F;
    text-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
body.pw-sneat.widgets--list #modal-widget .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger);
}

/* modal-dialog-scrollable: el body scrollea internamente si el form es
   mas alto que la pantalla (a pedido del usuario), header/footer fijos
   (flex:none arriba). flex:1 + min-height:0 es lo que le permite
   encogerse por debajo de su contenido natural y mostrar SU PROPIO
   scroll interno en vez de estirar el modal entero. overflow-x:hidden
   explicito: sin esto, cuando overflow-y es "auto" el eje X calcula
   "auto" tambien por default (no "visible") y CUALQUIER overflow
   horizontal de 1px agrega un scrollbar horizontal ademas del vertical
   -- confirmado en vivo con 2 scrollbars distintos en la misma
   pantalla (uno de .tab-content, ver mas abajo, y uno del body). */
body.pw-sneat.widgets--list #modal-widget .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
body.pw-sneat.widgets--list #modal-widget .widgets-modal__loading {
    text-align: center;
    padding: 40px 0;
    font-size: 22px;
    color: var(--pw-gray-light);
}

body.pw-sneat.widgets--list #modal-widget .modal-footer {
    background: #F8F8FC;
    border-top: 1px solid var(--pw-border-soft);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-align: right;
}
body.pw-sneat.widgets--list #modal-widget .modal-footer .widgets-modal__btn-guardar {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    color: #FFFFFF;
    text-shadow: none;
    filter: none;
    box-shadow: none;
}
body.pw-sneat.widgets--list #modal-widget .modal-footer .widgets-modal__btn-guardar:hover,
body.pw-sneat.widgets--list #modal-widget .modal-footer .widgets-modal__btn-guardar:focus {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
}
body.pw-sneat.widgets--list #modal-widget .modal-footer .widgets-modal__btn-cancelar {
    background: var(--pw-btn-secondary-bg);
    border-color: var(--pw-btn-secondary-border);
    color: #566A7F;
    box-shadow: none;
    text-shadow: none;
}
body.pw-sneat.widgets--list #modal-widget .modal-footer .widgets-modal__btn-cancelar:hover {
    background: var(--pw-btn-secondary-bg-hover);
}

/* El form real (formulario.php) trae su propia columna de ayuda
   (.span4, la EXTERNA que envuelve el <h4 class="widget-form-title">,
   hermana de .span8) y su propia barra de botones (.form-actions) --
   en el modal se ocultan por CSS (mismo criterio que Inicio/Paginas
   §83/93: el PHP sigue armando el HTML igual, solo cambia que se ve).
   Las acciones reales viven en el footer del modal.
   OJO: ".span4" es una clase generica de grilla Bootstrap 2 que TAMBIEN
   usan campos reales del form mas abajo (ej. formulario/ubicacion.php,
   el "Mostrar en popup automatico" de Suscripcion) -- un selector plano
   ".span4" los apagaba a todos por igual. Se acota con :has() a la
   UNICA .span4 que envuelve el titulo. */
body.pw-sneat.widgets--list #modal-widget-body .span4:has(.widget-form-title),
body.pw-sneat.widgets--list #modal-widget-body .form-actions,
body.pw-sneat.widgets--list #modal-widget-body .widget-form-title {
    display: none;
}
body.pw-sneat.widgets--list #modal-widget-body .span8 {
    width: 100%;
    float: none;
    margin-left: 0;
}
body.pw-sneat.widgets--list #modal-widget-body .row-fluid {
    margin-left: 0;
}
/* La miniatura de la foto del widget (formulario/foto.php) trae un
   style="width:NNNpx" INLINE con el ancho real de la imagen subida
   (formulario/configuracion.php calcula $imagen_ancho via
   getimagesize()) -- se sale del modal y fuerza scroll horizontal.
   Inline style gana contra CSS normal, hace falta !important. */
body.pw-sneat.widgets--list #modal-widget-body img,
body.pw-sneat.widgets--list #modal-widget-body .thumbnail {
    max-width: 100% !important;
    width: auto !important;
    height: auto;
}

/* .widget-sections como columna flex: permite reordenar VISUALMENTE
   las secciones con `order` sin tocar el orden real que arma
   formulario.php (mismo patron ya usado en Enlaces, ver seccion 86 de
   este doc) -- Titulo/Descripcion sube al tope (order:-1 mas abajo, en
   la regla de esa seccion especifica) a pedido del usuario, aunque en
   el PHP siga viniendo despues de Activo/Ubicacion/Contacto. */
body.pw-sneat.widgets--list #modal-widget-body .widget-sections {
    display: flex;
    flex-direction: column;
}

/* Secciones del form (widget-section): antes solo un divisor horizontal
   (padding + border-bottom), sin distincion visual entre "grupos" de
   campos -- en modales largos (Popup/Personalizado: Titulo+Descripcion,
   Nombre, URL, Imagen, Alineacion) quedaba una lista plana dificil de
   escanear. Ahora cada seccion es su propia card suave (mismo token
   --pw-page-bg que ya usa la caja "Visualizacion" de Contacto, ver mas
   abajo), separadas por gap real en vez de un simple borde. Las 3
   secciones con tratamiento propio quedan afuera via :has() (si no,
   se ve una caja adentro de otra caja):
   - #activo: sigue oculta (display:none, patron ya establecido).
   - #tabsItemIdiomas: ya tiene su propio recuadro "folder tabs".
   - .span3:has(>p>a) (Contacto): ya tiene su propia card "Visualizacion". */
body.pw-sneat.widgets--list #modal-widget-body .widget-section {
    background: var(--pw-page-bg);
    border: 1px solid var(--pw-border-soft);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
}
body.pw-sneat.widgets--list #modal-widget-body .widget-section:last-child {
    margin-bottom: 0;
}
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#tabsItemIdiomas),
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(.span3:has(> p > a)) {
    background: none;
    border: none;
    padding: 0;
}
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(.span3:has(> p > a)) {
    margin-bottom: 12px;
}
/* El switch Activo/Inactivo se saca del modal -- eso se administra
   siempre desde el listado (donde tiene que estar visible sin importar
   el tamaño de pantalla, a diferencia de un modal que puede no estar
   abierto). El checkbox real (formulario/activo.php) sigue en el DOM
   con su "checked" inicial intacto (refleja el estado actual del
   widget) y sigue viajando en el POST al guardar -- display:none NO
   excluye un campo del submit del form, solo el atributo "disabled" o
   sacarlo del DOM lo harian, asi que editar un widget nunca cambia su
   estado activo/inactivo sin querer. */
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#activo) {
    display: none;
}
/* Titulo/Descripcion (pw_item_tabs_idiomas): al tope del modal
   (order:-1). La agrupacion visual de tabs+contenido la da el patron
   "folder tabs" de #tabsItemIdiomas (mas abajo) -- sin wrapper propio
   encima, ya que el borde superior de la tab activa debe quedar pegado
   al filo de la seccion. */
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#tabsItemIdiomas) {
    order: -1;
    padding-top: 0;
}
/* "* Nombre" (formulario/nombre.php, solo widgets tipo Personalizado):
   pedido explicito de subirlo arriba de todo -- es el campo que
   identifica al widget en el listado, tiene mas sentido verlo primero
   que despues de Titulo/Descripcion. Mismo patron order (sin tocar el
   PHP), un nivel por encima del -1 de Titulo/Descripcion. */
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#nombre) {
    order: -2;
}
body.pw-sneat.widgets--list #modal-widget-body label {
    color: #566A7F;
    font-size: 13px;
    font-weight: 600;
}
/* Checkboxes (Activo, Mostrar telefono/WhatsApp/email/direccion, etc.)
   con look de switch SNEAT -- a pedido del usuario. Reskin CSS-only:
   siguen siendo <input type="checkbox"> reales dentro del <form>
   (mismo name, mismo comportamiento de POST), solo cambia como se ven
   -- NO es el componente pw_html_button_toggle() de los listados (ese
   dispara un AJAX inmediato al togglear, no sirve para un campo que se
   manda recien al guardar el formulario completo). */
body.pw-sneat.widgets--list #modal-widget-body label.checkbox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-weight: 400;
    color: #4B4B4B;
    cursor: pointer;
}
/* Varios label.checkbox seguidos (formulario/ubicacion.php: "Mostrar
   en el submenu"/"Mostrar en el pie"/etc.) quedaban pegados sin
   separacion entre filas -- los switches se veian superpuestos
   (reportado con captura, "Estan los switches pegoteado"). */
body.pw-sneat.widgets--list #modal-widget-body label.checkbox + label.checkbox {
    margin-top: 10px;
}
body.pw-sneat.widgets--list #modal-widget-body label.checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: none;
    width: 38px;
    height: 22px;
    margin: 0;
    border-radius: 11px;
    background-color: #c1bdbd;
    position: relative;
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease;
}
body.pw-sneat.widgets--list #modal-widget-body label.checkbox input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 0.15s ease;
}
body.pw-sneat.widgets--list #modal-widget-body label.checkbox input[type="checkbox"]:checked {
    background-color: var(--pw-accent);
}
body.pw-sneat.widgets--list #modal-widget-body label.checkbox input[type="checkbox"]:checked::after {
    left: 18px;
}
body.pw-sneat.widgets--list #modal-widget-body label.checkbox input[type="checkbox"]:focus {
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
}
body.pw-sneat.widgets--list #modal-widget-body input[type="text"],
body.pw-sneat.widgets--list #modal-widget-body input[type="url"],
body.pw-sneat.widgets--list #modal-widget-body textarea {
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    box-shadow: none;
    background-image: none;
    height: var(--pw-control-height);
    padding: 0 12px;
}
/* select SEPARADO de la regla de arriba: sneat-base.css ya le pone a
   TODO select bajo body.pw-sneat un chevron SVG propio
   (body.pw-sneat select:not([multiple])) -- si se le agrega
   background-image:none como al resto de los inputs, ese chevron
   global desaparece (reportado con captura: "Falta el chevron del
   Combobox"). Mismo border/radius/altura, sin tocar background-image. */
body.pw-sneat.widgets--list #modal-widget-body select {
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    box-shadow: none;
    height: var(--pw-control-height);
    padding: 0 12px;
}
body.pw-sneat.widgets--list #modal-widget-body textarea {
    height: auto;
    padding: 10px 12px;
}
body.pw-sneat.widgets--list #modal-widget-body input[type="text"]:focus,
body.pw-sneat.widgets--list #modal-widget-body input[type="url"]:focus,
body.pw-sneat.widgets--list #modal-widget-body textarea:focus,
body.pw-sneat.widgets--list #modal-widget-body select:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}
/* Todo dentro del modal respeta el ancho del contenedor -- sin esto,
   inputs/tablas/imagenes con un ancho intrinseco propio empujan el
   body y disparan el scroll horizontal de arriba. */
body.pw-sneat.widgets--list #modal-widget-body * {
    box-sizing: border-box;
    max-width: 100%;
}
/* Bootstrap 2 le pone overflow:auto a .tab-content por default (propio
   del framework, bootstrap.css:4245) -- crea un scroll horizontal
   PROPIO e independiente del scroll del modal-body apenas cualquier
   hijo se pasa por 1px, aunque el body en si no tenga overflow real.
   Confirmado en captura: una barra de scroll fina aparecia pegada
   justo debajo del campo Titulo (el borde inferior de .tab-content),
   separada de la barra de scroll real del modal-body. */
body.pw-sneat.widgets--list #modal-widget-body .tab-content {
    overflow: visible;
}
/* Espaciado consistente entre campos dentro de una seccion (escala de
   8px). */
body.pw-sneat.widgets--list #modal-widget-body .control-group {
    margin-bottom: 16px;
}
body.pw-sneat.widgets--list #modal-widget-body .control-group:last-child {
    margin-bottom: 0;
}

/* Tabs de idioma (#tabsItemIdiomas, pw_item_tabs_idiomas -- compartido
   por muchos modulos): patron "folder tabs" YA DEFINIDO en SNEAT para
   este mismo id (ver catalogo-producto-form.css, formulario de
   Productos) -- se replica tal cual en vez de inventar un diseño
   propio (pildoras segmentadas), a pedido del usuario ("ya en SNEAT
   habiamos definido solapas, revisa como hacemos las solapas de
   idiomas"). Tabs con borde/radio superior, la activa se funde con el
   panel blanco de abajo (border-bottom-color:transparent). */
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs {
    border-bottom: 1px solid #C0C4CC;
    margin-bottom: 0;
}
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li {
    float: left;
    margin: 0 4px -1px 0;
}
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li > a {
    border: 1px solid #C0C4CC;
    border-radius: 8px 8px 0 0;
    background-color: #F5F5F6;
    background-image: none;
    color: #697A8D;
    font-weight: 500;
    padding: 9px 16px;
    margin: 0;
    text-shadow: none;
    box-shadow: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li > a:hover,
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li > a:focus {
    border-color: #C0C4CC;
    background-color: #ECEEF2;
    color: var(--pw-accent);
}
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li.active > a,
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li.active > a:hover,
body.pw-sneat.widgets--list #modal-widget-body #tabsItemIdiomas.nav-tabs > li.active > a:focus {
    border: 1px solid #C0C4CC;
    border-bottom-color: transparent;
    background-color: #FFFFFF;
    color: #384551;
    font-weight: 600;
    cursor: default;
}
/* Panel de contenido (Titulo/Descripcion): pegado abajo de las tabs,
   sin el hueco que antes dejaba .nav-tabs con margin-bottom:20px
   (reportado con captura, "no dejar ese espacio"). */
body.pw-sneat.widgets--list #modal-widget-body #tabsItemContenidoIdioma.tab-content {
    border: 1px solid #C0C4CC;
    border-top: 0 none;
    border-radius: 0 0 8px 8px;
    background-color: #FFFFFF;
    padding: 16px;
}

/* Datos de contacto: agrupar los checkboxes de visibilidad en una caja
   titulada de 2 columnas (antes: lista vertical suelta, indistinguible
   del link de "editar"). Se usa :has() para acotar el selector SOLO a
   este grupo especifico (el unico .span3 del form que arranca con
   <p><a>...</a></p>, ver formulario/contacto.php) sin afectar el .span3
   de foto.php (un solo checkbox, estructura distinta). */
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) {
    /* Bootstrap 2 le da a .span3 un width fijo de ~23% del row-fluid --
       como es el UNICO hijo de esa fila, quedaba una caja angosta con
       un hueco enorme al lado (reportado con captura). Ocupa toda la
       fila disponible. */
    width: 100%;
    float: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 4px 16px;
    background: var(--pw-page-bg);
    border-radius: 8px;
    padding: 16px;
    /* Espacio para el titulo del ::before -- generoso porque en anchos
       angostos "Visualización" + el label uppercase puede envolver a
       2 lineas (confirmado en vivo: con menos padding se superponia
       con el boton de abajo). */
    padding-top: 40px;
    position: relative;
}
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a)::before {
    /* Texto corto (antes "Configuración de visualización") para que
       entre en una sola linea incluso en el ancho mas angosto del
       modal responsive. */
    content: "Visualización";
    position: absolute;
    top: 12px;
    left: 16px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pw-gray-light);
}
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) > p {
    grid-column: 1 / -1;
    margin: 0 0 8px;
}
/* "Editar datos de contacto": de link suelto a boton secundario, para
   distinguirlo con claridad de los checkboxes de configuracion (antes
   se confundian visualmente). */
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) > p > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pw-btn-secondary-bg);
    border: 1px solid var(--pw-btn-secondary-border);
    color: #566A7F;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) > p > a:hover {
    background: var(--pw-btn-secondary-bg-hover);
}
body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) label.checkbox {
    margin: 0;
}

/* Campo URL (formulario/url.php): el prefijo "https://"/formato venia
   como una linea de texto suelta arriba del input (2 <div> hijos de
   .controls en su propio row-fluid). Sin tocar el PHP: flexearlos en
   una sola fila para que el prefijo quede pegado al input como un
   addon real (mismo look que un input-group). */
body.pw-sneat.widgets--list #modal-widget-body #widget-url .controls {
    display: flex;
    align-items: stretch;
}
/* Bootstrap 2 le pone margin-left a TODO ".spanN" que no sea
   :first-child dentro de un .row-fluid (~2%, para el gutter de la
   grilla flotante) -- en flex ese margen quedaba como un hueco visible
   entre el addon "https://" y el input (reportado con captura,
   "Ajustar el espacio del HTTPS"). Se resetea explicitamente.
   TAMBIEN se resetea "width" (los hijos son .span1/.span11 o similar,
   con un % fijo de Bootstrap): ese width termina de raiz del bug mas
   grave, "el sector del https:// ocupa demasiado espacio" -- con
   flex-basis:auto heredando ese % Y el contenido ("https://" con
   white-space:nowrap) mayor a ese %, el navegador terminaba
   agrandando la caja del addon a >50% del campo en vez de ajustarse a
   su contenido real (medido en vivo: 107px de 203px totales). Con
   width:auto, flex-basis se calcula desde el contenido real -- el
   addon queda en ~63px (el ancho real de "https://" + padding) y el
   input se lleva el resto. */
body.pw-sneat.widgets--list #modal-widget-body #widget-url .controls > div {
    margin-left: 0;
    width: auto;
}
/* El addon quedaba 4px mas alto que el input (42px vs 38px): el <p>
   traia un style="line-height:40px" INLINE en formulario/url.php (el
   estilo en linea le gana a cualquier regla externa, sin importar
   especificidad -- por eso el line-height:normal de mas abajo nunca
   hizo nada). Se saco el inline del PHP (queda en la clase
   .widget-url-prefijo, con el mismo valor preservado para el modo
   clasico en formulario/css.php) y aca se fija una altura EXPLICITA
   compartida (--pw-control-height, la misma que ya usa el input) en
   vez de depender solo del stretch del flex padre -- box-sizing:
   border-box para que el border de 1px no sume alto extra. */
body.pw-sneat.widgets--list #modal-widget-body #widget-url .controls > div:first-child {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    height: var(--pw-control-height, 38px);
    box-sizing: border-box;
    background: var(--pw-page-bg);
    border: 1px solid var(--pw-border-input);
    border-right: none;
    border-radius: 8px 0 0 8px;
    padding: 0 8px;
    white-space: nowrap;
}
body.pw-sneat.widgets--list #modal-widget-body #widget-url .controls > div:first-child p {
    margin: 0;
    line-height: normal;
    color: var(--pw-gray-light);
    font-size: 13px;
}
body.pw-sneat.widgets--list #modal-widget-body #widget-url .controls > div:last-child {
    flex: 1 1 auto;
}
body.pw-sneat.widgets--list #modal-widget-body #widget-url input#url {
    height: var(--pw-control-height, 38px);
    box-sizing: border-box;
    border-radius: 0 8px 8px 0;
}
/* "* Nombre" / "* URL": asterisco de obligatorio, ahora envuelto en
   formulario/nombre.php y formulario/url.php en un <span
   class="pw-required-mark"> (antes texto plano pegado al label --
   coloreaba con ::first-letter, pero en url.php el asterisco es
   CONDICIONAL segun $url_requerido; sin el span, ::first-letter
   pintaba de rojo la "U" de "URL" cuando no es obligatoria). */
body.pw-sneat.widgets--list #modal-widget-body .pw-required-mark {
    color: var(--pw-danger, #FF3E1D);
    font-weight: 700;
}
/* Imagen (formulario/foto.php): sin foto cargada, el <input type=file>
   nativo quedaba sin ningun estilo SNEAT (boton "Elegir archivo" del
   navegador, contrastando con el resto del modal). ::file-selector-
   button restylea el boton nativo (soportado en el Chrome que corre
   el panel); el input en si tambien gana borde/radio acorde al resto
   de los controles.
   El boton nativo salia CORTADO arriba/abajo (reportado con captura):
   bootstrap.css trae "select, input[type=file] { height:30px;
   line-height:30px }" de base -- sumarle padding:8px (16px verticales)
   sin pisar esa altura fija dejaba solo ~14px de contenido real, muy
   poco para el boton nativo del sistema operativo. height:auto (en
   vez de un px fijo) deja que el input crezca segun su padding real,
   y line-height:normal evita que el 30px de Bootstrap fuerce texto/
   boton a una caja mas chica que su contenido. */
body.pw-sneat.widgets--list #modal-widget-body input[type="file"] {
    height: auto;
    line-height: normal;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--pw-border-input);
    border-radius: 8px;
    padding: 8px;
    font-size: 13px;
    color: var(--pw-gray-light);
    background: #FFFFFF;
}
body.pw-sneat.widgets--list #modal-widget-body input[type="file"]::file-selector-button {
    border: 1px solid var(--pw-border-input);
    border-radius: 6px;
    background: var(--pw-btn-secondary-bg);
    color: #566A7F;
    padding: 6px 12px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
body.pw-sneat.widgets--list #modal-widget-body input[type="file"]::file-selector-button:hover {
    background: var(--pw-btn-secondary-bg-hover);
}
/* La fila borrar+input-file (formulario/foto.php) usa span1+span4 --
   a diferencia de los inputs de texto, Bootstrap 2 NO fuerza
   width:100% en input[type=file], asi que con el span4 angosto (33%
   de una columna ya angosta) el boton nativo "Seleccionar archivo"
   quedaba con el nombre de archivo truncado. Se ensancha esa fila
   puntual sin tocar el PHP. */
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:has(#fichero_usuario) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:has(#fichero_usuario) > div {
    width: auto;
    float: none;
    margin-left: 0;
}
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:has(#fichero_usuario) > div:last-child {
    flex: 1 1 auto;
    min-width: 0;
}
/* Sin foto cargada, formulario/foto.php arma una primera fila vacia
   (span12 sin contenido, reservada para el thumbnail cuando SI hay
   foto) -- dejaba un hueco de aire antes del boton borrar+input file.
   Se oculta esa fila puntual (acotada a la seccion Imagen via
   :has(#fichero_usuario) -- OJO, sin ese scope el selector tambien
   matchea el span12 de formulario/url.php, que envuelve el campo URL
   completo, no un hueco vacio) cuando no tiene ningun .thumbnail
   adentro. */
body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:not(:has(.thumbnail)):has(> .span12:only-child) {
    display: none;
}

@media (max-width: 700px) {
    /* Mismo patron que #modal-mapa-marca: left/right simetricos en vez
       del margin-left negativo del modal base, que a este ancho queda
       mal calculado contra el "left" que ya pisa bootstrap-responsive. */
    body.pw-sneat.widgets--list #modal-widget {
        width: auto;
        left: 16px;
        right: 16px;
        margin-left: 0;
    }
    /* Los checkboxes de "Datos de contacto" en 2 columnas quedaban muy
       apretados (el texto de cada label envolvia a 2 lineas) en anchos
       chicos -- 1 sola columna a partir de aca. */
    body.pw-sneat.widgets--list #modal-widget-body .span3:has(> p > a) {
        grid-template-columns: 1fr;
    }
    /* Fila borrar+input-file: a este ancho ya no entra el boton borrar
       (44px) + el boton nativo "Seleccionar archivo" + el nombre del
       archivo en una sola fila sin que el navegador trunque el texto
       (reportado con captura, "Sale cortado") -- el input[type=file]
       no tiene forma de controlar esa elipsis via CSS (es texto
       renderizado por el navegador, no HTML nuestro), asi que se
       apila: el input pasa a ocupar el ancho completo de la card,
       libre del boton borrar al lado. */
    body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:has(#fichero_usuario) {
        flex-wrap: wrap;
    }
    body.pw-sneat.widgets--list #modal-widget-body .widget-section:has(#fichero_usuario) .row-fluid:has(#fichero_usuario) > div:last-child {
        flex-basis: 100%;
    }
}


/* toggle.css */

.button-toggle {
    width: 44px;
    height: 22px;
    margin-top: 7px;
    border-radius: 50px;
    display: inline-block;
    position: relative;
    background-color: #c1bdbd;
    cursor: pointer;
    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);    
}

.button-toggle--active {
    background-color: #2dcb70;
    cursor: not-allowed;
}

.button-toggle--active .button-toggle__round {
    left: 22px;
}

.button-toggle--disabled {
    background-color: #e8e3e3;
}

.button-toggle--disabled.button-toggle--active {
    background-color: #88c1a1;
}

.button-toggle__round {
    width: 22px;
    height: 22px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 50%;
    margin-top: -11px;  
    -moz-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -o-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    -webkit-transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);
    transition: 0.35s cubic-bezier(0.54, 1.6, 0.5, 1);    
    box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 0px 0 hsla(0, 0%, 0%, 0.04), 0 4px 9px hsla(0, 0%, 0%, 0.13), 0 3px 3px hsla(0, 0%, 0%, 0.05);    
}

.button-toggle--disabled .button-toggle__round {
    background-color: #f0ecec;
    cursor: not-allowed;
}

.button-toggle .button-toggle__value {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.button-toggle--disabled .button-toggle__value {
    cursor: not-allowed;
}

/* check.css */

.button-check {
    color: #AAAAAA;
    width: 18px;
    height: 18px;
    font-size: 18px;
    display: inline-block;
    position: relative;
}

.button-check .button-check__input {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.button-check--active.button-check--destacado {
    color: #facc15;
}

.button-check--active.button-check--nuevo {
    color: #2196f3;
}


/* star.css */

.button-star {
    color: #AAAAAA;
    width: 18px;
    height: 18px;
    font-size: 18px;
    display: inline-block;
    position: relative;
}

.button-star .button-star__checkbox {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    z-index: 9;
    cursor: pointer;
}

.button-star--active.button-star--destacado {
    color: #facc15;
}


/* print.css */

#print-container {
    display: none;   
}

@media print {   
    
    /* size: auto is the initial value */
    /* margin: this affects the margin in the printer settings */
    @page {
        size: auto;
        margin: 10mm;
    }

    /* margin: this affects the margin on the html before sending to printer */
    html {
        background-color: #FFFFFF; 
        margin: 0mm;
        height: auto;
    }

    * {
        /* sin esto no se imprimen los colores de fondo */
        color-adjust: exact;  
        -webkit-print-color-adjust: exact; 
        print-color-adjust: exact;
    }     
    
    body {
        margin: 0mm 0mm 10mm 0mm; 
        height: auto;
    }
    
    .navbar,
    .main {
        display: none;
    } 
    
    #print-container {
        background: white;
        box-sizing: border-box;
        display: block;
        width: 100%;
        font-size: 12px;
        font-family: Georgia, "Times New Roman", Times, serif;        
    }
    
    #print-container * {
        box-sizing: border-box;
        padding: 0px;
        margin: 0px;                
    }  
    
}