/*
 * COMPONENTES — construidos SOLO con los tokens de design-tokens.css.
 *
 * Regla: en este archivo no hay un solo valor literal de tamaño, color,
 * espacio o radio. Si hace falta uno nuevo, se agrega como token allá, no
 * como número acá. Esa disciplina es la única razón por la que un sistema de
 * diseño sigue siendo coherente a los tres meses.
 *
 * Alcance: clases propias con prefijo .sol-*, aplicadas a mano donde las
 * queremos. A propósito NO se pisa `.table` de Bootstrap en general: el admin
 * también usa bootstrap-table y el changelist de Django, y pisar el selector
 * genérico rompería pantallas que hoy funcionan y que no estamos mirando.
 */

/* ====================================================================
   POR QUÉ ACÁ NO HAY UN "PUENTE" QUE PISE EL COLOR DEL TEMA
   ====================================================================

   Hubo una versión de este archivo que redefinía --bs-primary y
   --primary-color para llevar TODO el admin al azul de la referencia. Estaba
   MAL y se revirtió.

   El motivo está en templates/admin/base.html (~línea 11):

       {% if enterprise %}
         :root { --primary-color: {{ enterprise.color_primary|hex_to_rgb }}; }

   El acento del admin es DATO POR TENANT: cada enterprise configura su color
   de marca en la base. Ese <style> se imprime ANTES de estas hojas, así que
   pisarlo acá le borraba la marca a todos los clientes de una.

   Regla que queda: en un sistema multitenant, el color de marca se cambia
   donde vive -- en `enterprise.color_primary` --, no en una hoja de estilos.
   --sol-accent existe para NUESTROS componentes (anillo de foco y poco más) y
   no manda sobre el tema.

*/

/* ====================================================================
   PANEL — la caja contenedora
   ==================================================================== */

/* En la referencia las cards casi no tienen sombra: se separan del fondo por
   un hairline y el radio generoso. Es más sobrio y envejece mejor que la
   sombra marcada, que siempre termina viéndose de otra época. */
.sol-panel {
  background-color: var(--sol-surface);
  border: 1px solid var(--sol-border);
  border-radius: var(--sol-radius-lg);
  box-shadow: var(--sol-shadow-1);
}

/* ====================================================================
   TABLA DE DATOS — el componente central de este producto
   ====================================================================

   Este sistema lo usan contadores mirando tablas ocho horas por día. Acá
   "elegante" no significa sombras ni gradientes: significa que el número que
   buscás aparezca sin que tengas que pensar. */

/*.sol-data-table {*/
/*  width: 100%;*/
/*  margin-bottom: 0;*/
/*  font-size: var(--sol-text-sm);*/
/*  !*line-height: var(--sol-leading-tight);*!*/
/*  color: var(--sol-ink);*/
/*  !*border-collapse: collapse;*!*/
/*}*/

/*.sol-data-table th,*/
/*.sol-data-table td {*/
/*  padding: var(--sol-cell-padding-y) var(--sol-cell-padding-x);*/
/*  vertical-align: middle;*/
/*}*/

/* Solo líneas horizontales, y con el borde SUTIL (más claro que el de la
   card): el separador ordena filas dentro de un objeto, no delimita objetos.
   La grilla completa -- bordes en los cuatro lados de cada celda -- es el
   reflejo automático de todo el mundo y es justo lo que hace que una tabla se
   vea vieja: ruido vertical que el ojo no necesita, porque las columnas ya se
   leen por alineación. */
/*.sol-data-table tbody tr + tr td {*/
/*  border-top: 1px solid var(--sol-border-subtle);*/
/*}*/

/* Encabezados al estilo de la referencia: texto chico, gris, peso medio y
   CAJA NORMAL sobre fondo hundido. Nada de VERSALITAS CON TRACKING: ese es el
   look "enterprise clásico", se ve serio pero viejo, y encima se lee más
   lento porque en mayúsculas el ojo pierde la silueta de la palabra. */
/*.sol-data-table thead th {*/
/*  font-size: var(--sol-text-xs);*/
/*  font-weight: 700;*/
/*  color: black;*/
/*  background-color: var(--sol-surface-sunken);*/
/*  white-space: nowrap;*/
/*}*/

/* Pie de totales: la fila que el contador mira PRIMERO. Se separa con un
   borde más marcado que las líneas internas -- esa diferencia de peso es lo
   que la convierte en un resumen y no en una fila más. */
