/* ── Variables ─────────────────────────────────────────── */
:root {
  --rokys-red:      #c0392b;
  --rokys-dark:     #922b21;
  --sidebar-bg:     #1e3a5f;
  --sidebar-hover:  rgba(255,255,255,0.09);
  --sidebar-active: rgba(255,255,255,0.15);
  --body-bg:        #f1f5f9;
  --sidebar-width:  240px;
}

/* ── General ────────────────────────────────────────────── */
body {
  background: var(--body-bg);
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.9rem;
  color: #1e293b;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-weight: 600; }
.fw-semibold { font-weight: 500 !important; }
.fw-bold     { font-weight: 600 !important; }

.btn-xs { padding: 0.15rem 0.4rem; font-size: 0.75rem; }

/* ── Color corporativo ─────────────────────────────────── */
.bg-rokys   { background: var(--rokys-red) !important; }
.btn-rokys  { background: var(--rokys-red); color: #fff; border: none; font-weight: 500; letter-spacing: 0.01em; }
.btn-rokys:hover { background: var(--rokys-dark); color: #fff; }

/* ── Paginación (estilo propio, pill moderno) ──────────────
   Editado/modificado por Marco Padilla — usada en listados largos (ej. modules/despacho/checklist/
   index.php); clase propia (.pagination-rokys) para no heredar/alterar el look de ".pagination" de
   Bootstrap usado en otras pantallas (ej. modules/bitacora/index.php). */
.pagination-rokys {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination-rokys .pgr-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: #475569;
  font-weight: 500;
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pagination-rokys .pgr-link:hover:not(.disabled):not(.active) { background: #e2e8f0; color: #1e293b; }
.pagination-rokys .pgr-link.active {
  background: var(--rokys-red);
  color: #fff;
  box-shadow: 0 2px 6px rgba(192,57,43,0.35);
}
.pagination-rokys .pgr-link.disabled { color: #cbd5e1; pointer-events: none; }
.pagination-rokys .pgr-nav { color: #64748b; }
.pagination-rokys .pgr-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 2rem;
  color: #94a3b8;
}

/* ── LOGIN ─────────────────────────────────────────────── (Editado/modificado
   por Marco Padilla — reskin aplicando el diseño "Rokys Login" generado en
   Claude Design: panel izquierdo gris con las 6 marcas del grupo + logo
   corporativo, tipografía Barlow/Barlow Condensed, acento naranja #f28c28
   y tarjeta de acceso plana. Reemplaza el reskin verde/glass anterior. */
.login-body {
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  font-family: 'Barlow', 'Segoe UI', Arial, sans-serif;
}
.login-body h1, .login-body h2 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; }

.login-panel-izq {
  flex: 1 1 55%;
  min-width: 320px;
  background: #4A4F52;
  color: #fff;
  padding: 56px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
}

.login-logo-grupo {
  width: 140px; height: 78px;
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 6px 18px rgba(30,33,34,0.12);
  object-fit: contain;
  display: block;
}

.login-marcas-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.login-marcas-row img { height: 30px; width: auto; object-fit: contain; display: block; }
.login-marcas-row .login-marca-cream { background: #fdf6e3; padding: 3px 6px; border-radius: 4px; }
.login-marcas-row .login-marca-dark { background: #000; padding: 3px 6px; border-radius: 4px; }
.login-marcas-row .login-marca-navy { background: #0b0e1a; padding: 3px 6px; border-radius: 4px; }

.login-panel-izq h1 {
  margin: 0;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  color: #fff;
}
.login-h1-accent { color: #f28c28; }
.login-panel-izq p.login-subtitulo {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: #eef0f0;
  font-weight: 400;
}
.login-heading-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.35);
}

/* Mini-perks (solo tablet, fila condensada de icono+texto en píldora) */
.login-perks-mini { display: none; gap: 12px; flex-wrap: wrap; }
.login-perk-mini {
  flex: 1 1 190px;
  min-width: 190px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 10px 18px;
}
.login-perk-mini-icono {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(242,140,40,0.2);
  color: #f28c28;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
}
.login-perk-mini-texto { font-size: 13.5px; font-weight: 700; white-space: nowrap; color: #fff; }

/* Features completas (solo escritorio, tarjetas blancas planas) */
.login-features { display: none; gap: 16px; flex-wrap: wrap; }
.login-feature {
  flex: 1 1 150px;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 16px;
}
.login-feature-icono {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: rgba(242,140,40,0.15);
  color: #f28c28;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
}
.login-feature-titulo { font-weight: 700; font-size: 14px; color: #2a2f31; }
.login-feature-texto { font-size: 12.5px; color: #6b7478; line-height: 1.4; }

.login-panel-der {
  flex: 1 1 45%;
  min-width: 320px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.login-container { width: 100%; max-width: 400px; }
.login-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 10px 40px rgba(30,33,34,0.12);
  border: 1px solid #e5e7e8;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.login-card h4 { margin: 0; font-weight: 700; font-size: 26px; color: #2a2f31; }
.login-bienvenida p { margin: 0; font-size: 13.5px; color: #6b7478; }
.login-card-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.login-card form { display: flex; flex-direction: column; gap: 22px; margin: 0; }

/* Campos de formulario (wrapper unificado con icono, reemplaza input-group de Bootstrap) */
.login-field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.login-field label { font-size: 13.5px; font-weight: 600; color: #4a5054; }
.login-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid #d8dcde;
  border-radius: 10px;
  padding: 12px 14px;
  background: #f6f7f7;
  transition: all 0.2s ease;
}
.login-input-wrap:focus-within { border-color: #f28c28; background: #fff; box-shadow: 0 0 0 3px rgba(242,140,40,0.12); }
.login-input-wrap .login-icon { color: #9aa1a6; flex: none; width: 16px; height: 16px; }
.login-input-wrap:focus-within .login-icon { color: #f28c28; }
.login-input-wrap input {
  border: none; outline: none; background: transparent; width: 100%;
  font-size: 14.5px; color: #2a2f31;
}
.login-toggle-pwd { background: none; border: none; color: #9aa1a6; cursor: pointer; display: flex; align-items: center; padding: 2px; }
.login-toggle-pwd:hover { color: #f28c28; }
.login-toggle-pwd .login-icon { width: 16px; height: 16px; }

.login-opciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  text-align: left;
}
.login-opciones .form-check { display: flex; align-items: center; gap: 8px; margin: 0; }
.login-opciones .form-check-input { accent-color: #f28c28; }
.login-opciones a { color: #f28c28; text-decoration: none; font-weight: 600; }
.login-opciones a:hover { color: #c96f1a; text-decoration: underline; }

.login-btn-submit {
  width: 100%;
  background: #f28c28;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.login-btn-submit:hover { color: #fff; background: #d97a1e; }
.login-btn-submit .login-icon { width: 16px; height: 16px; }
.login-btn-submit:active { transform: translateY(1px); }

/* Clases utilitarias de visibilidad según breakpoint (por defecto, escritorio real >900px) */
.solo-movil { display: none; }
.solo-escritorio { display: initial; }
.solo-tablet { display: none; }
.solo-desktop { display: none; }
@media (min-width: 901px) { .solo-desktop { display: initial; } }

/* Escritorio real (>900px): fila horizontal, badge de marcas, tarjetas de features */
@media (min-width: 901px) {
  .login-logo-grupo { width: 180px; height: 100px; padding: 10px; }
  .login-marcas-row img { height: 42px; }
  .login-panel-izq h1 { font-size: clamp(34px,4.2vw,48px); line-height: 1.05; }
  .login-panel-izq p.login-subtitulo { font-size: 17px; line-height: 1.5; max-width: 440px; }
  .login-features { display: flex; }
}

/* Tablet (481-900px): apilado, logo/marcas medianos, perks en píldora */
@media (max-width: 900px) {
  .solo-tablet { display: initial; }
  .login-body { display: block; background: #fff; }
  .login-panel-izq {
    flex-direction: column;
    padding: 36px 40px 28px;
    border-radius: 0 0 28px 28px;
  }
  .login-logo-grupo { width: 170px; height: 95px; padding: 10px; }
  .login-marcas-row img { height: 38px; }
  .login-panel-der {
    width: 100%;
    min-width: 0;
    padding: 32px 24px 48px;
  }
  .login-perks-mini { display: flex; }
}

/* Móvil (<=480px): header gris con esquinas redondeadas, tarjeta plana debajo */
@media (max-width: 480px) {
  .solo-movil { display: initial; }
  .solo-escritorio { display: none; }
  .solo-tablet { display: none; }

  .login-body { padding: 0; display: block; background: #fff; }
  .login-panel-izq {
    flex-direction: column;
    padding: 20px 20px 28px;
    gap: 10px;
    border-radius: 0 0 28px 28px;
  }
  .login-logo-grupo { width: 140px; height: 78px; padding: 8px; }
  .login-marcas-row img { height: 26px; }
  .login-panel-izq h1 { font-size: 24px; }
  .login-panel-izq p.login-subtitulo { font-size: 13.5px; }
  .login-heading-block { gap: 8px; padding-top: 6px; }
  .login-perks-mini { display: none !important; }

  .login-panel-der { padding: 28px 20px 24px; }
  .login-container { max-width: 100%; }
  .login-card {
    border-radius: 0;
    box-shadow: none;
    border: none;
    padding: 0;
    gap: 22px;
  }
  .login-card h4 { font-size: 26px; }
}

/* ── LAYOUT ─────────────────────────────────────────────── */
.wrapper { min-height: 100vh; padding-top: 56px; }

.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - 56px);
  position: sticky; top: 56px;
  height: calc(100vh - 56px);
  /* Editado/modificado por Marco Padilla — igual que el fix del cajón móvil (ver @media
     max-width:1300px): el <aside> y su <nav> interno (.sidebar nav, con su propio overflow-auto)
     eran dos contenedores de scroll anidados. En tablets con ancho >1300px (sidebar fijo, no
     cajón) el dedo terminaba arrastrando la PÁGINA completa en vez de solo la lista del menú —
     al forzar el swipe se veía el fondo blanco de abajo mientras la página hacía scroll/rebote, en
     vez de revelar SISTEMA dentro del propio sidebar. Solo el <nav> debe scrollear. */
  overflow: hidden;
  flex-shrink: 0;
  background: var(--sidebar-bg) !important;
}

.main-content {
  min-height: calc(100vh - 56px);
  overflow-x: hidden;
}

/* ── NAVBAR ─────────────────────────────────────────────── */
.navbar {
  background: #fff !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.navbar-brand { font-weight: 600; font-size: 1rem; color: #1e293b !important; }

/* ── SIDEBAR ────────────────────────────────────────────── */
/* Editado/modificado por Marco Padilla — scrollbar propio del menú (el <nav> interno con
   overflow-auto, no el <aside> completo): reemplaza la barra de scroll gris del navegador, que
   choca visualmente contra el fondo azul oscuro del sidebar, por una delgada y semitransparente
   acorde al tema. scrollbar-width/-color cubren Firefox; ::-webkit-scrollbar cubre Chrome/Edge/Safari. */
.sidebar nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;
  /* Editado/modificado por Marco Padilla — fix del bug real reportado: el swipe solo scrolleaba
     el <nav> si la PÁGINA completa también tenía a dónde bajar; con la página ya sin espacio para
     bajar, Chrome/Android nunca "promovía" a este <nav> anidado (dentro de un <aside> sticky/fixed)
     como su propia superficie de scroll táctil, y el gesto se perdía sin mover nada. touch-action:
     pan-y le dice explícitamente al navegador que ESTE elemento debe manejar el paneo vertical él
     mismo, sin esperar a que el documento raíz también sea scrolleable. */
  touch-action: pan-y;
  /* Editado/modificado por Marco Padilla — fix bug de flexbox: un hijo flex (este <nav>) con
     flex-grow-1 + overflow-auto no puede encogerse para activar su propio scroll dentro del
     <aside> flex-column de altura fija, porque min-height por defecto es "auto" (= tamaño del
     contenido). Sin min-height:0 el menú se desborda del aside en vez de scrollear internamente,
     y en el cajón deslizable del responsive (position:fixed, altura fija) eso deja ítems como
     Usuarios/Roles fuera de alcance. -webkit-overflow-scrolling da inercia táctil en iOS/Android
     para que el swipe realmente scrollee este contenedor anidado. */
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
}
.sidebar nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

.sidebar .nav-link {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.84rem;
  font-weight: 400;
  padding: 0.38rem 0.8rem;
  color: rgba(255,255,255,0.72);
  border-radius: 6px;
  transition: background 0.13s, color 0.13s;
  letter-spacing: 0.01em;
}
.sidebar .nav-link:hover {
  color: #fff;
  background: var(--sidebar-hover);
}
.sidebar .nav-link.active {
  color: #fff;
  background: var(--sidebar-active);
  font-weight: 500;
}
.sidebar .nav-link i { opacity: 0.85; }
.sidebar .nav-link.active i { opacity: 1; }
.sidebar .nav-link.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.sidebar .nav-link.disabled:hover { background: transparent; }

.nav-section-title {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.1);
  border-left: 3px solid #f59e0b;
  padding: 0.28rem 0.6rem !important;
  margin-top: 0.5rem;
  margin-bottom: 0.2rem;
  border-radius: 0 4px 4px 0;
}
.nav-section-title.nav-section-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── CARDS ──────────────────────────────────────────────── */
.card {
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
}
.card-header {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ── TABLES ─────────────────────────────────────────────── */
.table {
  font-size: 0.875rem;
}
.table thead th {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}
.table-dark thead th {
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

/* ── BADGES ─────────────────────────────────────────────── */
.badge {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

/* ── FORMS ──────────────────────────────────────────────── */
.form-label {
  font-size: 0.84rem;
  font-weight: 500;
  color: #334155;
  margin-bottom: 0.3rem;
}
.form-control, .form-select {
  font-size: 0.875rem;
  border-color: #cbd5e1;
  border-radius: 7px;
}
.form-control:focus, .form-select:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  border-radius: 7px;
  letter-spacing: 0.01em;
}
.btn-primary   { background: #2563eb; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* ── KPI CARDS ──────────────────────────────────────────── */
.kpi-card { transition: transform 0.15s; }
.kpi-card:hover { transform: translateY(-2px); }
.kpi-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin: 0 auto;
}
.kpi-value { font-size: 1.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.kpi-label { font-size: 0.75rem; color: #64748b; margin-top: 0.3rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

.bg-primary-soft { background: rgba(37,99,235,0.1); }
.bg-success-soft  { background: rgba(22,163,74,0.1); }
.bg-warning-soft  { background: rgba(245,158,11,0.12); }
.bg-danger-soft   { background: rgba(220,53,69,0.1); }

/* ── BÚSQUEDA PERSONA ───────────────────────────────────── */
.lista-busqueda {
  position: absolute;
  z-index: 1000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 300px;
  overflow-y: auto;
  width: calc(100% - 2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.lista-item {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.875rem;
}
.lista-item:hover { background: #f8fafc; }
.lista-no-auth { background: #fff5f5; }
.lista-no-auth:hover { background: #ffecec; }
.lista-no-encontrado { color: #94a3b8; font-style: italic; }
.lista-no-encontrado:hover { background: #fefce8; color: #854d0e; }

.input-group { position: relative; }
#resultadoBusqueda { position: absolute; top: 100%; left: 0; right: 0; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* Botón hamburguesa: solo visible en pantallas chicas */
.btn-sidebar-toggle { display: none; }
/* Editado/modificado por Marco Padilla — botón "X" para cerrar el cajón (ver includes/sidebar.php):
   mismo criterio que el hamburguesa, oculto en desktop y visible solo en el breakpoint de tablet. */
.btn-sidebar-close { display: none; }

/* Editado/modificado por Marco Padilla — breakpoint subido de 991px a 1199px (tablets en
   horizontal como iPad ~1024px, iPad Pro ~1194px) y luego a 1300px: la Samsung Tab A11+ en
   horizontal reporta 1280px, por encima incluso de 1199px, y quedaba con el sidebar fijo sin botón
   para ocultarlo (aunque en vertical, ~768-820px, sí entraba bien en el breakpoint anterior).
   1300px se eligió para cubrir esa tablet sin bajar tanto como para afectar laptops/monitores
   típicos de escritorio (1366px en adelante). */
@media (max-width: 1300px) {
  .btn-sidebar-toggle { display: inline-flex !important; align-items: center; }

  /* El sidebar pasa a ser un cajón deslizable */
  .sidebar {
    position: fixed;
    top: 56px; left: 0;
    /* Editado/modificado por Marco Padilla — se reemplazan los cálculos de altura en vh/dvh/JS por
       anclar top+bottom: el navegador ajusta esto solo al espacio visible real, sin recalcular
       nada. El intento anterior (JS con window.innerHeight en el evento resize) causaba que el
       cajón "saltara" en tablets justo cuando la barra de direcciones se oculta/aparece DURANTE el
       scroll de la página principal — se veía como si el sidebar se moviera en sincronía con la
       pantalla principal en vez de quedarse fijo e independiente. bottom:0 no tiene ese problema:
       es soportado de forma nativa por el motor de renderizado sin JS ni recálculos. */
    bottom: 0;
    width: 250px;
    z-index: 1045;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 2px 0 14px rgba(0,0,0,.25);
    /* Editado/modificado por Marco Padilla — anula el overflow-y:auto heredado de la regla base
       de escritorio (línea ~551): con el <aside> y su <nav> interno ambos scrolleables, el swipe
       en tablets/iOS a veces queda "atrapado" en el <aside> exterior (que no tiene inercia táctil)
       en vez del <nav>, cortando el scroll antes de llegar a SISTEMA. Solo el <nav> debe scrollear. */
    overflow: hidden;
  }
  .sidebar.open { transform: translateX(0); }

  .btn-sidebar-close {
    display: flex !important;
    align-items: center; justify-content: center;
    position: absolute; top: 10px; right: 10px;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 1rem;
    z-index: 1;
  }

  /* Contenido a todo el ancho */
  .main-content { padding: 1rem !important; width: 100%; }

  /* Fondo oscuro al abrir el menú */
  .sidebar-backdrop {
    position: fixed; inset: 56px 0 0 0;
    background: rgba(0,0,0,.45);
    z-index: 1044; display: none;
  }
  .sidebar-backdrop.show { display: block; }
}

/* ── SELECT CON BÚSQUEDA (ss) ───────────────────────────── */
/* Editado/modificado por Marco Padilla — flecha de dropdown para que se note que es un
   desplegable buscable (y no un input de texto libre), aplica a todo select-search del sitio */
.ss-wrap { position: relative; }
.ss-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #94a3b8;
  border-bottom: 2px solid #94a3b8;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.ss-input { padding-right: 34px; }
.ss-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1080;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  margin-top: 2px;
}
.ss-menu.show { display: block; }
/* Editado/modificado por Marco Padilla — variante ancha para menús cuyo input vive en una
   celda angosta (ej. columna "Código" del buscador de producto en reclamos/crear.php):
   ignora el "right:0" heredado de .ss-menu y usa un ancho propio para que el contenido
   (código + nombre del producto) se lea completo en vez de quedar apretado */
.ss-menu-wide { right: auto; min-width: 100%; width: max-content; max-width: 420px; }
/* Editado/modificado por Marco Padilla — variante "flotante" posicionada por JS (position:fixed)
   para menús cuyo input vive dentro de un contenedor con overflow (ej. .table-responsive), que
   recorta cualquier hijo position:absolute que se salga verticalmente del contenedor */
.ss-menu-float {
  display: none;
  position: fixed;
  z-index: 2000;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(20,24,31,0.15);
}
.ss-menu-float.show { display: block; }
.ss-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
}
.ss-item:hover, .ss-item.active { background: #e8f0fe; }
.ss-empty { padding: 10px 12px; color: #94a3b8; font-size: 0.85rem; }

/* Editado/modificado por Marco Padilla — punto de color por categoría de producto (RIDA/PRINCES/
   sin categoría) y su ícono de leyenda con popover, usados en el checklist de despacho
   (almacen.php/ver.php/despacho.php/crear.php). Antes este bloque estaba duplicado en un <style>
   propio de cada uno de esos 4 archivos; se centraliza acá (cargado en toda la app) para editarlo
   una sola vez. Ver catdotProducto()/catdotLeyendaHtml() en config/funciones.php. */
.catdot-alm { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; margin-right: 6px; vertical-align: middle; }
.legend-wrap-alm { position: relative; display: inline-flex; }
.legend-icon-alm { width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff; border: none; font-size: 12px; font-weight: 700; font-style: italic; font-family: Georgia, serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.legend-icon-alm:hover { background: rgba(255,255,255,.32); }
.legend-pop-alm { display: none; position: absolute; top: 26px; left: 0; background: #fff; border: 1px solid #e2e6ea; border-radius: 8px; box-shadow: 0 4px 14px rgba(0,0,0,.1); padding: 10px 12px; font-size: 12.5px; color: #22303f; white-space: nowrap; z-index: 5; }
.legend-wrap-alm:hover .legend-pop-alm, .legend-wrap-alm:focus-within .legend-pop-alm { display: block; }
.legend-row-alm { display: flex; align-items: center; gap: 7px; padding: 3px 0; }

/* Editado/modificado por Marco Padilla — impresión del pivote Tienda × Producto (checklist de
   despacho: crear.php/almacen.php/ver.php). Patrón "imprimir solo este contenedor" con display:none
   real (no visibility:hidden) sobre navbar/sidebar/resto del contenido de main.main-content: con
   solo visibility:hidden esos elementos seguían ocupando su alto normal en el flujo (sidebar/main
   con mucho contenido), y el navegador generaba una página en blanco por cada "hoja" de esa altura
   fantasma antes/después de la página real. Al ocultarlos con display:none se les quita ese espacio
   por completo. La orientación de página ("completo" = apaisada y compacta, para caber muchas
   columnas de producto; "bultos" = vertical y con fuente grande, pensada para leer rápido o pegar en
   la puerta del camión) se controla con la clase imp-modo-bultos en <html> (usada por las reglas de
   más abajo) MÁS un <style id="estiloPaginaImpresionPivote"> que imprimirPivoteGenerico() (app.js)
   inyecta con el @page correcto justo antes de imprimir — @page no admite ser calificado por un
   selector de ancestro (ej. "html.imp-modo-bultos @page {...}" es sintaxis inválida e ignorada en
   silencio por el navegador), así que la orientación no se puede resolver solo con CSS estático. */
#areaImpresionPivote { display: none; }

/* Fallback por si algo dispara window.print() sin pasar por imprimirPivoteGenerico() (ej. Ctrl+P
   directo mientras el área de impresión ya tiene contenido de una impresión previa). */
@page { size: landscape; margin: 10mm; }

@media print {
  body > nav.navbar,
  .wrapper > aside.sidebar,
  .sidebar-backdrop,
  main.main-content > *:not(#areaImpresionPivote) { display: none !important; }

  html, body, .wrapper, main.main-content {
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #areaImpresionPivote { display: block !important; }

  .imp-encabezado { margin-bottom: 12px; }
  .imp-titulo { font-size: 1.1rem; font-weight: 700; }
  .imp-previsto { font-weight: 400; font-size: 0.85em; color: #555; }
  .imp-meta { display: flex; gap: 18px; font-size: 0.85rem; color: #333; margin-top: 4px; }
  .imp-aviso { font-size: 0.9rem; margin-bottom: 10px; border: 1px solid #999; padding: 6px 10px; }

  /* Editado/modificado por Marco Padilla — a pedido: modo "Cuadro completo" repartido en bloques de
     columnas (ver COLUMNAS_POR_PARTE en construirHtmlImpresionPivote(), app.js), cada uno en su
     propia hoja para que las columnas no queden ilegibles con muchos productos. */
  .imp-parte-label { font-size: 1rem; font-weight: 700; margin: 6px 0 8px; }
  .imp-parte + .imp-parte { margin-top: 10px; }

  /* Editado/modificado por Marco Padilla — table-layout:fixed obliga a las columnas a repartirse
     dentro del 100% del ancho de la hoja (envolviendo el texto si hace falta) en vez de ensancharse
     según el contenido; sin esto, con muchas tiendas/productos la tabla terminaba más ancha que la
     hoja y el navegador cortaba las columnas que no entraban, en vez de encogerlas. */
  .imp-tabla { width: 100%; table-layout: fixed; border-collapse: collapse; border: 2px solid #000; }
  .imp-tabla th, .imp-tabla td { border: 1px solid #000; padding: 4px 6px; overflow-wrap: break-word; word-break: break-word; }
  /* Editado/modificado por Marco Padilla — a pedido: la mayoría de estos checklists se imprimen en
     impresoras blanco y negro, donde el azul de marca (#0d6efd) sale como un gris medio de bajo
     contraste. Cabecera y fila de totales pasan a gris oscuro (máximo contraste en B/N sin ser negro
     puro, que salía muy denso de tóner/tinta) con texto blanco; el cuerpo se mantiene en blanco con
     texto negro — mismo criterio aplicado más abajo al modo "Solo Tienda y Cant x bultos". */
  .imp-tabla thead th {
    font-weight: 700;
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .imp-tabla tbody td { background: #fff !important; color: #000 !important; }
  /* Editado/modificado por Marco Padilla — a pedido: rayado cebra sutil en el cuerpo (gris muy claro
     en filas pares) para no perder la fila al leer 20-30 columnas de producto hacia la derecha; en
     una impresora láser B/N este gris tan claro prácticamente no consume tóner. */
  .imp-tabla tbody tr:nth-child(even) td {
    background: #eef0f3 !important;
  }
  .imp-tabla tfoot td {
    font-weight: 700;
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .imp-tabla .text-end { text-align: right; }
  .imp-tabla .text-center { text-align: center; }
  .imp-tabla .fw-bold, .imp-tabla .fw-semibold { font-weight: 700; }
  /* Editado/modificado por Marco Padilla — a pedido: la columna de totales (Total General, por fila
     y en el tfoot) no debe partir en 2 líneas cifras de 3+ dígitos (>=100); hereda overflow-wrap/
     word-break de la regla general de la tabla (línea 743), que en una celda angosta con
     table-layout:fixed corta el número letra por letra. Solo aplica a las celdas de datos (td): el
     encabezado "Total General" (th) sigue pudiendo partirse en 2 líneas como antes — corrección de
     bug: aplicarlo también al th dejaba ese texto de 2 palabras sin poder envolver, desbordando la
     celda angosta y viéndose cortado/superpuesto con la columna vecina. */
  .imp-tabla td.text-end {
    white-space: nowrap;
  }
  /* Editado/modificado por Marco Padilla — a pedido: mismo criterio para las celdas de cantidad del
     cruce ruta/tienda × producto (tbody) y sus totales por columna (tfoot) — cifras de hasta 4
     dígitos (1000-9999) tampoco deben partirse en 2 líneas. No se aplica al thead (ahí "text-center"
     es el nombre del producto, que sí debe poder envolver en varias líneas). */
  .imp-tabla tbody td.text-center,
  .imp-tabla tfoot td.text-center {
    white-space: nowrap;
  }
  /* Editado/modificado por Marco Padilla — a pedido: énfasis en las cantidades (las celdas de datos
     del cruce tienda×producto, y los totales de fila/columna) con negrita y un tamaño algo mayor que
     el resto de la tabla (que ya de por sí usa una fuente compacta de 8.5px para caber muchas
     columnas) — deben resaltar sobre encabezados y nombres al ser lo que más se consulta al recibir
     mercadería. */
  .imp-tabla tbody td.text-center,
  .imp-tabla tbody td.text-end,
  .imp-tabla tfoot td.text-center,
  .imp-tabla tfoot td.text-end {
    font-weight: 700;
    font-size: 12px;
  }

  /* Editado/modificado por Marco Padilla — primera columna (Tienda) sin salto de línea para que los
     nombres completos se vean en una sola fila. El ancho real de esta columna ya NO se fija acá:
     con table-layout:fixed el navegador reparte columnas según el "width" del <th> de cabecera, así
     que un valor fijo en CSS sobraba con nombres cortos (ej. "MARINA") y le robaba espacio a las
     columnas de producto. Se calcula en JS (construirHtmlImpresionPivote, app.js) según el nombre
     de tienda MÁS LARGO de cada checklist puntual (en "ch", vía estilo inline en el <th>), que gana
     sobre estas reglas sin necesitar !important. Acá solo queda lo que no depende del dato: nowrap
     y anular el word-break/overflow-wrap heredados de la regla general de la tabla (línea 743). */
  .imp-tabla th:first-child,
  .imp-tabla td:first-child {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
    font-size: 12px;
  }
  .imp-tabla tbody td:first-child { color: #000 !important; }

  /* Modo "Cuadro completo" (por defecto): fuente compacta para caber muchas columnas de producto */
  #areaImpresionPivote { font-size: 8.5px; }
  #areaImpresionPivote .imp-tabla th,
  #areaImpresionPivote .imp-tabla td { padding: 1px 2px; }

  /* Modo "Solo Tienda y Cant x bultos": fuente grande, tabla angosta centrada (2 columnas, no
     necesita table-layout:fixed para caber). */
  html.imp-modo-bultos #areaImpresionPivote { font-size: 16px; }
  html.imp-modo-bultos .imp-tabla-bultos {
    max-width: 650px;
    margin: 0 auto;
    table-layout: auto;
    /* Editado/modificado por Marco Padilla — a pedido: negro puro en vez del azul de marca (#0d6efd),
       que en una impresora blanco y negro sale como un gris medio de bajo contraste; borde delgado
       negro en toda la tabla, cuerpo en blanco (solo encabezado y total con color). */
    border: 2px solid #000;
  }
  html.imp-modo-bultos .imp-tabla-bultos th,
  html.imp-modo-bultos .imp-tabla-bultos td { padding: 6px 8px; border-color: #000; }
  /* Editado/modificado por Marco Padilla — a pedido, columna "Firma" en blanco para firmar al
     recibir: ancho mínimo fijo para dejar espacio real de firma, sin importar cuánto ocupen las
     otras 2 columnas. */
  html.imp-modo-bultos .imp-celda-firma { min-width: 140px; }
  /* Editado/modificado por Marco Padilla — a pedido, fila más alta (altura mínima, no solo padding)
     para que la columna Firma tenga espacio real donde firmar a mano, no solo una línea angosta. */
  html.imp-modo-bultos .imp-tabla-bultos tbody tr { height: 50px; }
  /* Editado/modificado por Marco Padilla — a pedido: encabezado "Tienda"/"Cant x bultos" y el total
     con fondo negro y texto blanco (máximo contraste en impresión B/N, en vez del azul de marca);
     las filas del cuerpo quedan en blanco con texto negro, sin franjas de color. */
  html.imp-modo-bultos .imp-tabla-bultos thead th {
    font-size: 1.15em;
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html.imp-modo-bultos .imp-tabla-bultos tbody td { background: #fff !important; color: #000 !important; }
  /* Editado/modificado por Marco Padilla — zebra striping también en el modo "bultos" (mismo
     criterio que .imp-tabla más arriba), para diferenciar tiendas en una tabla de muchas filas. */
  html.imp-modo-bultos .imp-tabla-bultos tbody tr:nth-child(even) td { background: #eef0f3 !important; }
  /* Editado/modificado por Marco Padilla — a pedido: énfasis en la cantidad de bultos (lo que más se
     consulta al recibir mercadería) con negrita y tamaño mayor que el nombre de tienda. */
  html.imp-modo-bultos .imp-tabla-bultos tbody td.text-end {
    font-weight: 700;
    font-size: 1.3em;
  }
  html.imp-modo-bultos .imp-tabla-bultos tfoot td {
    background: #333 !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}