@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* ==================================================================== */
/* Tokens de diseno del panel (acento SNEAT violeta). Fuente unica de    */
/* verdad: cambiar --pw-accent cascadea a todo lo que lo referencia.     */
/* ==================================================================== */
:root {
    --pw-accent: #696CFF;
    --pw-accent-hover: #5a5fe0;
    --pw-accent-soft: rgba(105, 108, 255, 0.12);
    --pw-danger: #ff3e1d;
    --pw-danger-soft: rgba(255, 62, 29, 0.12);
    --pw-gray-light: #646e78; /* gris claro estandar SNEAT: muted, captions, iconos */

    /* --- Bordes y superficies (sistema de nombres para "cambiar el borde de X") --- */
    --pw-border-card: #dddddd;   /* borde de tarjetas: filtro-card y stat-cards (counters) */
    --pw-border-input: #c6c6c6;  /* borde de inputs, selects, textareas y fieldsets */
    --pw-divider: #D9DEE3;       /* líneas divisorias: bordes inferiores de thead y separadores */
    --pw-border-soft: #EBEEF0;   /* borde sutil: separadores entre filas de tabla, cards suaves */
    --pw-thead-bg: #E7E9F0;      /* fondo del encabezado de tablas (más oscuro que el fondo general) */
    --pw-page-bg: #F5F6FA;       /* fondo general de la página */
    --pw-text-strong: #384551;   /* texto primario / encabezados */

    /* --- Botón secundario (gris genérico unificado: Borrar filtros, etc.) --- */
    --pw-btn-secondary-bg: #E8EAEF;        /* fondo gris, visible sobre cards blancas */
    --pw-btn-secondary-bg-hover: #DCDFE6;  /* hover un poco más oscuro */
    --pw-btn-secondary-border: #cfd3da;    /* borde del botón secundario */

    /* --- Altura unificada de controles (inputs, selects, botones de filtro/toolbar) --- */
    --pw-control-height: 38px;

    /* --- Colores semánticos de notificación (toasts) --- */
    --pw-toast-success:    #28C76F;
    --pw-toast-success-bg: #E8FAF0;   /* verde claro sólido */
    --pw-toast-error:      #EA5455;
    --pw-toast-error-bg:   #FDEAEA;   /* rojo claro sólido */
    --pw-toast-warning:    #FF9F43;
    --pw-toast-warning-bg: #FFF3E0;   /* naranja claro sólido */
    --pw-toast-info:       #00CFE8;
    --pw-toast-info-bg:    #E0F7FA;   /* celeste claro sólido */
}

html {
    height: 100%;
}

body {
    color: #2C3357;
    background-color: #FFFFFF;  /*#fafbfe*/ 
    padding-left: 0px;
    padding-right: 0px;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

a {
    color: #3b82f6;
}

select, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-inputinput[type="text"] 
{
    height: 40px;
}

/* input add-on: */
.input-append.input-block-level {
    display: table; 
}
.input-append.input-block-level .add-on {
    display: table-cell;
    width: 16px;
    line-height: 1;
    vertical-align: middle;
}
.input-append.input-block-level > input {
    box-sizing: border-box; 
    display: table;
    min-height: inherit;
    width: 100%;
}
.input-append.input-block-level > input {
    border-right: 0;
}



.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

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

.dd3-handle::before {
    text-shadow: -1px -1px 1px rgba(255, 255, 255, 60%);
}

.jcrop-holder {
    background-color: #FFFFFF;
    background-image: url('images/bg-transparency.png');
}

/* El resaltado del tour guiado vive ahora en css/tutorial.css.

   Aca se pintaba el elemento resaltado de blanco con color negro forzado. En la
   UI moderna la barra superior es violeta con texto blanco y sus hijos ganan por
   especificidad, asi que la regla dejaba texto blanco sobre fondo blanco: el
   elemento resaltado desaparecia (se veia un recuadro blanco vacio).

   El reemplazo no toca ningun color: marca el elemento con un anillo. */


/*
Esto permite que los popovers dentro de un accordion abierto no aparezcan recortados.
*/
#pw-emarketing-publicaciones .accordion-body.in {
    overflow: visible;
}



footer {
    background-color: #F5F5F5;
}

#panel-right {
    /*background-color: #FFFFFF;*/
    border: 0 none;
    padding-left: 0px;
    padding-right: 0px;
}

.sidebar-nav { padding: 0; }

form {
    margin: 0px;
}

.page-header {
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 14px;
}

.page-header h3 {
    margin: 0px;
}

label {
    margin-bottom: 0px;
}

label.disabled {
    cursor: default;
    opacity: 0.65;
}

.modal .well {
    padding: 19px;
}

#thumbnail-image-list img {
    max-height: 200px;
}

/* 
Para poder mostrar datepickers dentro de ventanas modales, es necesario asignarle
un valor de z-index mayor al de la clase .modal
*/
.datepicker.dropdown-menu {
    z-index: 1151 !important;
}

.thumbnail, .thumbnail label, .thumbnail input {
    font-size: 12px;
}

.table input, .table select, .table textarea,
.thumbnail .btn-group input, 
.controls select, .controls textarea, .controls input {
    margin-bottom: 0px;
}

.table .pw-row-search-filters th {
    vertical-align: top;
}

.table .pw-row-search-filters .pw-search-filter-date-to {
    margin-left: 4px;
}

/* 
Alinear de igual forma todas las celdas de una tabla. Aplicar la clase en un
contenedor de celdas como <table>, <tbody>, etc.
*/
.pw-table-align-left th,   .pw-table-align-left td   { text-align: left; } 
.pw-table-align-center th, .pw-table-align-center td { text-align: center; } 
.pw-table-align-right th,  .pw-table-align-right td  { text-align: right; } 
.pw-table-align-top th,    .pw-table-align-top td    { vertical-align: top; }
.pw-table-align-middle th, .pw-table-align-middle td { vertical-align: middle; }
.pw-table-align-bottom th, .pw-table-align-bottom td { vertical-align: bottom; }

.thumbnail .btn-group input[type="checkbox"] {
    margin: 4px;
}

.thumbnail input[type="text"] { /* input Orden en thumbnails de videos */
    padding: 0px 4px;
    min-height: 20px;
    height: 38px;
}

.form-actions {
    padding: 20px 0px 0px 0px;
    border-top: 1px solid #E3E3E3;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    background-color: transparent;
}

form .form-actions,
.well .form-actions { /* remover el espacio extra que se crea cuando se combinan estas clases en un formulario */
    margin-bottom: 0px;
}

.thumbnail .btn-toolbar {
    margin-bottom: 0px;
}

.nav-list > li > a, .nav-list .nav-header {
    border-bottom: 1px solid #DDDDDD;
}

.nav-list .nav-header .btn-edit {
    float:right; 
    margin:0px; 
    padding:0px; 
    border:0px;
}

td .alert {
    margin-bottom: 0px;
}

.pw_hide { display:none; }

/* Botones share */
.pw_share { margin: 0px; /*overflow: auto;*/ }

.pw_share li { display: block; float: left; padding: 0 5px 0 0; }

/* Botón compartir por email */
.pw_share_email_button {
    display: inline-block;
    line-height: 18px;
    padding: 0px 3px; 
    background-color: #eeeeee;
    border:1px solid #ccc; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* IE10+ */
    background: linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

.pw_share_email_button a {
    color: #000000;
    font-size: 13px;
    background: url(images/email.png) no-repeat;
    padding-left: 20px;
}

.pw_share_email_button:hover { border-color: #aaaaaa; }

/* Botón Google+ */
.pw_share_google div{ vertical-align: middle !important; }
/* el iframe bien chico para que no se deforme la página mientras se carga 
el botón, después este valor se sobreescribe automáticamente cuando el botón 
termina de crearse */
.pw_share_google iframe { height: 1px; }

/* Textos */

.pw-tooltip-help .badge {
    font-size: 10px;
    padding: 0px 5px;
}

.control-label {
    font-size: 12px;
}

.control-label .pw-tooltip-help {
    float: right;
}

/* 
texto secundario mostrado en un listado, formulario, etc.
se usa en combinación con alguna de las clases text-**** de Bootstrap.
*/
.pw_text { 
    font-size: 12px;
}
.pw_help_link {
    font-size: 12px;
}

.form-actions + .pw_help_link {
    display: inline-block;
    margin-top: 10px;
}

.pw_code { /* basado en el estilo que Bootstrap le da al tag <pre> */
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    font-size: 13px;
    line-height: 20px;
    margin: 0px;
    padding: 9.5px;
    /*white-space: pre-wrap;*/
    word-break: break-all;
    word-wrap: break-word;
    color: #333;
    font-family: Monaco,Menlo,Consolas,"Courier New",monospace; 
}
.pw_tal { text-align: left !important; }
.pw_tar { text-align: right !important; }
.pw_tac { text-align: center !important; }
.pw_taj { text-align: justify !important; }
.pw_strong { font-weight: bold; }
.pw_precio { font-weight: bold; }
.pw_precio.span12.lead.label-info {padding: 0px; margin: 0px; color: #fff;}

/* Alturas mínimas */
.pw_mh40 { min-height: 120px; }
.pw_mh120 { min-height: 120px; }
.pw_mh150 { min-height: 150px; }

/* Margins */
.pw_ma {margin: auto; }
.pw_mt0 { margin-top: 0px !important; }
.pw_ml0 { margin-left: 0px !important; }
.pw_mr0 { margin-right: 0px !important; }
.pw_mb0 { margin-bottom: 0px !important; }
.pw_mt5 { margin-top: 5px !important; }
.pw_ml5 { margin-left: 5px !important; }
.pw_mr5 { margin-right: 5px !important; }
.pw_mb5 { margin-bottom: 5px !important; }
.pw_mt10 { margin-top: 10px !important; }
.pw_ml10 { margin-left: 10px !important; }
.pw_mr10 { margin-right: 10px !important; }
.pw_mb10 { margin-bottom: 10px !important; }
.pw_mt15 { margin-top: 15px !important; }
.pw_ml15 { margin-left: 15px !important; }
.pw_mr15 { margin-right: 15px !important; }
.pw_mb15 { margin-bottom: 15px !important; }
.pw_mt20 { margin-top: 20px !important; }
.pw_ml20 { margin-left: 20px !important; }
.pw_mr20 { margin-right: 20px !important; }
.pw_mb20 { margin-bottom: 20px !important; }

/* Paddings */
.pw_pt1 { padding-top: 1px !important; }
.pw_pl1 { padding-left: 1px !important; }
.pw_pr1 { padding-right: 1px !important; }
.pw_pb1 { padding-bottom: 1px !important; }
.pw_pt10 { padding-top: 10px !important; }
.pw_pl10 { padding-left: 10px !important; }
.pw_pr10 { padding-right: 10px !important; }
.pw_pb10 { padding-bottom: 10px !important; }
.pw_pt18 { padding-top: 18px !important; }
.pw_pl18 { padding-left: 18px !important; }
.pw_pr18 { padding-right: 18px !important; }
.pw_pb18 { padding-bottom: 18px !important; }

/* Google Map */
.pw_mapa { height: 400px; overflow: hidden; width: 100%; }
.pw_mapa2 { height: 200px; overflow: hidden; width: 100%; }

/* Catálogo */
#pw_menu_categorias {
    margin-top:-3px;
    margin-bottom:0px;
}

#pw_menu_categorias ul {
    margin-top: -2px;
    margin-bottom: 2px;
}

#pw_menu_categorias a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom: 3px;
}

.nav-pills > li.pw_menu_level_1 > a,
.nav-pills > li.pw_menu_level_2 > a,
.nav-pills > li.pw_menu_level_3 > a {
    padding-top: 4px;
    padding-bottom: 4px;    
}

.nav-pills.nav-stacked > li.pw_menu_level_1 > a,
.nav-pills.nav-stacked > li.pw_menu_level_2 > a,
.nav-pills.nav-stacked > li.pw_menu_level_3 > a {
    margin-bottom: 0px;
}

.pw_article_quantity {
    width: 28px;
}

/* Listados */
.pw_list_article_header { margin: 5px; }
.pw_list_article_thumbnail { margin-left: 5px; margin-top: 5px; margin-bottom: 5px; }

/* Submenú */
#pw_submenu { margin-top: 10px; }
#pw_submenu div { margin-top: 10px; }
#pw_submenu div.well { padding: 7px; margin-bottom: 0px; }

/* Cabecera */
#pw_header {
    /*min-height: 150px;*/
    padding: 0px !important;
    overflow: hidden;
}

#pw_header.well {
    border: 0px;
}

#pw_header #pw_cabecera_imagen, #pw_header #pw_cabecera_secuencia {
    text-align: center;
}

#pw_cabecera {
    overflow: hidden;
    margin: 0px;
    width: 940px;
}

#pw_cabecera_titulo { 
    /*
    position: absolute;
    line-height: 80px;
    padding-left: 5px;    
    text-align: left;
    */
    position: relative;
    display: block;
    color: #FFFFFF;
    font-size: 80px;
    text-shadow: 2px 3px 2px black;
    z-index: 100;
    height: 0px;
    line-height: 1;
}

#pw_cabecera_slogan {
    /*
    line-height: 40px;
    margin-top: 100px;
    padding-left: 10px;
    position: absolute;
    text-align: left;
    */
    position: relative;
    display: block;
    color: #FFFFFF;
    font-size: 40px;
    text-shadow: 2px 3px 2px black;
    z-index: 99;
    height: 0px;
    line-height: 1;
}

#pw_cabecera_logo { 
    /*position: absolute;
    margin: 0px;
    width: 940px;*/
    position: relative;
    display: block;
    z-index: 98;
}

#pw_cabecera_flash, #pw_cabecera_secuencia {
    text-align: center;
}

/* Contenido */
#pw_container_1 {
    min-height: 1px; /* asegurar que se respete la plantilla cuando no hay contenido para mostrar */
}

/* Pie */
#pw_custom_footer {
    margin-top: 20px;
}

#fancybox-thumbs ul li img {
    left: 0 !important;
}

/* Google Search */
#cse-search-results { height: 600px; overflow: auto; }
#cse-search-results iframe { width: 100% !important; }

/* Mostrar una fila como desactivada */
div.pw_disabled_row,  
tr.pw_disabled_row td,
.pw_disabled_group, 
.pw_disabled_thumbnail
{
    background: none repeat scroll 0 0 #E9E9E9 !important;
    color: #BBBBBB !important;
    /*border: 1px solid #ddd !important;*/
}

.pw_disabled_row a:not(.btn),
.pw_disabled_group a:not(.btn) {
    color: #AAAAAA;
}

/*.pw_disabled_row a.btn-success,
.pw_disabled_group a.btn-danger {
    color: #FFFFFF;
}*/

.pw_disabled_thumbnail .btn, .pw_disabled_thumbnail img, .pw_disabled_thumbnail input[type="checkbox"] {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.pw_disabled_row input {
    color: #888888;
    background-color: #FAFAFA;
}

.pw_disabled_thumbnail input {
    color: #BBBBBB;
    background-color: #FAFAFA;
}

.pwError,
label.error,
.control-group.error .control-label, 
.control-group.error .help-block, 
.control-group.error .help-inline
{
    color: #b94a48;
}

input.error,
textarea.error,
th.error,
td.error {
    border-color: #b94a48;
    background-color: #f9dada;
}

th.error,
td.error {
    border: 1px solid #b94a48 !important;
}

form.well .g-recaptcha {
   padding: 10px;
}

/**** ***** ***** Bootstrap ***** ***** *****/
/* Alineación de textos: con !important para que funcione en tablas */
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }

/* Contenedores de productos, publicaciones, etc. */
article form {
    margin: 0px;
    padding: 0px;
}

article form .control-group {
    margin-bottom: 0px;
}

article.well {
  padding: 0px;
}
article div.well {
  padding: 5px;
}

.control-group .controls p {
    margin: 5px 0;
}

td input {
    margin: 0px;
}

td pre.pre-scrollable {
    margin: 0px;
    max-height: 75px;
}

.thumbnail .btn-toolbar .btn-group {
    vertical-align: top;
}

.well .page-header {
    margin-top: 0px;
}

article > .row > .span5 {
    margin-left: 0px;
}

.pw_pc_form_background {
    background-color: #FFFFFF;
}

.well .pw_mr5 .sliderbar {
    width: 180px;
}

.breadcrumb {
    font-size: 18px;
    padding: 8px;
}

.breadcrumb li:first-child {
    font-weight: bold;
}

.breadcrumb .imgTipoSeccion {
    vertical-align: top;
    margin-right: 5px;
}

h3 .imgTipoSeccion {
    vertical-align: middle;
    margin-right: 5px;
}

.pw_pc_modal {
    display:none;
    margin:0px;
    top:3%;
    left:2%;
    width:95%;
}

.pw_pc_modal_alert {
    display:none;
    margin: 0px;
    padding:4px;    
}

.pw_pc_seleccion_plantilla {
    border: 1px solid #DDDDDD;
    margin-bottom: 12px !important;
    font-size: 11px;
}

.active .pw_pc_seleccion_plantilla td {
    color: #FFFFFF;
}

.pw_pc_seleccion_plantilla .table-condensed th, .pw_pc_seleccion_plantilla .table-condensed td {
    padding: 0px;
}

.pw_pc_seleccion_plantilla .plantilla_cabecera {
    color: red;
}
.pw_pc_seleccion_plantilla .plantilla_menu_principal {
    color: green;
}
.pw_pc_seleccion_plantilla .plantilla_submenu {
    color: orange;
}
.pw_pc_seleccion_plantilla .plantilla_contenido_principal {
    color: blue;
}
.pw_pc_seleccion_plantilla .plantilla_pie {
    color: violet;
}

.mceContentBody {
    /* TinyMCE:
    Cuando se importan los estilos del sitio, no incluir las imágenes de fondo
    del body.
    */
    background-image: none !important;
}

/* Ordenar filas */
.dragRow {background-color: #FADA82;}
.dragRow td {
    -moz-box-shadow: 2px 6px 3px #AAAAAA; 
    box-shadow: 2px 6px 3px #AAAAAA; 
    -webkit-box-shadow: 2px 6px 3px #AAAAAA;
}
td.showDragHandle, 
.pw_disabled_row > td.showDragHandle {
     background-image: url(images/updown2.gif) !important;
     background-repeat: no-repeat !important;
     background-position: center center !important;
     cursor: move;
}

.col-edition, .col-inputs, .col-buttons, .col-checkboxes, .col-tipo {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    white-space: nowrap;
    float: right;
}
.col-inputs, .col-tipo {
    margin-top: 3px;
    margin-right: 10px;
}
.col-inputs, .col-edition {
    float: left;
}
.col-inputs {
    overflow: hidden;
}
.col-inputs .control-label {
    width: 50px;
}
.col-inputs .controls {
    margin-left: 0px;
}
.pw_multilang_row .col-inputs .controls {
    margin-left: 70px;
}
.col-inputs .control-group {
    margin-bottom: 5px;
}
.col-inputs .buttonStartEdition:hover {
    text-decoration: underline;
}
.col-inputs-open {
    height: 105px;
}
.col-inputs-close {
    height: 36px;
}
.col-inputs form {
    margin: 0px;
}
.col-edition {
    width:16px;
}

/* 
Popup de emarketing (vista previa) 
Popup de vistas de página (estadísticas) 
*/
#pw-popup-emarketing.modal,
#pw-popup-page-views.modal {
    left: 45%;
    top: 4%;
    width: 800px;    
}

#pw-popup-emarketing .modal-body {
    max-height: 380px;
    padding-bottom: 0px;
}

#pw-popup-emarketing .alert {
    margin-bottom: 0px;
}

#pw-popup-emarketing-send-message
{
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    padding: 4px 12px;
}

#pw-popup-emarketing-groups
{
    width: 100%;
    height: 20px;
    line-height: 20px;
    padding: 0;
}

.pw-btn-facebook {
  color: #ffffff;
  text-shadow: none;
  background-color: #4267b2;
  border-color: #4267b2;
  background-image: none;
}

.pw-btn-facebook:hover,
.pw-btn-facebook:focus,
.pw-btn-facebook:active {
  color: #ffffff;
  background-color: #365899;
  border-color: #365899;
}

#pw-popup-facebook-message {
    width: 512px;
    border: 1px solid #dddddd;
    box-shadow: none;
    padding: 0px;
}
    
#pw-popup-facebook-picture {
    height: auto;
    width: 100%;
}
    
#pw-popup-facebook-name {
    font-family: Georgia,serif;
    letter-spacing: normal;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
    margin-bottom: 5px;
    max-height: 110px;
    overflow: hidden;
    overflow-wrap: break-word;
    color: #1d2129;
}

#pw-popup-facebook-description {
    font-family: helvetica,arial,sans-serif;
    line-height: 16px;
    max-height: 80px;
    overflow: hidden;
    color: #1d2129;
    font-size: 12px;
    overflow-wrap: break-word;
}

#pw-popup-facebook-caption {
    padding-top: 9px;
    color: #90949c;
    font-size: 11px;
    overflow-wrap: break-word;
    line-height: 11px;
    text-transform: uppercase;
}

#pw-popup-facebook-container {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, 0 1px 4px rgba(0, 0, 0, 0.1);
    width: 512px;
}

#pw-popup-facebook-text-container {
    height: auto;
    margin: 10px 12px;
    padding-bottom: 10px;
}

#pw-popup-emarketing-facebook-config {
    width: 800px;
    margin-left: -400px;
}

#pw-popup-emarketing-facebook-config .datepicker {
    padding: 4px 10px;
}

@media (max-height: 600px) {
    .modal-body {
        max-height: 250px !important;
    }
}

@media (max-height: 400px) {
    .modal-body {
        max-height: 150px !important;
    }
}

/* Editor TinyMCE en pantalla completa */
.mce-fullscreen {
    top: 215px !important;
    z-index: 1000 !important;
}

.pw_table {
    display: table;
}

.pw_table_row {
    display: table-row;
}

.pw_table_cell {
    display: table-cell;
}


.pw_not_resizable {
    resize: none;
}

.pw_nombre_borrador {
    color: #777777;
}

.pw_etiqueta_borrador {
    color: #777777;
    font-style: italic;
}

/* íconos en filas de productos */

.pw_producto_fila_iconos {
    float: right;
    text-align: right;
}

.pw_producto_sin_stock {
    color: #b94a48;
    font-size: 12px; 
    margin-left: 6px;
}

.pw_producto_opiniones_pendientes {
    color: #b94a48;
    font-size: 12px;
    margin-left: 6px;
}

/* --- */

.text-bold { font-weight: bold !important; }

.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

.text-top { vertical-align: top !important; }
.text-middle { vertical-align: middle !important; }
.text-bottom { vertical-align: bottom !important; }



/* ESTADO DEL ABONO */
.pw_abono {
    padding: 20px;
}

.pw_abono_habilitado {
    color: #009E49;
    border: 1px solid #009E49;
    border-radius: 4px;
}

.pw_abono_por_vencer {
    color: #FF8C00;
}

.pw_abono_vencido {
    color: #E81123;
}

.pw_abono_suspendido {
    color: #68217A;
}

.pw_abono_gratis {
    color: #00188F;
}

.navbar .navbar-inner {
    padding: 0px;
    min-height: 32px;
    border: 0 none;
}

@media (max-width: 767px) {
    #descripcion_corta_1,
    #descripcion_corta_2 {
        margin-bottom: 16px;
    }
}

.row-foto-nombre {
    margin-bottom: 20px;
}

.row-foto-nombre .col_primera_foto {
    text-align: center;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
}

.tab-pane #descripcion_corta_1,
.tab-pane #descripcion_corta_2 {
    margin-bottom: 0;
}

.primera_foto_contenedor {
    display: table;
    width: 100%;
    height: 100%;
}

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

.primera_foto_contenedor:hover .plus {
    color: #DDDDDD !important;
}

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

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

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





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

.primera_foto {
    cursor: pointer;
    border-radius: 4px;
    background-color: #FFFFFF;
    width: 100%;
    height: 128px;
    padding: 10px;
    margin-bottom: 20px;
    display: table-cell;
    text-align: center; 
    vertical-align: middle;
}

