/* ==========================================================================
   Skin TESAM para el template Wrappixel
   --------------------------------------------------------------------------
   Se carga DESPUES de dist/css/style.min.css y solo reasigna color.
   No toca espaciados ni tipografia: eso lo pone el template.

   Colores tomados del logotipo TE.SA.M. Peru:
     ambar   #FDB813   naranja #F58220   ember  #E8451F
     grafito #58595B   niebla  #9A9A9C

   Regla que conviene no romper: un solo naranja accionable. El ember se
   reserva para el boton principal y el asterisco de obligatorio; si se
   reparte por toda la pantalla deja de senalar nada.
   ========================================================================== */

.skin-tesam {
    --tesam-amber: #fdb813;
    --tesam-orange: #f58220;
    --tesam-ember: #e8451f;
    --tesam-graphite: #58595b;
    --tesam-mist: #9a9a9c;
    /* El rojo de error se aleja del ember a proposito: si se parecen, el
       usuario no distingue "pulsable" de "esta mal". */
    --tesam-danger: #9b2c2c;
}

/* ---------- Barra superior ---------- */
.skin-tesam .topbar {
    background: var(--tesam-orange);
}

.skin-tesam .topbar .top-navbar .navbar-header .navbar-brand {
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.skin-tesam .topbar .navbar-light .navbar-nav .nav-item > a.nav-link {
    color: rgba(255, 255, 255, 0.9);
}

.skin-tesam .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:hover,
.skin-tesam .topbar .navbar-light .navbar-nav .nav-item > a.nav-link:focus {
    color: #fff;
}

/* ---------- Menu lateral ---------- */
.skin-tesam .sidebar-nav ul li a:hover,
.skin-tesam .sidebar-nav ul li a.active {
    color: var(--tesam-ember);
}

.skin-tesam .sidebar-nav ul li a:hover i,
.skin-tesam .sidebar-nav ul li a.active i {
    color: var(--tesam-ember);
}

/* Fondo tenue en vez de naranja pleno: el item activo debe leerse sin
   competir con el boton principal. */
.skin-tesam .sidebar-nav > ul > li.active > a {
    color: var(--tesam-ember);
    background: rgba(245, 130, 32, 0.09);
    border-left: 3px solid var(--tesam-orange);
    font-weight: 500;
}

.skin-tesam .sidebar-nav > ul > li.active > a i {
    color: var(--tesam-ember);
}

/* ---------- Botones ---------- */
.skin-tesam .btn-primary,
.skin-tesam .btn-primary.disabled,
.skin-tesam .btn-primary:disabled {
    background: var(--tesam-ember);
    border-color: var(--tesam-ember);
    color: #fff;
}

.skin-tesam .btn-primary:hover,
.skin-tesam .btn-primary:focus,
.skin-tesam .btn-primary:active,
.skin-tesam .btn-primary:not(:disabled):not(.disabled):active {
    background: #cf3b17;
    border-color: #cf3b17;
    color: #fff;
}

.skin-tesam .btn-primary:focus,
.skin-tesam .btn-primary:not(:disabled):not(.disabled):active:focus {
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.35);
}

.skin-tesam .btn-outline-primary {
    color: var(--tesam-ember);
    border-color: var(--tesam-orange);
}

.skin-tesam .btn-outline-primary:hover {
    background: var(--tesam-ember);
    border-color: var(--tesam-ember);
    color: #fff;
}

/* ---------- Utilidades de color ---------- */
.skin-tesam .text-primary { color: var(--tesam-ember) !important; }
.skin-tesam .bg-primary   { background-color: var(--tesam-orange) !important; }
.skin-tesam a             { color: var(--tesam-ember); }
.skin-tesam a:hover       { color: #cf3b17; }

/* ---------- Formularios ---------- */
.skin-tesam .form-control:focus {
    border-color: var(--tesam-orange);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.22);
}

.skin-tesam .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--tesam-orange);
    border-color: var(--tesam-orange);
}

.skin-tesam input[type="checkbox"],
.skin-tesam input[type="radio"] {
    accent-color: var(--tesam-orange);
}

/* Errores: color propio y siempre acompanados de texto, nunca solo color. */
.skin-tesam .text-danger,
.skin-tesam .invalid-feedback { color: var(--tesam-danger) !important; }

.skin-tesam .form-control.is-invalid {
    border-color: var(--tesam-danger);
    background-image: none;
}

.skin-tesam .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(155, 44, 44, 0.2);
}

.skin-tesam .alert-danger {
    background: #fdf1f1;
    border-color: #f0d4d4;
    color: var(--tesam-danger);
}

.skin-tesam .alert-success {
    background: #eef7f1;
    border-color: #cfe6d9;
    color: #2f7d53;
}

/* ---------- Pestanas ---------- */
.skin-tesam .nav-tabs .nav-link.active {
    color: var(--tesam-ember);
    border-bottom: 2px solid var(--tesam-orange);
    font-weight: 500;
}

/* ---------- Paginacion ---------- */
.skin-tesam .page-item.active .page-link {
    background: var(--tesam-ember);
    border-color: var(--tesam-ember);
}

.skin-tesam .page-link { color: var(--tesam-ember); }

/* ==========================================================================
   Ajustes propios del modulo de Cuentas (direccion "densa")
   ========================================================================== */

/* Franja de marca en la cabecera de cada tarjeta. */
.card-brandbar {
    display: inline-block;
    width: 3px;
    height: 15px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: -2px;
    background: linear-gradient(var(--tesam-amber), var(--tesam-ember));
}

/* Fila etiqueta-a-la-izquierda de 32px. Es lo que da la densidad:
   toda la ficha entra sin scroll en un portatil. */
.frow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 4px 16px;
    align-items: center;
}

@media (min-width: 576px) {
    .frow {
        grid-template-columns: 10.5rem 1fr;
        gap: 12px;
    }
    .frow > label { text-align: right; }
}

.frow + .frow { border-top: 1px solid rgba(233, 236, 239, 0.75); }

.frow > label {
    margin: 0;
    font-size: 0.8125rem;
    color: #6c757d;
    line-height: 1.3;
}

/* El template fija .form-control { min-height: 38px }, y min-height gana sobre
   height: hay que reasignar las dos o la fila no baja de 38px. */
.frow .form-control {
    height: 32px;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 0.8125rem;
}

.frow textarea.form-control { height: auto; min-height: 32px; }

.fcol + .fcol { border-top: 1px solid #e9ecef; }

@media (min-width: 992px) {
    .fcol + .fcol { border-top: 0; border-left: 1px solid #e9ecef; }
}

.req { color: var(--tesam-ember); font-weight: 700; margin-right: 2px; }

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    background: #fafbfc;
}

/* ==========================================================================
   Listado de cuentas (DataTable)
   ========================================================================== */

.filter-label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8d94a5;
}

/* Chips de filtro activo: lo unico que queda a la vista cuando el panel de
   busqueda se pliega. Sin ellos el usuario no entiende por que ve 1.284
   cuentas en lugar de 21.595. */
.filter-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 14px;
    border-bottom: 1px solid #e9ecef;
    background: #f7f9fb;
}

.chips-label { font-size: 0.75rem; color: #8d94a5; }

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 4px;
    padding: 2px 4px 2px 9px;
    border-radius: 100px;
    font-size: 0.75rem;
    background: rgba(245, 130, 32, 0.13);
    color: var(--tesam-ember, #e8451f);
}

.filter-chip b { font-weight: 600; }

.filter-chip button {
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 3px;
    opacity: 0.65;
}

.filter-chip button:hover { opacity: 1; }

#tabla-cuentas { font-size: 0.8125rem; }

#tabla-cuentas thead th {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8d94a5;
    white-space: nowrap;
}

#tabla-cuentas td { white-space: nowrap; vertical-align: middle; }

.cuenta-link { font-weight: 500; color: var(--tesam-ember, #e8451f); }
.cuenta-link:hover { text-decoration: underline; }

/* Cifras alineadas: sin tabular-nums las columnas de RUC bailan. */
#tabla-cuentas td.num {
    font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
    color: #6c757d;
}

.doc-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 100px;
    font-size: 0.6875rem;
}

