/* ============================================================
   Sistema de diseño NiuX ERP
   Marca: NiuX Servicios Informáticos
   Paleta: verde #4DA64D + azul #1F75BC sobre fondos neutros

   IMPORTANTE: este archivo usa CSS plano (sin @apply) porque
   Tailwind CDN NO procesa @apply en archivos externos. Las
   utilidades de Tailwind (.flex, .px-4, etc.) usadas inline
   en los templates sí funcionan porque el CDN escanea el DOM.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* ----- Marca NiuX ----- */
    --niux-azul:           #1F75BC;
    --niux-azul-oscuro:    #185A8E;
    --niux-azul-claro:     #2389D6;
    --niux-azul-suave:     #E8F1F9;

    --niux-verde:          #4DA64D;
    --niux-verde-oscuro:   #3D8A3D;
    --niux-verde-claro:    #6FBB6F;
    --niux-verde-suave:    #E8F5E8;

    /* ----- Estados semánticos (no de marca) ----- */
    --niux-warning:        #B45309;
    --niux-warning-soft:   #FEF3C7;
    --niux-warning-text:   #78350F;

    --niux-danger:         #9F1239;
    --niux-danger-soft:    #FFE4E6;
    --niux-danger-text:    #881337;

    /* ----- Neutros ----- */
    --niux-bg:             #F8FAFC;
    --niux-surface:        #FFFFFF;
    --niux-surface-alt:    #F1F5F9;
    --niux-text:           #0F172A;
    --niux-text-muted:     #64748B;
    --niux-text-soft:      #475569;
    --niux-border:         #E2E8F0;
    --niux-border-strong:  #CBD5E1;

    --niux-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system,
                      'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --niux-shadow-sm:  0 1px 2px 0 rgb(15 23 42 / 0.05);
    --niux-shadow:     0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
    --niux-shadow-md:  0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.05);
}

/* ---------- Base global ---------- */
html {
    font-family: var(--niux-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body {
    background-color: var(--niux-bg);
    color: var(--niux-text);
}

/* iOS / touch */
* { -webkit-tap-highlight-color: transparent; }
button, a, input, select, textarea { touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* evita zoom iOS al focusear */

*:focus-visible {
    outline: 2px solid var(--niux-azul);
    outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--niux-border-strong); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--niux-text-muted); }

.safe-pad-top    { padding-top: max(0.5rem, env(safe-area-inset-top)); }
.safe-pad-bottom { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }

/* ============================================================
   Componentes — CSS plano
   ============================================================ */

/* ---------- Formularios ---------- */
.input-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    border-radius: 0.5rem;
    border: 1px solid var(--niux-border-strong);
    background: #fff;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--niux-text);
    box-shadow: var(--niux-shadow-sm);
    transition: border-color 150ms, box-shadow 150ms;
}
/* type="number" en algunos navegadores ignora width:100% — forzar */
input.input-field[type="number"] { width: 100%; }
.input-field::placeholder { color: #94a3b8; }
.input-field:focus {
    outline: none;
    border-color: var(--niux-azul);
    box-shadow: 0 0 0 3px rgb(31 117 188 / 0.18);
}
.input-field:disabled {
    background: var(--niux-surface-alt);
    color: var(--niux-text-muted);
    cursor: not-allowed;
}
/* Variante con prefijo (ej. "$" overlay a la izquierda).
   Necesario porque el shorthand `padding` de .input-field gana sobre `pl-*` de Tailwind. */
.input-field-monto { padding-left: 1.75rem; }

.label-field {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--niux-text-soft);
    margin-bottom: 0.375rem;
}

/* ---------- Botones (base) ---------- */
.btn-primary, .btn-secundario, .btn-peligro, .btn-exito {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    min-height: 44px;
    box-shadow: var(--niux-shadow-sm);
    transition: background-color 150ms, transform 150ms, box-shadow 150ms;
    cursor: pointer;
    text-decoration: none;
    border: 1px solid transparent;
}
.btn-primary:disabled, .btn-secundario:disabled, .btn-peligro:disabled, .btn-exito:disabled {
    opacity: 0.6; cursor: not-allowed; transform: none;
}