.sol-data-table tfoot td {
  font-weight: var(--sol-weight-semibold);
  background-color: var(--sol-surface-sunken);
  border-top: 1px solid var(--sol-border-strong);
}

/*.sol-data-table tbody tr {*/
/*  transition: background-color var(--sol-motion-fast) var(--sol-motion-ease);*/
/*}*/
/*.sol-data-table tbody tr:hover {*/
/*  background-color: var(--sol-surface-sunken);*/
/*}*/

/* Una tabla ancha NUNCA puede hacer scrollear la página entera de costado:
   se scrollea ella sola, adentro de su caja. */
.sol-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ====================================================================
   CELDAS DE DATOS
   ==================================================================== */

/* Importes. Tres cosas, y las tres importan:
   - tabular-nums: sin esto "1.234,56" y "89,00" no calzan en columna, porque
     cada dígito tiene ancho distinto en las fuentes proporcionales.
   - alineado a la derecha: para comparar magnitudes de un vistazo.
   - monoespaciada: refuerza la columna de unidades. */
/*.sol-num {*/
/*  font-family: var(--sol-font-mono);*/
/*  font-variant-numeric: tabular-nums;*/
/*  text-align: right;*/
/*  white-space: nowrap;*/
/*}*/

/*!* Códigos de cuenta, RUC, claves de acceso: se comparan carácter a carácter.*/
/*   Un punto más chicos que el cuerpo porque la monoespaciada rinde más grande*/
/*   al mismo font-size, y más apagados porque son referencia, no el dato. *!*/
/*.sol-code {*/
/*  font-family: var(--sol-font-mono);*/
/*  font-size: var(--sol-text-xs);*/
/*  color: var(--sol-ink-muted);*/
/*  white-space: nowrap;*/
/*}*/

/*!* Significado del importe. Se usan SOLO cuando el signo del dinero es el dato*/
/*   (mayor, balance, conciliación), no para decorar cualquier número. En una*/
/*   tabla donde TODAS las filas tienen importe, pintarlos de colores no agrega*/
/*   información: agrega ruido. Por eso el débito es prácticamente texto. *!*/
/*.sol-amount-debit { color: var(--sol-debit); }*/
/*.sol-amount-credit { color: var(--sol-credit); }*/
/*.sol-amount-negative { color: var(--sol-negative); }*/

/*!* Celda vacía: un guion apagado en vez de un blanco. El blanco es ambiguo*/
/*   ("¿no hay dato o no cargó?"); el guion dice "acá no va nada". *!*/
/*.sol-empty::before {*/
/*  content: "—";*/
/*  color: var(--sol-ink-muted);*/
/*}*/

/* ====================================================================
   CHIP DE IDENTIFICADOR
   ====================================================================

   Tomado de la columna "ID" de la referencia: el número va en una cajita con
   borde, no suelto. Suena decorativo y no lo es -- le dice al ojo "esto es un
   identificador, no una cantidad", que en un sistema donde conviven números
   de documento, de asiento, RUC e importes es exactamente la confusión que
   hay que evitar. */
.sol-chip {
  display: inline-block;
  padding: 0 var(--sol-space-2);
  border: 1px solid var(--sol-border);
  border-radius: var(--sol-radius-pill);
  background-color: var(--sol-surface);
  font-size: var(--sol-text-xs);
  line-height: 1.7;
  color: var(--sol-ink-secondary);
  white-space: nowrap;
}

/* ====================================================================
   ETIQUETAS DE ESTADO
   ====================================================================

   Reemplazo de `.badge bg-warning` y compañía. Las de Bootstrap son bloques
   sólidos de color saturado: con cinco en pantalla la tabla parece un
   semáforo y el color deja de significar algo. Estas son de fondo suave y
   texto oscuro -- se leen mejor y no gritan.

   Píldora en caja normal ("Autorizado", no "AUTORIZADO"), igual que la
   referencia. Cada variante trae SU par de tokens (texto + fondo) porque los
   pares están calibrados para pasar contraste; derivar el fondo del texto por
   fórmula daba combinaciones que no pasaban. */
.sol-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sol-space-1);
  padding: 0 var(--sol-space-2);
  border-radius: var(--sol-radius-pill);
  font-size: var(--sol-text-xs);
  font-weight: var(--sol-weight-medium);
  line-height: 1.7;
  white-space: nowrap;
}

