:root {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-primary-bg-subtle: #ccfbf1;
    --bs-primary-border-subtle: #99f6e4;
}

body {
    background-color: #f6f7f9;
}

/* Botón flotante "Volver arriba" (ver setupBackToTop() en app.js) — mismo estilo circular
   que ya usan otros botones flotantes del sistema, para que se sienta consistente. */
#back-to-top-btn {
    position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1040;
    width: 46px; height: 46px; border-radius: 50%; padding: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1.15rem;
}

/* Tema oscuro — se activa con data-bs-theme="dark" en <html> (mismo
   mecanismo nativo de Bootstrap 5.3, así sus propios componentes también
   cambian de color automáticamente). Los matices de marca se mantienen,
   solo un poco más claros para que resalten sobre fondos oscuros. */
[data-bs-theme="dark"] {
    --bs-primary: #14b8a6;
    --bs-primary-rgb: 20, 184, 166;
    --bs-primary-bg-subtle: #0f3d38;
    --bs-primary-border-subtle: #1a544c;
}

[data-bs-theme="dark"] body {
    background-color: #12151c;
}

[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .insight-bubble {
    background: #1b1f28;
}

/* Bootstrap no adapta ".bg-white"/".bg-light"/".text-bg-light" al tema oscuro
   (a propósito, "blanco"/"claro" no cambian de significado por diseño), pero
   aquí se usan como fondo "neutro" para íconos de moneda y badges informativos
   — por eso sí necesitan su propia variante oscura. */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] .text-bg-light {
    background-color: var(--bs-tertiary-bg) !important;
    color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .section-heading {
    color: #14b8a6;
    border-bottom-color: rgba(20, 184, 166, 0.25);
}

[data-bs-theme="dark"] .btn-primary {
    --bs-btn-bg: #14b8a6;
    --bs-btn-border-color: #14b8a6;
    --bs-btn-hover-bg: #2dd4bf;
    --bs-btn-hover-border-color: #2dd4bf;
    --bs-btn-active-bg: #2dd4bf;
    --bs-btn-active-border-color: #2dd4bf;
    --bs-btn-disabled-bg: #14b8a6;
    --bs-btn-disabled-border-color: #14b8a6;
    --bs-btn-focus-shadow-rgb: 20, 184, 166;
    --bs-btn-color: #06211d;
    --bs-btn-hover-color: #06211d;
    --bs-btn-active-color: #06211d;
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: #14b8a6;
    --bs-btn-border-color: #14b8a6;
    --bs-btn-hover-bg: #14b8a6;
    --bs-btn-hover-border-color: #14b8a6;
    --bs-btn-active-bg: #14b8a6;
    --bs-btn-active-border-color: #14b8a6;
    --bs-btn-disabled-color: #14b8a6;
    --bs-btn-disabled-border-color: #14b8a6;
    --bs-btn-focus-shadow-rgb: 20, 184, 166;
    --bs-btn-hover-color: #06211d;
    --bs-btn-active-color: #06211d;
}

[data-bs-theme="dark"] .nav-link.active {
    color: #14b8a6 !important;
}

.btn-primary {
    --bs-btn-bg: #0d9488;
    --bs-btn-border-color: #0d9488;
    --bs-btn-hover-bg: #0f766e;
    --bs-btn-hover-border-color: #0f766e;
    --bs-btn-active-bg: #0f766e;
    --bs-btn-active-border-color: #0f766e;
    --bs-btn-disabled-bg: #0d9488;
    --bs-btn-disabled-border-color: #0d9488;
    --bs-btn-focus-shadow-rgb: 13, 148, 136;
}

.btn-outline-primary {
    --bs-btn-color: #0d9488;
    --bs-btn-border-color: #0d9488;
    --bs-btn-hover-bg: #0d9488;
    --bs-btn-hover-border-color: #0d9488;
    --bs-btn-active-bg: #0d9488;
    --bs-btn-active-border-color: #0d9488;
    --bs-btn-disabled-color: #0d9488;
    --bs-btn-disabled-border-color: #0d9488;
    --bs-btn-focus-shadow-rgb: 13, 148, 136;
}

.card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.navbar {
    box-shadow: 0 2px 6px rgba(10, 30, 66, 0.25);
}

.bg-navbar-gradient {
    background: linear-gradient(135deg, #0a1e42 0%, #16305e 60%, #1b3a73 100%);
}

.navbar-brand {
    font-weight: 600;
    min-width: 0;
    flex-shrink: 1;
}

.navbar-brand .text-truncate {
    min-width: 0;
}

.navbar > .container {
    flex-wrap: nowrap;
}

.navbar-toggler {
    flex-shrink: 0;
}

.navbar-logo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 50%;
    background: #fff;
}

.nav-link.active {
    color: #0d9488 !important;
    font-weight: 600;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #ffffff !important;
}

.navbar-dark .nav-link.active {
    color: #ffffff !important;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.insight-bubble {
    background: #ffffff;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: 0.9rem;
    padding: 1rem 1.1rem;
    margin-top: 1rem;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.1);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.insight-bubble.show {
    opacity: 1;
    transform: translateY(0);
}

.insight-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
}

