/* Estilos personalizados de DomiCRM */
[x-cloak] { display: none !important; }

/* ---------------------------------------------------------------------
 * Layout crítico del esqueleto (navbar + sidebar + main + footer)
 * ---------------------------------------------------------------------
 * Tailwind se carga vía CDN (Play CDN, sin build step): escanea el DOM en
 * el navegador y genera el CSS de cada clase en tiempo de ejecución. Esta
 * app NO es una SPA — cada clic en el menú carga una página nueva — así
 * que esa generación vuelve a correr en CADA navegación. En ese instante
 * (antes de que el CDN termine de escanear el body y de que su
 * MutationObserver procese los elementos que el parser va insertando), el
 * esqueleto se pinta sin flex/alturas/posiciones: navbar, sidebar y main
 * se ven apilados como bloques sueltos un instante, y luego "saltan" al
 * layout real — eso es el parpadeo en cada cambio de vista.
 *
 * Estas reglas son EXACTAMENTE las que Tailwind generaría para las mismas
 * clases (mismos valores de su escala de espaciado/tamaño): están acá
 * para que el esqueleto ya se vea correcto desde el primer pintado, sin
 * depender del CDN. Cuando Tailwind termina de cargar no hay conflicto,
 * solo redundancia — ambas reglas dicen lo mismo. app.css se carga con
 * un <link> normal (bloqueante), así que esto siempre está listo antes
 * del primer frame; a diferencia del <script> del CDN, que no lo está.
 *
 * Solo cubre las clases de LAYOUT (display/flex/tamaño/posición) del
 * esqueleto de ``base.html``/``navbar.html``/``sidebar.html``/
 * ``footer.html`` — no todas las utilidades de Tailwind del resto de la
 * app. El color no hace falta duplicarlo acá: ``themes.css`` ya redefine
 * los colores con más especificidad (``[data-theme] .clase``) y también
 * se carga con un <link> bloqueante, así que ya gana desde el primer
 * pintado sin ayuda extra. */
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.min-h-full { min-height: 100%; }
.h-full { height: 100%; }
.min-w-0 { min-width: 0px; }
.sticky { position: sticky; }
.top-0 { top: 0px; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.p-6 { padding: 1.5rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.w-16 { width: 4rem; }
.w-60 { width: 15rem; }
@media (min-width: 768px) {
    .md\:flex { display: flex; }
    .md\:flex-col { flex-direction: column; }
    .md\:h-full { height: 100%; }
    .md\:min-h-0 { min-height: 0px; }
    .md\:overflow-hidden { overflow: hidden; }
    .md\:overflow-y-auto { overflow-y: auto; }
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

table { border-collapse: collapse; }

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-block; }
.htmx-request.htmx-indicator { display: inline-block; }

.kanban-column { min-height: 60vh; }

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* ---------------------------------------------------------------------------
 * Paleta `rose` — shim para Tailwind 2.2.19 (CDN)
 *
 * El CDN de Tailwind 2.2 NO incluye la paleta ``rose`` (solo ``red``). Pero
 * las plantillas usan extensivamente ``bg-rose-*`` / ``text-rose-*`` / etc.
 * para acciones destructivas (botón "Eliminar", alertas de peligro). Sin
 * estas reglas el fondo queda transparente y el texto blanco desaparece
 * contra los modales blancos.
 *
 * Los valores son los estándar de Tailwind v3 (rose palette).
 * --------------------------------------------------------------------------- */
.text-rose-500 { color: #f43f5e; }
.text-rose-600 { color: #e11d48; }
.text-rose-700 { color: #be123c; }
.text-rose-800 { color: #9f1239; }

.bg-rose-50  { background-color: #fff1f2; }
.bg-rose-100 { background-color: #ffe4e6; }
.bg-rose-500 { background-color: #f43f5e; }
.bg-rose-600 { background-color: #e11d48; }

.border-rose-200 { border-color: #fecdd3; }
.border-rose-300 { border-color: #fda4af; }

.hover\:bg-rose-50:hover  { background-color: #fff1f2; }
.hover\:bg-rose-700:hover { background-color: #be123c; }

.hover\:text-rose-700:hover { color: #be123c; }
.hover\:text-rose-800:hover { color: #9f1239; }

.focus\:ring-rose-400:focus {
    --tw-ring-color: rgba(251, 113, 133, 0.5);
    box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.5);
}

/* ---------------------------------------------------------------------------
 * Arbitrary z-index values — shim para Tailwind 2.2.19 (CDN)
 *
 * La notación ``z-[900]`` requiere el motor JIT de Tailwind v3. En v2 la
 * clase no se genera y el elemento queda con ``z-index: auto``, que en
 * muchos navegadores equivale a 0. Resultado: los modales (``z-[900]``,
 * ``z-[950]``, etc.) quedaban DEBAJO de elementos con z-index válido como
 * el ``thead`` sticky (``z-20``), y se veían tiras de tabla cruzando el
 * modal.
 *
 * Estas reglas replican exactamente lo que el motor JIT generaría para
 * cada valor arbitrario actualmente en uso en los templates.
 * --------------------------------------------------------------------------- */
.z-\[5\]    { z-index: 5; }
.z-\[60\]   { z-index: 60; }
.z-\[900\]  { z-index: 900; }
.z-\[950\]  { z-index: 950; }
.z-\[960\]  { z-index: 960; }
.z-\[1000\] { z-index: 1000; }
.z-\[1100\] { z-index: 1100; }

[data-theme] .kanban-hscroll {
    scrollbar-width: thin;
    scrollbar-color: var(--c-border-strong) transparent;
}
[data-theme] .kanban-hscroll::-webkit-scrollbar {
    height: 10px;
}
[data-theme] .kanban-hscroll::-webkit-scrollbar-track {
    background: transparent;
}
[data-theme] .kanban-hscroll::-webkit-scrollbar-thumb {
    background-color: var(--c-border-strong);
    background-clip: padding-box;
    border-radius: 9999px;
    border: 2px solid transparent;
}
[data-theme] .kanban-hscroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-text-muted);
/* Los estilos específicos de Reportes (tarjetas, tokens de gráfica, avisos,
 * formas de gráfica sin SVG, etc.) viven en reports.css — solo se cargan en
 * esa página, no aquí. Ver app/static/css/reports.css. */

/* ---------------------------------------------------------------------------
 * Focus visible global (accesibilidad): ring visible y consistente.
 * --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--c-primary, #2563eb);
    outline-offset: 2px;
}
}