/* =============================================================================
   HELADOS Y PALETAS ALTEÑA — custom.css
   Capa de personalización visual sobre AdminLTE 3 / Bootstrap 4 / jQuery 3.
   -----------------------------------------------------------------------------
   IMPORTANTE:
   - Este archivo se enlaza DESPUÉS de adminlte.min.css (ver link.php) para
     sobreescribir el tema por defecto. No cambia ningún HTML ni clase de AdminLTE.
   - Toda la personalización de color/tipografía vive en :root (más abajo).
     Cambia ahí los valores y se propaga a todo el sistema.
   - Algunas vistas (Home, Venta, Login) tienen <style> inline; donde hace falta
     ganarles usamos selectores de mayor especificidad (NO !important salvo casos
     puntuales documentados).

   ÍNDICE (fases)
     FASE 0  — Variables de diseño (:root)
     FASE 1  — Base, tipografía y scrollbars
     FASE 2  — Sidebar (menú lateral)
     FASE 3  — Navbar (barra superior)
     FASE 4  — Encabezados de página y breadcrumbs
     FASE 5  — Cards, info-box y small-box (widgets del dashboard)
     FASE 6  — Tablas y DataTables
     FASE 7  — Botones (incluye botones grandes .btn-app)
     FASE 8  — Formularios e inputs (+ Select2 / daterangepicker)
     FASE 9  — Badges y pills de estatus
     FASE 10 — Modales
     FASE 11 — Plugins (SweetAlert2, Toastr, barras de progreso)
     FASE 12 — Pantalla de Login
     FASE 13 — Toques específicos por vista (Home, Venta, Domicilio, totales)
     FASE 14 — Micro-animaciones y utilidades
============================================================================= */


/* =============================================================================
   FASE 0 — VARIABLES DE DISEÑO
   Paleta "heladería artesanal": navy arándano + teal menta + fresa.
   Fresca y apetitosa, pero sobria para un punto de venta administrativo.
============================================================================= */
:root {
  /* --- Color de marca --- */
  --c-primary:        #14B8A6;   /* Teal menta: acciones principales, links, acentos */
  --c-primary-rgb:    20,184,166;
  --c-primary-dark:   #0E8C81;   /* Hover/active del primario */
  --c-primary-light:  #5EE0D3;

  --c-accent:         #FF6B8A;   /* Fresa: detalles, resaltados puntuales */
  --c-accent-rgb:     255,107,138;

  --c-secondary:      #5B6B7B;   /* Gris pizarra: acciones secundarias */
  --c-secondary-rgb:  91,107,123;

  /* --- Color semántico (estatus) --- */
  --c-success:        #2BB673;   /* Pagado / positivo */
  --c-success-rgb:    43,182,115;
  --c-warning:        #F4A52A;   /* Pendiente / en camino */
  --c-warning-rgb:    244,165,42;
  --c-danger:         #EF4B5B;   /* Cancelar / error */
  --c-danger-rgb:     239,75,91;
  --c-info:           #3FA9F5;   /* Informativo */
  --c-info-rgb:       63,169,245;

  /* --- Superficies y fondos --- */
  --c-bg:             #F4F6FB;   /* Fondo general de la app (más suave que AdminLTE) */
  --c-surface:        #FFFFFF;   /* Tarjetas, navbar, modales */
  --c-surface-2:      #FBFCFE;   /* Zebra / encabezados de tabla suaves */
  --c-border:         #E6EAF1;   /* Bordes sutiles */

  /* --- Sidebar --- */
  --c-sidebar-top:    #1E2746;   /* Degradado navy arándano (arriba) */
  --c-sidebar-bottom: #161C33;   /* (abajo) */
  --c-sidebar-text:   #C7CEDB;   /* Texto del menú en reposo */
  --c-sidebar-muted:  #8A93A8;   /* Texto secundario / iconos apagados */

  /* --- Texto --- */
  --c-text:           #2C3444;   /* Texto principal */
  --c-text-muted:     #707A8A;   /* Texto secundario */
  --c-heading:        #1C2330;   /* Títulos */

  /* --- Tipografía --- */
  --font-body:    'Inter', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', 'Inter', 'Segoe UI', sans-serif;

  /* --- Radios --- */
  --radius-sm: .5rem;
  --radius:    .85rem;
  --radius-lg: 1.15rem;
  --radius-pill: 50rem;

  /* --- Sombras (suaves, en una sola dirección para sensación premium) --- */
  --shadow-xs: 0 1px 2px rgba(28,35,48,.06);
  --shadow-sm: 0 2px 8px rgba(28,35,48,.07);
  --shadow:    0 6px 18px rgba(28,35,48,.08);
  --shadow-lg: 0 14px 34px rgba(28,35,48,.12);

  /* --- Transiciones --- */
  --t-fast: .15s ease;
  --t:      .25s ease;
  --t-slow: .4s cubic-bezier(.2,.7,.3,1);
}


/* =============================================================================
   FASE 1 — BASE, TIPOGRAFÍA Y SCROLLBARS
   Decisión: cuerpo en Inter (altísima legibilidad en datos densos) y títulos
   en Poppins (geométrica, amigable, "heladería"). Fondo gris muy claro y frío
   para que las tarjetas blancas "floten".
============================================================================= */
body,
.wrapper {
  background-color: var(--c-bg);
}