.primera_foto img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;    
}

/*.primera_foto.sin_imagen {
    padding-bottom: 5px;
}*/

.primera_foto .bi {
    font-size: 80px;
    color: #555555;
}

@media (min-width: 767px) and (max-width: 1350px) {
    .primera_foto .bi {
        font-size: 60px;
    }
}


.pw_form_uploader {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e3e3;
}

.pw_form_uploader > ul {
    margin-left: 12px;
}



/***** BEM *****/



.button-bar {
    padding: 4px;
    /*border: 1px solid #E3E3E3;
    border-radius: 4px;*/
}

.button-bar--top {
    margin-top: 0px;
    margin-bottom: 20px;
}

.button-bar--bottom {
    margin-top: 20px;
    margin-bottom: 0px;
}

.button-bar--right {
    text-align: right;
}

.button-bar--row-col {
    padding: 0px;
    margin: 0px;
}

@media (max-width: 320px) {
    .button-bar--right {
        text-align: left;
    }
}

.button-bar--top .btn {
    margin-left: 4px;
}

.button-bar--bottom .btn {
    margin-right: 4px;
}

.button-bar--fixed-top {    
    position: fixed;
    right: 0px;   
    top: 54px;    
    margin: 0px;
    z-index: 700;    /* debe quedar por debajo de los dropdowns de la barra superior */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 5px;    
}

.main--width-notif-bar .button-bar--fixed-top {
    top: 88px;
}

.button-bar--fixed-top .btn:first-child {    
    margin-left: 0px;    
}

@media (max-width: 767px) {
    
    .button-bar--top {
        text-align: left;
    }
    
    .button-bar--top .btn {
        margin-left: 0px;
        margin-right: 0px;
        margin-bottom: 6px;
        width: 100%;
    } 
    
    .button-bar--top a.btn {
        /* para que tome correctamente el ancho 100% cuando el botón es un link */
        box-sizing: border-box;
    }     
    
    .button-bar--top .btnImportar  {
        display: none;
    }

    .button-bar--top .btnExportar  {
        display: none;
    }    
    
    .button-bar--fixed-top {
        display: none;
    }
}

.button-bar--no-margin {
    margin-top: 0px;
    margin-bottom: 0px;
}

.button-bar__buttons-save,
.button-bar__buttons-cancel,
.button-bar__buttons-print, 
.button-bar__buttons-vencimiento {
    display: inline;
}

@media (max-width: 600px) {

    .button-bar__buttons-save,
    .button-bar__buttons-print {
        margin-bottom: 10px;
    }        

    .button-bar__buttons-save,
    .button-bar__buttons-print {
        display: block;
    }
}

.routes-list {
    list-style: none;
    margin-left: 0px;
    margin-bottom: 30px;    
    padding-bottom: 10px;
    border-bottom: 1px solid #CCCCCC;
}

.routes-list__item {
    display: inline-block;
}

.routes-list__link,
.routes-list__title {
    margin-right: 6px;
    font-size: 16px;
}

.routes-list__divider {
    margin-right: 6px;
}

.menu {
    /* contenedor de un menú */
}

.menu__title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
}

.menu__item {
    display: block;
    color: #0088CC;
    background-color: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 4px;
    padding: 14px;
    margin-bottom: 14px;
    font-size: 14px;
}

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

.menu__item-icon {
    float: left;
    font-size: 20px;
    color: #000000;
}

.menu__item-title {
    font-weight: bold;
    margin-left: 20px;
}

.menu__item-description {
    display: block;
    color: #000000;
    margin-left: 40px;

}


#tabsItem {
    padding-top: 4px;
    padding-left: 20px;
    border-left: 1px solid #DDDDDD;
}

.pw_select_page_rows  {
    height: 30px;
    font-size: 12px;
    padding: 0px 4px;
    margin-bottom: 0px;
}

.nav > li > a:hover, 
.nav > li > a:focus {
    background-color: #d0e1f2;
}

@media (max-width: 767px) {
    .txt_info_ordenar_fotos {
        padding-top: 10px;
    }
}

.pw-button-copy {
    border: 0 none;
    background-color: #FFFFFF;
    color: #0088CC;
    float: right;
}

/* ==================================================================== */
/* Toggle de UI moderna (feature flag) - visible en ambos modos.        */
/* Usa id #navbar-top-menu para ganarle a los estilos del navbar BS2.   */
/*                                                                      */
/* Pildora solida en degrade violeta (el mismo acento de SNEAT) con un  */
/* glow que respira: sobre el navbar azul necesita color propio, no un  */
/* borde translucido, para leerse como boton y no como un link mas.     */
/* Reemplaza al efecto "spark" anterior (conic-gradient + 2 pseudo-     */
/* elementos): mismo lugar, look mas solido/llamativo con bastante      */
/* menos CSS. Selector largo = mismo boton dentro del navbar chico de   */
/* SNEAT (le gana al "background: none !important" que ahi se aplica a  */
/* todos los links).                                                    */
/* ==================================================================== */

#navbar-top-menu .pw-ui-switch,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0px 8px;
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 20px;
    background: linear-gradient(135deg, #8083FF 0%, #696CFF 55%, #5A5FE0 100%) !important;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(43, 33, 130, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    animation: pw-ui-glow 2.6s ease-in-out infinite;
}

#navbar-top-menu .pw-ui-switch .bi,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a .bi {
    display: inline-block;
    animation: pw-ui-sparkle 2.6s ease-in-out infinite;
}

#navbar-top-menu .pw-ui-switch:hover,
#navbar-top-menu .pw-ui-switch:focus-visible,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a:hover,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a:focus-visible {
    color: #FFFFFF;
    background: linear-gradient(135deg, #9497FF 0%, #7679FF 55%, #696CFF 100%) !important;
    box-shadow: 0 4px 14px rgba(43, 33, 130, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
    outline: none;
}

#navbar-top-menu .pw-ui-switch:active,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a:active {
    transform: translateY(0) scale(0.96);
    transition-duration: 0.06s;
}

@keyframes pw-ui-glow {
    0%, 100% { box-shadow: 0 2px 8px rgba(43, 33, 130, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
    50%      { box-shadow: 0 2px 14px rgba(43, 33, 130, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
}

@keyframes pw-ui-sparkle {
    0%, 100% { transform: rotate(0deg) scale(1); }
    50%      { transform: rotate(-15deg) scale(1.2); }
}

/* Ya esta en la UI moderna: el boton deja de ser una invitacion, asi que
   se aplaca (relleno tenue, sin degrade ni glow) pero se mantiene
   reconocible como el mismo control. */
#navbar-top-menu .pw-ui-switch--on,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a.pw-ui-switch--on {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: none;
    animation: none;
}

#navbar-top-menu .pw-ui-switch--on .bi,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a.pw-ui-switch--on .bi {
    animation: none;
}

#navbar-top-menu .pw-ui-switch--on:hover,
#navbar-top-menu .pw-ui-switch--on:focus-visible,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a.pw-ui-switch--on:hover,
body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a.pw-ui-switch--on:focus-visible {
    background: rgba(255, 255, 255, 0.28) !important;
    box-shadow: none;
    transform: none;
}

/* Accesibilidad: el boton esta siempre a la vista, asi que con movimiento
   reducido se apaga toda la animacion y queda el estado estatico. */
@media (prefers-reduced-motion: reduce) {

    #navbar-top-menu .pw-ui-switch,
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a,
    #navbar-top-menu .pw-ui-switch .bi,
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a .bi {
        animation: none;
        transition: none;
    }

}

/* --- Toggle de UI en pantallas chicas -------------------------------- */
/* Antes se ocultaba por debajo de 1200px y en mobile no habia forma de    */
/* cambiar de interfaz. Ahora se mantiene siempre visible y se achica a    */
/* una pastilla circular de solo icono, que entra sin desplazar al resto   */
/* del navbar ni generar scroll horizontal.                               */

@media (max-width: 1200px) {

    #navbar-top-menu .pw-ui-switch {
        margin: 0px 4px;
        padding: 0px;
        width: 30px;
        height: 30px;
        justify-content: center;
        border-radius: 50%;
        gap: 0;
    }

    /* Queda el icono solo; el texto sigue en el title del enlace. */
    #navbar-top-menu .pw-ui-switch span {
        display: none;
    }

    #navbar-top-menu .pw-ui-switch .bi {
        font-size: 15px;
        line-height: 1;
    }

}

/* ==================================================================== */
/* Pestanas planas SaaS/SNEAT - opt-in via body.pw-tabs-flat.           */
/* El id #tabs aporta especificidad para ganarle a css/tabs.css (BS2).  */
/* ==================================================================== */
body.pw-tabs-flat #tabs.nav-tabs {
    margin-bottom: 0;
    border-bottom: 1px solid var(--pw-border-soft);
}

body.pw-tabs-flat #tabs.nav-tabs > li {
    margin-bottom: -1px;
}

body.pw-tabs-flat #tabs.nav-tabs > li > a {
    margin-right: 4px;
    padding: 10px 18px;
    border: 1px solid #CCCCCC;
    border-radius: 8px 8px 0 0;
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    color: #8592A3;
    font-weight: 500;
    line-height: 22px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

body.pw-tabs-flat #tabs.nav-tabs > li > a:hover,
body.pw-tabs-flat #tabs.nav-tabs > li > a:focus {
    border-color: #CCCCCC;
    background-color: #FFFFFF;
    color: #566A7F;
}

body.pw-tabs-flat #tabs.nav-tabs > li.active > a,
body.pw-tabs-flat #tabs.nav-tabs > li.active > a:hover,
body.pw-tabs-flat #tabs.nav-tabs > li.active > a:focus {
    border: 1px solid var(--pw-border-soft);
    border-bottom-color: #FFFFFF;
    border-radius: 8px 8px 0 0;
    background-color: #FFFFFF;
    box-shadow: 0 -2px 6px -3px rgba(67, 89, 113, 0.18);
    color: var(--pw-accent);
    font-weight: 600;
    cursor: default;
}

body.pw-tabs-flat #tabsContents {
    border: 0 none;
}

/* ================================================================== */
/* Sprint 2a: Shell global SNEAT                                       */
/* Scoped a body.pw-sneat — regresion cero en modo clasico.           */
/* ================================================================== */

/* Fondo del area de contenido — mas claro que el clasico #ECEEF0 */
body.pw-sneat .main__right {
    background-color: #F5F6FA;
}

/* (Los estilos SNEAT del sidebar viven en css/sneat-sidebar.css) */

/* Breadcrumb / page-routes */
body.pw-sneat .main-right__page-header {
    margin-top: 12px;
    margin-bottom: 16px;
}

body.pw-sneat .page-routes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}

body.pw-sneat .page-routes__link {
    color: #566A7F;
    text-decoration: none;
}

body.pw-sneat .page-routes__link:hover {
    color: var(--pw-accent);
    text-decoration: none;
}

body.pw-sneat .page-routes__text {
    color: var(--pw-accent);
    font-weight: 600;
}

body.pw-sneat .page-routes__separator {
    color: #B0BAC5;
    font-size: 11px;
}

body.pw-sneat .page-routes__icon {
    color: #8592A3;
    margin-right: 2px;
}

/* h4 como page-header (modo sin breadcrumbs) */
body.pw-sneat h4.main-right__page-header {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin-top: 12px;
    margin-bottom: 16px;
}

/* ================================================================== */
/* Sprint 5a: Alerts / Empty-state SNEAT                              */
/* Scoped a body.pw-sneat — regresion cero en modo clasico.           */
/* ================================================================== */

/* Base: reset gradientes BS2, radio 8px, sin borde grueso */
body.pw-sneat .alert {
    background-image: none;
    border-radius: 8px;
    text-shadow: none;
    box-shadow: none;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 500;
    border-width: 0;
    border-left-width: 3px;
    border-style: solid;
}

/* Info — slate/azul (empty state) */
body.pw-sneat .alert-info {
    background-color: rgba(105, 108, 255, 0.08);
    border-left-color: var(--pw-accent);
    color: #566A7F;
}

