/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTES
   ═══════════════════════════════════════════════════════════════════════════

   Las piezas que se repiten en toda la plataforma, escritas UNA vez.

   POR QUE
     Habia 4.497 estilos escritos a mano contra 62 clases, y de esos, 210
     patrones repetidos 4 veces o mas: 1.684 copias del mismo estilo. Por eso
     cada cambio visual era un barrido de miles de lineas, y por eso dos
     pantallas que deberian verse igual no se veian igual: nadie se acuerda de
     cual era el padding correcto.

     Con una clase, mover el alto de las filas es UNA edicion en vez de 1.684.

   COMO SE ADOPTA
     Sin apagar nada. Estas clases conviven con los estilos en linea que ya
     hay -el estilo en linea siempre gana- asi que se van reemplazando pantalla
     por pantalla, sin un dia de corte y sin riesgo de dejar algo a medias.

   Los valores salen de los tokens de temas.css, asi que siguen el tema y la
   escala de letra solos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Celdas de tabla ─────────────────────────────────────────────────────── */
.celda        { padding: var(--e-3); text-align: center; }
.celda-izq    { padding: var(--e-3); text-align: left; }

/* ── Texto ───────────────────────────────────────────────────────────────── */
.txt-fuerte   { color: var(--text-strong); }
.txt-suave    { color: var(--text-muted); }
.txt-chico    { font-size: var(--t-xs); color: var(--text-muted); }
.txt-dato     { font-size: var(--t-sm); color: var(--text-muted); }

/* ── Disposicion ─────────────────────────────────────────────────────────── */
.fila-entre   { display: flex; justify-content: space-between; align-items: center; }
.centrado     { text-align: center; }

/* ── Botones que son solo un icono ───────────────────────────────────────── */
/*
   Sin fondo. Un boton de exportar no compite con el boton principal de la
   pantalla: se reconoce por el dibujo, no por el bloque de color. Antes eran
   tres rectangulos de colores distintos al lado de PROCESAR TAREAS y los
   cuatro pesaban igual, asi que ninguno destacaba.

   El aro al pasar el mouse y el fondo tenue al pulsar dan la respuesta que
   antes daba el color. Y como no hay texto, el `title` es obligatorio: con
   solo un dibujo, sin el nadie sabe que hace.
*/
.btn-icono {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  min-width: 32px;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.btn-icono:hover {
  color: var(--text-strong);
  border-color: var(--border);
  background: rgba(var(--ink-rgb), 0.06);
}
.btn-icono:disabled { opacity: .45; cursor: not-allowed; }

/* Borrar se queda en rojo. Sin fondo el dibujo es lo unico que avisa, asi que
   el color tiene que seguir diciendo que esta accion no se deshace. */
.btn-peligro { color: var(--danger); }
.btn-peligro:hover { color: var(--danger); background: rgba(var(--danger-rgb), 0.12); border-color: rgba(var(--danger-rgb), 0.35); }

/* El de Excel va en verde: es como se reconoce, y ahi el color SI significa
   algo. El tono sale del tema, asi que se lee en los cuatro. */
.btn-excel { color: var(--success); }
.btn-excel:hover { color: var(--success); background: rgba(var(--success-rgb), 0.12); border-color: rgba(var(--success-rgb), 0.35); }

/* ── El aire alrededor de un reporte ─────────────────────────────────────── */
/*
   Los reportes que se dibujan enteros dentro de un contenedor -Rotacion,
   Pendiente, Prepack, SKU sin salida- no traian margen propio: la tabla
   arrancaba pegada al borde izquierdo de la pantalla y el titulo tambien.
   Se lee peor y parece que el reporte estuviera cortado.

   Se les da el aire aca y no en cada uno, para que todos respiren igual.
*/
#rot, #pend, #pp_detalle, #sss {
  /* Marco propio, no solo aire: sin el, la tabla arranca pegada al borde y no
     se ve donde empieza ni donde termina el reporte.

     VELO Y NO COLOR FIJO. Con var(--bg-card) el marco estaba puesto pero NO SE
     VEIA: estos reportes se dibujan DENTRO de un panel, y en los temas claros
     el panel tambien es blanco, asi que quedaba una tarjeta blanca sobre fondo
     blanco -medido: 1,0:1- y en el negro una casi negra sobre casi negro
     -1,01:1-. Un velo se calcula contra la tinta del tema, asi que se despega
     siempre, este encima de lo que este. Es el mismo arreglo que necesitaron
     las tarjetas del selector de temas. */
  background: rgba(var(--ink-rgb), 0.05);
  border: 1px solid rgba(var(--ink-rgb), 0.22);
  border-radius: var(--r-md);
  padding: var(--e-4) var(--e-5) var(--e-5);
}

@media (max-width: 900px) {
  #rot, #pend, #pp_detalle, #sss { padding: var(--e-3); }
}