.btn-primary {
    background: var(--niux-azul);
    color: #fff;
}
.btn-primary:hover { background: var(--niux-azul-claro); box-shadow: var(--niux-shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secundario {
    background: #fff;
    color: var(--niux-text-soft);
    border-color: var(--niux-border-strong);
}
.btn-secundario:hover { background: var(--niux-surface-alt); color: var(--niux-text); }

.btn-peligro {
    background: var(--niux-danger);
    color: #fff;
}
.btn-peligro:hover { background: #7F1D1D; box-shadow: var(--niux-shadow-md); }

.btn-exito {
    background: var(--niux-verde);
    color: #fff;
}
.btn-exito:hover { background: var(--niux-verde-oscuro); box-shadow: var(--niux-shadow-md); transform: translateY(-1px); }

/* ---------- Enlaces de acción ---------- */
.link-accion {
    color: var(--niux-azul);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 150ms;
}
.link-accion:hover { color: var(--niux-azul-oscuro); text-decoration: underline; }

/* ---------- Badges ---------- */
.badge-verde, .badge-azul, .badge-gris, .badge-amarillo, .badge-rojo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 9999px;
    padding: 0.125rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25rem;
    box-shadow: inset 0 0 0 1px transparent;
}
.badge-verde   { background: var(--niux-verde-suave);   color: var(--niux-verde-oscuro);   box-shadow: inset 0 0 0 1px rgb(77 166 77 / 0.25); }
.badge-azul    { background: var(--niux-azul-suave);    color: var(--niux-azul-oscuro);    box-shadow: inset 0 0 0 1px rgb(31 117 188 / 0.25); }
.badge-gris    { background: var(--niux-surface-alt);   color: var(--niux-text-soft);      box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.20); }
.badge-amarillo{ background: var(--niux-warning-soft);  color: var(--niux-warning-text);   box-shadow: inset 0 0 0 1px rgb(180 83 9 / 0.30); }
.badge-rojo    { background: var(--niux-danger-soft);   color: var(--niux-danger-text);    box-shadow: inset 0 0 0 1px rgb(159 18 57 / 0.30); }

/* ---------- Tarjetas ---------- */
.card {
    background: #fff;
    border-radius: 0.75rem;
    border: 1px solid var(--niux-border);
    box-shadow: var(--niux-shadow-sm);
    transition: box-shadow 200ms;
}
.card:hover { box-shadow: var(--niux-shadow-md); }
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--niux-border);
}
.card-body   { padding: 1rem 1.25rem; }
.card-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--niux-border);
    background: rgb(241 245 249 / 0.6);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* ---------- Tabla NiuX ---------- */
.tabla-niux-wrapper { overflow-x: auto; }
.tabla-niux {
    width: 100%;
    font-size: 0.875rem;
    text-align: left;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 640px;
}
.tabla-niux thead th {
    background: var(--niux-surface-alt);
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--niux-text-soft);
    border-bottom: 1px solid var(--niux-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.tabla-niux tbody td {
    padding: 0.75rem 1rem;
    color: var(--niux-text-soft);
    border-bottom: 1px solid var(--niux-border);
    vertical-align: middle;
}
.tabla-niux tbody tr { transition: background-color 100ms; }
.tabla-niux tbody tr:hover { background: var(--niux-azul-suave); }
.tabla-niux tbody tr:last-child td { border-bottom: 0; }

@media (min-width: 640px) {
    .tabla-niux { min-width: 0; }
}

/* ---------- Estado vacío ---------- */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    border-radius: 0.75rem;
    border: 2px dashed var(--niux-border);
    background: rgb(248 250 252 / 0.5);
    color: var(--niux-text-muted);
}
.empty-state-titulo { margin-top: 0.75rem; font-size: 1rem; font-weight: 600; color: var(--niux-text-soft); }
.empty-state-texto  { margin-top: 0.25rem; font-size: 0.875rem; color: var(--niux-text-muted); max-width: 24rem; }

/* ---------- Estados de comprobantes (CAE) ---------- */
.estado-cae {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    border-radius: 0.375rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
    box-shadow: inset 0 0 0 1px transparent;
}
.estado-cae::before {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: currentColor;
}
.estado-cae-emitido    { background: var(--niux-verde-suave);  color: var(--niux-verde-oscuro);  box-shadow: inset 0 0 0 1px rgb(77 166 77 / 0.25); }
.estado-cae-pendiente  { background: var(--niux-warning-soft); color: var(--niux-warning-text);  box-shadow: inset 0 0 0 1px rgb(180 83 9 / 0.3); }
.estado-cae-pendiente::before { animation: niux-pulse 1.6s ease-in-out infinite; }
.estado-cae-rechazado  { background: var(--niux-danger-soft);  color: var(--niux-danger-text);   box-shadow: inset 0 0 0 1px rgb(159 18 57 / 0.3); }
.estado-cae-anulado    { background: var(--niux-surface-alt);  color: var(--niux-text-soft);     box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.2); }
.estado-cae-borrador   { background: var(--niux-bg);           color: var(--niux-text-muted);    box-shadow: inset 0 0 0 1px var(--niux-border-strong); }

/* ---------- Navbar ---------- */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.85);
    text-decoration: none;
    transition: background-color 150ms, color 150ms;
    min-height: 40px;
    white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgb(255 255 255 / 0.12); }