body.pw-sneat .alert-info i {
    color: var(--pw-accent);
    margin-right: 6px;
}

/* Error */
body.pw-sneat .alert-error,
body.pw-sneat .alert-danger {
    background-color: var(--pw-danger-soft);
    border-left-color: var(--pw-danger);
    color: #9e2a1c;
}

body.pw-sneat .alert-error i,
body.pw-sneat .alert-danger i {
    color: var(--pw-danger);
    margin-right: 6px;
}

/* Éxito */
body.pw-sneat .alert-success {
    background-color: rgba(113, 221, 55, 0.10);
    border-left-color: #71DD37;
    color: #3D8E23;
}

body.pw-sneat .alert-success i {
    color: #71DD37;
    margin-right: 6px;
}

/* Advertencia */
body.pw-sneat .alert-warning {
    background-color: rgba(255, 180, 0, 0.10);
    border-left-color: #FFB400;
    color: #8A6400;
}

body.pw-sneat .alert-warning i {
    color: #FFB400;
    margin-right: 6px;
}

/* ================================================================== */
/* Sprint 5b: iziToast SNEAT                                          */
/* iziToast se monta en body — usar body.pw-sneat .iziToast           */
/* ================================================================== */

body.pw-sneat .iziToast {
    border-radius: 10px !important;
    box-shadow: 0 4px 20px rgba(67, 89, 113, 0.18) !important;
}

body.pw-sneat .iziToast > .iziToast-body .iziToast-title {
    font-weight: 600;
    font-size: 13px;
    color: #566A7F;
}

body.pw-sneat .iziToast > .iziToast-body .iziToast-message {
    font-size: 12px;
    color: #697A8D;
}

/* Info */
body.pw-sneat .iziToast.iziToast-color-blue {
    background: rgba(105, 108, 255, 0.06) !important;
    border-left: 3px solid var(--pw-accent) !important;
}

body.pw-sneat .iziToast.iziToast-color-blue .iziToast-icon {
    color: var(--pw-accent) !important;
}

body.pw-sneat .iziToast.iziToast-color-blue .iziToast-progressbar > div {
    background: var(--pw-accent) !important;
}

/* Éxito */
body.pw-sneat .iziToast.iziToast-color-green {
    background: rgba(113, 221, 55, 0.06) !important;
    border-left: 3px solid #71DD37 !important;
}

body.pw-sneat .iziToast.iziToast-color-green .iziToast-icon {
    color: #71DD37 !important;
}

body.pw-sneat .iziToast.iziToast-color-green .iziToast-progressbar > div {
    background: #71DD37 !important;
}

/* Error */
body.pw-sneat .iziToast.iziToast-color-red {
    background: rgba(255, 62, 29, 0.06) !important;
    border-left: 3px solid var(--pw-danger) !important;
}

body.pw-sneat .iziToast.iziToast-color-red .iziToast-icon {
    color: var(--pw-danger) !important;
}

body.pw-sneat .iziToast.iziToast-color-red .iziToast-progressbar > div {
    background: var(--pw-danger) !important;
}

/* Advertencia */
body.pw-sneat .iziToast.iziToast-color-yellow {
    background: rgba(255, 180, 0, 0.06) !important;
    border-left: 3px solid #FFB400 !important;
}

body.pw-sneat .iziToast.iziToast-color-yellow .iziToast-icon {
    color: #FFB400 !important;
}

body.pw-sneat .iziToast.iziToast-color-yellow .iziToast-progressbar > div {
    background: #FFB400 !important;
}

/* ==================================================================== */
/* Toolbar acciones masivas SNEAT — global para todos los listados      */
/* Scoped a body.pw-sneat — regresion cero en modo clasico.             */
/* ==================================================================== */

body.pw-sneat .table-actions--top {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid var(--pw-border-soft);
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    margin-bottom: 12px;
}

/* Select "Acciones masivas" y select de datos de accion */
body.pw-sneat .table-actions--top select {
    background-image: none;
    box-shadow: none;
    border-radius: 8px;
    border: 1px solid var(--pw-border-input);
    color: var(--pw-text-strong);
    font-size: 13px;
    padding: 5px 8px;
    height: var(--pw-control-height);  /* altura de control unificada */
    box-sizing: border-box;
    line-height: normal;
    max-width: 200px;
    flex-shrink: 1;
    min-width: 0;
}

body.pw-sneat .table-actions--top select:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

/* Botón Ejecutar (⊘) */
body.pw-sneat .table-actions--top > .btn,
body.pw-sneat .table-actions--top > button {
    background: transparent;
    background-image: none;
    border: 1px solid var(--pw-divider);
    border-radius: 6px;
    color: #697A8D;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    padding: 5px 12px;
    font-size: 13px;
    flex-shrink: 0;
}

body.pw-sneat .table-actions--top > .btn:hover,
body.pw-sneat .table-actions--top > button:hover {
    background-color: #F5F6FA;
    background-image: none;
}

/* ================================================================== */
/* Fix layout SNEAT: posición barra Guardar + sin marco de contenido  */
/* Scoped a body.pw-sneat — regresion cero en modo clasico.           */
/* ================================================================== */

/* Barra Guardar/Cancelar: top alineado a la altura real del navbar   */
/* (main__right usa padding-top: 60px — mismo valor aquí)             */
body.pw-sneat .button-bar.button-bar--fixed-top {
    top: 60px;
    /* Marco oscuro translucido alrededor de Guardar/Cancelar: es el
       mismo look del modo clasico (background rgba(0,0,0,.3) +
       border-radius de la regla base). Para que el marco ABRACE los
       botones hay que anular el width:100% que hereda de
       .button-bar--top; si no, se estira a todo el ancho y en vez de
       un recuadro queda una banda. */
    width: auto;
    max-width: calc(100vw - 24px);
    right: 12px;
    padding: 6px;
    box-sizing: border-box;
    /* line-height:0 en el contenedor: los botones son inline y la caja
       de linea les sumaba alto extra ABAJO, con lo que el marco quedaba
       desparejo arriba/abajo. Cada boton define su propio line-height. */
    line-height: 0;
    /* font-size:0 mata el ancho de los nodos de espacio en blanco que
       hay entre los botones inline del markup; si no, ese espacio se
       suma al ancho shrink-to-fit y el marco queda con mas aire de un
       lado que del otro. Cada boton fija su propio font-size. */
    font-size: 0;
}

/* Botones de la barra flotante: separacion SOLO entre botones. Con un
   margin-left parejo el primero tambien lo recibia y el marco quedaba
   con mas aire de un lado. font-size propio: el contenedor lo pone en 0
   (lo trae .btn de bootstrap, pero se deja explicito el vertical-align). */
body.pw-sneat .button-bar.button-bar--fixed-top .btn {
    margin: 0;
    vertical-align: middle;
    /* alto parejo: uno es <button> y el otro <a>, y diferian ~1.6px. */
    height: 36px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* display:inline-flex separa el icono y el texto en dos "flex items": el
   espacio en blanco del markup entre ellos se recorta (whitespace de borde
   de linea), asi que el icono queda pegado al texto sin este margen
   explicito. Global: unifica el look en TODOS los modulos que usan esta
   barra (Productos, Pedidos, etc), no solo a <=767px. */
body.pw-sneat .button-bar.button-bar--fixed-top .btn i {
    margin-right: 6px;
}

body.pw-sneat .button-bar.button-bar--fixed-top .btn + .btn {
    margin-left: 8px;
}

body.pw-sneat .main--width-notif-bar .button-bar--fixed-top {
    top: 94px; /* 60px navbar + 34px notif-bar */
}

/* ESTANDAR GLOBAL (SNEAT-PATTERNS.md #67): la barra Guardar/Cancelar
   arranca OCULTA y solo aparece cuando el form detecta un cambio real
   -- generalizado a TODO el panel, no solo Productos/Pedidos (que
   fueron los unicos con este mecanismo hasta ahora, cada uno con su
   propio CSS/JS duplicado, ya retirado). Opt-in por PRESENCIA: basta
   con que el <form> tenga la clase pw_watch_form_changes (el JS que la
   vigila vive en funciones.js) -- sin excepciones por modulo a mano. */
body.pw-sneat .pw_watch_form_changes .button-bar.button-bar--fixed-top {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
body.pw-sneat .pw_watch_form_changes .button-bar.button-bar--fixed-top.is-visible {
    display: block;
    opacity: 1;
}

/* La regla clasica (sin scope, arriba en este mismo archivo,
   @media(max-width:767px){.button-bar--fixed-top{display:none}}) mata
   la barra flotante de Guardar/Cancelar en TODOS los formularios SNEAT
   a <=767px, no solo en clasico -- ninguna regla de arriba fija
   "display" para este selector, asi que gana esa por ser la unica que
   toca esa propiedad. Bug real: en los formularios SIN
   pw_watch_form_changes la barra debe verse SIEMPRE (nunca oculta-
   hasta-cambios), tambien en mobile. :has() (ya usado en
   sneat-base.css, catalogo-producto-form.css, sneat-responsive.css)
   detecta la presencia del form vigilado sin depender de una lista de
   clases de modulo a mano -- si la pagina tiene un
   pw_watch_form_changes, esta regla no se mete y deja mandar al par
   display:none/is-visible de arriba. */
@media (max-width: 767px) {
    body.pw-sneat:not(:has(.pw_watch_form_changes)) .button-bar.button-bar--fixed-top {
        display: block;
    }
}

/* mismo gotcha, otra propiedad: la regla clasica sin scope
   .button-bar--top .btn{width:100%;margin-bottom:6px} (pensada para la
   barra apilada al pie en mobile) tambien pisa los botones de ESTA
   barra flotante, porque .button-bar--fixed-top SIEMPRE trae la clase
   .button-bar--top pegada (mismo div, dos roles). Con width:100% cada
   boton ocupa todo el ancho del recuadro flotante (~230px) y quedan
   apilados en vez de uno al lado del otro. Mismo fix, misma condicion
   :has() de arriba, para los formularios SIN pw_watch_form_changes. */
@media (max-width: 767px) {
    body.pw-sneat:not(:has(.pw_watch_form_changes)) .button-bar.button-bar--fixed-top .btn {
        width: auto;
        margin-bottom: 0;
    }
}

/* Y para los formularios CON pw_watch_form_changes: una vez que la
   barra se hace is-visible en mobile, tambien necesita el mismo reset
   de ancho (antes lo resolvia cada uno de Productos/Pedidos con su
   propio CSS de modulo -- Productos y Pedidos conservan ademas su
   propio ajuste fino de max-width/min-width/text-align, mas
   especifico, que convive sin conflicto con este reset generico). */
@media (max-width: 767px) {
    body.pw-sneat .pw_watch_form_changes .button-bar.button-bar--fixed-top.is-visible .btn {
        width: auto;
        margin-bottom: 0;
    }
}

/* Quitar border/fondo blanco del wrapper principal de contenido */
body.pw-sneat .main-right__page-content,
body.pw-sneat .main-right__page-content--with-border {
    border: 0 none;
    background-color: transparent;
    padding: 0;
}

/* Bloque de ayuda contextual — card SNEAT en lugar de border plano */
body.pw-sneat .main-right__page-help {
    border: 0 none;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.10);
    background-color: #FFFFFF;
}

/* ================================================================== */
/* Contenedor de stat-cards (counters) reutilizable entre módulos     */
/* ================================================================== */
body.pw-sneat .page-content__counters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    width: 100%;
}

body.pw-sneat .page-content__counters .counter {
    flex: 1 1 160px;
    max-width: 220px;
    min-width: 0;
    margin-right: 0;
    box-sizing: border-box;
}

/* ================================================================== */
/* Bordes de contraste unificados para todos los controles SNEAT      */
/* Aplica a inputs, selects, textareas y fieldsets en cualquier módulo */
/* ================================================================== */
body.pw-sneat input[type="text"],
body.pw-sneat input[type="email"],
body.pw-sneat input[type="tel"],
body.pw-sneat input[type="url"],
body.pw-sneat input[type="number"],
body.pw-sneat input[type="password"],
body.pw-sneat input[type="search"],
body.pw-sneat input[type="date"],
body.pw-sneat select,
body.pw-sneat textarea {
    border-color: #c6c6c6 !important;
}