body {
  font-family: var(--font-body);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: .1px;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-heading);
  color: var(--c-heading);
  font-weight: 600;
  letter-spacing: -.2px;
}

a {
  color: var(--c-primary);
  transition: color var(--t-fast);
}
a:hover {
  color: var(--c-primary-dark);
}

/* Selección de texto en la paleta de marca */
::selection {
  background: rgba(var(--c-primary-rgb), .22);
}

/* Scrollbar global discreto (WebKit/Blink) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #c4cbd8;
  border-radius: 50rem;
  border: 2px solid var(--c-bg);
}
*::-webkit-scrollbar-thumb:hover { background: #a9b2c2; }


/* =============================================================================
   FASE 2 — SIDEBAR (menú lateral)
   Degradado navy arándano + acento teal en el ítem activo. Iconos y hover con
   transición suave. Marca y panel de usuario con separadores sutiles.
============================================================================= */
.main-sidebar,
.main-sidebar.sidebar-dark-primary {
  background: linear-gradient(180deg, var(--c-sidebar-top) 0%, var(--c-sidebar-bottom) 100%);
  box-shadow: 4px 0 22px rgba(0,0,0,.18);
}

/* Logo / marca */
.brand-link {
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding-top: .9rem;
  padding-bottom: .9rem;
}
.brand-link .brand-text {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .3px;
}
.brand-link .brand-image {
  box-shadow: 0 0 0 2px rgba(var(--c-primary-rgb), .55);
  transition: transform var(--t);
}
.brand-link:hover .brand-image { transform: scale(1.06) rotate(-3deg); }

/* Panel de usuario */
.main-sidebar .user-panel {
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.main-sidebar .user-panel .info a { color: #fff; }
/* Permite que el nombre y la sucursal largos hagan salto de línea en vez de
   recortarse contra el borde del sidebar (min-width:0 deja encoger el flex item). */
.main-sidebar .user-panel .info {
  min-width: 0;
  overflow: visible;
}
.main-sidebar .user-panel .info a {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.main-sidebar .user-panel .image img {
  box-shadow: 0 0 0 2px rgba(255,255,255,.15);
}

/* Buscador del sidebar */
.main-sidebar .form-control-sidebar {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.main-sidebar .form-control-sidebar::placeholder { color: var(--c-sidebar-muted); }
.main-sidebar .btn-sidebar {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--c-sidebar-text);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Ítems del menú */
.main-sidebar .nav-sidebar .nav-link {
  color: var(--c-sidebar-text);
  border-radius: var(--radius-sm);
  margin: 2px 10px;
  padding: .65rem .85rem;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.main-sidebar .nav-sidebar .nav-icon { color: var(--c-sidebar-muted); transition: color var(--t-fast); }

/* Hover de ítems */
.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: translateX(2px);
}
.main-sidebar .nav-sidebar .nav-link:hover .nav-icon { color: var(--c-primary-light); }

/* Ítem ACTIVO: pastilla teal con leve resplandor */
.main-sidebar.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(var(--c-primary-rgb), .35);
}
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon { color: #fff; }

/* Submenú (treeview) ligeramente hundido */
.main-sidebar .nav-treeview {
  background: rgba(0,0,0,.16);
  border-radius: var(--radius-sm);
  margin: 2px 10px 6px;
  padding: 4px 0;
}
.main-sidebar .nav-treeview .nav-link {
  margin: 1px 6px;
  font-size: .92rem;
}
.main-sidebar .nav-treeview > .nav-item > .nav-link.active {
  background: rgba(var(--c-primary-rgb), .22);
  color: #fff;
}

/* Flecha de los menús desplegables */
.main-sidebar .nav-sidebar .nav-link p .right { transition: transform var(--t); }
.main-sidebar .nav-sidebar .menu-open > .nav-link p .right { transform: rotate(-90deg); }


/* =============================================================================
   FASE 3 — NAVBAR (barra superior)
   Se mantiene blanca (limpia) pero "elevada": sombra suave, borde inferior
   sutil e iconos que reaccionan al hover con el color de marca.
============================================================================= */
.main-header.navbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}
.main-header .nav-link {
  color: var(--c-text-muted);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.main-header .nav-link:hover {
  background: rgba(var(--c-primary-rgb), .08);
  color: var(--c-primary);
}
.main-header .navbar-nav .nav-link i { font-size: 1.05rem; }


/* =============================================================================
   FASE 4 — ENCABEZADOS DE PÁGINA Y BREADCRUMBS
============================================================================= */
.content-header h1,
.content-wrapper > .content-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--c-heading);
}
.content-header { padding: 1.2rem .5rem .4rem; }

.breadcrumb {
  background: transparent;
  padding: .25rem 0;
  margin-bottom: 0;
}
.breadcrumb-item.active { color: var(--c-primary); font-weight: 600; }
.breadcrumb-item + .breadcrumb-item::before { color: #c2c9d6; }

/* Ícono de caja registradora junto a títulos (Listaventa) */
.content-header .fa-cash-register {
  color: var(--c-primary);
  transition: transform var(--t-fast), color var(--t-fast);
}
.content-header .fa-cash-register:hover { transform: scale(1.12); color: var(--c-primary-dark); }


/* =============================================================================
   FASE 5 — CARDS, INFO-BOX Y SMALL-BOX (widgets)
   Bordes redondeados, sombra suave, sin la barra de color superior dura de
   AdminLTE. Hover con leve elevación. info-box con iconos en gradiente.
============================================================================= */
.card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}
.card:hover { box-shadow: var(--shadow); }

/* Quitamos la línea de color superior dura que pone AdminLTE en .card-* */
.card.card-primary:not(.card-outline) > .card-header,
.card.card-default > .card-header { background: transparent; }
.card-primary.card-outline { border-top: 3px solid var(--c-primary); }

.card-header {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 1rem 1.25rem;
}
.card-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.05rem;
}
.card-body { padding: 1.25rem; }
.card-footer {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* info-box (tarjetas de totales del dashboard de ventas) */
.info-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  transition: box-shadow var(--t), transform var(--t);
  min-height: 78px;
}
.info-box:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.info-box .info-box-icon {
  border-radius: var(--radius);
  font-size: 1.5rem;
  min-width: 70px;
}
/* Recolorea el icono verde por defecto al success de marca con gradiente */
.info-box .info-box-icon.bg-success {
  background: linear-gradient(135deg, var(--c-success) 0%, #1f9c60 100%) !important;
}
.info-box .info-box-text { color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; font-size: .72rem; letter-spacing: .4px; }
.info-box .info-box-number {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--c-heading);
  font-size: 1.4rem;
}

/* small-box (si se usa en otros tableros) */
.small-box {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.small-box:hover { box-shadow: var(--shadow); }
.small-box .icon { transition: transform var(--t-slow); }
.small-box:hover .icon { transform: scale(1.12) rotate(-6deg); }


/* =============================================================================
   FASE 6 — TABLAS Y DATATABLES
   Encabezado con contraste suave, zebra elegante, hover teal, bordes finos.
============================================================================= */
.card-body > .table,
.table {
  color: var(--c-text);
}
.table thead th {
  background: var(--c-surface-2);
  color: var(--c-text-muted);
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .5px;
  font-weight: 700;
  border-bottom: 2px solid var(--c-border);
  border-top: 0;
  /* Padding horizontal = .75rem (igual que AdminLTE) para NO ensanchar columnas
     y evitar que el plugin DataTables Responsive colapse columnas en pantallas
     de ~1366-1600px. Solo aumentamos el padding vertical para dar aire. */
  padding: .8rem .75rem;
  vertical-align: middle;
}
.table td {
  padding: .7rem .75rem;
  vertical-align: middle;
  border-top: 1px solid var(--c-border);
}
/* Zebra suave */
.table-hover tbody tr,
.table tbody tr { transition: background var(--t-fast); }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(var(--c-primary-rgb), .025); }
.table-hover tbody tr:hover { background: rgba(var(--c-primary-rgb), .07); }

/* Suaviza el table-bordered (se usa en Listaventa) */
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--c-border); }
.table-bordered { border-radius: var(--radius-sm); overflow: hidden; }