.doc-pill.doc-ruc  { background: rgba(47, 125, 83, 0.13);  color: #2f7d53; }
.doc-pill.doc-otro { background: rgba(245, 130, 32, 0.15); color: var(--tesam-ember, #e8451f); }

/* Controles propios de DataTables dentro de la tarjeta. */
.dataTables_wrapper .row:first-child,
.dataTables_wrapper .row:last-child { padding: 8px 14px; margin: 0; }

.dataTables_wrapper .dataTables_length select { min-width: 62px; }
.dataTables_wrapper .dataTables_info { font-size: 0.75rem; color: #8d94a5; padding-top: 6px; }

.dataTables_wrapper .dataTables_processing {
    border: 0;
    background: rgba(255, 255, 255, 0.85);
    color: var(--tesam-ember, #e8451f);
    font-size: 0.8125rem;
    font-weight: 500;
    box-shadow: none;
}

/* ---------- Select2 ----------
   La libreria trae 28px de alto y su propio azul. Se ajusta a la densidad de
   32px del resto de la ficha y a la paleta de marca. */
.frow .select2-container { width: 100% !important; }

.frow .select2-container--default .select2-selection--single {
    height: 32px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.frow .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 30px;
    padding-left: 10px;
    font-size: 0.8125rem;
    color: #4f5467;
}

.frow .select2-container--default .select2-selection--single .select2-selection__arrow { height: 30px; }
.frow .select2-container--default .select2-selection--single .select2-selection__placeholder { color: #a2a8b3; }

.skin-tesam .select2-container--default .select2-selection--single:focus,
.skin-tesam .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--tesam-orange);
    box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.22);
}

.skin-tesam .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--tesam-orange);
    color: #fff;
}

.skin-tesam .select2-container--default .select2-results__option[aria-selected="true"] {
    background: rgba(245, 130, 32, 0.14);
    color: var(--tesam-ember);
}

.skin-tesam .select2-dropdown {
    border-color: #dee2e6;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

.skin-tesam .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--tesam-orange);
    outline: none;
}

/* Cuando el campo trae error, el borde rojo tiene que verse tambien en Select2. */
.frow .is-invalid + .select2-container--default .select2-selection--single {
    border-color: var(--tesam-danger);
}

/* Resultados del autocompletado de "Miembro de" (fallback sin Select2). */
.lookup-results {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 230px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

.lookup-results button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    color: #4f5467;
    cursor: pointer;
}

.lookup-results button:hover,
.lookup-results button:focus {
    background: rgba(245, 130, 32, 0.1);
    color: var(--tesam-ember);
    outline: none;
}

/* ==========================================================================
   Menu lateral: submenus desplegables (acordeon)
   --------------------------------------------------------------------------
   Los submenus se abren DENTRO del menu, empujando los items de abajo. Nada
   sobresale del sidebar.

   El template ya los indenta; aqui solo se agrega la guia vertical que ata
   los hijos a su padre, y el color de marca.
   ========================================================================== */

.skin-tesam .sidebar-nav #sidebarnav > li > ul {
    background: rgba(0, 0, 0, 0.02);
    border-left: 3px solid rgba(245, 130, 32, 0.35);
    margin-left: 20px;
}

.skin-tesam .sidebar-nav #sidebarnav > li > ul li a {
    color: var(--tesam-graphite);
    font-size: 0.8125rem;
}

.skin-tesam .sidebar-nav #sidebarnav > li > ul li a:hover {
    color: var(--tesam-ember);
}

/* El hijo activo lleva el naranja pleno en la guia, para que se distinga del
   resto del submenu sin repetir el fondo tenue del padre. */
.skin-tesam .sidebar-nav #sidebarnav > li > ul li.active > a {
    color: var(--tesam-ember);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--tesam-orange);
    margin-left: -3px;
    padding-left: 43px;
}

/* Un padre con el submenu abierto no debe competir con el hijo activo: se
   marca solo con el texto, sin fondo ni borde. */
.skin-tesam .sidebar-nav > ul > li.active > a.has-arrow {
    background: none;
    border-left: 0;
}

/* ==========================================================================
   Menu lateral en modo iconos (mini-sidebar)
   --------------------------------------------------------------------------
   Ahi el template si saca el submenu como panel flotante. sidebar-mini-flyout.js
   lo rescata del recorte de perfect-scrollbar; esto solo le da los colores.
   ========================================================================== */