.sol-tag--draft {
  color: var(--sol-state-draft);
  background-color: var(--sol-state-draft-surface);
}
.sol-tag--pending {
  color: var(--sol-state-pending);
  background-color: var(--sol-state-pending-surface);
}
.sol-tag--ok {
  color: var(--sol-state-ok);
  background-color: var(--sol-state-ok-surface);
}
.sol-tag--void {
  color: var(--sol-state-void);
  background-color: var(--sol-state-void-surface);
}
.sol-tag--alert {
  color: var(--sol-alert);
  background-color: var(--sol-alert-surface);
}

/* ====================================================================
   INDICADOR (KPI)
   ====================================================================

   El bloque "Total Volume / $110,100.00 / +8%" de la referencia. Lo que lo
   hace funcionar es el CONTRASTE DE ESCALA: la etiqueta chica y gris, el
   valor grande y oscuro. Si los dos tienen tamaño parecido, el ojo no sabe
   cuál es el dato y el bloque entero deja de comunicar. */
.sol-metric {
  display: flex;
  flex-direction: column;
  gap: var(--sol-space-2);
  padding: var(--sol-space-4);
}
.sol-metric__label {
  display: flex;
  align-items: center;
  gap: var(--sol-space-2);
  font-size: var(--sol-text-md);
  font-weight: var(--sol-weight-medium);
  color: var(--sol-ink-secondary);
}
.sol-metric__value {
  display: flex;
  align-items: center;
  gap: var(--sol-space-2);
  font-size: var(--sol-text-2xl);
  font-weight: var(--sol-weight-semibold);
  letter-spacing: var(--sol-tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--sol-ink);
}

/* Variación contra el período anterior (+8%, -0.4%). Chiquita y al lado del
   valor: es contexto del dato, nunca el dato. */
.sol-delta {
  padding: 0 var(--sol-space-1);
  border-radius: var(--sol-radius-sm);
  font-size: var(--sol-text-xs);
  font-weight: var(--sol-weight-medium);
  font-variant-numeric: tabular-nums;
}
.sol-delta--up {
  color: var(--sol-state-ok);
  background-color: var(--sol-state-ok-surface);
}
.sol-delta--down {
  color: var(--sol-alert);
  background-color: var(--sol-alert-surface);
}

/* Rejilla de KPIs con divisores internos, como el bloque 2x2 de la
   referencia: UNA card dividida, no cuatro cards sueltas. Cuatro cajas con
   sus cuatro sombras compiten entre sí; una sola caja dividida se lee como un
   grupo, que es lo que son. */
.sol-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  background-color: var(--sol-border);
  border-radius: var(--sol-radius-lg);
  overflow: hidden;
}
.sol-metric-grid > * {
  background-color: var(--sol-surface);
}

/* ====================================================================
   TEXTO DE APOYO
   ==================================================================== */

/* Leyendas, aclaraciones y notas al pie de un panel: un solo lugar para el
   "texto que acompaña pero no es el dato". */
.sol-caption {
  font-size: var(--sol-text-xs);
  line-height: var(--sol-leading-normal);
  color: var(--sol-ink-muted);
}

/* Aviso dentro de un panel (falta configurar una cuenta, el asiento no
   cuadra). No usa `.alert` de Bootstrap a propósito: esa trae 1rem de padding
   y colores saturados pensados para un mensaje de página entera, no para una
   nota adentro de una tabla. */
.sol-notice {
  padding: var(--sol-space-2) var(--sol-space-3);
  border-radius: var(--sol-radius-md);
  border-left: 3px solid currentColor;
  font-size: var(--sol-text-xs);
  line-height: var(--sol-leading-normal);
}
.sol-notice--warn {
  color: var(--sol-warn);
  background-color: var(--sol-warn-surface);
}
.sol-notice--alert {
  color: var(--sol-alert);
  background-color: var(--sol-alert-surface);
}
/* El texto del aviso vuelve al color de lectura normal: el color va en el
   borde y el fondo, no en el párrafo -- un bloque entero de texto rojo se lee
   peor y alarma más de lo que corresponde. */
.sol-notice > * {
  color: var(--sol-ink);
}
.sol-notice strong {
  color: inherit;
}