body.pw-sneat fieldset {
    border-color: #c6c6c6 !important;
}

/* ================================================================== */
/* Encabezado de tabla (thead) unificado para todos los listados      */
/* Fondo gris algo más oscuro que el fondo general (#F5F6FA) para que  */
/* la barra de títulos no se mezcle ni con el fondo ni con las filas.  */
/* Los módulos con override propio (catálogo, contactos, colores...)   */
/* fijan el mismo valor; este global cubre listados sin override y los */
/* futuros.                                                            */
/* ================================================================== */
body.pw-sneat .page-content__table thead th,
body.pw-sneat .page-content__table thead td {
    background-color: #E7E9F0;
    border-bottom: 1px solid var(--pw-divider);
    color: #384551;
}

/* ================================================================== */
/* PATRÓN SNEAT — Filtro avanzado reutilizable (todas las pantallas)  */
/* ------------------------------------------------------------------ */
/* page-content__form-search.css (modo clásico) impone reglas que     */
/* rompen el layout SNEAT y que cada módulo venía parchando aparte:   */
/*   · .form-search__advanced select/input { height: 20px !important }*/
/*     -> aplasta los campos a una sola línea.                        */
/*   · los inputs/selects traen clases Bootstrap-2 (.span12) que      */
/*     fuerzan width ~1156px y revientan el grid b5-col (superpuestos)*/
/* Esto los neutraliza UNA sola vez para cualquier pantalla SNEAT.    */
/* ================================================================== */

/* Inputs de texto y selects simples del filtro avanzado: altura      */
/* normal y ancho contenido en su columna (anula .span12 de BS2).     */
body.pw-sneat .form-search__advanced input[type="text"],
body.pw-sneat .form-search__advanced select {
    height: 38px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Multi-select (size=N, p.ej. Estado del pago/envío): mostrar sus    */
/* filas en vez de quedar aplastado en 20-38px.                       */
body.pw-sneat .form-search__advanced select[multiple] {
    height: auto !important;
    min-height: 38px;
    padding: 4px 8px;
    overflow-y: auto;
}

/* Las columnas del grid b5 no deben estirarse por su contenido.      */
body.pw-sneat .form-search__advanced .b5-row > [class*="b5-col"] {
    min-width: 0;
}

/* Columnas de "Borrar filtros"/"Filtrar" (sin label, para que el botón     */
/* quede a la altura de los selects vecinos): el PHP les pone inline        */
/* style="align-content:end", pero esa columna nunca fue display:flex, y    */
/* aun siéndolo align-content no alinea un único item de una sola línea     */
/* (esa es align-items) -- quedaba sin efecto y el botón se veía pegado     */
/* arriba de la columna (que sí se estira a la altura de la fila por el     */
/* align-items:stretch por defecto de .b5-row). Mismo hack copiado en 11    */
/* pantallas del panel; se corrige una sola vez acá sin tocar el inline.    */
body.pw-sneat .form-search__advanced .b5-row > [class*="b5-col-"][style*="align-content"] {
    display: flex;
    align-items: flex-end;
}

/* Separación vertical entre filas del grid del filtro avanzado.      */
body.pw-sneat .form-search__advanced .b5-row + .b5-row {
    margin-top: 12px;
}

/* ------------------------------------------------------------------ */
/* Barra de búsqueda simple (input principal + lupa + botón Filtros).  */
/* Global para que cualquier listado con .form-search__search-bar la   */
/* herede (catálogo, contactos y futuros). El botón #btnFiltros pasa   */
/* de absoluto (modo clásico) a inline a la derecha del input.         */
/* ------------------------------------------------------------------ */
body.pw-sneat #formBuscar .form-search__search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat #formBuscar .form-search__search-bar > input[type="text"] {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    /* El input no reserva hueco para lupas absolute (modo clásico usa padding 40) */
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Lupa de búsqueda como botón inline a la derecha del input (igual que el
   #btnFiltros), no absolute dentro del input. Patrón unificado de la barra.
   Scopeado a la barra SIMPLE (.form-search__search-bar de catálogo/contacto y
   .pedidos-buscar__simple de ventas) — NO al botón "Filtrar" del avanzado, que
   también lleva clase .btnBuscar y quedaría blanco sobre blanco. */
body.pw-sneat #formBuscar .form-search__search-bar .btnBuscar,
body.pw-sneat #formBuscar .pedidos-buscar__simple .btnBuscar {
    position: static !important;
    width: auto !important;
    min-width: 40px;
    height: var(--pw-control-height) !important;  /* gana al <style> #btnBuscar (2 IDs) */
    box-sizing: border-box;
    margin-top: 0 !important;  /* anula .pedidos #formBuscar .btn { margin-top:20px } */
    padding: 0 12px;
    border: 1px solid var(--pw-border-input) !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--pw-text-strong);
    flex-shrink: 0;
}

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: var(--pw-text-strong);
    font-size: 13px;
    white-space: nowrap;
    flex-shrink: 0;
    background-color: #FFFFFF;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none;
}

body.pw-sneat #formBuscar #btnFiltros .fa {
    margin-right: 4px;
}

/* Indicador de "hay un filtro avanzado aplicado": el JS global
   (sneat_filtros.js) marca #btnFiltros con .pw-filtros-activos y auto-abre el
   panel. El botón queda teñido con el acento para que el usuario note que
   está viendo un listado parcial aunque luego colapse el panel. */
body.pw-sneat #formBuscar #btnFiltros.pw-filtros-activos {
    border-color: var(--pw-accent) !important;
    color: var(--pw-accent);
    background-color: var(--pw-accent-soft);
    font-weight: 600;
}

/* Selector "Mostrar N ítems": el line-height heredado (30px) descentraba el
   texto dentro del height 38px. line-height:normal lo centra verticalmente. */
body.pw-sneat .table-actions__select-page-size,
body.pw-sneat .pw_select_page_rows {
    line-height: normal;
}

/* ================================================================== */
/* ALTURA DE CONTROL UNIFICADA (--pw-control-height = 38px)            */
/* Todos los controles de filtro y toolbar comparten la misma altura  */
/* y box-sizing:border-box (para que padding/borde no la inflen).      */
/* Causaba discrepancias: input de búsqueda content-box daba 52px y    */
/* los <select> sin height fijo daban ~42px.                          */
/* ================================================================== */
body.pw-sneat .form-search input[type="text"],
body.pw-sneat .form-search__advanced input[type="text"],
body.pw-sneat .form-search__advanced select:not([multiple]),
body.pw-sneat .table-actions__select,
body.pw-sneat .pw_select_page_rows,
body.pw-sneat .form-search .btn,
body.pw-sneat .form-search__advanced .btn,
body.pw-sneat #btnFiltros,
body.pw-sneat .pw-btn-secondary,
body.pw-sneat .table-actions--top .btn {
    height: var(--pw-control-height);
    box-sizing: border-box;
    line-height: normal;
}

/* El combo "Acciones masivas" hereda width:140px de page-content__table.css
   (pensado para el modo clasico, sin scope) -- con el font-size/padding de
   SNEAT ese ancho corta la palabra "masivas" (reportado en Mapa, pero es
   la MISMA regla global que usa cualquier listado SNEAT con acciones
   masivas). El toolbar tiene lugar de sobra: se ensancha una sola vez
   aca en vez de por modulo. */
body.pw-sneat .table-actions__select-action {
    width: 170px;
}

/* Centrar el contenido de los botones (texto + icono) a la altura fija. */
body.pw-sneat .form-search .btn,
body.pw-sneat .form-search__advanced .btn,
body.pw-sneat #btnFiltros,
body.pw-sneat .pw-btn-secondary,
body.pw-sneat .table-actions--top .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ------------------------------------------------------------------ */
/* Botón secundario unificado (gris) para acciones no primarias:      */
/* Borrar filtros, y cualquier botón que deba distinguirse del fondo   */
/* sin competir con el primario (violeta). Reutilizable en cualquier   */
/* listado vía class="pw-btn-secondary".                              */
/* ------------------------------------------------------------------ */
body.pw-sneat .pw-btn-secondary {
    background-color: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
    box-shadow: none;
    text-shadow: none;
    border-radius: 8px;
    height: 38px;
    padding: 6px 14px;
    font-size: 13px;
    white-space: nowrap;
}

body.pw-sneat .pw-btn-secondary:hover,
body.pw-sneat .pw-btn-secondary:focus,
body.pw-sneat .pw-btn-secondary:active {
    background-color: var(--pw-btn-secondary-bg-hover);
    background-image: none;
    border-color: var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
    box-shadow: none;
}

/* El botón "Borrar filtros" generado por el helper (.btnLimpiar) hereda el
   mismo gris secundario, para unificar el color en todos los listados.
   !important porque la regla #formBuscar .btn-default (con ID) tiene mayor
   especificidad y forzaba fondo blanco. */
body.pw-sneat .form-search__advanced .btnLimpiar {
    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) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

body.pw-sneat .form-search__advanced .btnLimpiar:hover,
body.pw-sneat .form-search__advanced .btnLimpiar:focus,
body.pw-sneat .form-search__advanced .btnLimpiar:active {
    background-color: var(--pw-btn-secondary-bg-hover) !important;
    border-color: var(--pw-btn-secondary-border) !important;
    color: var(--pw-text-strong) !important;
}

/* ==========================================================================
   SNEAT — Botones de acción por fila (global, todos los listados)
   Estilo flat/icon: fondo transparente, color gris, hover con accent suave.
   Se aplica a .page-content__table-button--* generados por
   PW_PanelDeControl_Html_List::ActionsSingleRow (edit, images, videos,
   files, prices, stock, mlibre, favorites, private, etc.)
   Los módulos pueden hacer override si necesitan variante específica.
   ========================================================================== */

body.pw-sneat .page-content__table-button {
    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 .page-content__table-button:hover,
body.pw-sneat .page-content__table-button:focus {
    background: var(--pw-accent-soft) !important;
    color: var(--pw-accent);
}

body.pw-sneat .page-content__table-button--delete {
    color: var(--pw-gray-light);
}

body.pw-sneat .page-content__table-button--delete:hover,
body.pw-sneat .page-content__table-button--delete:focus,
body.pw-sneat .page-content__table-button--delete:active {
    background: var(--pw-danger-soft) !important;
    color: var(--pw-danger);
}

/* ==========================================================================
   SNEAT — Filas/items inactivos (global, todos los listados)
   Reemplaza el gris oscuro #E9E9E9 del modo clásico por el gris de fondo
   de página #f5f6fa, que resulta casi imperceptible y no interrumpe el scan
   visual. El texto queda más suave con opacity en lugar de color forzado.
   ========================================================================== */

/* Fila inactiva: SOLO se atenua el texto (estandar 21). El fondo gris
   #f5f6fa se pensó contra el fondo de pagina, pero los listados SNEAT
   viven dentro de cards BLANCAS: ahi la fila desactivada quedaba como
   una banda gris. Transparente hereda el fondo de la card (y deja
   funcionar el hover/zebra). */
body.pw-sneat div.pw_disabled_row,
body.pw-sneat tr.pw_disabled_row td,
body.pw-sneat .pw_disabled_group {
    background: transparent !important;
    color: inherit !important;
}

/* El thumbnail deshabilitado SI conserva su fondo: es un placeholder de
   imagen, no una fila. */
body.pw-sneat .pw_disabled_thumbnail {
    background: #f5f6fa !important;
    color: inherit !important;
}

/* ==========================================================================
   SNEAT — Modal de confirmación de borrado (#pw-sneat-confirm)
   ========================================================================== */

#pw-sneat-confirm { display: none; }

#pw-sneat-confirm.pw-confirm--visible {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.pw-confirm__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(67, 89, 113, 0.45);
}

.pw-confirm__dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.18);
    padding: 32px 28px 24px;
    width: 360px;
    max-width: calc(100vw - 32px);
    /* content-box (default) sumaria el padding (56px horizontales) POR
       ENCIMA de max-width, pasandose del viewport en mobile (medido:
       414px de ancho real en un viewport de 390px) -- con border-box el
       padding queda DENTRO de max-width, como asume el resto del patron
       "width: Npx; max-width: calc(100vw - 32px)" ya usado en el panel. */
    box-sizing: border-box;
    text-align: center;
}