.nav-link-activo {
    color: #fff;
    background: rgb(255 255 255 / 0.18);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
}
.nav-link svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    opacity: 0.95;
}

/* Item del menú mobile (full-width, tap target alto) */
.nav-link-mobile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: rgb(255 255 255 / 0.92);
    text-decoration: none;
    transition: background-color 150ms;
    min-height: 48px;
}
.nav-link-mobile:hover, .nav-link-mobile:active {
    background: rgb(255 255 255 / 0.12);
    color: #fff;
}
.nav-link-mobile-activo {
    background: rgb(255 255 255 / 0.18);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.15);
}
.nav-link-mobile svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ---------- Mensajes flash ---------- */
.flash {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border: 1px solid;
    box-shadow: var(--niux-shadow-sm);
}
.flash svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; }
.flash-success { background: var(--niux-verde-suave);  color: var(--niux-verde-oscuro);  border-color: rgb(77 166 77 / 0.3); }
.flash-error   { background: var(--niux-danger-soft);  color: var(--niux-danger-text);   border-color: rgb(159 18 57 / 0.3); }
.flash-warning { background: var(--niux-warning-soft); color: var(--niux-warning-text);  border-color: rgb(180 83 9 / 0.3); }
.flash-info    { background: var(--niux-azul-suave);   color: var(--niux-azul-oscuro);   border-color: rgb(31 117 188 / 0.3); }

/* ---------- Indicador de búsqueda CUIT (HTMX) ---------- */
.cuit-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--niux-border);
    border-top-color: var(--niux-azul);
    border-radius: 9999px;
    animation: niux-spin 700ms linear infinite;
    vertical-align: middle;
}

/* Resalte temporal cuando el form recibe foco programático
   (ej: "completá la condición IVA" después de autocomplete del padrón) */
.niux-resaltar {
    animation: niux-resaltar-anim 1.5s ease-out;
}
@keyframes niux-resaltar-anim {
    0%   { box-shadow: 0 0 0 0 rgb(31 117 188 / 0.5); }
    50%  { box-shadow: 0 0 0 6px rgb(31 117 188 / 0.15); }
    100% { box-shadow: 0 0 0 0 rgb(31 117 188 / 0); }
}

/* ---------- Animaciones ---------- */
@keyframes niux-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes niux-spin  { to { transform: rotate(360deg); } }

.htmx-swapping  { opacity: 0; transition: opacity 120ms ease-out; }
.htmx-settling  { opacity: 1; transition: opacity 180ms ease-in; }
.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Mobile fine-tuning (iPhone 16 Pro: ~402px) ---------- */
@media (max-width: 640px) {
    .card-header { flex-wrap: wrap; }
    h1, h2, h3 { word-break: break-word; }

    /* Tabla más compacta en mobile (padding reducido + texto más pequeño) */
    .tabla-niux thead th {
        padding: 0.5rem 0.5rem;
        font-size: 0.7rem;
    }
    .tabla-niux tbody td {
        padding: 0.5rem 0.5rem;
        font-size: 0.8125rem;
    }
    /* En mobile el wrapper permite scroll horizontal — sticky header se desactiva
       porque colide con position:sticky del nav superior. */
    .tabla-niux thead th { position: relative; top: auto; }

    /* Cards más compactos en mobile */
    .card-body { padding: 0.75rem 1rem; }
    .card-header { padding: 0.625rem 1rem; }

    /* Botones full-width por default en mobile sólo si están solos */
    .btn-primary, .btn-secundario, .btn-peligro, .btn-exito {
        padding: 0.5rem 0.875rem;
    }
}

/* Footer con safe-area-inset-bottom para iPhones con home indicator */
footer { padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }

/* ============================================================
   Sidebar lateral colapsable (rediseño UI 2026-05-09)
   ============================================================ */

.sidebar-seccion-titulo {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-bottom: 0.25rem;
    font-size: 0.6875rem;     /* 11px */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--niux-text-muted);
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--niux-text-soft);
    text-decoration: none;
    transition: background-color 100ms, color 100ms;
    min-height: 40px;
}
.sidebar-item:hover {
    background: var(--niux-azul-suave);
    color: var(--niux-azul-oscuro);
}
.sidebar-item:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--niux-azul);
}

.sidebar-item-activo {
    position: relative;
    background: var(--niux-azul-suave);
    color: var(--niux-azul-oscuro);
    font-weight: 600;
}
/* Acento verde de marca en el item activo */
.sidebar-item-activo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.375rem;
    bottom: 0.375rem;
    width: 3px;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    background: var(--niux-verde);
}

.sidebar-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}