/* ============================================================
   contenido.css — Ajustes al interior de las pantallas
   ============================================================
   ARCHIVO COMPARTIDO E IDÉNTICO EN LAS CINCO PLATAFORMAS.
   Si se modifica aquí, hay que copiarlo a las otras cuatro.

   Se carga al final del <body>, después del <style> propio de
   cada pantalla, para ganar la cascada por orden natural.

   ── QUÉ HACE Y QUÉ NO ─────────────────────────────────────
   Este archivo **no pinta superficies ni colores de texto** del
   contenido. Solo toca lo que es seguro en cualquier tema:
   tipografía, medidas, comportamiento y estorbos heredados.

   Por qué: cada pantalla trae su propia paleta, y varias están
   fijadas en claro sin reaccionar al tema. Cuando este archivo
   imponía fondos del sistema, quedaban tarjetas oscuras junto a
   tarjetas claras y textos ilegibles —contrastes de 1,2:1—.
   Armonizar el color del contenido exige hacerlo pantalla por
   pantalla comprobando contraste, no con reglas globales.

   El marco (menú, cabecera, barra inferior) sí es del sistema y
   vive en sistema.css; ahí el color está bajo control.
   ============================================================ */


/* ─── 1. TIPOGRAFÍA ─────────────────────────────────────── */
/* Una sola familia en las cinco plataformas. No cambia colores. */
.dc-sistema,
.dc-sistema h1, .dc-sistema h2, .dc-sistema h3,
.dc-sistema h4, .dc-sistema h5, .dc-sistema h6,
.dc-sistema button, .dc-sistema input, .dc-sistema select,
.dc-sistema textarea, .dc-sistema table{
  font-family:var(--dc-fuente);
}
.dc-sistema h1, .dc-sistema h2,
.dc-sistema [class*="-page-title"]{
  letter-spacing:-.02em;
}


/* ─── 2. LOS NÚMEROS NUNCA SE PARTEN ────────────────────── */
/* La regla dura del sistema. Solo afecta a la forma, no al color:
   cifras de ancho fijo, en una sola línea, y si no caben el JS
   las encoge hasta que entren enteras. */
.dc-sistema [class*="-kpi-num"], .dc-sistema [class*="-stat-num"],
.dc-sistema [class*="-stat-number"], .dc-sistema [class*="-card-pbase"],
.dc-sistema [class*="-price-v"], .dc-sistema [class*="-stat-money"],
.dc-sistema [class*="-money"], .dc-sistema .dc-num,
.dc-sistema [data-num]{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  overflow:hidden;
  font-size:var(--dc-tam-num, inherit);
}
/* Ninguna celda de tabla parte un importe por la mitad */
.dc-sistema td, .dc-sistema th{
  word-break:normal; overflow-wrap:normal;
}
.dc-sistema table th{ white-space:nowrap; }


/* ─── 3. MEDIDAS ────────────────────────────────────────── */
/* Mismo lenguaje de formas en todas: redondeo medio y áreas
   táctiles suficientes. Sin tocar fondos. */
.dc-sistema [class*="-card"], .dc-sistema [class*="-kpi"],
.dc-sistema [class*="-filters"], .dc-sistema [class*="-section"]{
  border-radius:var(--dc-r);
}
.dc-sistema button, .dc-sistema .btn,
.dc-sistema [class*="-btn"], .dc-sistema input,
.dc-sistema select, .dc-sistema textarea{
  border-radius:var(--dc-r-btn);
}
@media (max-width:900px){
  .dc-sistema button, .dc-sistema [class*="-btn"], .dc-sistema a[class*="-btn"]{
    min-height:var(--dc-tap);
  }
}


/* ─── 4. MOVIMIENTO ─────────────────────────────────────── */
/* Las entradas escalonadas dejaban la pantalla a medio pintar
   casi un segundo. El movimiento se reserva para lo que explica
   algo, no para decorar la carga. */
.dc-sistema [class*="-kpi"], .dc-sistema [class*="-card"],
.dc-sistema [class*="-filters"], .dc-sistema [class*="-page-hd"],
.dc-sistema [class*="-toolbar"], .dc-sistema [class*="-table-wrap"],
.dc-sistema [class*="-count-pill"]{
  animation:none !important;
  opacity:1 !important;
}