.pw-confirm__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 62, 29, 0.12);
    color: var(--pw-danger);
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.pw-confirm__title {
    font-size: 18px;
    font-weight: 700;
    color: #384551;
    margin: 0 0 8px;
}

.pw-confirm__msg {
    font-size: 14px;
    color: #697A8D;
    margin: 0 0 24px;
    line-height: 1.5;
}

.pw-confirm__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.pw-confirm__btn {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.15s, box-shadow 0.15s;
}

.pw-confirm__btn--cancel {
    background: #F5F5F6;
    color: #697A8D;
}
.pw-confirm__btn--cancel:hover { background: #ECEEF2; }

.pw-confirm__btn--ok {
    background: var(--pw-danger);
    color: #FFFFFF;
}
.pw-confirm__btn--ok:hover {
    background: #e0300e;
    box-shadow: 0 4px 12px rgba(255, 62, 29, 0.35);
}

/* Tono neutro: para confirmar acciones reversibles que NO borran nada
   (ej. sacar una pagina del menu principal). El rojo + tacho del default
   sugiere destruccion y asusta de mas. Ver window.pwSneatConfirm(). */
#pw-sneat-confirm.pw-confirm--neutral .pw-confirm__icon {
    background: rgba(105, 108, 255, 0.12);
    color: var(--pw-accent);
}

#pw-sneat-confirm.pw-confirm--neutral .pw-confirm__btn--ok {
    background: var(--pw-accent);
}

#pw-sneat-confirm.pw-confirm--neutral .pw-confirm__btn--ok:hover {
    background: var(--pw-accent-hover);
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.35);
}

/* Tono warning: para avisar que una accion NO se puede completar todavia
   y que hay que destrabar algo antes. Ver window.pwSneatAlert(). */
#pw-sneat-confirm.pw-confirm--warning .pw-confirm__icon {
    background: rgba(255, 159, 67, 0.14);
    color: #FF9F43;
}

#pw-sneat-confirm.pw-confirm--warning .pw-confirm__btn--ok {
    background: #FF9F43;
}

#pw-sneat-confirm.pw-confirm--warning .pw-confirm__btn--ok:hover {
    background: #F08C2E;
    box-shadow: 0 4px 12px rgba(255, 159, 67, 0.35);
}

/* Modo aviso: un solo boton, no hay nada que cancelar. */
#pw-sneat-confirm.pw-confirm--alert .pw-confirm__btn--cancel {
    display: none;
}
/* Tercer boton "Guardar y salir" (ver window.pwSneatConfirmUnsaved()):
   color propio (accent), independiente del tono del modal -- no debe
   verse rojo/naranja como el boton "ok" en modo warning. */
.pw-confirm__btn--save {
    background: var(--pw-accent);
    color: #FFFFFF;
}
.pw-confirm__btn--save:hover {
    background: var(--pw-accent-hover);
    box-shadow: 0 4px 12px rgba(105, 108, 255, 0.35);
}

/* Modal de 3 botones (Cancelar / Descartar cambios / Guardar y salir):
   los textos son mas largos que "Cancelar"/"Si, borrar" -- el dialogo
   de 360px + flex:1 por boton quedaba apretado. Se ensancha el dialogo
   y se permite wrap si aun asi no entra (mobile). */
#pw-sneat-confirm.pw-confirm--3btn .pw-confirm__dialog {
    width: 420px;
}
#pw-sneat-confirm.pw-confirm--3btn .pw-confirm__actions {
    flex-wrap: wrap;
}
#pw-sneat-confirm.pw-confirm--3btn .pw-confirm__btn {
    flex: 1 1 auto;
    min-width: 100px;
    font-size: 13px;
    padding: 0 8px;
}

/* ==========================================================================
   SNEAT — Modal de formulario reutilizable (.pw-modal-sneat)
   Bootstrap 2 modal (.modal.hide, SIN fade — ver gotcha "modal fade no
   abre" en memoria) con el mismo look que los modales de alta/edición por
   módulo (ver #modal-crear-tamanio / #modal-crear-color). Pensado para
   modales chicos de 1-N campos, ej: renombrar una variante de catálogo.
   Agregar la clase .pw-modal-sneat al div raíz del modal para heredar todo.
   ========================================================================== */

body.pw-sneat .pw-modal-sneat {
    border-radius: 12px;
    overflow: hidden;
    border: 0 none;
    box-shadow: 0 8px 32px rgba(67, 89, 113, 0.20);
}

body.pw-sneat .pw-modal-sneat .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 .pw-modal-sneat .modal-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #566A7F;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat .pw-modal-sneat .modal-header h4 i {
    color: var(--pw-accent);
    font-size: 18px;
}

body.pw-sneat .pw-modal-sneat .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 .pw-modal-sneat .modal-header .close:hover {
    opacity: 1;
    color: var(--pw-danger, #EA5455);
}

body.pw-sneat .pw-modal-sneat .modal-body {
    background: #FFFFFF;
    padding: 20px 24px;
    max-height: calc(88vh - 120px);
    overflow-y: auto;
}

body.pw-sneat .pw-modal-sneat.in {
    top: 5vh;
    margin-top: 0;
}

body.pw-sneat .pw-modal-sneat .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 .pw-modal-sneat .pw-modal-sneat__field { margin-bottom: 16px; }

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

body.pw-sneat .pw-modal-sneat 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 .pw-modal-sneat input[type="text"]:focus {
    border-color: var(--pw-accent);
    box-shadow: 0 0 0 3px var(--pw-accent-soft);
    outline: none;
}

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

body.pw-sneat .pw-modal-sneat__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 .pw-modal-sneat__btn-cancelar:hover {
    background-color: #F5F6FA;
    background-image: none;
}

body.pw-sneat .pw-modal-sneat .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 .pw-modal-sneat .modal-footer .btnGuardar:hover,
body.pw-sneat .pw-modal-sneat .modal-footer .btnGuardar:focus,
body.pw-sneat .pw-modal-sneat .modal-footer .btnGuardar:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
    color: #FFFFFF;
}

/* ==========================================================================
   SNEAT — Botón "renombrar variante" (gear, secundario) en el toolbar de
   los listados de Tamaños/Colores. Mismo tratamiento visual en ambos
   módulos vía esta clase compartida.
   ========================================================================== */

body.pw-sneat .pw-btn-renombrar-variante {
    background-color: var(--pw-btn-secondary-bg);
    background-image: none;
    border: 1px solid var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
    text-shadow: none;
    filter: none;
    border-radius: 8px;
    box-shadow: none;
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

body.pw-sneat .pw-btn-renombrar-variante:hover,
body.pw-sneat .pw-btn-renombrar-variante:focus,
body.pw-sneat .pw-btn-renombrar-variante:active {
    background-color: var(--pw-btn-secondary-bg-hover);
    background-image: none;
    border-color: var(--pw-btn-secondary-border);
    color: var(--pw-text-strong);
    box-shadow: none;
}

/* ================================================================== */
/* SNEAT — Redesign completo de la barra superior                     */
/* ================================================================== */

/* ID selector: gana al gradiente Bootstrap navbar-inverse */
body.pw-sneat #navbar-top-menu {
    background-color: var(--pw-accent) !important;
    background-image: none !important;
    filter: none !important;
    border: 0 none !important;
    box-shadow: 0 2px 12px rgba(67, 89, 113, 0.20) !important;
}

/* .pw-navbar-small: flex container vertical-centered, 60px */
body.pw-sneat .pw-navbar-small {
    display: flex !important;
    align-items: center !important;
    min-height: 60px !important;
    padding: 0 16px !important;
    background-color: var(--pw-accent) !important;
    background-image: none !important;
}

/* Nav list: flex row (quita float de Bootstrap 2) */
body.pw-sneat .pw-navbar-small > ul.nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.pw-sneat .pw-navbar-small > ul.nav > li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 1px !important;
}

/* Logo: empuja todo el resto al extremo derecho */
body.pw-sneat #top-menu-logo-webered {
    margin-right: auto !important;
    padding-right: 12px !important;
}

/* Base de todos los links del nav: reset Bootstrap 2 */
body.pw-sneat .pw-navbar-small > ul.nav > li > a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    line-height: 1 !important;
}
body.pw-sneat .pw-navbar-small > ul.nav > li > a:hover,
body.pw-sneat .pw-navbar-small > ul.nav > li > a:focus {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Caret de Bootstrap 2: ocultar */
body.pw-sneat .pw-navbar-small .caret { display: none !important; }

/* Orden de items: logo (0) → UI switch → Tareas → Ayuda → Novedades → Tienda → Usuario */
body.pw-sneat #top-menu-logo-webered   { order: 0; }
body.pw-sneat #top-menu-ui-switch      { order: 1; }
body.pw-sneat .pw-menu-tareas-avance   { order: 2; }
body.pw-sneat #top-menu-ayuda          { order: 3; }
body.pw-sneat #top-menu-novedades      { order: 4; }
body.pw-sneat #top-menu-sitio          { order: 5; }
body.pw-sneat #top-menu-usuario        { order: 6; }

/* Resets de navbar.css clásico que interfieren en SNEAT */
body.pw-sneat .pw-navbar-small > ul.nav > li {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.pw-sneat #top-menu-usuario { width: auto !important; }
/* El li#top-menu-sitio clásico tiene background: #FFF — lo anulamos */
body.pw-sneat .pw-navbar-small #top-menu-sitio {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* ==================================================================== */
/* Navbar SNEAT compacto: evitar el desbordamiento horizontal.          */
/*                                                                      */
/* navbar.css oculta en pantallas chicas el menu de usuario (<=979px),  */
/* el logo (<=600px) y la ayuda (<=500px), pero son reglas sin          */
/* !important y el "display: flex !important" que SNEAT aplica a todos  */
/* los li del nav se las lleva por delante. Resultado: en SNEAT quedan  */
/* los 8 items visibles y el nav mide mas que la pantalla (311px de     */
/* exceso a 390px).                                                     */
/*                                                                      */
/* El corte va en 1300px y no en un breakpoint de mobile porque el      */
/* desborde tambien aparece entre 979 y 1200px, donde el menu lateral   */
/* fijo se come parte del ancho.                                        */
/*                                                                      */
/* Se compacta a icono en vez de ocultar (como hace el clasico con el   */
/* menu de usuario) para no perder el acceso a Cerrar sesion.           */
/* ==================================================================== */

@media (max-width: 1300px) {

    /* Se repite el camino completo del selector base de SNEAT y se le suma
       el id: si no, reglas del navbar clasico con !important le ganan al
       padding. Y box-sizing porque el enlace es content-box, asi que el
       padding se sumaria a los 36px en lugar de entrar dentro. */
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-sitio > a,
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-usuario > a,
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-ui-switch > a {
        box-sizing: border-box !important;
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        justify-content: center !important;
        border-radius: 50% !important;
        gap: 0 !important;
    }

    /* "Ir a mi tienda" es un nodo de texto suelto entre dos iconos, no
       se puede ocultar con un selector propio: se anula la tipografia
       del enlace y se restaura solo en el icono. */
    body.pw-sneat .pw-navbar-small > ul.nav > li#top-menu-sitio > a {
        font-size: 0 !important;
    }
    body.pw-sneat #top-menu-sitio > a > .bi {
        font-size: 16px !important;
    }
    body.pw-sneat #top-menu-sitio > a > .main__icon--enlace-externo {
        display: none !important;
    }

    /* Estos si tienen su texto en un span propio. */
    body.pw-sneat #top-menu-usuario > a > span,
    body.pw-sneat #top-menu-ui-switch > a > span {
        display: none !important;
    }

}

/* Mismos cortes que usa el navbar clasico, reaplicados con la fuerza
   necesaria para ganarle al display:flex de SNEAT. */
@media (max-width: 600px) {
    body.pw-sneat #top-menu-logo-webered {
        display: none !important;
    }
}

@media (max-width: 500px) {
    body.pw-sneat #top-menu-ayuda {
        display: none !important;
    }
}