/* Iconos de acción dentro de tablas (ver/imprimir/editar) */
.table .fa-eye,
.table .fa-print,
.table .fa-pen,
.table .fa-edit { color: var(--c-secondary); transition: color var(--t-fast), transform var(--t-fast); }
.table .fa-eye:hover { color: var(--c-info); transform: scale(1.18); }
.table .fa-print:hover { color: var(--c-primary); transform: scale(1.18); }
.table .fa-pen:hover,
.table .fa-edit:hover { color: var(--c-primary); transform: scale(1.18); }

/* --- DataTables (controles superiores e inferiores) --- */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: .35rem .6rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .2);
  outline: 0;
}
.dataTables_wrapper .dataTables_info { color: var(--c-text-muted); }

/* Paginación de DataTables — integración Bootstrap 4 (.pagination > .page-item).
   AdminLTE pinta el botón activo de azul; lo pasamos al teal de marca. */
.pagination .page-link {
  color: var(--c-primary);
  border-color: var(--c-border);
  transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.pagination .page-link:hover { background: rgba(var(--c-primary-rgb), .1); color: var(--c-primary-dark); border-color: var(--c-border); }
.pagination .page-link:focus { box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .25); }
.pagination .page-item.active .page-link {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
  box-shadow: 0 4px 10px rgba(var(--c-primary-rgb), .3);
}
.pagination .page-item.disabled .page-link { color: #b8c0cd; }

/* Paginación clásica de DataTables (cuando NO usa el tema Bootstrap) */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--radius-sm) !important;
  border: 1px solid transparent !important;
  margin: 0 2px;
  padding: .35rem .75rem !important;
  color: var(--c-text-muted) !important;
  transition: background var(--t-fast), color var(--t-fast);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(var(--c-primary-rgb), .1) !important;
  border-color: transparent !important;
  color: var(--c-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 10px rgba(var(--c-primary-rgb), .3);
}


/* =============================================================================
   FASE 7 — BOTONES
   Estados hover/focus refinados, esquinas redondeadas consistentes, leve
   elevación al pasar el cursor. Anillo de foco accesible en color de marca.
============================================================================= */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  letter-spacing: .2px;
  padding: .45rem 1.05rem;
  transition: background var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .35); }

/* Primario */
.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), .28);
}
.btn-primary:hover { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .4); }
.btn-primary:not(:disabled):not(.disabled):active { background: var(--c-primary-dark); border-color: var(--c-primary-dark); }

/* Secundario */
.btn-secondary { background: var(--c-secondary); border-color: var(--c-secondary); }
.btn-secondary:hover { background: #4a5867; border-color: #4a5867; }

/* Semánticos */
.btn-success { background: var(--c-success); border-color: var(--c-success); box-shadow: 0 4px 12px rgba(var(--c-success-rgb), .28); }
.btn-success:hover { background: #1f9c60; border-color: #1f9c60; }
.btn-warning { background: var(--c-warning); border-color: var(--c-warning); color: #4a3300; }
.btn-warning:hover { background: #e0941d; border-color: #e0941d; color: #4a3300; }
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); box-shadow: 0 4px 12px rgba(var(--c-danger-rgb), .25); }
.btn-danger:hover { background: #d83a49; border-color: #d83a49; }
.btn-info { background: var(--c-info); border-color: var(--c-info); }
.btn-info:hover { background: #2b97e3; border-color: #2b97e3; }

/* Botón "default" (Cerrar de modales, etc.) */
.btn-default {
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.btn-default:hover { background: var(--c-surface-2); border-color: #cfd6e2; }

/* Outline */
.btn-outline-primary { color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline-primary:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* Botones grandes tipo .btn-app (Home / Venta). Suaviza esquinas, sombra y
   elevación al hover. NO fijamos color de fondo aquí para no pelear con el
   color que cada vista asigna (azul Home / verde productos Venta). */
.content-wrapper .btn-app {
  border-radius: var(--radius-lg);
  border: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--t), box-shadow var(--t), filter var(--t-fast);
}
.content-wrapper .btn-app:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  filter: brightness(1.05);
}
.content-wrapper .btn-app:active { transform: translateY(-1px); }


/* =============================================================================
   FASE 8 — FORMULARIOS E INPUTS
   Anillo de foco en color de marca, bordes consistentes, mejor altura.
============================================================================= */
.form-control,
.custom-select {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus,
.custom-select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .2);
}
.form-control::placeholder { color: #aab2c0; }

label { color: var(--c-heading); font-weight: 600; }

/* input-group (campos con icono: fecha, usuario, contraseña) */
.input-group-text {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  color: var(--c-text-muted);
  border-radius: var(--radius-sm);
}

/* Checkbox / radio custom (Mayoreo, Cobrar envío, Precio especial, Pendientes) */
.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .25) !important;
}

/* icheck (usado en Login) */
.icheck-primary > input:first-child:checked + label::before {
  background: var(--c-primary);
  border-color: var(--c-primary);
}

/* Select2 con tema bootstrap4 */
.select2-container--bootstrap4 .select2-selection {
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-sm) !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .2);
}
.select2-container--bootstrap4 .select2-results__option--highlighted {
  background: var(--c-primary) !important;
}

/* daterangepicker: rango y día activo en color de marca */
.daterangepicker td.active,
.daterangepicker td.active:hover { background: var(--c-primary); }
.daterangepicker .ranges li.active { background: var(--c-primary); }
.daterangepicker td.in-range { background: rgba(var(--c-primary-rgb), .12); }
.daterangepicker .drp-buttons .btn.applyBtn { background: var(--c-primary); border-color: var(--c-primary); }


/* =============================================================================
   FASE 9 — BADGES Y PILLS DE ESTATUS
   Listaventa usa badges como botones (Pagar/Cancelar/Pagado/etc.). Les damos
   forma de pastilla, padding cómodo y micro-feedback al hover.
============================================================================= */
.badge {
  font-weight: 600;
  letter-spacing: .2px;
  border-radius: var(--radius-pill);
  padding: .4em .85em;
}
.badge-success { background: var(--c-success); }
.badge-warning { background: var(--c-warning); color: #4a3300; }
.badge-danger  { background: var(--c-danger); }
.badge-info    { background: var(--c-info); }
.badge-primary { background: var(--c-primary); }
.badge-secondary { background: var(--c-secondary); }

/* Badges clicables (cursor:pointer ya viene inline) → feedback al hover */
.badge[onclick] { transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast); }
.badge[onclick]:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--shadow-xs); }


/* =============================================================================
   FASE 10 — MODALES
   Esquinas redondeadas, sombra profunda, encabezado/pie limpios.
============================================================================= */
.modal-content {
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--c-border);
  padding: 1rem 1.5rem;
}
.modal-title { font-family: var(--font-heading); font-weight: 600; }
.modal-body { padding: 1.5rem; }
.modal-footer { border-top: 1px solid var(--c-border); background: var(--c-surface-2); }
.modal-backdrop.show { opacity: .45; }