/* ─── 5. FORMULARIOS EN SECCIONES PLEGABLES ─────────────── */
/* Estructura y comportamiento; los colores los pone la pantalla. */
.dc-sistema .cp-section-hd{
  cursor:pointer; user-select:none; position:relative;
  padding-right:3.4rem;
}
.dc-sistema .cp-section-hd:focus-visible{
  outline:2px solid var(--dc-ac); outline-offset:-2px;
}
/* La flecha dice si la sección está abierta */
.dc-sistema .cp-section-hd::after{
  content:''; position:absolute; right:1rem; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  opacity:.45; transform:rotate(45deg); transition:transform var(--dc-t);
}
.dc-sistema .cp-section.dc-cerrada .cp-section-hd::after{
  transform:rotate(-45deg); margin-top:-2px;
}
/* Cuántos campos lleva la sección, sin abrirla */
.dc-sistema .dc-plegable-estado{
  position:absolute; right:2.6rem; top:50%; transform:translateY(-50%);
  font-size:.7rem; font-weight:700; opacity:.6;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.dc-sistema .dc-plegable-estado:empty{ display:none; }
.dc-sistema .dc-plegable-estado.dc-lleno{ color:var(--dc-ok); opacity:1; }


/* El fondo de la página lo pone el sistema. Las hojas heredadas de
   cada plataforma traen su propio `body{background:#f5f5f7}` y, según
   el orden de carga, ganaban: la página quedaba clara con el tema
   oscuro puesto. */
html.dc-sistema-html, body.dc-sistema{ background:var(--dc-1) !important; }

/* ─── 6. ESTORBOS HEREDADOS ─────────────────────────────── */
/* El panel de menú antiguo se oculta mientras está cerrado; el
   botón "Más" de la barra inferior lo sigue abriendo con .open. */
.dc-sistema .dcs-panel:not(.open),
.dc-sistema .dcs-backdrop:not(.open){ display:none !important; }

/* El pie no declara fondo propio y heredaba lo que hubiera debajo.
   Se le da la superficie del sistema, que sí cambia con el tema: si
   se le fija un oscuro, en tema claro sus propios textos oscuros
   quedan encima y no se leen. */
.dc-sistema [class*="footer-simple"], .dc-sistema footer{
  background:var(--dc-2);
  border-top:1px solid var(--dc-li);
}
/* El texto legal usaba el gris más tenue de la paleta y sobre el
   propio pie se quedaba en 1.8:1. Sube al secundario, legible en
   los dos temas. */
.dc-sistema footer,
.dc-sistema footer [class*="footer-copy"],
.dc-sistema footer [class*="footer-links"] a,
.dc-sistema footer [class*="footer-tagline"],
.dc-sistema footer [class*="footer-desc"],
.dc-sistema footer [class*="footer-nav"] a,
.dc-sistema footer [class*="footer-link"],
.dc-sistema footer [class*="footer-link"] a{ color:var(--dc-tx2) !important; }
/* Los pies traen su propio verde de marca para los enlaces desde
   estilos.css, y sobre el fondo del pie se queda en 1.8:1. */
.dc-sistema footer [class*="footer-link"],
.dc-sistema footer [class*="footer-credits"],
.dc-sistema footer [class*="footer-credits"] a{ color:var(--dc-tx2) !important; }
.dc-sistema footer a:hover{ color:var(--dc-ac-tx) !important; }
.dc-sistema footer [class*="footer-name"],
.dc-sistema footer [class*="footer-nav-title"]{ color:var(--dc-tx); }

/* Tablas anchas: se desplazan dentro de su caja, nunca empujan
   la página entera. */
.dc-sistema .table-responsive,
.dc-sistema [class*="-table-wrap"]{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}

@media (prefers-reduced-motion:reduce){
  .dc-sistema .cp-section-hd::after{ transition:none; }
}
/* ─── 7. TEMA OSCURO ────────────────────────────────────
   Cada pantalla declara el suyo en su propio archivo, junto a las
   variables que ya usa. Aquí no va nada: un bloque global tenía que
   adivinar el papel de cada variable y acababa pisando los temas
   que las pantallas ya traían bien resueltos.                    */

/* ─── 8. SUPERFICIES INTERNAS ESCRITAS A MANO ───────────
   Algunos bloques internos (las cajas de fechas de las tarjetas,
   por ejemplo) llevan el color puesto en la propia regla y no en
   una variable, así que la sección anterior no los alcanza: en
   tema oscuro se quedaban casi blancos con texto tenue encima.

   Esto solo actúa en oscuro, donde la alternativa es una caja
   blanca en medio de una tarjeta oscura. En claro no toca nada. */
:root[data-theme="dark"] .dc-sistema [class*="-card-meta"],
:root[data-theme="dark"] .dc-sistema [class*="-meta-box"],
:root[data-theme="dark"] .dc-sistema [class*="-meta-wrap"],
:root[data-theme="dark"] .dc-sistema [class*="-card-inner"],
:root[data-theme="dark"] .dc-sistema [class*="-detalle-box"]{
  background:rgba(255,255,255,.045);
}

/* Foco del buscador compartido: al recorrer con las flechas hay que
   ver cuál está señalado, en las cinco plataformas. */
.dc-sistema .bq-activo{
  /* Opaco, como el de las cotizaciones: con el acento translúcido se
     transparentaba lo que hay detrás. */
  background-color:color-mix(in srgb, var(--dc-ac) 20%, var(--dc-0)) !important;
  color:var(--dc-tx) !important;
  box-shadow:inset 3px 0 0 var(--dc-ac);
}
.dc-sistema .bq-activo strong{ color:var(--dc-tx); }

/* El bloque de impresión vive AQUÍ y no en sistema.css: esta hoja se
   enlaza al final del documento, así que gana a las reglas con
   !important que pintan el fondo oscuro del cuerpo. */
/* ─── IMPRESIÓN ─────────────────────────────────────────────
   Al papel va el documento y nada más. El sistema visual —barra
   superior, lateral, barra inferior, hojas y botones flotantes— no se
   imprime, y el fondo oscuro tampoco: si no, la hoja sale con un marco
   negro alrededor y con el menú pegado arriba.

   Va con !important porque sistema.js escribe el hueco del lateral y de
   la barra inferior directamente en body.style, y en papel ese hueco
   deja la factura descentrada. */
@media print{

  /* ─── El margen del papel ───────────────────────────────────────
     Iba `@page{margin:0}` y el hueco se hacía con `padding` en el body.
     Pero el padding del body es de la CAJA ENTERA, no de cada hoja: solo
     la primera salía con aire arriba, y de la segunda en adelante el
     texto arrancaba pegado al filo, donde la impresora ya no imprime. De
     ahí que "se comiera material de los bordes".
     Con el margen en @page lo pone el motor de impresión en TODAS. */
  @page{ size:letter; margin:12mm 10mm 14mm; }

  /* Fondo y tinta: papel blanco, texto negro */
  html, html.dc-sistema,
  body, body.dc-sistema{
    background:#fff !important;
    color:#000 !important;
    padding:0 !important;
    margin:0 !important;
  }

  /* Nada del sistema visual llega al papel */
  .dc-top, .dc-lat, .dc-bajo, .dc-fab,
  .dc-apps-fondo, .dc-mas-fondo,
  .dc-ayuda, .dc-ayuda-caja,
  .no-print, .no-imprimir{ display:none !important; }

  /* El documento ocupa la hoja entera */
  .dc-sistema .container, .dc-sistema .container-fluid,
  .dc-sistema .cot-wrapper, .dc-sistema .cotizacion-container{
    max-width:none !important;
    width:100% !important;
    margin:0 !important;
    box-shadow:none !important;
    border:0 !important;
  }

  /* Las tarjetas dejan de parecer tarjetas: en papel son secciones */
  .dc-sistema .card, .dc-sistema .vp-card, .dc-sistema .dc-tarjeta{
    box-shadow:none !important;
    border-color:#ddd !important;
    background:#fff !important;
    color:#000 !important;
  }

  /* Que no se parta una fila entre dos hojas… pero SOLO las filas de datos.
     La cotización se maqueta con una tabla exterior cuyo <tr> contiene la
     tabla entera de ítems: pedirle a ESA fila que no se parta obliga al
     navegador a mandarla completa a la hoja siguiente, y la primera salía
     con el encabezado y los totales y el resto en blanco.
     `:not(:has(table))` deja fuera las filas de maquetación. Si el navegador
     no entendiera :has(), simplemente no se aplica la regla: nunca rompe. */
  tr:not(:has(table)){ page-break-inside:avoid; }

  /* ─── Documentos de varias hojas ────────────────────────────────
     Lo que hace legible una factura larga es que cada hoja se explique
     sola. Tres cosas, y las tres son de motor de impresión: */

  /* 1· La cabecera de la tabla de ítems se repite en cada hoja, para que
        las columnas nunca queden sin nombre a mitad del listado. */
  .cot-items thead{ display:table-header-group; }
  .cot-items tfoot{ display:table-footer-group; }
  .cot-cinta td{
    border-top:1px solid #999 !important; padding:4px 8px !important;
    font-size:8.5px !important; color:#333 !important; background:#f4f4f4 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .cot-cinta span{ display:inline-block; margin-right:14px; }
  .cot-cinta b{ color:#000 !important; }

  /* 2· Ninguna fila de producto se parte entre dos hojas: o entra entera
        o pasa a la siguiente. Así no se pierde ni se corta un ítem. */
  .cot-items tbody tr{ page-break-inside:avoid; break-inside:avoid; }

  /* 3· Los totales y las cuentas de cobro viajan juntos y no se quedan
        huérfanos en una hoja aparte. */
  .cot-footer-table, .cot-pagos, .cot-rep-footer,
  .cot-totales, .cot-pagos-grid{ page-break-inside:avoid; break-inside:avoid; }

  /* Nada de huérfanas ni viudas sueltas en los párrafos del documento. */
  .cot-wrapper p, .cotizacion-container p{ orphans:3; widows:3; }

  /* El documento se ajusta al ancho de la hoja. Con un max-width en
     píxeles (900px ≈ 238mm) salía más ancho que una carta y la impresora
     lo encogía o lo recortaba. */
  .cot-wrapper, .cotizacion-container, .cot-main-table{
    max-width:none !important; width:100% !important;
  }

  /* Los enlaces no arrastran su color de acento al papel */
  .dc-sistema a{ color:#000 !important; text-decoration:none !important; }
}

/* ─── Pie de los desplegables de búsqueda ───────────────────
   Dice cuántos resultados hay en total y ofrece traerlos todos.
   Lo pinta js/buscador.js. */
.bq-pie{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .75rem;font-size:.76rem;color:var(--dc-tx3);
  border-top:1px solid var(--dc-li);background:var(--dc-2);
  position:sticky;bottom:0;
}
.bq-pie b{color:var(--dc-tx2);font-weight:700}
.bq-pie-btn{
  font:inherit;font-size:.76rem;font-weight:700;cursor:pointer;
  padding:.25rem .6rem;border-radius:8px;
  border:1px solid var(--dc-li2);background:var(--dc-1);color:var(--dc-ac-tx);
}
.bq-pie-btn:hover{border-color:var(--dc-ac);background:var(--dc-ac-s)}

/* Que un desplegable largo se pueda recorrer en vez de desbordarse.
   OJO: el desplazamiento va en el elemento que CONTIENE las opciones.
   En las cotizaciones, #resultadosBusqueda es un envoltorio de altura cero
   con la lista posicionada encima; ponerle overflow ahí recortaba los 50
   resultados y el buscador parecía no devolver nada. */
.ci-dropdown, .cp-prv-results, .prv-search-results,
.ct-dropdown, #provResultados,
.autocomplete-results,
#resultadosBusqueda > .list-group{
  max-height:min(420px, 55vh);
  overflow-y:auto;
}

/* Mientras el servidor devuelve la página del listado, la rejilla se
   atenúa: se ve que algo está pasando sin que salte la maquetación. */
.inv-cargando{opacity:.45;transition:opacity .12s;pointer-events:none}

/* ─── Portátiles de pantalla pequeña ──────────────────────────────
   El menú lateral se queda con ~214px del ancho, pero las media
   queries de cada pantalla miden la VENTANA, no el sitio que de
   verdad queda. En un 1366 con el escalado de Windows la ventana
   ronda los 950px CSS: los cortes que había (768, 900, 1024) no se
   activaban, la columna de detalle seguía pidiendo sus 300px fijos y
   la principal caía por debajo de 400px. Si además contenía algo
   ancho (una tabla con min-width), el desbordamiento se escapaba de
   su caja y salía scroll lateral en toda la página.

   Dos correcciones, juntas:
   · minmax(0,1fr) y min-width:0 para que la columna SÍ pueda encoger
     y el scroll se quede dentro de la caja que lo necesita;
   · un corte único en 1200px para apilar mientras no haya sitio. */

/* Van con `body` delante a propósito: cada pantalla trae su propia
   rejilla en un <style> dentro del .php, que el navegador lee DESPUÉS
   de esta hoja. Sin ese punto extra de especificidad, la regla de la
   página gana y esto no serviría de nada. */
body .cp-grid, body .vc-layout, body .vi-grid,
body .vp-grid, body .vp-layout, body .vu-layout{
  grid-template-columns:minmax(0,1fr) 300px;
}
body .cp-grid > *, body .vc-layout > *, body .vi-grid > *,
body .vp-grid > *, body .vp-layout > *, body .vu-layout > *{ min-width:0; }

@media (max-width:1200px){
  body .cp-grid, body .vc-layout, body .vi-grid,
  body .vp-grid, body .vp-layout, body .vu-layout{
    grid-template-columns:minmax(0,1fr);
  }
  body .cp-col-side, body .vc-col-side, body .vi-col-side,
  body .vp-col-side, body .vu-col-side{ position:static; }
}

/* Cualquier caja que exista para desplazarse sola nunca debe empujar
   a la página: se queda dentro de su columna. */
.ci-items-table-wrap, .tabla-scroll, .tbl-wrap{ max-width:100%; }


/* La cinta de continuidad es para el papel: en pantalla el documento se ve
   entero de un vistazo y ahí solo sería ruido. */
.cot-cinta{ display:none; }

/* ─── Barras de filtros en el móvil ───────────────────────────────
   Una barra de filtros fija se come la pantalla del listado que se
   supone que estás filtrando. Medido en inventario: 438 px de 812, el
   54 %. En pantalla estrecha ninguna se queda pegada; se desplaza con
   el contenido como todo lo demás. */
@media (max-width:760px){
  body .inv-filters, body .sb-filters, body .cot-filtros{
    position:static !important;
  }
}