@media (min-width: 768px) {

    .skin-tesam.mini-sidebar .sidebar-nav #sidebarnav > li > ul {
        background: #fff;
        border: 1px solid #e9ecef;
        border-left: 3px solid var(--tesam-orange);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.11);
        margin-left: 0;
    }

    .skin-tesam.mini-sidebar .sidebar-nav #sidebarnav > li > ul li a {
        border-radius: 0;
    }

    .skin-tesam.mini-sidebar .sidebar-nav #sidebarnav > li > ul li a:hover {
        background: rgba(245, 130, 32, 0.09);
    }

    /* El template ensancha el <a> a 290px al pasar el mouse para mostrar el
       nombre, pero el contenedor mide 70px y lo corta a la mitad. Se deja en
       70px y el nombre se ve por el title nativo del navegador. */
    .skin-tesam.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a {
        width: 70px;
        background: rgba(245, 130, 32, 0.09);
    }

    .skin-tesam.mini-sidebar .sidebar-nav #sidebarnav > li:hover > a .hide-menu {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Columna "Productos" del listado de paquetes de venta

   Se pintan todos los productos del paquete, y los hay con 89. Sin tope de
   altura una sola fila mediria mas que la pantalla y dejaria la tabla
   inservible: la celda lleva su propio scroll a partir de unos ocho.
   --------------------------------------------------------------------------- */
.celda-productos {
    max-height: 8.5rem;
    overflow-y: auto;
    min-width: 15rem;
}

.lista-productos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .75rem;
    line-height: 1.35;
}

.lista-productos li {
    padding: .05rem 0;
    white-space: normal;
}

/* Los inactivos, tachados: siguen en el paquete pero ya no se venden. */
.lista-productos li.text-muted {
    text-decoration: line-through;
}

/* ---------------------------------------------------------------------------
   El buscador de productos de la cotizacion, con el mismo aspecto que Select2.

   No es un Select2: es una lista de Bootstrap que se pinta a mano (hace falta
   navegar con las flechas y anadir con Enter, y Select2 no da eso). Pero para
   quien la usa es "otro buscador mas", asi que la opcion sobre la que esta el
   raton tiene que verse igual que en cualquier desplegable del CRM.

   Bootstrap la pintaba en gris palido al pasar por encima y en azul la marcada,
   los dos ajenos al skin. Aqui las dos pasan al naranja TESAM, el mismo de
   .select2-results__option--highlighted, que esta unas lineas mas arriba.
   --------------------------------------------------------------------------- */
.skin-tesam #sugerencias .list-group-item-action:hover,
.skin-tesam #sugerencias .list-group-item-action:focus,
.skin-tesam #sugerencias .list-group-item-action.active {
    background: var(--tesam-orange);
    border-color: var(--tesam-orange);
    color: #fff;
}

/* El precio va en un <span> aparte y hereda su propio color: sin esto se queda
   gris sobre el naranja y no se lee. */
.skin-tesam #sugerencias .list-group-item-action:hover .float-right,
.skin-tesam #sugerencias .list-group-item-action:focus .float-right,
.skin-tesam #sugerencias .list-group-item-action.active .float-right {
    color: #fff;
}

.skin-tesam #sugerencias {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
}

/* ===================================================================
   Bloqueo de pantalla mientras el servidor trabaja  (assets/js/bloqueo.js)

   Tapa todo y deja un mensaje. El z-index va por encima del modal de
   Bootstrap (1050) a propósito: casi siempre se lanza desde dentro de un
   modal, y si quedara por debajo no taparía justo lo que hay que tapar.
   =================================================================== */
.crm-bloqueo {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .72);
    cursor: progress;
}

.crm-bloqueo.visible { display: flex; }

.crm-bloqueo-caja {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .9rem 1.4rem;
    border-radius: .4rem;
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    font-size: .875rem;
    color: #4a5568;
}

.crm-bloqueo-giro {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    border: 2px solid rgba(0, 0, 0, .12);
    border-top-color: #007bff;
    border-radius: 50%;
    animation: crm-bloqueo-giro .7s linear infinite;
}

@keyframes crm-bloqueo-giro { to { transform: rotate(360deg); } }

/* Quien no quiera animaciones no las tiene: el mensaje sigue leyéndose. */
@media (prefers-reduced-motion: reduce) {
    .crm-bloqueo-giro { animation: none; }
}