/* Botón de cerrar (×) legible sobre encabezados de color oscuro.
   Garantiza consistencia aunque un modal olvide la clase text-white.
   bg-warning / bg-light se dejan con × oscuro (contrastan mejor). */
.modal-header.bg-primary .close,
.modal-header.bg-secondary .close,
.modal-header.bg-success .close,
.modal-header.bg-info .close,
.modal-header.bg-danger .close,
.modal-header.bg-dark .close {
  color: #fff;
  text-shadow: none;
  opacity: .85;
}
.modal-header.bg-primary .close:hover,
.modal-header.bg-secondary .close:hover,
.modal-header.bg-success .close:hover,
.modal-header.bg-info .close:hover,
.modal-header.bg-danger .close:hover,
.modal-header.bg-dark .close:hover { opacity: 1; }

/* Acciones del pie del modal: botones de igual ancho que llenan la fila y se
   encogen en pantallas angostas (evita que se desborden en móvil). */
.modal-footer .modal-acciones { display: flex; gap: 10px; width: 100%; }
.modal-footer .modal-acciones .btn { flex: 1; font-weight: 700; }

/* La franja .bg-primary del modal de Listaventa (totales) → gradiente de marca */
.modal-body .bg-primary {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%) !important;
  border-radius: var(--radius-sm);
}


/* =============================================================================
   FASE 11 — PLUGINS (SweetAlert2, Toastr, barras de progreso, alerts)
============================================================================= */
/* SweetAlert2 */
.swal2-popup { border-radius: var(--radius) !important; font-family: var(--font-body); }
.swal2-styled.swal2-confirm {
  background: var(--c-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 4px 12px rgba(var(--c-primary-rgb), .3) !important;
}
.swal2-styled.swal2-cancel { background: var(--c-secondary) !important; border-radius: var(--radius-sm) !important; }

/* Toastr */
.toast { border-radius: var(--radius-sm) !important; box-shadow: var(--shadow) !important; opacity: 1 !important; }
.toast-success { background-color: var(--c-success) !important; }
.toast-error   { background-color: var(--c-danger) !important; }
.toast-warning { background-color: var(--c-warning) !important; }
.toast-info    { background-color: var(--c-info) !important; }

/* Barras de progreso (Venta / Listaventa) */
.progress {
  border-radius: var(--radius-pill);
  background: var(--c-border);
  height: .7rem;
  overflow: hidden;
}
.progress-bar,
.progress-bar-success {
  background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-primary-light) 100%);
  transition: width .4s ease;
}

/* Alerts genéricas (msgAlert / msgError) */
.alert { border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow-xs); }


/* =============================================================================
   FASE 12 — PANTALLA DE LOGIN
   La vista tiene <style> inline con fondo morado; lo ganamos con body.login-page
   (mayor especificidad). Tarjeta centrada, fondo de marca, logo destacado.
============================================================================= */
body.login-page {
  background: linear-gradient(135deg, var(--c-sidebar-top) 0%, var(--c-primary-dark) 100%) !important;
  min-height: 100vh;
}
.login-page .card.container,
.login-page .login-box .card {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.login-page .card-header { background: var(--c-surface); border-bottom: 0; }
.login-page .login-logo img {
  box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .18);
}
.login-page .btn-primary { width: 100%; }


/* =============================================================================
   FASE 13 — TOQUES ESPECÍFICOS POR VISTA
   Selectores de alta especificidad para superar los <style> inline de cada vista.
============================================================================= */

/* --- HOME: botones grandes VENTA / DOMICILIO ---
   Ganan a la regla inline `.btn-app{background:#367fa9}` con (.content-wrapper +
   doble clase). Se visten con el gradiente de marca. */
.content-wrapper .btn-app.btn-block,
.content-wrapper #btnVenta,
.content-wrapper #btnDomicilio {
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-dark) 100%);
  color: #fff;
  font-family: var(--font-heading);
  letter-spacing: .5px;
}
/* Diferenciamos DOMICILIO con el acento fresa para jerarquía visual */
.content-wrapper #btnDomicilio {
  background: linear-gradient(135deg, var(--c-accent) 0%, #e8567a 100%);
}

/* --- VENTA: rejilla de productos (botones .btn-app no-block, verdes por JS) ---
   Mantenemos verde de marca + esquinas y sombra coherentes. */
.content-wrapper .btn-app:not(.btn-block).btn-success,
.content-wrapper .btn-app:not(.btn-block) {
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Indicadores de totales (Cantidad / Total) en Venta y Domicilio */
#CantidadGlobal .fa-circle.text-primary { color: var(--c-primary) !important; }
#TotalGlobal .fa-circle.text-warning { color: var(--c-warning) !important; }

/* Botón COBRAR / REGISTRAR PEDIDO en el footer fijo */
.main-footer .btn-lg.btn-block,
.main-footer .btn-primary.btn-lg {
  border-radius: var(--radius);
  font-family: var(--font-heading);
  letter-spacing: .6px;
  padding: .9rem;
  font-size: 1.15rem;
}
.main-footer { background: var(--c-surface); border-top: 1px solid var(--c-border); }

/* --- DOMICILIO: secciones colapsables Cliente/Pedido/Observaciones --- */
.content-wrapper .card-header[data-toggle="collapse"],
.content-wrapper .card .card-header.collapsed { cursor: pointer; }

/* Total grande (Listaventa pagar / Domicilio) */
#totalventaPagar,
#cambioPagar { color: var(--c-primary) !important; font-family: var(--font-heading); }


/* =============================================================================
   FASE 14 — MICRO-ANIMACIONES Y UTILIDADES
   Aparición suave de tarjetas al cargar y del wrapper. Respeta usuarios que
   piden reducir movimiento (accesibilidad).
============================================================================= */
@keyframes lf-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.content-wrapper .card,
.content-wrapper .info-box,
.content-wrapper .small-box {
  animation: lf-fade-up var(--t-slow) both;
}

/* Apertura del sidebar (push-menu) un poco más fluida */
.sidebar-mini .main-sidebar,
.main-sidebar { transition: margin-left var(--t), width var(--t); }

/* Transición suave del content-wrapper al colapsar el menú */
.content-wrapper { transition: margin-left var(--t); }

/* Clase utilitaria opcional para resaltar un dato con el acento de marca */
.text-accent { color: var(--c-accent) !important; }
.bg-brand { background: var(--c-primary) !important; color: #fff !important; }

/* Accesibilidad: desactiva animaciones si el sistema lo pide */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Ajustes responsive menores */
@media (max-width: 575.98px) {
  .content-header h1 { font-size: 1.35rem; }
  .card-body { padding: 1rem; }
}


/* =============================================================================
   FASE 15 — PANTALLAS POS (VENTA y DOMICILIO)
   Refinamiento por pantalla. Solo CSS sobre el markup existente (botones de
   producto/sabor generados por JS, acordeones colapsables, pestañas, totales).
============================================================================= */

/* --- Botones de producto / sabor (.btn-app.bg-success generados por JS) ---
   Bootstrap pone .bg-success con !important, así que reescribimos con !important.
   Verde "pistache" en degradado, tipografía de marca y un realce al pasar. */
.content-wrapper .btn-app.bg-success {
  background: linear-gradient(135deg, var(--c-success) 0%, #1f9c60 100%) !important;
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: .2px;
  text-shadow: 0 1px 1px rgba(0,0,0,.12);
}
.content-wrapper .btn-app.bg-success:hover { filter: brightness(1.05); }

/* Badges de selección que el JS pega sobre el botón (cantidad / total).
   Mantienen sus márgenes inline; solo recoloreamos al tema. */
.content-wrapper .btn-app .badge.bg-primary { background: var(--c-primary) !important; }
.content-wrapper .btn-app .badge.bg-warning { background: var(--c-warning) !important; color: #4a3300 !important; }

/* Botón a todo lo ancho (.btn-block) NO debe llevar margen lateral: el inline
   `.btn-app{margin:.5rem}` + width:100% provoca overflow horizontal (scroll en
   móvil). El espacio entre columnas ya lo da el gutter del grid. */
.content-wrapper .btn-app.btn-block { margin-left: 0; margin-right: 0; }

/* Número gigante de los modales de cantidad (input borderless inline) */
#cantidad_producto, #cantidad_sabor { color: var(--c-heading); }

/* Etiquetas <h7> (no estándar) del modal "Información de venta" */
h7 { font-weight: 600; color: var(--c-text-muted); }

/* --- DOMICILIO: acordeones Cliente / Pedido / Observaciones --- */
/* Barra lateral de color para que se lean como secciones distintas */
#clienteAcordeon > .card,
#pedidoAcordeon > .card,
#observacionesAcordeon > .card {
  border-left: 4px solid var(--c-primary);
}
/* Encabezado clicable: tipografía, hover y chevron que rota al abrir */
.card-header .card-title a[data-toggle="collapse"] {
  position: relative;
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  transition: color var(--t-fast);
}
.card-header .card-title a[data-toggle="collapse"]:hover { color: var(--c-primary) !important; }
.card-header .card-title a[data-toggle="collapse"]::after {
  content: "\f078"; /* chevron-down de Font Awesome */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: .8rem;
  color: var(--c-primary);
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform var(--t);
}
.card-header .card-title a[data-toggle="collapse"][aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}
/* Palomita de "sección completa" en verde */
.card-title .fa-check,
.nav-tabs .fa-check { color: var(--c-success); }

/* Icono "+" para agregar cliente (color inline azul -> teal) */
#agregarNuevoCliente .fa-plus-circle {
  color: var(--c-primary) !important;
  transition: transform var(--t-fast);
}
#agregarNuevoCliente:hover .fa-plus-circle { transform: scale(1.12); }

/* Tarjeta del cliente seleccionado (callout) */
.callout {
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  border-left-width: 4px;
}
.callout.callout-info { border-left-color: var(--c-info); }

/* Total grande del pedido */
#txtTotalTotalGlobal {
  color: var(--c-primary);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* Inputs pequeños (ej. % precio especial) — heredan el foco de marca */
.form-control-sm {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
}
.form-control-sm:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 .2rem rgba(var(--c-primary-rgb), .2);
}

/* --- Navegación por pestañas (pedido de Domicilio; útil en cualquier vista) --- */
.nav-tabs .nav-link {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--c-text-muted);
  font-weight: 600;
  transition: color var(--t-fast), background var(--t-fast);
}
.nav-tabs .nav-link:hover { color: var(--c-primary); border-color: var(--c-border) var(--c-border) transparent; }
.nav-tabs .nav-link.active {
  color: var(--c-primary);
  border-color: var(--c-border) var(--c-border) #fff;
  border-top: 2px solid var(--c-primary);
}
.nav-pills .nav-link.active { background: var(--c-primary); }