/* Icon-only: ayuda y novedades */
body.pw-sneat #top-menu-ayuda > a,
body.pw-sneat #top-menu-novedades > a {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 16px !important;
}

/* "Ir a mi tienda": pill outlined */
body.pw-sneat #top-menu-sitio > a {
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 20px !important;
    padding: 0 14px !important;
    color: #fff !important;
    font-weight: 600 !important;
}
body.pw-sneat #top-menu-sitio > a:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.70) !important;
}

/* Tareas: chip sutil con porcentaje */
body.pw-sneat .pw-menu-tareas-avance > a {
    background: rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    padding: 0 14px !important;
}
body.pw-sneat .pw-menu-tareas-avance > a:hover {
    background: rgba(255, 255, 255, 0.22) !important;
}
body.pw-sneat .pw-menu-tareas-avance-porcentaje {
    color: #fff !important; /* override el inline style del PHP */
    font-weight: 700 !important;
    background-color: transparent !important; /* menu-barra-superior.css pone fondo blanco */
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Usuario: chip con avatar circle (sin borde propio -> el circulo del
   icono, mas abajo, ya aporta suficiente presencia visual; un borde extra
   alrededor de TODO el chip se veia como un aro doble sobre el avatar
   cuando el texto "Hola, X" esta oculto en mobile, ver Tier 2 mas abajo). */
body.pw-sneat #top-menu-usuario > a {
    padding: 0 12px 0 6px !important;
    border-radius: 20px !important;
}
body.pw-sneat #top-menu-usuario > a:hover {
    background: rgba(255, 255, 255, 0.10) !important;
}
body.pw-sneat #top-menu-usuario > a > i {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Dropdown menu: fondo blanco SNEAT */
body.pw-sneat #navbar-top-menu .dropdown-menu {
    background-color: #fff !important;
    border: 1px solid rgba(67, 89, 113, 0.12) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(67, 89, 113, 0.16) !important;
    padding: 6px !important;
    min-width: 200px !important;
    margin-top: 6px !important;
    /* Bootstrap 2 default abre el menu desde el borde IZQUIERDO del toggle
       hacia la derecha (left:0). El menu de usuario es el ultimo item del
       nav (extremo derecho de la barra), asi que ese menu casi siempre se
       sale de la pantalla. Se ancla al borde DERECHO del toggle en su lugar
       (crece hacia la izquierda), igual en todos los anchos. */
    left: auto !important;
    right: 0 !important;
}
/* La flechita de Bootstrap 2 es en realidad DOS triangulos superpuestos:
   ::before (mas grande, color de borde #ccc, hace de "sombra/borde") y
   ::after (1px mas chico, blanco, el relleno que se ve encima) -> juntos
   dan el efecto de flecha blanca con borde fino. Los dos se posicionan con
   left:9px/left:10px asumiendo que el menu abre hacia la derecha (left:0).
   Al anclar el menu a right:0 (arriba), el borde izquierdo del menu ya no
   coincide con el toggle. Corregir SOLO ::before dejaba a ::after en su
   posicion vieja -> DOS flechas visibles (una gris a la izquierda, huerfana;
   una blanca a la derecha, la correcta). Bootstrap ya resuelve este mismo
   caso para .dropdown-menu.pull-right con right:12px/13px en ::before/::after
   respectivamente (ver bootstrap.min.css) -> se replica scopeado a SNEAT en
   vez de agregar la clase pull-right al markup (que afectaria otros
   dropdowns fuera de SNEAT que usan la misma funcion PHP
   pw_submenu_cabecera_panel). */
body.pw-sneat #navbar-top-menu .dropdown-menu::before {
    left: auto !important;
    right: 12px !important;
}
body.pw-sneat #navbar-top-menu .dropdown-menu::after {
    left: auto !important;
    right: 13px !important;
}
body.pw-sneat #navbar-top-menu .dropdown-menu > li > a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    color: #566A7F !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-shadow: none !important;
    background: none !important;
    transition: background 0.12s ease, color 0.12s ease !important;
}
body.pw-sneat #navbar-top-menu .dropdown-menu > li > a:hover {
    background: rgba(105, 108, 255, 0.08) !important;
    color: var(--pw-accent) !important;
}
/* Este item NO es un link de navegacion como los demas (cursor:default,
   sin hover) -> tampoco debe heredar su layout de fila. El markup viene de
   clasico ("Usuario<br><small>email</small>"), pensado para apilarse con
   el <br>; pero el <a> padre hereda display:flex de la regla general de
   arriba ("...dropdown-menu > li > a { display:flex; align-items:center }"),
   y dentro de un flex row el <br> NO fuerza salto de linea: "Usuario" y el
   email quedaban lado a lado en una sola fila con white-space:nowrap
   heredado, sin wrap -> con un nombre/email largo se corta o desborda el
   ancho fijo del menu (min-width:200px, ver arriba). Fix: flex-direction
   column (apila los 2 "items" que arma el navegador a partir del <br>) +
   permitir wrap explicito en el email. */
body.pw-sneat #navbar-top-menu .dropdown-menu .pw-menu-usuario-email > a {
    cursor: default !important;
    color: #8592A3 !important;
    font-size: 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--pw-border-soft) !important;
    border-radius: 0 !important;
    margin-bottom: 4px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    white-space: normal !important;
}
body.pw-sneat #navbar-top-menu .dropdown-menu .pw-menu-usuario-email > a > small {
    display: block !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
}
body.pw-sneat #navbar-top-menu .dropdown-menu .pw-menu-usuario-email > a:hover {
    background: none !important;
    color: #8592A3 !important;
}

/* Ocultar el separador ::before del usuario (menu-barra-superior.css) */
body.pw-sneat #top-menu-usuario::before { display: none !important; }

/* Hamburger: estilo SNEAT */
body.pw-sneat #top-menu-boton {
    background: none !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}
body.pw-sneat #top-menu-boton:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}

/* ================================================================== */
/* SNEAT — Sistema de toasts propio (#pw-toast-container / .pw-toast) */
/* ================================================================== */

#pw-toast-container {
    position: fixed;
    top: 68px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.pw-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: 380px;
    background: transparent;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(67, 89, 113, 0.18);
    padding: 14px 14px 18px 16px;
    position: relative;
    overflow: hidden;
    pointer-events: all;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.pw-toast--in  { opacity: 1; transform: translateX(0); }
.pw-toast--out { opacity: 0; transform: translateX(40px); }

/* Borde izquierdo de color */
.pw-toast::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 10px 0 0 10px;
}

.pw-toast__icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}

.pw-toast__body {
    flex: 1;
    min-width: 0;
}

.pw-toast__msg {
    font-size: 13px;
    font-weight: 500;
    color: #384551;
    line-height: 1.45;
    display: block;
}

.pw-toast__close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: #8592A3;
    padding: 0 0 0 6px;
    align-self: flex-start;
    transition: color 0.15s;
}
.pw-toast__close:hover { color: #384551; }

/* Barra de progreso inferior */
.pw-toast__bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform linear;
    border-radius: 0 0 10px 10px;
}
.pw-toast__bar--running { transform: scaleX(0); }

/* Colores por tipo — todos referencian los tokens de :root */
.pw-toast--success { background: var(--pw-toast-success-bg); }
.pw-toast--success .pw-toast__icon  { color: var(--pw-toast-success); }
.pw-toast--success::before          { background: var(--pw-toast-success); }
.pw-toast--success .pw-toast__bar   { background: var(--pw-toast-success); opacity: 0.4; }

.pw-toast--error   { background: var(--pw-toast-error-bg); }
.pw-toast--error .pw-toast__icon    { color: var(--pw-toast-error); }
.pw-toast--error::before            { background: var(--pw-toast-error); }
.pw-toast--error .pw-toast__bar     { background: var(--pw-toast-error); opacity: 0.4; }

.pw-toast--warning { background: var(--pw-toast-warning-bg); }
.pw-toast--warning .pw-toast__icon  { color: var(--pw-toast-warning); }
.pw-toast--warning::before          { background: var(--pw-toast-warning); }
.pw-toast--warning .pw-toast__bar   { background: var(--pw-toast-warning); opacity: 0.4; }

.pw-toast--info    { background: var(--pw-toast-info-bg); }
.pw-toast--info .pw-toast__icon     { color: var(--pw-toast-info); }
.pw-toast--info::before             { background: var(--pw-toast-info); }
.pw-toast--info .pw-toast__bar      { background: var(--pw-toast-info); opacity: 0.4; }

/* ================================================================== */
/* SNEAT — Escritorio (pw-index-section cards)                        */
/* ================================================================== */

body.pw-sneat .pw-index-section {
    background: #FFFFFF;
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
    padding: 22px 24px;
    margin-bottom: 20px;
    color: var(--pw-text-strong);
}

body.pw-sneat .pw-index-titulo {
    font-size: 15px;
    font-weight: 700;
    color: var(--pw-text-strong);
    margin-top: 0;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--pw-divider);
    display: flex;
    align-items: center;
    gap: 8px;
}

body.pw-sneat .pw-index-titulo .fa {
    color: var(--pw-accent);
    font-size: 16px;
}

body.pw-sneat .pw-index-ampliar {
    font-size: 12px;
    font-weight: 500;
    color: var(--pw-accent);
    float: right;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
body.pw-sneat .pw-index-ampliar:hover {
    color: var(--pw-accent-hover);
    text-decoration: none;
}

/* Botones primarios dentro del Escritorio */
body.pw-sneat .pw-index-section .btn-primary {
    background-color: var(--pw-accent);
    border-color: var(--pw-accent);
    background-image: none;
    border-radius: 8px;
    box-shadow: none;
    text-shadow: none;
}
body.pw-sneat .pw-index-section .btn-primary:hover {
    background-color: var(--pw-accent-hover);
    border-color: var(--pw-accent-hover);
}

/* Fondo de la página del Escritorio */
body.pw-sneat #panel-right {
    background-color: var(--pw-page-bg);
}

/* Layout 2-columnas en el Escritorio SNEAT: las cards son full-width en
   su span pero el container las organiza en pares a partir de los bloques */
body.pw-sneat .pw-escritorio-grid {
    display: grid;
    /* minmax(0, 1fr) y no 1fr: '1fr' equivale a minmax(auto, 1fr), y ese
       'auto' impide que la columna baje de su min-content. Como el shell
       del panel es display:table / table-cell, que se dimensiona segun el
       contenido, el grid terminaba estirando el layout entero y generando
       scroll horizontal entre 979px y 1300px (el clasico no lo tiene). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    margin-bottom: 20px;  /* igual que .pw-index-section individual */
}

body.pw-sneat .pw-escritorio-grid .pw-index-section {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    body.pw-sneat .pw-escritorio-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ================================================================== */
/* SNEAT — Welcome card (primera sección del Escritorio)              */
/* ================================================================== */

/* La card ya tiene padding 22px 24px — lo neutralizamos para que el
   header vaya de borde a borde dentro del card container */
body.pw-sneat .pw-index-section:has(.pw-cuenta-welcome) {
    padding: 0;
    overflow: hidden;
}

body.pw-sneat .pw-cuenta-welcome__header {
    background: linear-gradient(135deg, var(--pw-accent) 0%, #8a8eff 100%);
    padding: 28px 28px 30px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    gap: 16px;
}

/* Círculos decorativos en el header */
body.pw-sneat .pw-cuenta-welcome__header::before {
    content: '';
    position: absolute;
    top: -50px; right: -30px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
body.pw-sneat .pw-cuenta-welcome__header::after {
    content: '';
    position: absolute;
    bottom: -70px; right: 80px;
    width: 150px; height: 150px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

body.pw-sneat .pw-cuenta-welcome__info {
    position: relative;
    z-index: 1;
}

body.pw-sneat .pw-cuenta-welcome__hi {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 6px;
    line-height: 1.3;
}

body.pw-sneat .pw-cuenta-welcome__sub {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.80);
    margin: 0;
    line-height: 1.5;
}

body.pw-sneat .pw-cuenta-welcome__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.18);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

body.pw-sneat .pw-cuenta-welcome__badge .fa {
    font-size: 10px;
}

body.pw-sneat .pw-cuenta-welcome__meta {
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: #FFFFFF;
}

body.pw-sneat .pw-cuenta-welcome__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--pw-page-bg);
    border: 1px solid var(--pw-border-card);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #566A7F;
}

