/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   🖍️ LÍNEAS QUE SE VEN — REGLA CANÓNICA (20/10/2026).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   Damián, 20/10: «necesito más contraste o líneas más oscuras entre los rectángulos de secciones porque no se ven» y, después de verlo en
   Configuración: «aplica esto en toda la app y ponelo como regla canónica. no quiero más líneas que no se ven».

   LA REGLA: toda línea (borde de recuadro, separador, grilla) contrasta con el fondo sobre el que va al menos 1,45 en modo CLARO y 2,0 en
   modo OSCURO. Los grises de Tailwind gray-50/100/200 (y slate-100/200) no la cumplen sobre blanco (1,03 a 1,24): acá TODOS pasan a #c4cbd4
   (1,49 a 1,64 sobre blanco, gray-50 y gray-100) y, en oscuro, a #4b5b70 (2,1 a 2,7 sobre los fondos oscuros de la app). Los bordes de color
   -50/-100 pasan a su tono -300. Los -200 de color se dejan: se leen por el tinte. Los grises -300 de Tailwind también quedan en #c4cbd4.

   Una sola copia: index.html la carga con un <link> y ninguna página redefine estos colores (la custodia `_work/pruebas/t-lineas-visibles.js`
   se pone roja si una página Tailwind no la carga, si alguien vuelve a definir un `html.dark .border-gray-…` suelto, o si aparece un color de
   línea escrito a mano que no llegue al contraste). Las páginas sueltas (condiciones, escrituras, privacidad) no usan Tailwind: sus variables
   de línea cumplen la misma regla y la misma prueba las mide.

   El prefijo `html body` sube la especificidad para ganarle a las clases de Tailwind (que el CDN inyecta DESPUÉS, en tiempo de ejecución);
   en oscuro, `html.dark body … !important` le gana a cualquier `html.dark .border-…` viejo.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Claro: grises ── */
html body .border-gray-50, html body .border-gray-100, html body .border-gray-200, html body .border-gray-300,
html body .border-slate-50, html body .border-slate-100, html body .border-slate-200, html body .border-slate-300 { border-color: #c4cbd4; }
html body .divide-gray-50 > :not([hidden]) ~ :not([hidden]), html body .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html body .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html body .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: #c4cbd4; }

/* ── Claro: colores -50/-100 → su -300 ── */
html body .border-red-50, html body .border-red-100 { border-color: #fca5a5; }
html body .border-orange-50, html body .border-orange-100 { border-color: #fdba74; }
html body .border-amber-50, html body .border-amber-100 { border-color: #fcd34d; }
html body .border-yellow-50, html body .border-yellow-100 { border-color: #fde047; }
html body .border-lime-50, html body .border-lime-100 { border-color: #bef264; }
html body .border-green-50, html body .border-green-100 { border-color: #86efac; }
html body .border-emerald-50, html body .border-emerald-100 { border-color: #6ee7b7; }
html body .border-teal-50, html body .border-teal-100 { border-color: #5eead4; }
html body .border-cyan-50, html body .border-cyan-100 { border-color: #67e8f9; }
html body .border-sky-50, html body .border-sky-100 { border-color: #7dd3fc; }
html body .border-blue-50, html body .border-blue-100 { border-color: #93c5fd; }
html body .border-indigo-50, html body .border-indigo-100 { border-color: #a5b4fc; }
html body .border-violet-50, html body .border-violet-100 { border-color: #c4b5fd; }
html body .border-purple-50, html body .border-purple-100 { border-color: #d8b4fe; }
html body .border-fuchsia-50, html body .border-fuchsia-100 { border-color: #f0abfc; }
html body .border-pink-50, html body .border-pink-100 { border-color: #f9a8d4; }
html body .border-rose-50, html body .border-rose-100 { border-color: #fda4af; }

/* ── Oscuro: grises (y los campos de texto) ── */
html.dark body .border-gray-50, html.dark body .border-gray-100, html.dark body .border-gray-200, html.dark body .border-gray-300,
html.dark body .border-slate-50, html.dark body .border-slate-100, html.dark body .border-slate-200, html.dark body .border-slate-300 { border-color: #4b5b70 !important; }
html.dark body .divide-gray-50 > :not([hidden]) ~ :not([hidden]), html.dark body .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark body .divide-gray-200 > :not([hidden]) ~ :not([hidden]), html.dark body .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: #4b5b70 !important; }
html.dark body input, html.dark body textarea, html.dark body select { border-color: #4b5b70 !important; }

/* ── Las TARJETAS de sección (bg-white + rounded-xl/2xl + shadow-sm/shadow) no tenían borde: sólo una sombra que casi no se ve, así que el
   rectángulo no se distinguía del fondo. Se les dibuja un contorno de 1 px con box-shadow (no con border: no cambia el tamaño ni mueve nada),
   del mismo gris que las líneas, y se conserva su sombra. Las de shadow-lg/xl (modales, menús) no: ya tienen el fondo oscurecido detrás. ── */
html body .bg-white.rounded-xl.shadow-sm, html body .bg-white.rounded-2xl.shadow-sm { box-shadow: 0 0 0 1px #c4cbd4, 0 1px 2px 0 rgb(0 0 0 / 0.05); }
html body .bg-white.rounded-xl.shadow, html body .bg-white.rounded-2xl.shadow { box-shadow: 0 0 0 1px #c4cbd4, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
html.dark body .bg-white.rounded-xl.shadow-sm, html.dark body .bg-white.rounded-2xl.shadow-sm,
html.dark body .bg-white.rounded-xl.shadow, html.dark body .bg-white.rounded-2xl.shadow { box-shadow: 0 0 0 1px #4b5b70, 0 1px 3px rgba(0,0,0,.5) !important; }