/* =============================================================================
   FASE 16 — OPTIMIZACIÓN MÓVIL (vender desde el celular)
   La venta debe hacerse cómodamente en teléfono: objetivos de toque grandes,
   una sola columna donde haga falta, botón de acción SIEMPRE alcanzable y
   controles que no se desborden. Solo afecta pantallas ≤ tablet.
============================================================================= */

/* Objetivos de toque cómodos en todo el sistema (≥ 46px de alto) */
@media (max-width: 991.98px) {
  .btn { padding: .6rem 1rem; }
  .btn-lg { padding: .9rem 1rem; }
  .form-control, .custom-select { min-height: 44px; }
  /* Iconos de acción en tablas más fáciles de tocar */
  .table .fa-eye, .table .fa-print, .table .fa-pen, .table .fa-edit { font-size: 20px; }
  .main-header .nav-link { padding: .6rem .8rem; }
}

/* --- Teléfonos (≤ 768px): flujo de venta --- */
@media (max-width: 768px) {

  /* Botones de PRODUCTO en Venta: el inline los pone a 45% (2 col). En
     teléfono pasan a una sola columna, altos y legibles. */
  .content-wrapper .panel-body .btn-app:not(.btn-block) {
    width: 100% !important;
    margin: .4rem 0 !important;
    min-height: 56px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Sabores en Domicilio (van en .col-4 = 3 col): a 2 columnas en teléfono.
     Anulamos el margen negativo del .row interno (provoca overflow a la derecha)
     y damos un gutter chico para que las 2 columnas quepan exactas en pantalla. */
  #pestanasContent .row { margin-left: 0; margin-right: 0; }
  #pestanasContent .col-4 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: .3rem;
    padding-right: .3rem;
  }
  .content-wrapper .btn-app.btn-block { min-height: 56px; }

  /* Pestañas de producto: scroll horizontal en lugar de apilarse en varias filas */
  #pestanas {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  #pestanas .nav-item { flex: 0 0 auto; }
  #pestanas .nav-link { white-space: nowrap; }

  /* Totales e indicadores: que quepan y no se desborden */
  #CantidadGlobal, #TotalGlobal { font-size: 120% !important; }
  .content .container-fluid .float-right { float: none !important; }

  /* Fila "Precio especial": apila checkbox e input a ancho completo */
  #divPrecioEspecial > div { flex: 0 0 100%; max-width: 100%; }
  #divPrecioEspecial .float-right { float: none !important; }
  #inputPrecioEspecial { width: 100%; margin-top: .5rem; }

  /* Input de cantidad en los modales: grande pero que NUNCA ensanche el modal */
  #cantidad_producto, #cantidad_sabor {
    font-size: 1.8rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }
  /* Modal SIEMPRE centrado y dentro del viewport en móvil (margin auto + tope de ancho).
     Evita que se recorra a la derecha aunque algo intente ensancharlo. */
  .modal-dialog {
    margin: .5rem auto !important;
    max-width: calc(100% - 1rem) !important;
  }

  /* DataTables en móvil: que NADA desborde horizontalmente (tabla, controles y
     sobre todo la paginación con muchas páginas). */
  .dataTables_wrapper { overflow-x: hidden; }
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    width: 100%;
  }
  .dataTables_wrapper .dataTables_filter input { width: auto; max-width: 70%; }
  /* La fila de botones de página se acomoda en varias líneas en vez de salirse */
  .dataTables_wrapper .dataTables_paginate .pagination {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
  }
  .dataTables_wrapper .dataTables_paginate .page-link {
    padding: .4rem .65rem;
  }
  /* La tabla responsiva nunca empuja el ancho de la página */
  table.dataTable { width: 100% !important; max-width: 100% !important; }

  /* --- Botón de acción SIEMPRE alcanzable (COBRAR / REGISTRAR PEDIDO) ---
     El footer queda pegado al borde inferior de la pantalla mientras se hace
     scroll del catálogo, con sombra para separarlo del contenido. */
  .main-footer {
    position: sticky;
    bottom: 0;
    z-index: 1020;
    padding: .6rem .75rem;
    box-shadow: 0 -6px 20px rgba(28,35,48,.16);
    border-top: 1px solid var(--c-border);
  }
  /* Compacta el footer en móvil: oculta el separador y reduce la barra */
  .main-footer hr { display: none; }
  .main-footer .progress { height: .4rem; margin-bottom: .4rem; }
  .main-footer .btn-lg { font-size: 1.05rem; padding: .85rem; }
  /* El botón "subir" del Domicilio no debe robar ancho al de registrar */
  .main-footer .col-10 { flex: 0 0 82%; max-width: 82%; }
  .main-footer .col-2  { flex: 0 0 18%; max-width: 18%; }

  /* Acordeones de Domicilio: encabezados más altos para tocar fácil */
  .card-header .card-title a[data-toggle="collapse"] { padding: .35rem 0; font-size: 1.05rem; }

  /* Modales casi a pantalla completa para capturar datos cómodo */
  .modal-body { padding: 1rem; }
}

