/* TecnoSolutions - estilos base. Los colores de marca vienen de Configuración > Empresa (variables --marca-*). */
:root {
    --marca-color: #632165;
    --marca-color2: #0faae1;
    --bs-primary: var(--marca-color);
    --bs-primary-rgb: 99, 33, 101;
    --bs-link-color: var(--marca-color);
    --bs-link-hover-color: #4a1a4c;
}

body { background-color: #f5f6fa; }

.btn-primary {
    --bs-btn-bg: var(--marca-color);
    --bs-btn-border-color: var(--marca-color);
    --bs-btn-hover-bg: #4f1a51;
    --bs-btn-hover-border-color: #4f1a51;
    --bs-btn-active-bg: #451646;
    --bs-btn-active-border-color: #451646;
    --bs-btn-disabled-bg: var(--marca-color);
    --bs-btn-disabled-border-color: var(--marca-color);
}
.btn-outline-primary {
    --bs-btn-color: var(--marca-color);
    --bs-btn-border-color: var(--marca-color);
    --bs-btn-hover-bg: var(--marca-color);
    --bs-btn-hover-border-color: var(--marca-color);
    --bs-btn-active-bg: var(--marca-color);
    --bs-btn-active-border-color: var(--marca-color);
}
.text-primary { color: var(--marca-color) !important; }
.bg-primary { background-color: var(--marca-color) !important; }
.border-primary { border-color: var(--marca-color) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--marca-color2);
    box-shadow: 0 0 0 .2rem rgba(15, 170, 225, .2);
}

.nav-link { color: #333; padding: .5rem .75rem; border-radius: .375rem; }
.nav-link:hover, .nav-link.active { background-color: rgba(99, 33, 101, .1); color: var(--marca-color); }

.card-kpi { border: none; border-radius: .75rem; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.card-kpi .valor { font-size: 1.5rem; font-weight: 700; }

.table thead th { white-space: nowrap; }
.margen-bueno { color: #198754; font-weight: 600; }
.margen-medio { color: #b58100; font-weight: 600; }
.margen-malo  { color: #dc3545; font-weight: 600; }

.badge-estado { font-weight: 500; }

/* ===== Inicio de sesión ===== */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3d1340 0%, #632165 45%, #0b7fb0 100%);
    padding: 1.5rem;
}
.login-card {
    max-width: 860px;
    width: 100%;
    border: none;
    border-radius: 1.25rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
    overflow: hidden;
    padding: 0 !important;
    display: flex;
    flex-wrap: wrap;
}
.login-card .login-art {
    flex: 1 1 340px;
    min-height: 260px;
    background: linear-gradient(160deg, #ffffff 0%, #f1e9f3 100%);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.login-card .login-art img { max-width: 100%; max-height: 150px; }
.login-card .login-art .login-art-caption { margin-top: 1rem; color: #4a1a4c; }
.login-card .login-form-side {
    flex: 1 1 320px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

/* ===== Propuesta / factura (vista en pantalla e impresión) ===== */
.doc-hoja {
    background: #fff;
    max-width: 860px;
    margin: 0 auto;
    padding: 2rem 2.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    color: #222;
    font-size: .92rem;
}
.doc-encabezado { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.doc-logo { max-height: 90px; max-width: 260px; }
.doc-titulo-caja {
    background: var(--marca-color);
    color: #fff;
    font-size: 1.35rem;
    letter-spacing: .5px;
    text-align: center;
    padding: 1rem 2.25rem;
    border: 1px solid #000;
}
.doc-empresa { font-size: .72rem; line-height: 1.5; margin-top: .35rem; }
.doc-barra-cliente {
    background: var(--marca-color2);
    color: #000;
    font-weight: 700;
    padding: .1rem .35rem;
    margin-top: .5rem;
}
.doc-meta { font-size: .8rem; display: flex; justify-content: space-between; margin-top: .1rem; }
.doc-tabla { width: 100%; border-collapse: separate; border-spacing: 0 0; margin-top: 1.1rem; font-size: .8rem; }
.doc-tabla th {
    background: var(--marca-color);
    color: #fff;
    text-align: center;
    padding: .55rem .5rem;
    border: 1px solid #fff;
}
.doc-tabla td { background: #daedf3; padding: .45rem .5rem; border: 1px solid #fff; }
.doc-tabla td.c { text-align: center; }
.doc-tabla td.r { text-align: right; }
.doc-tabla td.total { background: #e5dfec; font-weight: 700; text-align: right; }
.doc-tabla td.vacio { background: #fff; }
.doc-totales { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: 1.4rem; }
.doc-terminos {
    border: 1px solid #000;
    padding: .55rem .7rem;
    font-size: .74rem;
    flex: 1 1 58%;
    min-height: 120px;
    white-space: pre-line;
}
.doc-suma { flex: 0 0 34%; font-size: .85rem; font-weight: 700; }
.doc-suma div { display: flex; justify-content: space-between; padding: .2rem .4rem; border-bottom: 1px solid #000; }
.doc-suma .subtotal-fila { background: #ffffcc; }

@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    .doc-hoja { box-shadow: none; max-width: 100%; padding: 0; }
    main { padding: 0 !important; margin: 0 !important; width: 100% !important; }
    .doc-tabla th, .doc-tabla td, .doc-titulo-caja, .doc-barra-cliente, .doc-suma .subtotal-fila {
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
}

/* ---------- App móvil (PWA) ---------- */
body { -webkit-tap-highlight-color: transparent; }
.con-barra-inferior { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .con-barra-inferior { padding-bottom: 0; } }

.barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: flex; align-items: stretch; justify-content: space-around;
    background: #fff; border-top: 1px solid #dee2e6;
    padding: .25rem .25rem calc(.25rem + env(safe-area-inset-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.barra-inferior a, .barra-inferior button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; font-size: .68rem; color: #6c757d; text-decoration: none; background: none; border: 0; padding: .35rem 0; min-height: 52px;
}
.barra-inferior i { font-size: 1.3rem; line-height: 1; }
.barra-inferior a.activo { color: var(--marca-color); font-weight: 600; }
.barra-inferior .boton-mas {
    flex: 0 0 56px; width: 56px; height: 56px; min-height: 0; margin-top: -22px; border-radius: 50%;
    background: var(--marca-color); color: #fff; box-shadow: 0 4px 12px rgba(99,33,101,.45);
}
.barra-inferior .boton-mas i { font-size: 1.7rem; }
.acceso-rapido {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
    padding: .9rem .25rem; border-radius: .75rem; background: #f3eef4; color: var(--marca-color);
    text-decoration: none; font-size: .78rem; font-weight: 600; min-height: 84px;
}
.acceso-rapido i { font-size: 1.6rem; }

@media (max-width: 767.98px) {
    /* 16px evita que iPhone haga zoom al tocar un campo */
    .form-control, .form-select, .form-control-sm, .form-select-sm { font-size: 16px; min-height: 44px; }
    .btn { min-height: 40px; }
    main { padding-top: .75rem !important; }
    h3 { font-size: 1.25rem; }
    .doc-hoja { padding: 1rem; box-shadow: none; }
    .doc-encabezado { flex-direction: column; }
    .doc-totales { flex-direction: column; }
    .doc-suma { flex: 1 1 auto; width: 100%; }
    .doc-tabla { font-size: .72rem; }
    .doc-tabla th, .doc-tabla td { padding: .35rem .3rem; }
    .navbar-brand { font-size: .95rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.navbar { padding-top: env(safe-area-inset-top); }