#insight-result {
    white-space: pre-line;
    line-height: 1.6;
}

@media (max-width: 576px) {
    html {
        font-size: 17.5px;
    }
}

.movement-action-btn {
    font-size: 1.15rem;
    padding: 0.25rem 0.4rem;
    line-height: 1;
}

@media (max-width: 576px) {
    .movement-action-btn {
        font-size: 1.4rem;
        padding: 0.4rem 0.5rem;
    }
}

.debt-bulk-checkbox {
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
}

/* Separador liviano entre "Crear producto" y "elige uno existente" en las tarjetas de fotos
   sin asignar (Inventario) — antes era una oración completa en texto gris, que pesaba más
   visualmente que una simple línea con una palabra adentro. */
.pending-photo-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #adb5bd;
    font-size: 0.7rem;
}
.pending-photo-divider::before,
.pending-photo-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e9ecef;
}
.pending-photo-divider span {
    padding: 0 0.5rem;
    white-space: nowrap;
}

.section-heading {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #0d9488;
    margin: 1.75rem 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid rgba(13, 148, 136, 0.15);
}

.section-heading.mt-0 {
    margin-top: 0;
}

@media (max-width: 767.98px) {
    .navbar-collapse .nav-link {
        display: block;
        padding: 0.9rem 1rem;
        border-radius: 0.5rem;
        background: rgba(255, 255, 255, 0.08);
    }

    .navbar-collapse .nav-link.active {
        background: rgba(255, 255, 255, 0.16);
    }

    .navbar-collapse form {
        width: 100%;
    }

    .navbar-collapse .btn {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 1rem;
    }

    /* El menú "Ventas" agrupa Inventario/Pedidos/Cotizaciones; en móvil el
       dropdown de Bootstrap flota por defecto (position: absolute), lo que se
       ve raro dentro de un menú ya desplegado a pantalla completa — aquí se
       fuerza a que empuje el contenido hacia abajo como un acordeón normal. */
    .navbar-collapse .dropdown-menu {
        position: static;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        box-shadow: none;
        margin: 0.25rem 0 0.5rem;
        padding: 0.25rem;
    }

    .navbar-collapse .dropdown-item {
        display: block;
        padding: 0.75rem 1rem;
        border-radius: 0.5rem;
        color: rgba(255, 255, 255, 0.85);
    }

    .navbar-collapse .dropdown-item:hover,
    .navbar-collapse .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .navbar-collapse .dropdown-item.active {
        background: rgba(255, 255, 255, 0.18);
        color: #fff;
        font-weight: 600;
    }
}

/* "Avisos" (fiado vencido, por pagar, stock bajo) va primero en el HTML del
   Panel — es lo primero que conviene revisar — seguido del título "Registrar y
   consultar" y recién después las columnas de registrar/consultar. En móvil
   (flexbox por defecto en `.dashboard-row`, un `.row` de Bootstrap) esto ya
   alcanza para el orden correcto sin necesidad de `order`. En escritorio, el
   grid de abajo reacomoda el título para que quede arriba de ambas columnas y
   "Avisos" para que rellene el espacio que deja la columna izquierda (más
   corta que la derecha) en vez de aparecer como franja aparte al final. */
@media (min-width: 992px) {
    .dashboard-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "heading heading"
            "left right"
            "avisos right";
        column-gap: 1.5rem;
        row-gap: 1.5rem;
        align-items: start;
    }

    .dashboard-row > .dashboard-heading-registrar,
    .dashboard-row > .dashboard-col-left,
    .dashboard-row > .dashboard-col-right,
    .dashboard-row > .dashboard-col-avisos {
        width: auto;
        max-width: none;
    }

    .dashboard-row > .dashboard-heading-registrar { grid-area: heading; margin: 1.75rem 0 0; }
    .dashboard-row > .dashboard-col-left { grid-area: left; }
    .dashboard-row > .dashboard-col-right { grid-area: right; }
    .dashboard-row > .dashboard-col-avisos { grid-area: avisos; }
}

/* Resalta la fila (cliente/proveedor/producto) bajo el cursor en escritorio, para no
   perder de vista cuál se estaba viendo al volver de un botón. Se limita a dispositivos
   con mouse real (hover:hover) para no dejar un fondo "pegado" al tocar en celular. */
@media (hover: hover) {
    .entity-row:hover,
    #inventory-list > li:hover {
        background-color: rgba(13, 148, 136, 0.06);
    }
}

/* Widget flotante de Ayuda (burbuja + panel de chat de 2 niveles). */
.help-widget {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 1050;
}

.help-widget-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bs-primary);
    color: #fff;
    border: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-widget-bubble.help-widget-attention {
    animation: help-widget-pulse 1.6s ease-out 3;
}

@keyframes help-widget-pulse {
    0% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(13, 148, 136, 0.6); }
    70% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 16px rgba(13, 148, 136, 0); }
    100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(13, 148, 136, 0); }
}

.help-widget-panel {
    position: absolute;
    bottom: 68px;
    left: 0;
    width: 340px;
    max-width: calc(100vw - 24px);
    max-height: 70vh;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-widget-header {
    background: var(--bs-primary);
    color: #fff;
    padding: 0.6rem 0.85rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.help-widget-minimize {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 0.25rem;
}

.help-widget-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    font-size: 0.9rem;
    min-height: 160px;
}

.help-widget-msg {
    margin-bottom: 0.65rem;
    display: flex;
}

.help-widget-msg-user {
    justify-content: flex-end;
}

.help-widget-bubble-text {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg, var(--bs-secondary-bg));
}

.help-widget-msg-user .help-widget-bubble-text {
    background: var(--bs-primary);
    color: #fff;
}

.help-widget-typing span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 3px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.5;
    animation: help-widget-typing-blink 1s infinite ease-in-out;
}

.help-widget-typing span:nth-child(2) { animation-delay: 0.15s; }
.help-widget-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes help-widget-typing-blink {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.help-widget-form {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

.help-widget-form input {
    flex: 1;
}

@media (max-width: 480px) {
    .help-widget-bubble {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .help-widget-panel {
        width: calc(100vw - 24px);
    }
}

/* La burbuja de Ayuda es fija abajo-izquierda en todas las páginas; sin este
   espacio, al hacer scroll hasta el final quedaba encima de botones o texto
   de la última tarjeta de cada página. */
main.container {
    padding-bottom: calc(1.5rem + 96px);
}

@media (max-width: 480px) {
    main.container {
        padding-bottom: calc(1.5rem + 88px);
    }
}

/* Franjas suaves alternadas en la lista de Inventario: con varios productos seguidos,
   cada uno con su propio bloque de precio/existencia, era fácil perder de vista dónde
   terminaba uno y empezaba el siguiente — esto marca la separación sin agregar bordes
   ni recuadros nuevos. */
#inventory-list > li:nth-child(even) {
    background-color: rgba(13, 148, 136, .16);
}

[data-bs-theme="dark"] #inventory-list > li:nth-child(even) {
    background-color: rgba(20, 184, 166, .22);
}

/* ============================================================
   Pasada visual general: transiciones suaves, sombras con más
   profundidad y radios más consistentes con las tarjetas (0.75rem).
   Deliberadamente NO toca paddings, márgenes ni anchos — todas las
   pantallas del sistema ya se probaron una por una contra
   desbordamiento en móvil, y cambiar tamaños hubiera obligado a
   reprobarlas todas de nuevo. Esto solo se ve/siente más pulido,
   sin mover nada de lugar.
   ============================================================ */
.btn,
.form-control,
.form-select,
.nav-link,
.dropdown-item,
.card,
.list-group-item,
.badge {
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.btn {
    border-radius: 0.5rem;
}

.btn-sm {
    border-radius: 0.4rem;
}

.form-control,
.form-select {
    border-radius: 0.5rem;
}

.badge {
    border-radius: 0.4rem;
    font-weight: 600;
}

.card {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.07);
}

[data-bs-theme="dark"] .card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Insignia del banner "Instalar app" en el login — un pulso suave (3 veces, no
   infinito, para no distraer todo el tiempo) que llama la atención hacia la
   opción de instalar la app sin competir visualmente con "Entrar". */
#pwa-icon-badge {
    animation: pwa-badge-pulse 1.8s ease-out 3;
}

/* Formularios de alta rápida ("Nueva tarea", "Nueva cuenta por pagar", "Agregar fiado",
   "Agregar cita a mano", etc.) — antes varios de estos campos solo tenían placeholder, sin
   etiqueta arriba, y con el gap chico de Bootstrap (g-2) se sentían todos pegados entre sí,
   sobre todo en celular donde se apilan uno debajo del otro. .quick-add-form le da más aire
   vertical entre campos apilados y separa visualmente las etiquetas del campo. */
.quick-add-form .form-label {
    font-weight: 600;
    color: #475569;
}

.quick-add-form .form-text {
    margin-top: 0.3rem;
}

@media (max-width: 575.98px) {
    .quick-add-form > [class^="col-"],
    .quick-add-form > [class*=" col-"] {
        margin-bottom: 0.25rem;
    }
}

@keyframes pwa-badge-pulse {
    0% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0.5); }
    70% { box-shadow: 0 0 0 14px rgba(13, 148, 136, 0); }
    100% { box-shadow: 0 0 0 0 rgba(13, 148, 136, 0); }
}