/* CRM — utilidades de la dirección visual "ficha de índice" (no vienen de Tailwind) */

/* Tokens de color por tema. Los nombres (ink/panel/paper/etc.) están
   mapeados en tailwind.config (crm_head.php) a estas variables, así que
   ninguna clase bg- o text- del HTML necesita cambiar entre temas: solo
   cambia el valor de la variable. "coal" NO cambia con el tema a propósito
   (texto sobre naranja/paper necesita quedar oscuro en los dos temas). */
:root {
  --c-ink: #0B0B0D;
  --c-panel: #18181C;
  --c-panelraised: #1F2024;
  --c-line: #2A2A30;
  --c-ash: #9A9AA2;
  --c-off: #EDEDEF;
  --c-paper: #F3ECDF;
  --c-onpaper: #0B0B0D;
  --c-coal: #0B0B0D;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --c-ink: #F5F3EF;
  --c-panel: #FDFCFA;
  --c-panelraised: #F0EEE8;
  --c-line: #E7E4DC;
  --c-ash: #767268;
  --c-off: #33312C;
  --c-paper: #0B0B0D;
  --c-onpaper: #F5F3EF;
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.tabular { font-variant-numeric: tabular-nums; }

/* divisor tipo perforación de remito/factura */
.perforation {
  background-image: repeating-linear-gradient(to right, rgba(154,154,162,.45) 0 6px, transparent 6px 12px);
  height: 1px;
}
:root[data-theme="light"] .perforation {
  background-image: repeating-linear-gradient(to right, rgba(107,104,96,.45) 0 6px, transparent 6px 12px);
}

/* pestaña de carpeta / ficha de índice — usada en la ficha de cliente.
   Se invierte a propósito entre temas: en oscuro es la única superficie
   clara ("papel"); en claro es la única superficie oscura. Siempre el
   elemento distinto en la tarjeta. */
.ficha-tab {
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
}
.ficha-tab .punch {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: rgba(11, 11, 13, .35);
}
:root[data-theme="light"] .ficha-tab .punch {
  background: rgba(245, 243, 239, .45);
}

/* Toggle de tema en el header */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }