/* =========================================================
   Tema Importadora Rovil: estilo de app (celular) y escritorio sobre AdminLTE.
   Los valores viven en los tokens de :root; los componentes no usan colores sueltos.
   Para vestir otro cliente basta cambiar el bloque "Marca".
   ========================================================= */

:root{
  /* ---- Marca ---- */
  --marca-oscuro:        #1d2127;   /* grafito: barras, boton principal */
  --marca-oscuro-2:      #2c323b;
  --marca-oscuro-3:      #15181d;
  --marca-acento:        #f08a00;   /* naranja cinta: detalles y foco (no para texto chico) */
  --marca-acento-claro:  #ffb547;
  --marca-acento-texto:  #a65200;   /* naranja oscuro legible sobre claro */
  --sobre-acento:        #1a1206;   /* texto SOBRE el naranja: el blanco no se lee en naranja */
  --fuente-texto:   'Poppins', 'Segoe UI', sans-serif;
  --fuente-titulos: 'Rajdhani', 'Segoe UI', sans-serif;

  /* ---- Base ---- */
  --fondo:          #f4f5f7;
  --superficie:     #ffffff;
  --superficie-2:   #e9ecf0;
  --texto:          #1d2127;
  --texto-suave:    #535b66;
  --texto-sobre-oscuro: #f4f5f7;
  --texto-menu:     #d5dae1;
  --sucursal-fondo:       #b35900;
  --sucursal-fondo-hover: #9a4c00;
  --sucursal-texto:       #ffffff;
  /* menu lateral claro */
  --menu-fondo:       #f1f3f6;
  --menu-fondo-2:     #e6e9ee;
  --menu-sub:         #e3e7ec;
  --menu-hover:       rgba(255,255,255,.65);
  --menu-abierto:     #ffffff;
  --menu-borde:       #d7dce3;
  --menu-texto:       #232830;
  --menu-texto-suave: #59616d;
  /* un color por seccion del menu */
  --sec-1: #f08a00;  --sec-2: #8a63d2;  --sec-3: #2b9c8f;  --sec-4: #e0262f;
  --sec-5: #3d7fd1;  --sec-6: #4aa663;  --sec-7: #c9544a;  --sec-8: #b0852f;
  --borde:          #dfe3e8;
  --borde-fuerte:   #c9cfd7;
  --ok-fondo: #dcefe0;      --ok-texto: #2f6b3f;
  --aviso-fondo: #fbe7c6;   --aviso-texto: #6e4300;
  --peligro-fondo: #f8dcd8; --peligro-texto: #8f2f25;   --peligro: #a33a2f;
  --info-fondo: #e7eef6;    --info-texto: #2c4c6b;

  --radio-sm: 10px;
  --radio:    14px;
  --radio-lg: 18px;
  --sombra:    0 1px 3px rgba(29,33,39,.06), 0 4px 14px rgba(29,33,39,.05);
  --sombra-lg: 0 10px 28px rgba(29,33,39,.18);
  --toque:     48px;            /* alto minimo de lo que se toca en el celular */
  --barra-alto: 64px;
}

/* ---------- Base ---------- */
body.tema-plus, .tema-plus .content-wrapper, .tema-plus .right-side, .tema-plus .wrapper{
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-texto);
}
.tema-plus h1, .tema-plus h2, .tema-plus h3, .tema-plus .box-title, .tema-plus .titulo-pantalla{
  font-family: var(--fuente-titulos);
  color: var(--texto);
}
.tema-plus a{ color: var(--marca-acento-texto); }
.tema-plus a:hover, .tema-plus a:focus{ color: var(--marca-oscuro); }
.tema-plus :focus-visible{ outline: 3px solid var(--marca-acento); outline-offset: 2px; }
.tema-plus section.content > h1, .tema-plus section.content .col-md-12 > h1, .tema-plus .titulo-pantalla{
  font-size: 30px; margin: 4px 0 18px;
}