/* --- Teléfonos chicos (≤ 480px) --- */
@media (max-width: 480px) {
  .content-header h1 { font-size: 1.25rem; }
  .brand-link .brand-text { font-size: 1rem; }
  /* La rejilla de Venta a una columna ya aplica arriba; aseguramos el alto */
  .content-wrapper .btn-app { min-height: 54px; }
}


/* =============================================================================
   FASE 17 — INVENTARIO, TRANSFERENCIA y SUBIDA DE ARCHIVOS
   Inventario/Transferencia reutilizan acordeones + rejilla .btn-app + tablas
   (ya estilizados). Aquí solo lo propio: input de archivo, texto de error y la
   barra de acción suelta ("Registrar transferencia").
============================================================================= */

/* Input de archivo nativo (evidencia en Transferencia / Incidente):
   look de "zona de carga" con botón teal. */
input[type="file"] {
  padding: .45rem .6rem;
  border: 1px dashed #c4ccda;
  border-radius: var(--radius-sm);
  background: var(--c-surface-2);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
input[type="file"]:hover { border-color: var(--c-primary); background: rgba(var(--c-primary-rgb), .04); }
input[type="file"]::file-selector-button {
  border: 0;
  background: var(--c-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .45rem .9rem;
  margin-right: .85rem;
  cursor: pointer;
  transition: background var(--t-fast);
}
input[type="file"]::file-selector-button:hover { background: var(--c-primary-dark); }

/* Mensajes de validación de campos (.erroresTxt) */
.erroresTxt { color: var(--c-danger); font-size: .85rem; font-weight: 600; }

/* Barra de acción suelta: en Transferencia el botón "Registrar transferencia"
   va dentro de un .card-header hijo directo del content-wrapper (sin .card).
   Lo dejamos sobre fondo transparente para que el botón se vea limpio. */
.content-wrapper > .card-header {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: .25rem 0 1rem;
}

/* En móvil ese botón de acción ocupa todo el ancho (toque cómodo) */
@media (max-width: 768px) {
  .content-wrapper > .card-header .btn { width: 100%; }
}

/* Badge de stock en Inventario/Transferencia (bg-warning sobre el botón) ya se
   recolorea en FASE 15; aquí solo lo recordamos para mantenerlo localizable. */


/* =============================================================================
   FASE 18 — INCIDENTE, REPORTES y CATÁLOGOS DEL SYSADMIN
   - Incidente: mismo patrón que Transferencia (ya cubierto) + visor de evidencia.
   - Reportes: 'reportes' es un PDF (TCPDF), no tiene UI. 'concentrado' usa
     filtros + info-box (ya cubiertos).
   - Catálogos (Sucursal/Usuario/Producto/Cliente): formularios .form-control en
     modales (ya cubiertos). Perfil/Permiso usan árboles de checkboxes nativos.
============================================================================= */

/* Checkboxes / radios NATIVOS al color de marca (árbol de permisos en
   Perfil/Permiso, "recordarme" del login, etc.). accent-color es ligero y
   nativo; no necesita plugin. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--c-primary);
}

/* Árbol de permisos (formPerfil / formPermiso): listas anidadas más legibles */
.modal-body ul {
  list-style: none;
  padding-left: 1.1rem;
}
.modal-body ul input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .4rem;
  vertical-align: -2px;
  cursor: pointer;
}

/* Visor de evidencia (PDF/imagen) en el modal de Incidente */
#portapdfModal {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--c-surface-2);
}

/* Concentrado del día: las tarjetas de totales por vendedor son .info-box
   (ya estilizadas en FASE 5). Sin reglas extra necesarias. */


/* =============================================================================
   FASE 19 — BUSCADOR DE PESTAÑAS DE PRODUCTO (Domicilio)
   Caja de búsqueda que inserta main.js arriba de las pestañas para encontrar
   rápido un producto/sabor cuando hay un cliente esperando.
============================================================================= */
.buscador-pestanas {
  margin-bottom: .85rem;
}
.buscador-pestanas .input-group-text {
  background: var(--c-surface);
  color: var(--c-primary);
}
.buscador-pestanas #buscadorPestanas {
  font-size: 1.05rem;
  height: auto;
  padding: .6rem .9rem;
}
.buscador-pestanas #buscadorPestanasClear {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 .85rem;
}
.buscador-pestanas #buscadorPestanasVacio {
  display: inline-block;
  margin-top: .35rem;
}

/* Cuando hay muchas pestañas visibles, un máximo de alto con scroll vertical
   evita que ocupen media pantalla en escritorio (en móvil ya hacen scroll
   horizontal — ver FASE 16). */
@media (min-width: 769px) {
  #pestanas {
    max-height: 142px;
    overflow-y: auto;
  }
}