body.pw-sneat .pw-cuenta-welcome__chip .fa {
    color: var(--pw-accent);
    font-size: 12px;
}

body.pw-sneat .pw-cuenta-welcome__link {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--pw-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s;
}
body.pw-sneat .pw-cuenta-welcome__link:hover {
    color: var(--pw-accent-hover);
    text-decoration: none;
}

/* ================================================================== */
/* SNEAT — Sección Tareas del Escritorio                              */
/* Overrides de tokens sobre los estilos inline del módulo.           */
/* El modo clásico (azul #3b82f6) queda intacto.                     */
/* ================================================================== */

/* Títulos de sección */
body.pw-sneat .tareas-section__title--pendientes {
    color: var(--pw-accent);
}
body.pw-sneat .tareas-section__title--completadas {
    color: var(--pw-toast-success);
}

/* Badge de conteo circular */
body.pw-sneat .tareas-section__count {
    background-color: var(--pw-accent-soft);
    color: var(--pw-accent);
}
body.pw-sneat .tareas-section__title--completadas .tareas-section__count {
    background-color: var(--pw-toast-success-bg);
    color: var(--pw-toast-success);
}

/* Cards de tarea */
body.pw-sneat .tarea-card {
    border: 1px solid var(--pw-border-card);
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(67, 89, 113, 0.06);
    gap: 16px;
}
body.pw-sneat .tarea-card:hover {
    border-color: var(--pw-accent);
    box-shadow: 0 4px 14px rgba(105, 108, 255, 0.14);
}

/* Card completada */
body.pw-sneat .tarea-card--completada {
    border-color: rgba(40, 199, 111, 0.28);
    background-color: rgba(40, 199, 111, 0.04);
}
body.pw-sneat .tarea-card--completada:hover {
    border-color: var(--pw-toast-success);
    box-shadow: 0 4px 14px rgba(40, 199, 111, 0.14);
}

/* Ícono de la tarea */
body.pw-sneat .tarea-card__icon {
    background: linear-gradient(135deg, var(--pw-accent) 0%, #8a8eff 100%);
    border-radius: 10px;
    width: 42px;
    height: 42px;
}
body.pw-sneat .tarea-card--completada .tarea-card__icon {
    background: linear-gradient(135deg, var(--pw-toast-success) 0%, #20a865 100%);
}

/* Título y descripción */
body.pw-sneat .tarea-card__title {
    color: var(--pw-text-strong);
    font-size: 14px;
    font-weight: 600;
}
body.pw-sneat .tarea-card__description {
    color: #697A8D;
    font-size: 13px;
}

/* Botones de acción */
body.pw-sneat .tarea-card__button {
    background-color: var(--pw-accent);
    border-radius: 8px;
    font-size: 13px;
    padding: 8px 14px;
    transition: background-color 0.15s;
}
body.pw-sneat .tarea-card__button:hover,
body.pw-sneat .tarea-card__button:focus {
    background-color: var(--pw-accent-hover);
    color: #FFFFFF;
    text-decoration: none;
}
body.pw-sneat .tarea-card__button--complete {
    background-color: var(--pw-toast-success);
}
body.pw-sneat .tarea-card__button--complete:hover {
    background-color: #20a865;
}

/* Badge "Completada" */
body.pw-sneat .tarea-card__badge {
    background-color: var(--pw-toast-success-bg);
    color: var(--pw-toast-success);
    border: 1px solid rgba(40, 199, 111, 0.30);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
}

/* Estado vacío (sin tareas pendientes) */
body.pw-sneat .tareas-empty {
    background: var(--pw-page-bg);
    border: 1px dashed var(--pw-border-card);
    border-radius: 10px;
    padding: 20px;
}
body.pw-sneat .tareas-empty__icon {
    color: var(--pw-accent-soft);
}

/* Barra de progreso del header (si se re-habilita) */
body.pw-sneat .tareas-header {
    background: linear-gradient(135deg, var(--pw-accent) 0%, #8a8eff 100%);
}
body.pw-sneat .tareas-progress__bar {
    background: linear-gradient(90deg, var(--pw-toast-success) 0%, #20a865 100%);
}

/* ================================================================== */
/* SNEAT — Modulo Configuracion (mod_configuracion.php)               */
/* Componentes genericos .cfg-* compartidos por TODOS los formularios */
/* de Configuracion (Diseno, Sitio, Tienda, Region, etc). Restyle de   */
/* bajo riesgo: solo color/borde/radio/sombra, sin tocar layout.      */
/* ================================================================== */
body.pw-sneat .cfg-container {
    border-bottom: 0 none;
    padding-bottom: 0;
    margin-bottom: 24px;
}
body.pw-sneat .cfg-header,
body.pw-sneat .cfg-title {
    color: var(--pw-text-strong);
    font-weight: 700;
}
body.pw-sneat .cfg-panel {
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.08);
}
body.pw-sneat .cfg-panel__title {
    color: var(--pw-text-strong);
}
body.pw-sneat .cfg-panel__text-info,
body.pw-sneat .cfg-panel__text {
    color: var(--pw-gray-light);
}
body.pw-sneat .cfg-menu__item {
    border: 1px solid var(--pw-border-card);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(67, 89, 113, 0.06);
    color: var(--pw-text-strong);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
body.pw-sneat .cfg-menu__item:hover,
body.pw-sneat .cfg-menu__item:focus,
body.pw-sneat .cfg-menu__item:active {
    border-color: var(--pw-accent);
    box-shadow: 0 4px 14px rgba(67, 89, 113, 0.14);
    color: var(--pw-accent);
}
body.pw-sneat .cfg-menu__item-icon {
    color: var(--pw-accent);
}
body.pw-sneat .cfg-routes-list {
    /* Breadcrumb propio del módulo Configuración (no usa .main-right__page-header
       genérico) — mismo margin-top que el patrón general para no quedar pegado
       al navbar. */
    margin-top: 12px;
    border-bottom: 1px solid var(--pw-divider);
}

/* ---------------------------------------------------------------- */
/* Pagina "Diseno > Logo" (form=logo): logo, logo redes, favicon.    */
/* Scopeado a .cfg-diseno-logo para no retocar .btn-primary/         */
/* .btn-success/.btn-danger en el resto del panel (uso muy amplio).  */
/* ---------------------------------------------------------------- */
body.pw-sneat .cfg-diseno-logo .cfg-panel {
    text-align: center;
}
body.pw-sneat .cfg-diseno-logo .pw-image-list {
    text-align: center;
}
body.pw-sneat .cfg-diseno-logo .btn-primary {
    background-color: var(--pw-accent);
    background-image: none;
    border-color: var(--pw-accent);
    border-radius: 8px;
    text-shadow: none;
    box-shadow: none;
}
body.pw-sneat .cfg-diseno-logo .btn-primary:hover,
body.pw-sneat .cfg-diseno-logo .btn-primary:focus {
    background-color: var(--pw-accent-hover);
    border-color: var(--pw-accent-hover);
}
body.pw-sneat .cfg-diseno-logo .btn-success,
body.pw-sneat .cfg-diseno-logo .btn-danger {
    background-image: none;
    border: 0 none;
    border-radius: 8px;
    text-shadow: none;
    box-shadow: none;
}
body.pw-sneat .cfg-diseno-logo .btn-success {
    background-color: var(--pw-toast-success);
}
body.pw-sneat .cfg-diseno-logo .btn-success:hover,
body.pw-sneat .cfg-diseno-logo .btn-success:focus {
    background-color: #20a865;
}
body.pw-sneat .cfg-diseno-logo .btn-danger {
    background-color: var(--pw-danger);
}
body.pw-sneat .cfg-diseno-logo .btn-danger:hover,
body.pw-sneat .cfg-diseno-logo .btn-danger:focus {
    background-color: #e0300e;
}
body.pw-sneat .cfg-diseno-logo input[type="text"] {
    height: var(--pw-control-height);
}

/* ================================================================== */
/* ESTANDAR SNEAT: ayuda contextual colapsada en mobile                */
/*                                                                    */
/* La base muestra a <=767px un preview de 65px con                   */
/* -webkit-text-fill-color:transparent + degradado a blanco: sobre    */
/* fondo blanco el texto se desvanece y se lee como una CAJA GRIS     */
/* VACIA, repetida en cada bloque del formulario. Se colapsa del      */
/* todo; el boton "Abrir ayuda" sigue visible y la despliega igual.   */
/*                                                                    */
/* El alto lo fija tambien el JS inline -> hace falta !important.     */
/* Solo afecta al estado CERRADO: al abrir, el JS saca la clase       */
/* --degradado y esta regla deja de aplicar.                          */
/* ================================================================== */
@media (max-width: 767px) {

    body.pw-sneat .cfg-ayuda--degradado {
        height: 0 !important;
        /* height:0 no alcanza: el padding y el borde siguen pintando
           una franja gris de ~34px. Hay que anularlos tambien. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        border-top-width: 0 !important;
        border-bottom-width: 0 !important;
    }

    /* Sin el preview, los 20px de margen del boton quedaban sueltos. */
    body.pw-sneat .cfg-ayuda__boton-abrir {
        margin-bottom: 0;
    }

}

/* ==================================================================== */
/* ESTANDAR SNEAT: estado vacio de listados (sin resultados)            */
/* pw_panel_empty_state() en functions/items.php. Reemplaza el uso de   */
/* pw_mensaje_informativo() (el alert informativo azul, sin espacio     */
/* para el boton de alta) en el branch SNEAT de los listados que        */
/* ademas necesitan mostrar el boton de alta ahi mismo -- el bug real   */
/* que motivo esto: al vaciar un listado el boton "Agregar" del         */
/* toolbar (inyectado junto a la tabla) desaparecia por completo, sin   */
/* dejar forma de crear el primer item (ver Publicaciones y Mapa).      */
/* Generalizado para cualquier modulo, UNA sola vez.                    */
/* ==================================================================== */
body.pw-sneat .pw-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 24px;
}

body.pw-sneat .pw-empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--pw-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

body.pw-sneat .pw-empty-state__icon i {
    font-size: 28px;
    color: var(--pw-accent);
}

body.pw-sneat .pw-empty-state__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--pw-text-strong);
    margin-bottom: 6px;
}

body.pw-sneat .pw-empty-state__text {
    font-size: 14px;
    color: var(--pw-gray-light);
    max-width: 360px;
    line-height: 1.5;
}

/* Separacion entre el texto y el boton de alta -- el reclamo puntual
   que origino este componente era, ademas de la falta del boton en si,
   que el primer intento de fix lo dejaba pegado contra el mensaje de
   "sin resultados" de abajo. */
body.pw-sneat .pw-empty-state__action {
    margin-top: 20px;
}

/* Boton "Agregar" del estado vacio: violeta SNEAT en vez del azul de
   Bootstrap por defecto. En este codebase el color de .btnCrear/.btn-
   primary NUNCA se define de forma global -- cada modulo lo pinta con
   una regla propia scopeada a SU wrapper del toolbar (ej.
   .publicaciones-actions-buttons .btnCrear, .inmuebles-actions-buttons
   .btnCrear, una por modulo). pw_panel_empty_state() no vive dentro de
   ninguno de esos wrappers (el boton ahi es standalone, no parte del
   toolbar), asi que sin esto caia al azul de Bootstrap sin tocar
   (reportado por el usuario con captura: "el azul de Bootstrap viejo
   no"). Regla global UNA sola vez aca en vez de repetir el mismo bloque
   en el CSS de cada modulo que use el componente. */
body.pw-sneat .pw-empty-state__action .btn-primary {
    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 .pw-empty-state__action .btn-primary:hover,
body.pw-sneat .pw-empty-state__action .btn-primary:focus,
body.pw-sneat .pw-empty-state__action .btn-primary:active {
    background-color: var(--pw-accent-hover);
    background-image: none;
    border-color: var(--pw-accent-hover);
    box-shadow: none;
}