/* ---------- Encabezado ---------- */
.tema-plus.skin-blue .main-header .logo,
.tema-plus.skin-blue .main-header .logo:hover{
  background: var(--marca-oscuro);
  color: var(--texto-sobre-oscuro);
  border-right: 1px solid var(--marca-oscuro-3);
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 19px;
  text-align: left;
  padding: 0 16px;
}
.tema-plus .main-header .logo .logo-lg{ display: flex; align-items: center; gap: 10px; height: 100%; }
.tema-plus.sidebar-mini.sidebar-collapse .main-header .logo > .logo-mini{ display: flex; align-items: center; justify-content: center; height: 100%; }
.tema-plus.sidebar-mini.sidebar-collapse .main-header .logo{ padding: 0; }
.tema-plus .marca-app{
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px;
  background: var(--marca-oscuro-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.tema-plus .marca-nombre{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tema-plus.skin-blue .main-header .navbar{
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
}
.tema-plus.skin-blue .main-header .navbar .nav > li > a,
.tema-plus.skin-blue .main-header .navbar .sidebar-toggle{
  color: var(--texto);
}
.tema-plus.skin-blue .main-header .navbar .nav > li > a:hover,
.tema-plus.skin-blue .main-header .navbar .nav > .open > a,
.tema-plus.skin-blue .main-header .navbar .sidebar-toggle:hover{
  background: var(--superficie-2);
  color: var(--texto);
}
.tema-plus .avatar-usuario{
  width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marca-acento); color: var(--marca-oscuro);
  font-weight: 600; font-size: 15px; vertical-align: middle; margin-right: 6px;
}
.tema-plus .nombre-usuario small{ display: block; font-size: 11px; color: var(--texto-suave); line-height: 1; }
.tema-plus .nombre-usuario{ display: inline-block; vertical-align: middle; line-height: 1.2; }
.tema-plus .main-header .navbar .user-menu > a{ padding-top: 8px; padding-bottom: 8px; }
/* Sucursal actual: bien visible, para que nadie trabaje en la sucursal equivocada */
.tema-plus .main-header .navbar .selector-tienda > a{
  display: flex; align-items: center; gap: 10px; margin: 6px 8px; padding: 6px 16px 6px 12px;
  background: var(--sucursal-fondo); color: var(--sucursal-texto) !important; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12); line-height: 1.1;
}
.tema-plus .main-header .navbar .selector-tienda > a:hover,
.tema-plus .main-header .navbar .selector-tienda.open > a{ background: var(--sucursal-fondo-hover) !important; color: var(--sucursal-texto) !important; }
.tema-plus .selector-tienda .fa-building{ font-size: 20px; color: var(--sucursal-texto) !important; opacity: .9; }
.tema-plus .selector-tienda-texto{ display: flex; flex-direction: column; }
.tema-plus .selector-tienda-texto small{ font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; font-weight: 500; }
.tema-plus .selector-tienda-nombre{ font-size: 18px; font-weight: 700; }
.tema-plus .selector-tienda .dropdown-menu > li.active > a{ background: var(--marca-oscuro) !important; color: var(--texto-sobre-oscuro) !important; }

/* ---------- Menu lateral (claro, con un color por seccion) ---------- */
.tema-plus.skin-blue .main-sidebar, .tema-plus.skin-blue .left-side{
  top: 0; padding-top: 58px;   /* justo debajo del encabezado */
  background: linear-gradient(180deg, var(--menu-fondo) 0%, var(--menu-fondo-2) 100%);
  border-right: 1px solid var(--menu-borde);
}
.tema-plus.skin-blue .sidebar-menu > li{ --color-seccion: var(--marca-acento); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+1){ --color-seccion: var(--sec-1); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+2){ --color-seccion: var(--sec-2); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+3){ --color-seccion: var(--sec-3); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+4){ --color-seccion: var(--sec-4); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+5){ --color-seccion: var(--sec-5); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+6){ --color-seccion: var(--sec-6); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+7){ --color-seccion: var(--sec-7); }
.tema-plus.skin-blue .sidebar-menu > li:nth-child(8n+8){ --color-seccion: var(--sec-8); }

.tema-plus.skin-blue .sidebar-menu > li > a{
  color: var(--menu-texto); font-weight: 500; border-left: 4px solid transparent;
  display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 12px;
}
.tema-plus.skin-blue .sidebar-menu > li > a > .fa:first-child{
  width: 30px; height: 30px; flex: 0 0 30px; line-height: 30px; text-align: center; font-size: 15px;
  border-radius: 9px; color: #fff; background: var(--color-seccion);
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.tema-plus.skin-blue .sidebar-menu > li > a > span{ flex: 1; }
.tema-plus.skin-blue .sidebar-menu > li > a > .pull-right{ margin-left: auto; color: var(--menu-texto-suave); }
.tema-plus.skin-blue .sidebar-menu > li:hover > a{ color: var(--menu-texto); background: var(--menu-hover); }
.tema-plus.skin-blue .sidebar-menu > li.active > a,
.tema-plus.skin-blue .sidebar-menu > li.menu-actual > a{
  color: var(--menu-texto); background: var(--menu-abierto); border-left-color: var(--color-seccion); font-weight: 600;
}

.tema-plus.skin-blue .sidebar-menu > li > .treeview-menu{ background: var(--menu-sub); margin: 0; padding: 4px 0 8px; }
.tema-plus.skin-blue .treeview-menu > li > a{
  color: var(--menu-texto-suave); display: flex; align-items: center; gap: 10px;
  padding: 8px 12px 8px 26px; font-size: 14px; border-radius: 0 10px 10px 0; margin-right: 10px;
}
.tema-plus.skin-blue .treeview-menu > li > a > .fa{ width: 18px; text-align: center; font-size: 14px; color: var(--color-seccion); }
.tema-plus.skin-blue .treeview-menu > li > a:hover{ color: var(--menu-texto); background: var(--menu-hover); }
.tema-plus.skin-blue .sidebar-menu .treeview-menu > li.menu-actual > a{
  color: var(--menu-texto); font-weight: 600; background: var(--superficie);
  box-shadow: inset 4px 0 0 var(--color-seccion), 0 1px 4px rgba(0,0,0,.06);
}
/* menu contraido (solo iconos): las etiquetas flotantes tambien claras */
.tema-plus.sidebar-mini.sidebar-collapse .sidebar-menu > li > a{ padding-left: 8px; }
.tema-plus.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right){ background: var(--menu-abierto); border-radius: 0 10px 0 0; }
.tema-plus.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu{ box-shadow: var(--sombra-lg); border-radius: 0 0 10px 0; }

/* ---------- Buscador del menu ---------- */
.tema-plus .buscador-menu{ position: relative; padding: 12px 10px 8px; }
.tema-plus .buscador-menu > .fa-search{ position: absolute; left: 24px; top: 50%; margin-top: -2px; transform: translateY(-50%); color: var(--menu-texto-suave); pointer-events: none; }
.tema-plus .buscador-menu .form-control{
  height: 42px; padding-left: 38px; border-radius: 12px; border: 1px solid var(--menu-borde);
  background: var(--superficie); color: var(--texto); box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.tema-plus .buscador-menu .form-control:focus{ outline: none; border-color: var(--marca-acento); box-shadow: 0 0 0 3px rgba(240,138,0,.25); }
.tema-plus .buscador-menu .buscador-vacio{ margin: 8px 4px 0; font-size: 13px; color: var(--menu-texto-suave); }
.tema-plus .buscador-menu .buscador-vacio[hidden]{ display: none; }
.tema-plus.sidebar-collapse .main-sidebar .buscador-menu{ display: none; }
.tema-plus .buscando .oculto-busqueda{ display: none !important; }
/* mientras se busca, todos los submenus con resultados quedan abiertos */
.tema-plus .sidebar-menu.buscando > li > .treeview-menu{ display: block !important; }
.tema-plus .sidebar-menu.buscando .primera-coincidencia,
.tema-plus .pantalla-mas.buscando .primera-coincidencia{ outline: 2px solid var(--marca-acento); outline-offset: -2px; }
.tema-plus .buscador-mas{ padding: 0 0 14px; }
.tema-plus .buscador-mas > .fa-search{ left: 14px; margin-top: -7px; }
.tema-plus .buscador-mas .form-control{ height: var(--toque); font-size: 16px; }

/* ---------- Tarjetas (boxes) ---------- */
.tema-plus .box{
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
}
.tema-plus .box-header{ padding: 16px 18px 8px; }
.tema-plus .box-header .box-title{ font-size: 20px; }
.tema-plus .box-body{ padding: 12px 18px 18px; border-radius: 0 0 var(--radio-lg) var(--radio-lg); }
.tema-plus .box.box-primary, .tema-plus .box.box-success, .tema-plus .box.box-info,
.tema-plus .box.box-warning, .tema-plus .box.box-danger{ border-top: 1px solid var(--borde); }
.tema-plus .jumbotron{
  background: var(--superficie); border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-lg); padding: 32px 24px; text-align: center;
}
.tema-plus .jumbotron h2{ font-size: 24px; }
.tema-plus .jumbotron p{ font-size: 15px; color: var(--texto-suave); }

/* Tarjetas de indicadores del inicio */
.tema-plus .info-box, .tema-plus .small-box{
  border-radius: var(--radio-lg); box-shadow: var(--sombra); border: 1px solid var(--borde); overflow: hidden;
}
.tema-plus .info-box{ background: var(--superficie); min-height: 88px; }
.tema-plus .info-box-icon{ border-radius: 0; height: 88px; line-height: 88px; }
.tema-plus .info-box-icon.bg-aqua, .tema-plus .info-box-icon.bg-red,
.tema-plus .info-box-icon.bg-green, .tema-plus .info-box-icon.bg-yellow{
  background: var(--superficie-2) !important; color: var(--marca-acento-texto) !important;
}
.tema-plus .info-box-text{ text-transform: none; font-size: 14px; color: var(--texto-suave); }
.tema-plus .info-box-number{ font-size: 24px; font-weight: 600; }

/* ---------- Botones ---------- */
.tema-plus .btn{
  border-radius: var(--radio-sm); font-weight: 500; font-family: var(--fuente-texto);
  min-height: 40px; padding: 8px 16px; border-width: 1px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color .15s ease, border-color .15s ease;
}
.tema-plus .btn.btn-block{ display: flex; }
.tema-plus .btn-primary, .tema-plus .btn-primary:focus{ background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: var(--texto-sobre-oscuro); }
.tema-plus .btn-primary:hover, .tema-plus .btn-primary:active{ background: #000; border-color: #000; color: var(--texto-sobre-oscuro); }
.tema-plus .btn-default, .tema-plus .btn-default:focus{ background: var(--superficie); border-color: var(--borde-fuerte); color: var(--texto); }
.tema-plus .btn-default:hover, .tema-plus .btn-default:active{ background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto); }
.tema-plus .btn-success, .tema-plus .btn-success:focus{ background: var(--ok-texto); border-color: var(--ok-texto); color: #fff; }
.tema-plus .btn-success:hover{ background: #25573a; border-color: #25573a; color: #fff; }
.tema-plus .btn-danger, .tema-plus .btn-danger:focus{ background: var(--peligro); border-color: var(--peligro); color: #fff; }
.tema-plus .btn-danger:hover{ background: var(--peligro-texto); border-color: var(--peligro-texto); color: #fff; }
.tema-plus .btn-warning, .tema-plus .btn-warning:focus{ background: var(--aviso-fondo); border-color: #eccf9c; color: var(--aviso-texto); }
.tema-plus .btn-warning:hover{ background: #f7d9a6; color: var(--aviso-texto); }
.tema-plus .btn-info, .tema-plus .btn-info:focus{ background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--marca-acento-texto); }
.tema-plus .btn-info:hover{ background: var(--marca-acento-claro); color: var(--marca-oscuro); }
.tema-plus .btn-xs, .tema-plus .btn-sm{ min-height: 34px; padding: 5px 10px; font-size: 13px; }
.tema-plus .btn-lg{ min-height: 52px; font-size: 17px; border-radius: var(--radio); }

/* ---------- Formularios ---------- */
.tema-plus .form-control{
  border-radius: var(--radio-sm); border-color: var(--borde-fuerte); background: var(--superficie);
  height: 44px; padding: 8px 12px; color: var(--texto); box-shadow: none;
}
.tema-plus textarea.form-control{ height: auto; min-height: 88px; }
.tema-plus select.form-control{ padding-right: 8px; }
.tema-plus .form-control:focus{ border-color: var(--marca-acento); box-shadow: 0 0 0 3px rgba(240,138,0,.22); }
.tema-plus label, .tema-plus .control-label{ font-weight: 500; color: var(--texto); }
.tema-plus .help-block{ color: var(--texto-suave); }

/* ---------- Tablas ---------- */
.tema-plus .table > thead > tr > th, .tema-plus table.table > tbody > tr:first-child > th{
  background: var(--superficie-2); color: var(--texto-suave); font-weight: 600; font-size: 13px;
  border-bottom: 1px solid var(--borde-fuerte); vertical-align: middle;
}
.tema-plus .table > tbody > tr > td{ border-top: 1px solid var(--borde); vertical-align: middle; }
.tema-plus .table-bordered, .tema-plus .table-bordered > thead > tr > th, .tema-plus .table-bordered > tbody > tr > td{ border-color: var(--borde); }
.tema-plus .table-hover > tbody > tr:hover{ background: #f7f8fa; }
.tema-plus .table > tbody > tr.danger > td{ background: var(--peligro-fondo); }
.tema-plus .table > tbody > tr.warning > td{ background: var(--aviso-fondo); }
.tema-plus .table > tbody > tr.success > td, .tema-plus .table > thead > tr > th.success{ background: var(--ok-fondo); }

/* Etiquetas y avisos */
.tema-plus .label{ border-radius: 10px; padding: 3px 9px; font-weight: 600; font-size: 12px; }
/* AdminLTE fuerza estos colores con !important: hay que igualarlo */
.tema-plus .label-success, .tema-plus .bg-green{ background: var(--ok-fondo) !important; color: var(--ok-texto) !important; }
.tema-plus .label-warning, .tema-plus .bg-yellow{ background: var(--aviso-fondo) !important; color: var(--aviso-texto) !important; }
.tema-plus .label-danger, .tema-plus .bg-red{ background: var(--peligro-fondo) !important; color: var(--peligro-texto) !important; }
.tema-plus .label-info, .tema-plus .label-primary, .tema-plus .bg-aqua, .tema-plus .bg-light-blue{ background: var(--superficie-2) !important; color: var(--marca-acento-texto) !important; }
.tema-plus .label-default{ background: #efe9e1 !important; color: var(--texto-suave) !important; }
.tema-plus .main-header .label{ padding: 2px 6px; font-size: 10px; }
.tema-plus .alert{ border-radius: var(--radio); border: 0; }
.tema-plus .alert-success{ background: var(--ok-fondo) !important; color: var(--ok-texto) !important; }
.tema-plus .alert-warning{ background: var(--aviso-fondo) !important; color: var(--aviso-texto) !important; }
.tema-plus .alert-danger{ background: var(--peligro-fondo) !important; color: var(--peligro-texto) !important; }
.tema-plus .alert-info{ background: var(--info-fondo) !important; color: var(--info-texto) !important; }
.tema-plus .alert a{ color: inherit; text-decoration: underline; }

/* Paginacion y controles de DataTables */
.tema-plus .pagination > li > a, .tema-plus .pagination > li > span{ color: var(--texto); border-color: var(--borde); }
.tema-plus .pagination > .active > a, .tema-plus .pagination > .active > span{ background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: var(--texto-sobre-oscuro); }
.tema-plus .dataTables_filter input, .tema-plus .dataTables_length select{
  border-radius: var(--radio-sm); border: 1px solid var(--borde-fuerte); height: 40px; padding: 4px 10px;
}
.tema-plus .breadcrumb{ background: transparent; padding: 0 0 12px; }

/* Pie */
.tema-plus .main-footer{ background: transparent; border-top: 1px solid var(--borde); color: var(--texto-suave); }

/* ---------- Ingreso ---------- */
body.tema-plus.login-page, body.tema-plus.login-page .wrapper{ background: var(--marca-oscuro); }
.tema-plus .login-logo a{ color: var(--texto-sobre-oscuro); font-family: var(--fuente-titulos); font-weight: 700; }
.tema-plus .login-logo .marca-app{ width: 72px; height: 72px; border-radius: 20px; margin: 0 auto 12px; display: flex; }
.tema-plus .login-box-body{ background: var(--fondo); border-radius: var(--radio-lg); padding: 24px; }
.tema-plus .login-box-body h4{ font-family: var(--fuente-texto); font-weight: 600; font-size: 20px; color: var(--texto); }
.tema-plus .login-box-body .form-control{ height: 52px; font-size: 16px; }
.tema-plus .login-box-body .btn{ min-height: 52px; font-size: 17px; }

/* ---------- Pantalla "Mas" y piezas de app ---------- */
.tema-plus .pantalla-mas{ max-width: 720px; }
.tema-plus .tarjeta-sucursal{
  display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 10px;
  border-radius: var(--radio-lg); background: var(--marca-oscuro); color: var(--texto-sobre-oscuro);
}
.tema-plus .tarjeta-sucursal > .fa{ width: 44px; height: 44px; border-radius: 12px; background: var(--marca-oscuro-2); color: var(--marca-acento-claro); font-size: 20px; display: flex; align-items: center; justify-content: center; }
.tema-plus .tarjeta-sucursal-texto span{ display: block; font-size: 13px; color: var(--marca-acento-claro); }
.tema-plus .tarjeta-sucursal-texto b{ font-size: 18px; font-weight: 600; }
.tema-plus .cambiar-sucursal{ margin-bottom: 18px; }
.tema-plus .cambiar-sucursal > summary{ list-style: none; cursor: pointer; min-height: var(--toque); }
.tema-plus .cambiar-sucursal > summary::-webkit-details-marker{ display: none; }
.tema-plus .cambiar-sucursal .lista-app{ margin-top: 8px; }
.tema-plus .tarjeta-instalar{
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; margin-bottom: 18px;
  border-radius: var(--radio-lg); background: var(--superficie-2); border: 1px solid var(--borde-fuerte);
}
.tema-plus .tarjeta-instalar[hidden]{ display: none; }
.tema-plus .tarjeta-instalar > .fa{ font-size: 30px; color: var(--marca-acento-texto); width: 28px; text-align: center; }
.tema-plus .tarjeta-instalar-texto{ flex: 1; font-size: 14px; line-height: 1.35; }
.tema-plus .tarjeta-instalar-texto b, .tema-plus .tarjeta-instalar-texto span{ display: block; }
.tema-plus .mosaicos-app{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.tema-plus .mosaico-app{
  min-height: 92px; padding: 14px; border-radius: var(--radio-lg);
  background: var(--superficie); border: 1px solid var(--borde);
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
  color: var(--texto); font-weight: 600; font-size: 15px; text-decoration: none;
}
.tema-plus .mosaico-app .fa{ font-size: 22px; color: var(--marca-acento-texto); }
.tema-plus .mosaico-app:hover{ border-color: var(--marca-acento); color: var(--texto); }
.tema-plus .titulo-seccion{ font-family: var(--fuente-texto); font-size: 14px; font-weight: 600; color: var(--texto-suave); margin: 20px 4px 8px; }
.tema-plus .lista-app{ border-radius: var(--radio-lg); background: var(--superficie); border: 1px solid var(--borde); overflow: hidden; margin-bottom: 8px; }
.tema-plus .lista-app-op{
  min-height: 56px; padding: 0 16px; display: flex; align-items: center; gap: 14px;
  color: var(--texto); font-size: 16px; text-decoration: none; border-bottom: 1px solid var(--borde);
}
.tema-plus .lista-app-op:last-child{ border-bottom: 0; }
.tema-plus .lista-app-op > span{ flex: 1; }
.tema-plus .lista-app-op > .fa:first-child{ width: 22px; text-align: center; color: var(--marca-acento-texto); font-size: 17px; }
.tema-plus .lista-app-op > .fa-angle-right{ color: var(--texto-suave); font-size: 18px; }
.tema-plus .lista-app-op:hover{ background: var(--fondo); color: var(--texto); }
.tema-plus .lista-app-op-salir, .tema-plus .lista-app-op-salir > .fa:first-child{ color: var(--peligro-texto) !important; }

/* ---------- Barra inferior (solo celular) ---------- */
.tema-plus .barra-app{ display: none; }

/* =========================================================
   Celular (<= 767px): la app
   ========================================================= */
@media (max-width: 767px){
  :root{ --toque: 48px; }

  /* Encabezado en una sola fila */
  .tema-plus .main-header{
    position: sticky; top: 0; z-index: 1030;
    display: flex; align-items: stretch; height: 56px; max-height: none;
    background: var(--marca-oscuro);
  }
  .tema-plus .main-header .logo{
    width: auto !important; flex: 1 1 auto; min-width: 0; height: 56px; line-height: 56px;
    border-right: 0; padding: 0 0 0 12px; font-size: 18px;
  }
  .tema-plus .main-header .logo .logo-lg{ display: flex !important; }
  .tema-plus .main-header .logo .logo-mini{ display: none !important; }
  .tema-plus.skin-blue .main-header .navbar{
    flex: 0 0 auto; width: auto; margin: 0; min-height: 56px; background: var(--marca-oscuro); border: 0;
  }
  .tema-plus .main-header .sidebar-toggle{ display: none; }
  .tema-plus .main-header .navbar-custom-menu{ float: none; }
  .tema-plus .main-header .navbar .nav{ margin: 0; display: flex; }
  .tema-plus .main-header .navbar .nav > li{ float: none; }
  .tema-plus.skin-blue .main-header .navbar .nav > li > a{
    color: var(--texto-sobre-oscuro); height: 56px; display: flex; align-items: center; padding: 0 9px;
  }
  .tema-plus.skin-blue .main-header .navbar .nav > li > a:hover,
  .tema-plus.skin-blue .main-header .navbar .nav > .open > a{ background: var(--marca-oscuro-2); color: var(--texto-sobre-oscuro); }
  .tema-plus .main-header .messages-menu{ display: none !important; }
  .tema-plus .main-header .navbar .selector-tienda > a{
    margin: 9px 2px; height: 38px !important; padding: 0 12px !important; border-radius: 19px; gap: 6px;
  }
  .tema-plus .selector-tienda .fa-building{ font-size: 16px; }
  .tema-plus .selector-tienda-nombre{ font-size: 15px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tema-plus .main-header .navbar .user-menu > a{ padding: 0 12px 0 6px !important; }
  .tema-plus .avatar-usuario{ margin-right: 0; }
  .tema-plus .main-header .navbar .dropdown-menu{ position: absolute; right: 0; left: auto; background: var(--superficie); }
  .tema-plus .main-header .navbar .open .dropdown-menu > li > a{ color: var(--texto); }

  /* Sin menu lateral: la navegacion es la barra de abajo y "Mas" */
  .tema-plus .main-sidebar{ display: none; }
  .tema-plus .content-wrapper{ margin-left: 0 !important; min-height: calc(100vh - 56px); }
  .tema-plus.con-barra-app .content-wrapper{ padding-bottom: calc(var(--barra-alto) + 24px + env(safe-area-inset-bottom)); }
  .tema-plus .main-footer{ display: none; }

  .tema-plus .barra-app{
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035;
    height: calc(var(--barra-alto) + env(safe-area-inset-bottom));
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--borde);
    box-shadow: 0 -4px 16px rgba(29,33,39,.06);
  }
  .tema-plus .barra-app-op{
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border-radius: 14px; color: var(--texto-suave); font-size: 12px; font-weight: 500; text-decoration: none;
  }
  .tema-plus .barra-app-op .fa{ font-size: 21px; }
  .tema-plus .barra-app-op.activa{ background: var(--superficie-2); color: var(--texto); font-weight: 600; }
  .tema-plus .barra-app-op:hover{ color: var(--texto); }

  /* Todo lo que se toca, grande */
  .tema-plus .btn{ min-height: var(--toque); font-size: 16px; padding: 10px 16px; }
  .tema-plus .btn-xs, .tema-plus .btn-sm{ min-height: 40px; font-size: 14px; padding: 6px 12px; }
  .tema-plus .form-control{ height: var(--toque); font-size: 16px; }
  .tema-plus select.form-control{ font-size: 16px; }
  .tema-plus section.content{ padding: 14px 14px 20px; }
  .tema-plus section.content > h1, .tema-plus section.content .col-md-12 > h1, .tema-plus .titulo-pantalla{ font-size: 26px; margin-top: 0; }
  .tema-plus .box-header .box-title{ font-size: 18px; }
  .tema-plus .box-body{ padding: 10px 12px 14px; }
  .tema-plus .dataTables_wrapper .dataTables_filter, .tema-plus .dataTables_wrapper .dataTables_length{ text-align: left; }
  .tema-plus .dataTables_filter label, .tema-plus .dataTables_filter input{ display: block; width: 100%; margin-left: 0 !important; }
  .tema-plus .dataTables_info{ white-space: normal !important; text-align: left; padding-top: 12px; }
  .tema-plus .dataTables_paginate{ text-align: left !important; }
  .tema-plus .dataTables_filter input{ height: var(--toque); font-size: 16px; }
  .tema-plus .dataTables_paginate .pagination > li > a{ min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

  /* Tablas convertidas en tarjetas (res/js/tablas-movil.js pone data-label en cada celda) */
  .tema-plus table.tabla-tarjetas, .tema-plus table.tabla-tarjetas tbody{ display: block; width: 100% !important; border: 0; background: transparent; }
  .tema-plus table.tabla-tarjetas thead{ display: none; }
  .tema-plus table.tabla-tarjetas > tbody > tr{
    display: block; margin-bottom: 10px; padding: 8px 14px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
    box-shadow: var(--sombra);
  }
  .tema-plus table.tabla-tarjetas > tbody > tr > td, .tema-plus table.tabla-tarjetas > tbody > tr > th{
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 8px 0 !important; border: 0 !important; border-bottom: 1px solid var(--borde) !important;
    text-align: right; min-height: 40px; width: auto !important; background: transparent !important;
  }
  .tema-plus table.tabla-tarjetas > tbody > tr > td:last-child{ border-bottom: 0 !important; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td[data-label]::before{
    content: attr(data-label); text-align: left; font-size: 13px; font-weight: 500; color: var(--texto-suave); flex-shrink: 0;
  }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-principal{ font-size: 16px; font-weight: 600; justify-content: flex-start; text-align: left; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-principal::before{ display: none; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-acciones{ justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding-top: 10px !important; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-acciones::before{ display: none; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-acciones .btn{ min-height: 44px; margin: 0; }
  .tema-plus table.tabla-tarjetas > tbody > tr > td.celda-vacia{ display: none; }
  .tema-plus table.tabla-tarjetas > tbody > tr.danger{ border-color: #eab7b0; }
  .tema-plus table.tabla-tarjetas > tbody > tr.warning{ border-color: #eccf9c; }
  .tema-plus table.tabla-tarjetas > tbody > tr.danger > td, .tema-plus table.tabla-tarjetas > tbody > tr.warning > td{ background: transparent !important; }
  .tema-plus .box-body.no-padding{ padding: 0; }
  .tema-plus .box-body .tabla-tarjetas{ margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce){
  .tema-plus .btn{ transition: none; }
}

/* =========================================================
   Vender (sell-view, searchproduct-action, cartofsell-action)
   ========================================================= */
.tema-plus .pantalla-vender .titulo-pantalla small.sucursal-actual{ font-family: var(--fuente-texto); font-size: 15px; color: var(--texto-suave); margin-left: 6px; }
.tema-plus .vender-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.tema-plus .vender-carrito{ position: sticky; top: 16px; }
.tema-plus .vender-busqueda{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tema-plus .vender-busqueda .help-block{ margin: 0; font-size: 13px; }
.tema-plus .campo-busqueda{
  display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
}
.tema-plus .campo-busqueda:focus-within{ border-color: var(--marca-acento); box-shadow: 0 0 0 3px rgba(240,138,0,.22); }
.tema-plus .campo-busqueda > .fa{ color: var(--texto-suave); font-size: 17px; }
.tema-plus .campo-busqueda .form-control{ flex: 1; min-width: 0; border: 0; box-shadow: none; height: 46px; font-size: 16px; background: transparent; }
.tema-plus .campo-busqueda .form-control:focus{ box-shadow: none; }
.tema-plus .campo-busqueda .btn{ min-height: 46px; border-radius: var(--radio-sm); }
.tema-plus .cargando{ color: var(--texto-suave); padding: 16px 4px; }
.tema-plus .resultado-busqueda{ color: var(--texto-suave); font-size: 14px; margin: 0 0 10px; }
.tema-plus .estado-vacio{ text-align: center; padding: 36px 16px; color: var(--texto-suave); background: var(--superficie); border: 1px dashed var(--borde-fuerte); border-radius: var(--radio-lg); }
.tema-plus .estado-vacio > .fa{ font-size: 30px; color: var(--marca-acento); display: block; margin-bottom: 10px; }
.tema-plus .estado-vacio p{ font-size: 15px; }

.tema-plus .vender-resultados{ display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tema-plus .tarjeta-producto{
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra);
}
.tema-plus .tarjeta-producto.agotado{ opacity: .75; }
.tema-plus .tp-nombre{ font-size: 16px; font-weight: 600; line-height: 1.3; }
.tema-plus .tp-codigo{ font-size: 13px; color: var(--texto-suave); min-height: 18px; }
.tema-plus .tp-fila{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tema-plus .tp-precio{ font-size: 19px; font-weight: 600; }
.tema-plus .tp-acciones{ display: flex; gap: 8px; align-items: stretch; }
.tema-plus .tp-acciones > .btn{ flex: 1; }
.tema-plus .tp-acciones > .btn.agregado{ background: var(--ok-texto); border-color: var(--ok-texto); }
.tema-plus .selector-cantidad{ display: flex; align-items: stretch; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); overflow: hidden; }
.tema-plus .selector-cantidad .btn{ border: 0; border-radius: 0; min-width: 40px; padding: 0 10px; background: var(--superficie-2); }
.tema-plus .selector-cantidad .form-control{ width: 52px; border: 0; border-radius: 0; text-align: center; font-weight: 600; padding: 0 4px; -moz-appearance: textfield; }
.tema-plus .selector-cantidad .form-control::-webkit-outer-spin-button, .tema-plus .selector-cantidad .form-control::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.tema-plus .tp-descuento > summary, .tema-plus .cobro-mas > summary{ cursor: pointer; color: var(--marca-acento-texto); font-size: 14px; font-weight: 500; padding: 6px 0; min-height: 32px; }
.tema-plus .tp-descuento .form-control{ margin-top: 4px; }
.tema-plus .tp-descuento label{ font-size: 13px; }

.tema-plus .carrito, .tema-plus .carrito-vacio, .tema-plus .venta-lista{
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio-lg); box-shadow: var(--sombra); padding: 18px;
}
.tema-plus .carrito-vacio{ text-align: center; color: var(--texto-suave); padding: 32px 18px; }
.tema-plus .carrito-vacio > .fa{ font-size: 32px; color: var(--marca-acento); }
.tema-plus .carrito-vacio h2, .tema-plus .carrito-cabeza h2{ font-size: 20px; margin: 8px 0 4px; }
.tema-plus .carrito-cabeza{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tema-plus .carrito-cabeza h2{ margin: 0; }
.tema-plus .carrito-cabeza span{ color: var(--texto-suave); font-size: 14px; }
.tema-plus .carrito-lineas{ list-style: none; margin: 10px 0 0; padding: 0; }
.tema-plus .carrito-linea{ display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.tema-plus .cl-info{ flex: 1; min-width: 0; }
.tema-plus .cl-nombre{ font-weight: 500; font-size: 15px; }
.tema-plus .cl-detalle{ font-size: 13px; color: var(--texto-suave); }
.tema-plus .cl-total{ font-weight: 600; white-space: nowrap; }
.tema-plus .cl-quitar{ min-height: 40px; min-width: 40px; padding: 0; color: var(--peligro-texto); }
.tema-plus .cobro{ margin-top: 12px; }
.tema-plus .cobro-totales{ margin: 0 0 16px; }
.tema-plus .cobro-totales > div{ display: flex; justify-content: space-between; padding: 3px 0; font-size: 14px; color: var(--texto-suave); }
.tema-plus .cobro-totales dt{ font-weight: 400; }
.tema-plus .cobro-totales .cobro-total{ padding-top: 8px; margin-top: 6px; border-top: 1px solid var(--borde); color: var(--texto); align-items: baseline; }
.tema-plus .cobro-totales .cobro-total dt{ font-weight: 600; font-size: 16px; }
.tema-plus .cobro-totales .cobro-total dd{ font-family: var(--fuente-titulos); font-weight: 700; font-size: 30px; }
.tema-plus .cobro legend{ font-size: 14px; font-weight: 500; border: 0; margin-bottom: 6px; color: var(--texto); }
.tema-plus .cobro-cliente{ display: flex; gap: 8px; }
.tema-plus .cobro-cliente .btn{ min-width: 48px; }
.tema-plus .opciones-botones{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tema-plus .opcion-boton{ position: relative; margin: 0; font-weight: 500; }
.tema-plus .opcion-boton input{ position: absolute; opacity: 0; inset: 0; }
.tema-plus .opcion-boton span{
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px; padding: 4px 6px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm); background: var(--superficie); cursor: pointer; font-size: 14px;
}
.tema-plus .opcion-boton input:checked + span{ background: var(--marca-oscuro); border-color: var(--marca-oscuro); color: var(--texto-sobre-oscuro); }
.tema-plus .opcion-boton input:focus-visible + span{ outline: 3px solid var(--marca-acento); outline-offset: 2px; }
.tema-plus .campo-dinero{ height: 54px !important; font-size: 22px !important; font-weight: 600; }
.tema-plus .montos-rapidos{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tema-plus .montos-rapidos .btn{ flex: 1 1 auto; background: var(--superficie-2); }
.tema-plus .cambio{ margin: 10px 0 0; padding: 12px 14px; border-radius: var(--radio-sm); background: var(--fondo); color: var(--texto-suave); font-weight: 600; font-size: 16px; }
.tema-plus .cambio.ok{ background: var(--ok-fondo); color: var(--ok-texto); font-size: 18px; }
.tema-plus .cambio.falta{ background: var(--peligro-fondo); color: var(--peligro-texto); font-size: 18px; }
.tema-plus .cobro-mas{ margin: 6px 0 14px; }
.tema-plus .cobro-mas[open] > summary{ margin-bottom: 8px; }
.tema-plus .cobro-acciones{ display: flex; flex-direction: column; gap: 8px; }
.tema-plus .boton-cobrar{ min-height: 60px; font-size: 18px; }
.tema-plus .lista-errores{ margin: 6px 0 0; padding-left: 18px; }
.tema-plus .barra-cobrar{ display: none; }
.tema-plus .venta-lista{ text-align: center; }
.tema-plus .vl-icono{ width: 84px; height: 84px; margin: 6px auto 10px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok-texto); display: flex; align-items: center; justify-content: center; font-size: 40px; }
.tema-plus .venta-lista h2{ font-size: 26px; margin: 0 0 4px; }
.tema-plus .vl-folio{ color: var(--texto-suave); margin: 0; }
.tema-plus .vl-total{ font-size: 32px; font-weight: 600; margin: 6px 0; }
.tema-plus .vl-cambio{ font-size: 18px; font-weight: 600; color: var(--ok-texto); }
.tema-plus .vl-acciones{ display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

@media (max-width: 1100px){
  .tema-plus .vender-grid{ grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (max-width: 991px){
  .tema-plus .vender-grid{ grid-template-columns: 1fr; }
  .tema-plus .vender-carrito{ position: static; }
}
@media (max-width: 767px){
  .tema-plus .vender-resultados{ grid-template-columns: 1fr; gap: 10px; }
  .tema-plus .selector-cantidad .btn{ min-width: 48px; }
  .tema-plus .barra-cobrar{
    display: flex; align-items: center; gap: 10px;
    position: fixed; left: 12px; right: 12px; z-index: 1034;
    bottom: calc(var(--barra-alto) + env(safe-area-inset-bottom) + 10px);
    min-height: 58px; padding: 0 18px; border-radius: 16px;
    background: var(--marca-oscuro); color: var(--texto-sobre-oscuro) !important; text-decoration: none;
    box-shadow: var(--sombra-lg); font-size: 17px; font-weight: 600;
  }
  .tema-plus .barra-cobrar .bc-cantidad{ min-width: 30px; height: 30px; padding: 0 8px; border-radius: 15px; background: var(--marca-acento); color: var(--marca-oscuro); display: flex; align-items: center; justify-content: center; font-size: 15px; }
  .tema-plus .barra-cobrar .bc-texto{ flex: 1; }
  .tema-plus.con-barra-app .pantalla-vender{ padding-bottom: 84px; }
  .tema-plus .opcion-boton span{ min-height: 52px; font-size: 15px; }
}

/* =========================================================
   Inicio tipo app (home-view)
   ========================================================= */
.tema-plus .inicio-app{ max-width: 760px; padding-bottom: 0; }
.tema-plus .inicio-saludo > span{ color: var(--texto-suave); font-size: 15px; }
.tema-plus .inicio-saludo .titulo-pantalla{ margin-top: 2px; }
.tema-plus .accion-principal{
  display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 0 20px; margin-bottom: 14px;
  border-radius: var(--radio-lg); background: var(--marca-oscuro); color: var(--texto-sobre-oscuro) !important;
  font-size: 19px; font-weight: 600; text-decoration: none; box-shadow: var(--sombra-lg);
}
.tema-plus .accion-principal > .fa:first-child{ font-size: 24px; color: var(--marca-acento-claro); }
.tema-plus .accion-principal > span{ flex: 1; }
.tema-plus .accion-principal:hover{ background: #000; }
.tema-plus .indicadores-hoy{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tema-plus .indicador{ padding: 14px 16px; border-radius: var(--radio-lg); background: var(--superficie); border: 1px solid var(--borde); }
.tema-plus .indicador span, .tema-plus .indicador small{ display: block; font-size: 13px; color: var(--texto-suave); }
.tema-plus .indicador b{ display: block; font-size: 24px; font-weight: 600; margin: 4px 0 2px; }
.tema-plus .titulo-con-enlace{ display: flex; align-items: baseline; justify-content: space-between; }
.tema-plus .titulo-con-enlace a{ font-weight: 600; font-size: 14px; padding: 10px 4px; }
.tema-plus .linea-secundaria{ display: block; font-size: 13px; color: var(--texto-suave); }
.tema-plus .lista-app-op > .label{ flex: 0 0 auto; }
.tema-plus .estado-vacio-chico{ padding: 18px 16px; font-size: 15px; }
.tema-plus .enlaces-resumen{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (min-width: 768px){
  .tema-plus .inicio-app .mosaicos-app{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   Seguridad: verificacion en dos pasos
   ========================================================= */
.tema-plus .pantalla-seguridad{ max-width: 720px; }
.tema-plus .pasos-mfa ol{ padding-left: 20px; margin: 0; }
.tema-plus .pasos-mfa li{ margin-bottom: 18px; line-height: 1.5; }
.tema-plus .qr-mfa{ margin: 12px 0; }
.tema-plus .qr-mfa img{ border-radius: var(--radio); border: 1px solid var(--borde); background: #fff; padding: 8px; max-width: 100%; height: auto; }
.tema-plus .clave-mfa{ font-size: 15px; letter-spacing: 1px; white-space: normal; word-break: break-all; }
.tema-plus .campo-codigo{ font-size: 24px !important; letter-spacing: 6px; text-align: center; font-weight: 600; height: 56px !important; }
.tema-plus .form-codigo-mfa{ display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 8px; }
.tema-plus .form-codigo-mfa > label{ flex-basis: 100%; }
.tema-plus .form-codigo-mfa .campo-codigo{ max-width: 220px; }
.tema-plus .codigos-recuperacion{ list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 16px; }
.tema-plus .codigos-recuperacion code{ display: block; padding: 10px; text-align: center; font-size: 17px; background: var(--superficie-2); color: var(--texto); border-radius: var(--radio-sm); }
.tema-plus .texto-ok{ color: var(--ok-texto); }
@media print{
  .tema-plus .main-header, .tema-plus .main-sidebar, .tema-plus .barra-app, .tema-plus .main-footer, .tema-plus .btn{ display: none !important; }
  .tema-plus .content-wrapper{ margin: 0 !important; }
}
@media (max-width: 767px){
  .tema-plus .form-codigo-mfa .campo-codigo, .tema-plus .form-codigo-mfa .btn{ max-width: none; width: 100%; }
}

/* =========================================================
   Perfiles y permisos: casillas grandes agrupadas por seccion
   ========================================================= */
.tema-plus .casillas-permisos{ display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 14px 0 18px; }
.tema-plus .grupo-permisos{ background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 14px 10px; margin: 0; min-width: 0; }
.tema-plus .grupo-permisos legend{ border: 0; margin: 0; padding: 0; width: auto; font-size: inherit; }
.tema-plus .casilla{ display: flex; align-items: center; gap: 10px; min-height: 40px; margin: 0; font-weight: 400; cursor: pointer; }
.tema-plus .casilla input{ width: 20px; height: 20px; margin: 0; flex: 0 0 20px; accent-color: var(--marca-acento); cursor: pointer; }
.tema-plus .casilla-seccion{ font-family: var(--fuente-titulos); font-size: 17px; font-weight: 600; padding: 8px 0 4px; }
.tema-plus .lista-permisos{ border-top: 1px solid var(--borde); padding-top: 4px; }
.tema-plus .de-fabrica{ font-size: 11px; color: var(--texto-suave); background: var(--superficie-2); border-radius: 6px; padding: 1px 6px; margin-left: 4px; white-space: nowrap; }
.tema-plus .pestanas-perfil{ margin: 14px 0 4px; }
.tema-plus .pestanas-perfil > li > a{ font-weight: 500; }
.tema-plus .acciones-formulario{ display: flex; flex-wrap: wrap; gap: 10px; }
.tema-plus .permisos-usuario .radio{ margin-top: 4px; }
.tema-plus .permisos-personalizados[hidden]{ display: none; }
@media (max-width: 767px){
  .tema-plus .casilla{ min-height: var(--toque); }
  .tema-plus .acciones-formulario .btn{ width: 100%; }
}

/* ---------- WhatsApp ---------- */
/* verde de WhatsApp oscurecido: con el verde de la marca (#25d366) la letra blanca no se lee */
.tema-plus .btn-whatsapp{ background: #0e7a3b; border-color: #0b6531; color: #fff !important; font-weight: 500; }
.tema-plus .btn-whatsapp:hover, .tema-plus .btn-whatsapp:focus{ background: #0b6531; color: #fff !important; }
.tema-plus .btn-whatsapp.enviado{ background: var(--superficie-2); border-color: var(--borde-fuerte); color: var(--texto-suave) !important; }
.tema-plus .texto-whatsapp{ color: #1fb957; }
.tema-plus .celda-telefono .btn-whatsapp{ margin-left: 6px; }
.tema-plus .fila-promo{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tema-plus .vista-previa{ margin: 10px 0 0; color: var(--texto-suave); white-space: pre-wrap; }

/* ---------- Aviso de requisito: "antes de X, primero Y" ---------- */
.tema-plus .aviso-requisito{
  display: flex; gap: 16px; align-items: flex-start; max-width: 720px; margin: 24px auto;
  background: var(--superficie); border: 1px solid var(--borde); border-left: 6px solid var(--marca-acento);
  border-radius: var(--radio-lg); padding: 22px 24px; box-shadow: var(--sombra);
}
.tema-plus .aviso-requisito > .fa{ font-size: 30px; color: var(--marca-acento); margin-top: 2px; }
.tema-plus .aviso-requisito h3{ margin: 0 0 8px; font-size: 22px; }
.tema-plus .aviso-requisito p{ color: var(--texto-suave); margin: 0 0 14px; }
.tema-plus .aviso-requisito .btn{ min-height: var(--toque); padding-left: 18px; padding-right: 18px; }

/* ---------- Notificaciones ---------- */
.tema-plus .campana-notificaciones > a{ position: relative; }
.tema-plus .contador-notificaciones{
  position: absolute; top: 8px; right: 2px; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 10px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700;
  line-height: 20px; text-align: center; box-shadow: 0 0 0 2px var(--superficie);
}
.tema-plus .menu-notificaciones{ width: 340px; padding: 0; overflow: hidden; border-radius: var(--radio) !important; }
.tema-plus .menu-notificaciones > li.header{ padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--borde); }
.tema-plus .menu-notificaciones > li.footer > a{ text-align: center; padding: 10px; font-weight: 600; border-top: 1px solid var(--borde); }
.tema-plus .menu-notificaciones .sin-notificaciones{ padding: 16px 14px; color: var(--texto-suave); }
.tema-plus .notificacion{ display: flex !important; align-items: flex-start; gap: 10px; white-space: normal !important; padding: 10px 14px !important; }
.tema-plus .notificacion small{ display: block; color: var(--texto-suave); font-size: 12px; margin-top: 2px; }
.tema-plus .notificacion:not(.leida){ background: #fff6ea; }   /* tono del naranja de la marca */
.tema-plus .notificacion.leida b, .tema-plus .notificacion.leida{ font-weight: 400; }
.tema-plus .notificacion.resuelta{ opacity: .7; }
.tema-plus .icono-notificacion{ width: 32px; height: 32px; flex: 0 0 32px; line-height: 32px; text-align: center; border-radius: 10px; color: #fff; background: var(--sec-5); }
.tema-plus .notificacion-stock .icono-notificacion, .tema-plus .icono-notificacion.notificacion-stock{ background: var(--sec-4); }
.tema-plus .notificacion-vence .icono-notificacion, .tema-plus .icono-notificacion.notificacion-vence{ background: var(--sec-7); }
.tema-plus .notificacion-traspaso .icono-notificacion, .tema-plus .icono-notificacion.notificacion-traspaso{ background: var(--sec-3); }
.tema-plus .notificacion-devolucion .icono-notificacion, .tema-plus .icono-notificacion.notificacion-devolucion{ background: var(--sec-2); }
.tema-plus .lista-notificaciones .notificacion{ align-items: center; }
.tema-plus .punto-nueva{ width: 10px; height: 10px; border-radius: 50%; background: #e53935; flex: 0 0 10px; margin-left: auto; }
.tema-plus .paginacion-simple{ display: flex; gap: 10px; margin-top: 14px; }
@media (max-width: 767px){
  .tema-plus .menu-notificaciones{ position: fixed !important; left: 8px !important; right: 8px !important; width: auto; top: 58px !important; }
  .tema-plus .contador-notificaciones{ top: 6px; }
}
.tema-plus .contador-menu{ margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: #c62828; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; flex: 0 0 auto !important; }

/* ---------- Tablero del inicio ---------- */
.tema-plus .tablero-inicio{ margin-top: 28px; }
.tema-plus .indicadores-mes{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 12px 0 18px; }
.tema-plus .indicador-mes{ background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.tema-plus .indicador-mes span{ display: block; font-size: 13px; color: var(--texto-suave); }
.tema-plus .indicador-mes b{ display: block; font-size: 22px; margin: 4px 0 2px; color: var(--texto); }
.tema-plus .indicador-mes small{ color: var(--texto-suave); font-size: 12px; }
.tema-plus .indicador-mes.destacado{ background: linear-gradient(135deg, var(--sec-1), var(--sec-2)); border: 0; }
.tema-plus .indicador-mes.destacado span, .tema-plus .indicador-mes.destacado b, .tema-plus .indicador-mes.destacado small{ color: #fff; }
.tema-plus .indicador-mes em{ font-style: normal; font-weight: 600; }
.tema-plus .indicador-mes .sube{ color: var(--ok-texto); }
.tema-plus .indicador-mes.destacado .sube, .tema-plus .indicador-mes.destacado .baja{ color: #fff; }
.tema-plus .indicador-mes .baja{ color: var(--peligro-texto); }
.tema-plus .indicador-mes.positivo b{ color: var(--ok-texto); }
.tema-plus .indicador-mes.negativo b{ color: var(--peligro-texto); }
.tema-plus .graficos-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tema-plus .graficos-grid .grafico{ margin: 0; }
.tema-plus .graficos-grid .grafico-ancho{ grid-column: 1 / -1; }
.tema-plus .grafico-lienzo{ min-height: 300px; }
.tema-plus .ranking{ list-style: none; counter-reset: pos; padding: 0; margin: 0; }
.tema-plus .ranking li{ counter-increment: pos; display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
.tema-plus .ranking li::before{ content: counter(pos); width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: var(--superficie-2); text-align: center; line-height: 28px; font-weight: 600; }
.tema-plus .ranking li span{ flex: 1; }
.tema-plus .ranking li small{ display: block; color: var(--texto-suave); font-size: 12px; }
@media (max-width: 991px){ .tema-plus .graficos-grid{ grid-template-columns: 1fr; } }
.tema-plus .contenedor-tablero{ max-width: 1280px; padding-top: 0; }
.tema-plus .contenedor-tablero .tablero-inicio{ margin-top: 8px; }

/* =========================================================
   Tema oscuro (html[data-theme="oscuro"], lo pone res/js/tema-color.js)
   Casi todo sale de los tokens; abajo, lo que Bootstrap/AdminLTE pintan con colores propios.
   ========================================================= */
:root[data-theme="oscuro"]{
  /* grises neutros (sin tono cafe) y no tan oscuros */
  color-scheme: dark;
  --marca-oscuro:        #1c2029;
  --marca-oscuro-2:      #323845;
  --marca-oscuro-3:      #181b22;
  --marca-acento:        #ff9f1c;
  --marca-acento-claro:  #ffd08a;
  --marca-acento-texto:  #ffb547;
  --fondo:          #22262e;
  --superficie:     #2c313b;
  --superficie-2:   #363c48;
  --texto:          #eef1f6;
  --texto-suave:    #b5bcc8;
  --borde:          #3d4452;
  --borde-fuerte:   #4d5565;
  --ok-fondo: #1f3a2c;      --ok-texto: #9fe0b5;
  --aviso-fondo: #3d3418;   --aviso-texto: #f5d78f;
  --peligro-fondo: #432425; --peligro-texto: #f6aaa2;   --peligro: #e0655a;
  --info-fondo: #1e3048;    --info-texto: #aecdef;
  --sombra:    0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.2);
  --sombra-lg: 0 10px 28px rgba(0,0,0,.45);
  --menu-fondo:       #282d36;
  --menu-fondo-2:     #252a32;
  --menu-sub:         #2e333d;
  --menu-hover:       rgba(255,255,255,.06);
  --menu-abierto:     #363c48;
  --menu-borde:       #3d4452;
  --menu-texto:       #eef1f6;
  --menu-texto-suave: #b5bcc8;
}
:root[data-theme="oscuro"] body,
:root[data-theme="oscuro"] .tema-plus .wrapper{ background: var(--fondo); color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .text-muted,
:root[data-theme="oscuro"] .tema-plus .help-block{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus h1 small,
:root[data-theme="oscuro"] .tema-plus h2 small,
:root[data-theme="oscuro"] .tema-plus h3 small{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .form-control,
:root[data-theme="oscuro"] .tema-plus select,
:root[data-theme="oscuro"] .tema-plus textarea,
:root[data-theme="oscuro"] .tema-plus input[type=text],
:root[data-theme="oscuro"] .tema-plus input[type=number],
:root[data-theme="oscuro"] .tema-plus input[type=search],
:root[data-theme="oscuro"] .tema-plus input[type=date]{ background: var(--superficie-2); color: var(--texto); border-color: var(--borde-fuerte); }
:root[data-theme="oscuro"] .tema-plus .form-control::placeholder{ color: #8c94a2; }
:root[data-theme="oscuro"] .tema-plus .form-control[disabled],
:root[data-theme="oscuro"] .tema-plus .form-control[readonly]{ background: var(--superficie); color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .input-group-addon{ background: var(--superficie); color: var(--texto-suave); border-color: var(--borde-fuerte); }
:root[data-theme="oscuro"] .tema-plus .table{ color: var(--texto); background: transparent; }
:root[data-theme="oscuro"] .tema-plus .table-striped > tbody > tr:nth-of-type(odd){ background: rgba(255,255,255,.025); }
:root[data-theme="oscuro"] .tema-plus .table-hover > tbody > tr:hover{ background: rgba(255,255,255,.04); }
:root[data-theme="oscuro"] .tema-plus .dropdown-menu{ background: var(--superficie); border-color: var(--borde); box-shadow: var(--sombra-lg); }
:root[data-theme="oscuro"] .tema-plus .dropdown-menu > li > a{ color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .dropdown-menu > li > a:hover{ background: var(--superficie-2); color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .dropdown-menu .divider{ background: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .dropdown-header{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .modal-content{ background: var(--superficie); color: var(--texto); border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .modal-header,
:root[data-theme="oscuro"] .tema-plus .modal-footer{ border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .close{ color: var(--texto); text-shadow: none; opacity: .7; }
:root[data-theme="oscuro"] .tema-plus .nav-tabs{ border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .nav-tabs > li > a{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .nav-tabs > li > a:hover{ background: var(--superficie-2); border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .nav-tabs > li.active > a{ background: var(--superficie); color: var(--texto); border-color: var(--borde) var(--borde) transparent; }
:root[data-theme="oscuro"] .tema-plus .pagination > li > a,
:root[data-theme="oscuro"] .tema-plus .pagination > li > span{ background: var(--superficie); border-color: var(--borde); color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .pagination > .active > a{ background: var(--marca-acento); border-color: var(--marca-acento); color: var(--sobre-acento); }
:root[data-theme="oscuro"] .tema-plus .pagination > .disabled > a{ background: var(--superficie); color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .well,
:root[data-theme="oscuro"] .tema-plus .panel,
:root[data-theme="oscuro"] .tema-plus .list-group-item,
:root[data-theme="oscuro"] .tema-plus .info-box,
:root[data-theme="oscuro"] .tema-plus .small-box,
:root[data-theme="oscuro"] .tema-plus .callout,
:root[data-theme="oscuro"] .tema-plus .jumbotron{ background: var(--superficie); color: var(--texto); border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .panel-heading,
:root[data-theme="oscuro"] .tema-plus .panel-footer{ background: var(--superficie-2); color: var(--texto); border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .box-header,
:root[data-theme="oscuro"] .tema-plus .box-footer{ background: transparent; color: var(--texto); border-color: var(--borde); }
:root[data-theme="oscuro"] .tema-plus .box .box-title{ color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .label-default{ background: var(--superficie-2); color: var(--texto); }
:root[data-theme="oscuro"] .tema-plus .alert-info{ background: var(--info-fondo) !important; color: var(--info-texto) !important; border-color: transparent; }
:root[data-theme="oscuro"] .tema-plus .alert-success{ background: var(--ok-fondo) !important; color: var(--ok-texto) !important; border-color: transparent; }
:root[data-theme="oscuro"] .tema-plus .alert-danger{ background: var(--peligro-fondo) !important; color: var(--peligro-texto) !important; border-color: transparent; }
:root[data-theme="oscuro"] .tema-plus .dataTables_wrapper,
:root[data-theme="oscuro"] .tema-plus .dataTables_info{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .main-header .navbar .user-menu .user-header{ background: var(--superficie-2); }
:root[data-theme="oscuro"] .tema-plus .main-header .navbar .user-menu .user-footer{ background: var(--superficie); }
:root[data-theme="oscuro"] .tema-plus .notificacion:not(.leida){ background: rgba(240,138,0,.10); }
:root[data-theme="oscuro"] .tema-plus .login-box-body,
:root[data-theme="oscuro"] .tema-plus .login-logo{ background: var(--superficie); color: var(--texto); }
:root[data-theme="oscuro"] .apexcharts-tooltip,
:root[data-theme="oscuro"] .apexcharts-menu{ background: var(--superficie) !important; color: var(--texto) !important; border-color: var(--borde) !important; }
:root[data-theme="oscuro"] .aviso-caja{ background: var(--superficie); color: var(--texto); }
:root[data-theme="oscuro"] .aviso-fondo.aviso-visible{ background: rgba(0,0,0,.6); }

/* ---------- Selector de tema ---------- */
.tema-plus .selector-tema{ display: inline-flex; gap: 4px; background: var(--superficie-2); padding: 4px; border-radius: 12px; }
.tema-plus .selector-tema .btn{ border: 0; background: transparent; border-radius: 9px; padding: 6px 10px; font-size: 13px; color: var(--texto-suave); }
.tema-plus .selector-tema .btn.activo{ background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); font-weight: 600; }
.tema-plus .tema-en-menu{ margin-bottom: 10px; }
.tema-plus .pantalla-mas .selector-tema{ display: flex; margin-bottom: 18px; }
.tema-plus .pantalla-mas .selector-tema .btn{ flex: 1; min-height: var(--toque); font-size: 15px; }
:root[data-theme="oscuro"] .tema-plus .btn-primary,
:root[data-theme="oscuro"] .tema-plus .btn-primary:focus,
:root[data-theme="oscuro"] .tema-plus .accion-principal{ background: var(--marca-acento); border-color: var(--marca-acento); color: var(--sobre-acento); }
:root[data-theme="oscuro"] .tema-plus .btn-primary:hover,
:root[data-theme="oscuro"] .tema-plus .btn-primary:active,
:root[data-theme="oscuro"] .tema-plus .accion-principal:hover{ background: var(--marca-acento-claro); border-color: var(--marca-acento-claro); color: var(--sobre-acento); }
:root[data-theme="oscuro"] .tema-plus .accion-principal .fa, :root[data-theme="oscuro"] .tema-plus .accion-principal span{ color: var(--sobre-acento); }
/* rojo de peligro (#e0655a) sirve para texto sobre oscuro, pero con letra blanca encima no se lee: botones mas oscuros */
:root[data-theme="oscuro"] .tema-plus .btn-danger,
:root[data-theme="oscuro"] .tema-plus .btn-danger:focus{ background: #b42318; border-color: #b42318; color: #fff; }
:root[data-theme="oscuro"] .tema-plus .btn-danger:hover{ background: #c93a2e; border-color: #c93a2e; color: #fff; }
:root[data-theme="oscuro"] .aviso-titulo{ color: var(--texto); }
:root[data-theme="oscuro"] .aviso-mensaje{ color: var(--texto-suave); }
:root[data-theme="oscuro"] .tema-plus .pager li > a,
:root[data-theme="oscuro"] .tema-plus .pager li > span{ background: var(--superficie); border-color: var(--borde); color: var(--marca-acento-texto); }
:root[data-theme="oscuro"] .tema-plus .pager li > a:hover{ background: var(--superficie-2); }
:root[data-theme="oscuro"] .tema-plus .btn-success{ background: #2f7d4a; border-color: #2f7d4a; color: #fff; }
:root[data-theme="oscuro"] .tema-plus .btn-success:hover{ background: #37905a; border-color: #37905a; color: #fff; }

/* Menu lateral: ocupa todo el alto de la pantalla y tiene su propio scroll (computadora) */
@media (min-width: 768px){
  /* encabezado fijo arriba (sticky no sirve: AdminLTE pone overflow hidden en .wrapper) */
  .tema-plus .main-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }
  .tema-plus .content-wrapper{ padding-top: 58px; }
  .tema-plus .main-sidebar{ position: fixed; top: 0; bottom: 0; overflow-y: auto; overscroll-behavior: contain; }
  .tema-plus.sidebar-collapse .main-sidebar{ overflow: visible; }
}
.tema-plus .selector-mes .form-control{ width: auto; min-width: 180px; }
/* el punto de "sin leer" no se estira como el texto de la opcion (antes salia una barra roja) */
.tema-plus .lista-app-op > .punto-nueva{ flex: 0 0 10px; width: 10px; height: 10px; }

/* ---------- Interruptor si/no (Configuracion) ---------- */
.tema-plus .interruptor{ display: inline-flex; align-items: center; gap: 10px; cursor: pointer; margin: 0; font-weight: 500; }
.tema-plus .interruptor input{ position: absolute; opacity: 0; width: 1px; height: 1px; }
.tema-plus .interruptor-riel{ width: 48px; height: 28px; border-radius: 14px; background: var(--borde-fuerte); position: relative; transition: background .15s; flex: 0 0 48px; }
.tema-plus .interruptor-riel::after{ content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.tema-plus .interruptor input:checked + .interruptor-riel{ background: var(--sec-6); }
.tema-plus .interruptor input:checked + .interruptor-riel::after{ transform: translateX(20px); }
.tema-plus .interruptor input:focus-visible + .interruptor-riel{ outline: 3px solid var(--marca-acento); outline-offset: 2px; }
.tema-plus .interruptor-texto::after{ content: attr(data-no); color: var(--texto-suave); }
.tema-plus .interruptor input:checked ~ .interruptor-texto::after{ content: attr(data-si); color: var(--ok-texto); }

/* ---------- Ayuda (i) en formularios: texto al pasar el mouse o al tocar ---------- */
.tema-plus .ayuda{ position: relative; display: inline-flex; align-items: center; margin-left: 6px; color: var(--sec-5); cursor: help; outline: none; vertical-align: middle; }
.tema-plus .ayuda .fa{ font-size: 16px; }
.tema-plus .ayuda::after{
  content: attr(data-ayuda); position: absolute; z-index: 1050; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: 280px; padding: 10px 12px; border-radius: 10px; background: var(--texto); color: var(--superficie);
  font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: var(--sombra-lg);
  opacity: 0; visibility: hidden; transition: opacity .12s; pointer-events: none;
}
.tema-plus .ayuda:hover::after, .tema-plus .ayuda:focus::after{ opacity: 1; visibility: visible; }
.tema-plus .ayuda:focus-visible .fa{ outline: 2px solid var(--marca-acento); border-radius: 50%; }
@media (max-width: 767px){ .tema-plus .ayuda::after{ left: auto; right: -40px; transform: none; max-width: 240px; } }
.tema-plus .formulario-producto fieldset{ border: 0; margin: 0 0 8px; padding: 0; }
.tema-plus .formulario-producto legend{ font-family: var(--fuente-titulos); font-size: 19px; border-bottom: 1px solid var(--borde); color: var(--texto); padding-bottom: 6px; margin-bottom: 16px; }
.tema-plus .formulario-producto .foto-producto{ max-width: 180px; margin-top: 10px; border-radius: var(--radio-sm); }

/* ---------- Tamaño de letra: un punto mas grande (numeros legibles) ---------- */
body.tema-plus, .tema-plus .content-wrapper{ font-size: 15px; }
.tema-plus .table{ font-size: 15px; font-variant-numeric: tabular-nums; }
.tema-plus .table > thead > tr > th, .tema-plus table.table > tbody > tr:first-child > th{ font-size: 14px; }
.tema-plus .form-control{ font-size: 15px; }
.tema-plus .input-group-addon{ font-size: 15px; }
.tema-plus .cobro-totales{ font-variant-numeric: tabular-nums; }
.tema-plus .cobro-totales > div{ font-size: 16px; }
.tema-plus .totales-compra .cobro-total dd{ font-size: 26px; }
.tema-plus .label{ font-size: 13px; }
.tema-plus .btn-xs, .tema-plus .btn-sm{ font-size: 14px; }
.tema-plus .indicador-mes b, .tema-plus .indicador b{ font-variant-numeric: tabular-nums; }
/* Compras */
.tema-plus .busqueda-grande{ display: flex; align-items: center; gap: 8px; position: relative; }
.tema-plus .busqueda-grande > .fa-search{ position: absolute; left: 14px; color: var(--texto-suave); }
.tema-plus .busqueda-grande .form-control{ height: 52px; padding-left: 40px; font-size: 17px; flex: 1; }
.tema-plus .busqueda-grande .btn{ height: 52px; padding: 0 20px; }
.tema-plus .ayuda-busqueda{ margin: 8px 0 14px; }
.tema-plus .lista-compra{ margin-top: 18px; }
.tema-plus .totales-compra{ max-width: 420px; margin: 14px 18px 4px auto; }
.tema-plus .form-compra{ padding: 8px 18px 18px; border-top: 1px solid var(--borde); }
.tema-plus .tabla-abastecer .btn.agregado{ background: var(--sec-6); border-color: var(--sec-6); color: #fff; }

/* ---------- Campo de archivo en espanol (res/js/campo-archivo.js) ---------- */
.tema-plus .campo-archivo{ display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-weight: 400; cursor: pointer; max-width: 100%; }
.tema-plus .campo-archivo input[type=file]{ position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.tema-plus .campo-archivo input[type=file]:focus-visible + .btn{ outline: 3px solid var(--marca-acento); outline-offset: 2px; }
.tema-plus .campo-archivo-nombre{ color: var(--texto-suave); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* ---------- Vender: sugerencias mientras se escribe ---------- */
.tema-plus .campo-busqueda{ position: relative; }
.tema-plus .sugerencias{
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: var(--sombra-lg);
  max-height: 60vh; overflow-y: auto;
}
.tema-plus .sugerencias[hidden]{ display: none; }
.tema-plus .sugerencias li{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; min-height: var(--toque); }
.tema-plus .sugerencias li:hover, .tema-plus .sugerencias li.activa{ background: var(--superficie-2); }
.tema-plus .sugerencias li.agotado .sug-datos small{ color: var(--peligro-texto); }
.tema-plus .sugerencias .sug-nombre{ font-weight: 500; }
.tema-plus .sugerencias small{ display: block; font-size: 12px; color: var(--texto-suave); font-weight: 400; }
.tema-plus .sugerencias .sug-datos{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tema-plus .sugerencias .sin-sugerencias{ cursor: default; color: var(--texto-suave); }

/* Nombres de sucursal largos (p. ej. "ROVIL IMPORTACIONES - ALMACÉN"): lo que distingue a dos sucursales suele
   estar al FINAL del nombre, asi que no se corta con "...": en computadora entra en una linea con letra algo
   menor; en el celular puede ocupar dos lineas. */
.tema-plus .selector-tienda-nombre.nombre-largo{ font-size: 15px; max-width: 340px; }
@media (max-width: 767px){
  .tema-plus .selector-tienda-nombre.nombre-largo{
    font-size: 11.5px; line-height: 1.15; max-width: 132px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
}

/* Gris de texto secundario: el de Bootstrap (#777) no llega al contraste minimo sobre fondos grises claros */
.tema-plus .text-muted{ color: var(--texto-suave); }
.tema-plus h1 small, .tema-plus .titulo-pantalla small{ color: var(--texto-suave); }

/* Menus desplegables de la barra superior (sucursal, usuario, notificaciones) con los colores del tema:
   AdminLTE y micss.css traian colores fijos de tema claro (#333, #666, #777, cabecera azul) que en tema
   oscuro quedaban invisibles (p. ej. el nombre de la otra sucursal en el selector). */
.tema-plus .selector-tienda .dropdown-menu{ background: var(--superficie); }
.tema-plus .selector-tienda .dropdown-menu > li > a{ color: var(--texto) !important; }
.tema-plus .selector-tienda .dropdown-menu > li:not(.active) > a:hover,
.tema-plus .selector-tienda .dropdown-menu > li:not(.active) > a:focus{ background: var(--superficie-2) !important; }
.tema-plus .selector-tienda .dropdown-menu > .dropdown-header{ color: var(--texto-suave); }
.tema-plus .navbar-nav > .user-menu > .dropdown-menu > li.user-header{ background: var(--marca-oscuro); }
.tema-plus .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p{ color: var(--texto-sobre-oscuro); }
:root[data-theme="oscuro"] .tema-plus .navbar-nav > .user-menu > .dropdown-menu > li.user-header > p{ color: var(--texto); }
.tema-plus .navbar-nav > .user-menu > .dropdown-menu > .user-footer .btn-default{ color: var(--texto); }
.tema-plus .navbar-nav > .user-menu > .dropdown-menu > .user-footer .selector-tema .btn{ color: var(--texto-suave); }
.tema-plus .navbar-nav > .user-menu > .dropdown-menu > .user-footer .selector-tema .btn.activo{ color: var(--texto); }
.tema-plus .menu-notificaciones small{ color: var(--texto-suave) !important; }
.tema-plus .menu-notificaciones > li.footer > a{ color: var(--marca-acento-texto) !important; }
.tema-plus .menu-notificaciones .notificacion{ color: var(--texto) !important; }