#map {
    width: 100%;
    height: 450px;
}
.main-signup-header h2 {
    color: #172039 !important;
}

/* ==========================================================================
   Esquema visual de marca (mismo lenguaje que el login/portada).
   Solo estilo — no cambia estructura, clases ni comportamiento existentes.
   ========================================================================== */

:root {
    --kl-navy: #172039;
    --kl-navy-2: #212b4d;
    --kl-accent: #9bc336;
    --kl-accent-2: #7ca62b;
    /* El navy es tan oscuro que en texto chico se percibe negro, no azul.
       Este tono más claro es para letras (menú, textos secundarios). */
    --kl-navy-soft: #4b5a80;
}

.bgkl {
    color: white !important;
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 100%) !important;
}

.btn-kl {
    color: white !important;
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 65%, var(--kl-accent) 220%) !important;
    background-size: 160% 160% !important;
    background-position: 0% 50% !important;
    border-color: transparent !important;
    transition: transform .15s ease, box-shadow .15s ease, background-position .35s ease;
}

.btn-kl:hover {
    color: white !important;
    background-position: 100% 50% !important;
    box-shadow: 0 8px 18px -6px rgba(23, 32, 57, .5);
    transform: translateY(-1px);
}

.btn-kl:active {
    transform: translateY(0);
}

/* Tarjetas: sombra suave, bordes más redondeados (como la tarjeta del login)
   Nota: sin overflow:hidden a propósito, para no recortar dropdowns/select2
   que a veces se abren dentro de una tarjeta. */
.card {
    border: 1px solid rgba(23, 32, 57, .06);
    box-shadow: 0 2px 10px rgba(23, 32, 57, .05);
    border-radius: 16px !important;
}

.card-header {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
}

.card-footer {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
}

/* Botones: la misma redondez y aire que en el login */
.btn {
    border-radius: 10px !important;
    padding: .5rem 1.1rem;
    font-weight: 500;
}

.btn-sm {
    border-radius: 8px !important;
    padding: .3rem .75rem !important;
}

/* Campos de formulario: mismo estilo (fondo suave, bordes redondeados, foco azul) que el login.
   No tocamos Select2 aquí (tiene su propia estructura interna delicada). */
.form-control,
.custom-select {
    border-radius: 10px !important;
    border: 1.5px solid #e6e8f0 !important;
    background-color: #fafbfe !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #eef0f5 !important;
    color: #8a90a6 !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--kl-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(124, 166, 43, .15) !important;
    background-color: #fff !important;
}

/* Grupos de campo (ej: etiqueta "Fecha" + input pegados): el radio de 10px
   de .form-control de arriba se aplicaba a CADA pieza suelta, así que el
   grupo se veía descuadrado/separado en vez de una sola pieza. Solo se
   redondean las puntas de los extremos, como hace Bootstrap por defecto. */
.input-group .input-group-text,
.input-group .form-control {
    border-radius: 0 !important;
}

.input-group > :first-child {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
}

.input-group > :last-child {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
}

.input-group-text {
    background-color: #f1f2f9 !important;
    border: 1.5px solid #e6e8f0 !important;
    color: var(--kl-navy) !important;
    font-weight: 600;
    font-size: 13px;
}

/* El grupo "Fecha" usaba input-group-sm, que lo dejaba más bajito que el
   resto de campos de al lado — y el input de fecha, al ser flex:1 por
   defecto de Bootstrap, se estiraba a ocupar todo el ancho disponible
   aunque solo necesita mostrar "DD/MM/AAAA". Se sube el alto al de un
   campo normal y se limita el ancho del input a lo que necesita. */
.input-group-sm > .input-group-text,
.input-group-sm > .form-control {
    padding: .5rem .75rem !important;
    font-size: 13px !important;
    height: 35px !important;
}

.input-group input[type="date"].form-control {
    flex: 0 0 auto !important;
    width: 140px !important;
}

/* El grupo ya no ocupa todo el ancho (arriba), pero .input-group sigue
   siendo width:100% por defecto de Bootstrap, así que quedaba pegado a la
   izquierda con un hueco vacío al lado. Se centra dentro de su fila. */
.input-group:has(input[type="date"]) {
    width: fit-content !important;
    margin: 0 auto !important;
}

/* Pestañas tipo "pill" (Tareas/Visitas/Clientes, etc.): Bootstrap las pinta
   en azul por defecto, sin relación con el resto de la marca. */
.nav-pills .nav-link {
    color: var(--kl-navy-soft);
    border-radius: 10px !important;
    font-weight: 600;
    transition: background .15s ease, color .15s ease;
}

.nav-pills .nav-link:hover {
    background: rgba(23, 32, 57, .06);
    color: var(--kl-navy);
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 65%, var(--kl-accent) 220%) !important;
    color: #fff !important;
}

/* Las mismas pestañas, pero cuando van dentro de un encabezado oscuro
   (.bgkl, como en el modal de "Proyección de venta/cobro"): el color navy
   de arriba quedaba oscuro sobre oscuro y se perdía al pasar el mouse. */
.bgkl .nav-pills .nav-link {
    color: rgba(255, 255, 255, .8);
}

.bgkl .nav-pills .nav-link:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.bgkl .nav-pills .nav-link.active {
    background: rgba(255, 255, 255, .18) !important;
    color: #fff !important;
}

/* Filas de "Tareas"/"Visitas por completar" del calendario: ahora se puede
   hacer clic en la fila para ver el detalle, así que se marca como tal. */
.listicas {
    cursor: pointer;
    border-radius: 10px;
    transition: background .15s ease;
}

.listicas:hover {
    background: rgba(23, 32, 57, .05);
}

.select2-container--default .select2-selection {
    border-radius: 10px !important;
    border-color: #e6e8f0 !important;
}

/* Select de "Responsable" (calendario): se veía demasiado largo/estirado.
   Se acota su ancho puntualmente, sin afectar a los demás select2 de la
   app (Cliente, Grupo, Zona, etc. siguen usando su ancho normal). */
#selectResponsable + .select2-container,
#selectResponsable4 + .select2-container,
select[name="usuario_asignado_id"] + .select2-container {
    width: 380px !important;
}

.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection {
    border-color: var(--kl-accent-2) !important;
    box-shadow: 0 0 0 3px rgba(124, 166, 43, .15) !important;
}

/* Listas desplegables (Select2): panel, buscador y resaltado con el
   mismo lenguaje redondeado/acento que el resto de la interfaz. */
.select2-dropdown {
    border-radius: 12px !important;
    border-color: #e6e8f0 !important;
    box-shadow: 0 14px 32px rgba(23, 32, 57, .14);
    overflow: hidden;
}

.select2-search--dropdown {
    padding: .6rem !important;
}

.select2-search--dropdown .select2-search__field {
    border-radius: 8px !important;
    border: 1.5px solid #e6e8f0 !important;
    padding: .35rem .6rem !important;
}

.select2-results__option {
    padding: .55rem .9rem !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: linear-gradient(135deg, var(--kl-accent-2), var(--kl-accent)) !important;
    color: #fff !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #f1f2f9;
    color: var(--kl-navy);
}

/* Modales y menús con el mismo lenguaje redondeado
   (sin overflow:hidden, para no recortar select2/otros popups internos) */
.modal-content {
    border-radius: 18px !important;
    border: none !important;
}

.modal-header {
    border-top-left-radius: 18px !important;
    border-top-right-radius: 18px !important;
}

.modal-footer {
    border-bottom-left-radius: 18px !important;
    border-bottom-right-radius: 18px !important;
}

.dropdown-menu {
    border-radius: 12px !important;
    border: 1px solid rgba(23, 32, 57, .08) !important;
    box-shadow: 0 12px 30px rgba(23, 32, 57, .12) !important;
    overflow: hidden;
}

/* Ítems del menú desplegable (perfil, notificaciones, etc.): mismo azul
   que el resto de textos, en vez del azul/negro que traía la plantilla. */
/* Este menú (los "..." de las filas de Tareas/Visitas) mezcla .btn-light
   con .dropdown-item — esa combinación se veía con fondo oscuro y texto
   azulado (heredado del estilo de botón), en vez del menú blanco/navy de
   siempre. Se fuerza el mismo fondo blanco que usa cualquier otro menú. */
.dropdown-menu {
    background-color: #fff !important;
}

.dropdown-item,
.dropdown-item i {
    color: var(--kl-navy-soft) !important;
    background-color: transparent !important;
    transition: background .15s ease, color .15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus{
    background-color: rgba(23, 32, 57, .06) !important;
    color: var(--kl-navy) !important;
}
/* "Salir": es un <button class="btn-clear"> dentro de un formulario, y esa
   clase no existía en ningún lado — el navegador le ponía su caja/borde
   por defecto. Lo dejamos igual a los demás ítems, en rojo por ser una
   acción de cierre de sesión. */
.main-profile-menu form.dropdown-item {
    padding: 0 !important;
}

.main-profile-menu .btn-clear {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 8px 15px;
    font-size: 13px;
    text-align: left;
    color: #e2554f !important;
}

.main-profile-menu .btn-clear i {
    color: #e2554f !important;
}

.main-profile-menu .btn-clear:hover {
    background: rgba(226, 85, 79, .08) !important;
}

/* Foto de perfil (header y menú desplegable): la plantilla trae varias
   reglas .main-img-user con tamaños distintos (40px, 36px, 45px) que
   chocan entre sí y a veces dejan el contenedor NO cuadrado — y
   border-radius:100% sobre un rectángulo da una elipse, no un círculo.
   Forzamos cuadrado con aspect-ratio, que gana pase lo que pase. */
.main-img-user,
.main-profile-menu .main-img-user {
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
}

.main-img-user img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* Avatar chico del header: su contenedor (<a class="profile-user">) no
   tiene un tamaño propio, así que un width:100% ahí se expande a lo que
   la imagen traiga de fábrica (por eso se veía gigante). Tamaño fijo. */
.profile-user img {
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* Íconos del header (historial, duplicar, notificaciones, pantalla completa,
   foto de perfil): en la plantilla venían con tratamientos distintos —
   dos como botón navy (.btn-kl), dos como enlace suelto con line-height/
   margin:auto heredados (pensados para otro tamaño de ícono, por eso
   quedaban desalineados verticalmente) y el avatar sin caja. Se igualan
   los 5 a la misma caja de 38px, mismo centrado y mismo hover. */
.main-header-right {
    align-items: center;
}

/* OJO: el <li> NO es hijo directo de .main-header-right (está adentro de
   un <ul>), así que un selector "> li" nunca matcheaba y esta regla no
   se aplicaba nunca — por eso el ícono de notificaciones (y en general
   la fila) quedaba descentrado. Selector sin ">" para que sí llegue. */
.main-header-right li {
    display: flex;
    align-items: center;
}

.main-header-right .btn-kl.p-2,
.main-header-right .new.nav-link,
.main-header-right .full-screen-link,
.main-header-right .profile-user {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: normal !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 10px !important;
    transition: background .15s ease, transform .15s ease;
}

.main-header-right .new.nav-link:hover,
.main-header-right .full-screen-link:hover,
.main-header-right .profile-user:hover {
    transform: translateY(-1px);
}

.main-header-right .header-icon-svgs {
    width: 18px !important;
    height: 18px !important;
    color: #fff !important;
    stroke: #fff !important;
}

.main-header-right a:focus,
.main-header-right button:focus {
    outline: none !important;
}

.main-header-notification {
    margin: 0 3px !important;
}

.main-header-notification > a {
    position: relative;
}

/* Punto verde de notificaciones: se ajusta a la caja de 38px de arriba
   (antes quedaba corrido porque su posición estaba pensada para el ícono
   suelto de la plantilla original). */
.main-header-right .pulse,
.main-header-right .pulse-danger {
    top: 4px !important;
    right: 4px !important;
}

/* Foto de perfil dentro de la caja de 38px: un poco más chica que la
   caja para que se note el aro navy alrededor, igual que los demás. */
.main-header-right .profile-user img {
    width: 30px !important;
    height: 30px !important;
}

.badge {
    border-radius: 999px;
    font-weight: 600;
}

.alert {
    border-radius: 12px;
    border: none;
}

/* Encabezados de tabla un poco más suaves */
.table thead th {
    background-color: #f7f8fc;
    color: var(--kl-navy);
    font-weight: 600;
}

/* Avatares (iniciales en círculo): tamaño consistente sin importar
   utilidades extra (p-*, m-*) que se hayan añadido en algunas vistas */
.avatar,
.avatar-xs,
.avatar-sm {
    box-sizing: border-box !important;
    flex: none !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* El círculo de color de .avatar es para iniciales de texto; cuando en vez
   de iniciales se pone una imagen/logo completo (ej. producto sin foto),
   ese fondo azul se ve como un aro feo alrededor. Fondo blanco en su lugar. */
img.avatar {
    background-color: #fff !important;
    object-fit: contain;
    border: 1px solid #eef0f5;
}

.side-menu__item {
    color: var(--kl-navy) !important;
    border-radius: 10px;
    margin: 0 10px;
    transition: background .18s ease, color .18s ease;
}

/* Hover/focus (sin estar seleccionado): un roce sutil neutro, nada de verde
   todavía — el verde lo reservamos para decir "esta es la página activa". */
.side-menu__item:hover,
.side-menu__item:focus {
    background: rgba(23, 32, 57, .06) !important;
    color: var(--kl-navy) !important;
}

.side-menu__item:hover .side-menu__label,
.side-menu__item:focus .side-menu__label,
.side-menu__item:hover .side-menu__icon,
.side-menu__item:focus .side-menu__icon {
    color: var(--kl-navy) !important;
    fill: var(--kl-navy) !important;
}

/* Activo (la página en la que estás): bloque navy sólido + texto blanco +
   barra de acento verde. Más contundente que un relleno verde clarito. */
.side-menu__item.active {
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 100%) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 0 var(--kl-accent);
}

.side-menu__item.active .side-menu__label,
.side-menu__item.active .angle,
.side-menu__item.active .side-menu__icon {
    color: #fff !important;
    fill: #fff !important;
}

/* El ícono activo es un PNG a color: lo pasamos a blanco puro. */
.side-menu__item.active .icons-menu {
    filter: brightness(0) invert(1) !important;
}

/* Sub-ítems del menú (dentro de un grupo desplegado): mismo criterio,
   navy normal y verde solo en la página activa. */
.slide-item {
    color: var(--kl-navy-soft) !important;
}

.slide-item:hover,
.slide-item:focus {
    color: var(--kl-navy-soft) !important;
}

.slide-item.active {
    color: var(--kl-accent-2) !important;
    font-weight: 600;
}

/* En modo colapsado (solo iconos) no forzamos margen/radio, para no romper ese layout */
.app.sidenav-toggled .side-menu__item {
    margin: 0;
    border-radius: 0;
}

.slide.is-expanded .side-menu__label {
    color: var(--kl-navy) !important;
}

.slide.is-expanded .side-menu__item.active .side-menu__label {
    color: #fff !important;
}

/* Un poco de vida al entrar a cada página.
   OJO: sin "both"/"forwards" a propósito. Ese fill-mode deja el
   transform:translateY(0) del último frame pegado para siempre en este
   contenedor, y un transform (aunque sea "0") convierte a este div en el
   "containing block" de sus hijos position:fixed — por eso los modales
   (#modalDetalles, etc.) dejaban de centrarse contra la ventana y se
   posicionaban contra este contenedor, viéndose aplastados/mal ubicados. */
.main-content.app-content > .container-fluid {
    animation: kl-page-in .35s ease-out;
}

@keyframes kl-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Botones: la misma micro-interacción del login en todo el sistema */
.btn {
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:not(.disabled):not(:disabled):hover {
    transform: translateY(-1px);
}

.btn:not(.disabled):not(:disabled):active {
    transform: translateY(0);
}

/* Tarjetas: leve elevación al pasar el mouse */
.card {
    transition: box-shadow .2s ease, transform .2s ease;
}

.card:hover {
    box-shadow: 0 10px 24px rgba(23, 32, 57, .1);
}

/* Menús desplegables con una entrada suave */
.dropdown-menu {
    animation: kl-fade-scale-in .15s ease-out both;
}

@keyframes kl-fade-scale-in {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Paginación de las tablas: mismas "pastillas" redondeadas y del mismo alto
   que el resto de botones, en vez del estilo plano de la plantilla original.
   Cubrimos tanto el paginador nativo de DataTables (.paginate_button) como
   el de Bootstrap (.pagination/.page-link), según cuál use cada tabla. */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    display: inline-block !important;
    float: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 38px;
    height: 38px;
    line-height: 35px !important;
    white-space: nowrap;
    text-align: center;
    padding: 0 .85rem !important;
    margin: 0 3px !important;
    border-radius: 8px !important;
    border: 1.5px solid #e6e8f0 !important;
    background: #fff !important;
    color: var(--kl-navy) !important;
    font-weight: 500;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button:focus,
.pagination .page-link:hover,
.pagination .page-link:focus {
    background: rgba(124, 166, 43, .1) !important;
    border-color: var(--kl-accent-2) !important;
    color: var(--kl-navy) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.pagination .page-item.disabled .page-link {
    background: #f7f8fc !important;
    border-color: #eef0f5 !important;
    color: #c3c8d6 !important;
}

/* Filtro avanzado (SearchBuilder): mismo campo redondeado que el resto de
   inputs, y quitamos el borde rojo de "campo inválido" que el navegador
   muestra por defecto en un input vacío antes de que el usuario escriba algo. */
.dtsb-value input,
.dtsb-value select,
.dtsb-value .dtsb-input {
    border-radius: 8px !important;
    border: 1.5px solid #e6e8f0 !important;
    box-shadow: none !important;
}

.dtsb-value input:invalid {
    border-color: #e6e8f0 !important;
    box-shadow: none !important;
}

.dtsb-group,
.dtsb-searchBuilder {
    border-radius: 12px !important;
}

.dtsb-button {
    border-radius: 8px !important;
}

/* Scrollbar con el acento de marca (navegadores basados en WebKit) */
::-webkit-scrollbar-thumb {
    background: rgba(155, 195, 54, .35);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(155, 195, 54, .55);
}

.icons-menu {
    min-width: 18px;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    /* Los 12 archivos ya se recolorearon a navy sólido (antes cada uno
       traía un color distinto de fábrica, por eso se veían descoordinados
       con un simple filtro). Ya no hace falta filtro por defecto. */
    transition: filter .18s ease;
}

/* Al pasar el mouse: verde (mismo cálculo de matiz que usamos en el logo
   del splash, que también parte de este mismo navy). */
.side-menu__item:hover .icons-menu,
.side-menu__item:focus .icons-menu {
    filter: brightness(0) invert(1) sepia(1) saturate(12) hue-rotate(35deg) brightness(.8) contrast(1.05);
}

/* Activo (página actual): blanco, sobre el bloque navy sólido del ítem. */
.side-menu__item.active .icons-menu {
    filter: brightness(0) invert(1) !important;
}

.main-logo {
    background: white;
    margin-top: -17px;
    height: 65px;
    width: 65px;
}

.responsive-logo .logo-1, .logo-2 {
    background: white;
    border-radius: 5px;
    width: 75px;
}

@media (max-width: 768px) and (min-width: 574px) {
    .responsive-logo .logo-1 {
        height: 45px;
    }
}

.table > thead > tr td {
    font-size: 12px;
    font-weight: 400;
}
.table > thead > tr {
    border-bottom-width: 1px;
}

.table {
    width: 100% !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: initial !important;
}

@media (min-width: 576px) {
    .main-header .dropdown-menu:after {
        border-bottom: 9px solid #ecf0fa !important;
    }
}

.table td, .table th {
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    word-wrap: break-word!important;
    font-size: 13px;
    padding: 8px!important;
    margin: 5px!important;
}


/* PIE PROGRESS */
@property --p{
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
  }
  
  .pie {
    --p:20;
    --b:22px;
    --c:darkred;
    --w:150px;
    
    width:var(--w);
    aspect-ratio:1;
    position:relative;
    display:inline-grid;
    margin:5px;
    place-content:center;
    font-size:25px;
    font-weight:bold;
    font-family:sans-serif;
  }
  .pie:before,
  .pie:after {
    content:"";
    position:absolute;
    border-radius:50%;
  }
  .pie:before {
    inset:0;
    background:
      radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
      conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
    -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
            mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
  }
  .pie:after {
    inset:calc(50% - var(--b)/2);
    background:var(--c);
    transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
  }
  .animate {
    animation:p 1s .5s both;
  }
  .no-round:before {
    background-size:0 0,auto;
  }
  .no-round:after {
    content:none;
  }
  @keyframes p {
    from{--p:0}
  }

  .table-small td, .table-small th {
    padding: 0px !important;
  }
/* PIE PROGRESS */

/* Grupos de botones (acciones de fila y toolbar de las tablas: Excel/PDF/Columnas).
   Usamos selectores "a cualquier nivel" (espacio, no ">") porque el botón de
   eliminar suele venir envuelto en un <form class="btn-group"> dentro del
   .btn-group principal — con ">" ese botón quedaba fuera y se veía descuadrado. */
td .btn-group .btn { /* Actions */
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 2px !important;
  border-radius: 8px !important;
}

/* La columna de acciones venía con un ancho fijo pensado para los botones
   "pegados" (sin espacio). Al separarlos ya no cabían y se veían cortados.
   Le damos más aire para que quepan sin depender del hover para expandirse. */
.actionss {
    max-width: 220px !important;
}

/* Widget "Cumples del mes" del panel de inicio: antes eran 3 tablas planas.
   Ahora: 3 columnas — foto grande festiva para quien cumple HOY, línea de
   tiempo conectada con puntos para los próximos, y lista con check ✓ para
   los ya festejados. Inspirado en paneles de "celebraciones" tipo app de
   equipo, adaptado a los colores de marca (navy/verde) en vez de arcoíris. */
.cumples-board {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    align-items: start;
    gap: 16px;
    padding: 40px 16px 16px;
}

.cumples-board:not(.cumples-board--hoy) {
    grid-template-columns: 1.3fr 1fr;
}

@media (max-width: 991.98px) {
    .cumples-board {
        grid-template-columns: 1fr !important;
    }
}

.cumples-empty {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    padding: 24px;
    color: #8a90a6;
    font-size: 14px;
}

.cumples-empty__icon {
    font-size: 26px;
}

.cumples-deco {
    position: absolute;
    top: 4px;
    font-size: 26px;
    opacity: .85;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.12));
    animation: kl-deco-float 4s ease-in-out infinite;
}

.cumples-deco--1 { left: 36%; animation-delay: 0s; }
.cumples-deco--2 { right: 10%; animation-delay: .9s; }

.cumples-col__header-icon {
    display: inline-block;
    font-size: 19px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 2px;
}

@keyframes kl-deco-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-5px) rotate(6deg); }
}

.cumples-col {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(23, 32, 57, .07);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.cumples-col__header {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--kl-navy);
    background: #f7f8fc;
    border-bottom: 1px solid rgba(23, 32, 57, .06);
}

.cumples-col__header-sub {
    text-transform: none;
    font-weight: 500;
    color: #8a90a6;
    font-size: 11px;
}

.cumples-col__body {
    max-height: 260px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cumples-col__empty {
    padding: 20px 10px;
    text-align: center;
    color: #8a90a6;
    font-size: 13px;
}

/* --- Columna HOY: foto grande con gorrito, edad y mensaje --- */
.cumples-col--hero {
    border: none;
    background: transparent;
    gap: 12px;
    max-height: 314px;
    overflow-y: auto;
    padding-right: 4px;
}

.cumples-col--hero::-webkit-scrollbar {
    width: 6px;
}

.cumples-col--hero::-webkit-scrollbar-thumb {
    background: rgba(124, 166, 43, .35);
    border-radius: 999px;
}

.cumple-hero {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 22px 16px 18px;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.2) 0, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,.15) 0, transparent 40%),
        linear-gradient(160deg, var(--kl-accent-2) 0%, var(--kl-accent) 65%, #d7e8a3 140%);
    box-shadow: 0 14px 28px -10px rgba(124, 166, 43, .55);
    animation: kl-hero-in .4s ease-out both;
    transition: transform .2s ease, box-shadow .2s ease;
}

.cumple-hero:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 18px 34px -10px rgba(124, 166, 43, .65);
}

@keyframes kl-hero-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cumple-hero__ribbon {
    position: absolute;
    top: 14px;
    left: -34px;
    width: 130px;
    padding: 3px 0;
    background: var(--kl-navy);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-align: center;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

.cumple-hero__photo-wrap {
    position: relative;
    margin-bottom: 6px;
}

.cumple-hero__hat {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(-10deg);
    font-size: 26px;
    animation: kl-deco-float 2.6s ease-in-out infinite;
}

.cumple-hero__photo {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 32px;
    color: var(--kl-accent-2);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 10px 20px -6px rgba(0,0,0,.25);
}

.cumple-hero__age {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 26px;
    height: 26px;
    padding: 0 4px;
    border-radius: 50%;
    background: var(--kl-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px #fff;
}

.cumple-hero__name {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.25;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cumple-hero__role {
    font-size: 12px;
    opacity: .9;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cumple-hero__msg {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    background: rgba(255,255,255,.22);
    padding: 5px 12px;
    border-radius: 999px;
}

/* Tarjeta del propio usuario logueado: anillo que respira, para que se
   note que ESTA es la suya entre varias tarjetas de "hoy". */
.cumple-hero--mine {
    animation: kl-hero-in .4s ease-out both, kl-mine-pulse 1.8s ease-in-out infinite;
}

@keyframes kl-mine-pulse {
    0%, 100% { box-shadow: 0 14px 28px -10px rgba(124, 166, 43, .55), 0 0 0 0 rgba(255,255,255,.6); }
    50%      { box-shadow: 0 14px 28px -10px rgba(124, 166, 43, .55), 0 0 0 6px rgba(255,255,255,0); }
}

.cumple-hero--mine .cumple-hero__ribbon {
    background: var(--kl-accent-2);
}

/* Tarjeta centrada de "feliz cumpleaños" para el usuario logueado: aparece
   una vez por día al entrar, con un fondo oscuro y un leve "respiro" de
   zoom (no algo mareante, solo un latido sutil). Se cierra con la X, con
   click afuera o con Escape. display:none por defecto vía JS/inline. */
.kl-bday-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    background: rgba(23, 32, 57, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .3s ease;
}

.kl-bday-overlay--show {
    opacity: 1;
}

.kl-bday-card {
    position: relative;
    width: min(380px, 90vw);
    text-align: center;
    color: #fff;
    padding: 34px 26px 26px;
    border-radius: 22px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(255,255,255,.2) 0, transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(255,255,255,.15) 0, transparent 40%),
        linear-gradient(160deg, var(--kl-accent-2) 0%, var(--kl-accent) 65%, #d7e8a3 140%);
    box-shadow: 0 24px 60px -12px rgba(0,0,0,.4);
    transform: scale(.9);
    transition: transform .3s ease;
    animation: kl-bday-breathe 3.2s ease-in-out 1s infinite;
}

.kl-bday-overlay--show .kl-bday-card {
    transform: scale(1);
}

@keyframes kl-bday-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}

.kl-bday-card__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease;
}

.kl-bday-card__close:hover {
    background: rgba(255,255,255,.35);
}

.kl-bday-card__hat {
    display: block;
    text-align: center;
    font-size: 38px;
    animation: kl-hat-bob 2.6s ease-in-out infinite;
}

@keyframes kl-hat-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}

.kl-bday-card__photo {
    margin: 4px auto 12px;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 34px;
    color: var(--kl-accent-2);
    background: #fff;
    box-shadow: 0 0 0 5px rgba(255,255,255,.35), 0 10px 20px -6px rgba(0,0,0,.25);
}

.kl-bday-card__title {
    font-size: 22px;
    font-weight: 800;
}

.kl-bday-card__name {
    font-size: 15px;
    font-weight: 600;
    opacity: .95;
    margin-bottom: 14px;
}

.kl-bday-card__phrase {
    font-size: 13.5px;
    line-height: 1.5;
    background: rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 12px 14px;
}

.kl-bday-card__footer {
    margin-top: 14px;
    font-size: 11.5px;
    opacity: .85;
}

/* --- Columna próximos: línea de tiempo conectada --- */
.cumples-timeline {
    position: relative;
}

.cumples-timeline::before {
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 27px;
    width: 2px;
    background-image: repeating-linear-gradient(to bottom, rgba(23,32,57,.18) 0 4px, transparent 4px 9px);
}

.tl-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 4px;
}

.tl-item__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--kl-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.tl-item__day {
    font-size: 13px;
    font-weight: 800;
    color: var(--kl-navy);
}

.tl-item__month {
    font-size: 8px;
    font-weight: 700;
    color: var(--kl-accent-2);
    text-transform: uppercase;
}

.tl-item__avatar {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--kl-navy), var(--kl-navy-2));
}

.tl-item__info {
    flex: 1;
    min-width: 0;
}

.tl-item__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kl-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-item__role {
    font-size: 11px;
    color: #8a90a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tl-item__eta {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--kl-accent-2);
}

/* --- Columna ya festejados: check + regalo --- */
.cumple-done {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 10px;
    opacity: .75;
    transition: opacity .15s ease, background .15s ease;
}

.cumple-done:hover {
    opacity: 1;
    background: #f9fafc;
}

.cumple-done__day {
    flex-shrink: 0;
    width: 34px;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--kl-navy-soft);
    line-height: 1.1;
}

.cumple-done__day span {
    display: block;
    font-size: 8px;
    font-weight: 700;
    color: #8a90a6;
}

.cumple-done__avatar {
    position: relative;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #9aa2b8, #6b7386);
}

.cumple-done__check {
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--kl-accent-2);
    color: #fff;
    font-size: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #fff;
}

.cumple-done__info {
    flex: 1;
    min-width: 0;
}

.cumple-done__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--kl-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cumple-done__role {
    font-size: 11px;
    color: #8a90a6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cumple-done__gift {
    flex-shrink: 0;
    font-size: 18px;
    opacity: .6;
}

table.dataTable tbody tr > .dtfc-fixed-end {
    max-width: 220px !important;
}

.dataTables_wrapper .btn-group .btn,
.dt-buttons.btn-group .btn {
    margin: 0 3px !important;
    border-radius: 8px !important;
}

.select2-selection__choice {
  color: black !important;
  font-weight: 400 !important;
}

table.dataTable tbody td {
  vertical-align: middle;
}

.vtimeline .timeline-wrapper.timeline-inverted .timeline-panel {
  margin-left: auto;
  margin-right: 2.5%;
}
.vtimeline .timeline-wrapper .timeline-panel {
  width: 48%;
  margin-left: 3%;
}
select[readonly].select2-hidden-accessible + .select2-container {
  pointer-events: none;
  touch-action: none;
  opacity:0.6;
  cursor:no-drop;
}

/* Multiple emails */
span.email-ids {
  float: left;
  /* padding: 4px; */
  border: 1px solid #ccc;
  margin-right: 5px;
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 5px;
  background: #f5f5f5;
  padding-top: 3px;
  padding-bottom: 3px;
  border-radius: 5px;
}
span.cancel-email {
  border: 1px solid #ccc;
  width: 18px;
  display: block;
  float: right;
  text-align: center;
  margin-left: 20px;
  border-radius: 49%;
  height: 18px;
  line-height: 15px;
  margin-top: 1px;    cursor: pointer;
}

/* ==========================================================================
   Calendario (FullCalendar): venía con su tema por defecto (gris oscuro,
   hoy en amarillo pálido, bordes duros) sin relación con el resto de la
   marca. Se ajusta con las variables CSS que expone FullCalendar más
   algunos retoques puntuales, sin tocar su configuración en JS.
   ========================================================================== */
.fc {
    --fc-border-color: #e6e8f0;
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #f7f8fc;
    --fc-today-bg-color: rgba(155, 195, 54, .12);
    --fc-button-bg-color: var(--kl-navy);
    --fc-button-border-color: var(--kl-navy);
    --fc-button-hover-bg-color: var(--kl-navy-2);
    --fc-button-hover-border-color: var(--kl-navy-2);
    --fc-button-active-bg-color: var(--kl-navy-2);
    --fc-button-active-border-color: var(--kl-navy-2);
    --fc-event-bg-color: var(--kl-navy);
    --fc-event-border-color: var(--kl-navy);
    --fc-now-indicator-color: var(--kl-accent-2);
    --fc-list-event-hover-bg-color: rgba(23, 32, 57, .05);
    font-family: inherit;
    border-radius: 16px;
    overflow: hidden;
}

/* El "capitalize" de antes ponía en mayúscula CADA palabra ("Septiembre
   De 2026"), pero en español solo la primera va con mayúscula. Se usa
   ::first-letter en su lugar. */
.fc .fc-toolbar-title {
    color: var(--kl-navy);
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .01em;
}

.fc .fc-toolbar-title::first-letter {
    text-transform: uppercase;
}

/* Botones del encabezado: antes TODOS (activo e inactivos) quedaban del
   mismo navy sólido y sin espacio entre sí, así que "Mes/Semana/Día/Agenda"
   se veían fundidos en un solo bloque negro. Ahora los inactivos son
   claros (como las pestañas del resto de la app) y solo el activo —o el
   que se presiona— se pinta con el degradado de marca. */
.fc .fc-button {
    border-radius: 10px !important;
    font-weight: 600;
    text-transform: capitalize;
    box-shadow: none !important;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.fc .fc-button-group {
    gap: 5px;
}

.fc .fc-button-group .fc-button {
    border-radius: 10px !important;
}

.fc .fc-button-primary {
    background: #fff !important;
    border: 1.5px solid #e6e8f0 !important;
    color: var(--kl-navy) !important;
}

.fc .fc-button-primary:hover {
    background: rgba(23, 32, 57, .06) !important;
    border-color: #e6e8f0 !important;
    color: var(--kl-navy) !important;
    transform: translateY(-1px);
}

.fc .fc-button-primary:disabled {
    opacity: .5;
    transform: none;
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
    background: linear-gradient(135deg, var(--kl-navy) 0%, var(--kl-navy-2) 65%, var(--kl-accent) 220%) !important;
    border-color: transparent !important;
    color: #fff !important;
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0 !important;
    padding: 1rem 1.25rem 1.5rem !important;
    row-gap: .5rem;
}

.fc .fc-col-header-cell {
    background: #f7f8fc;
    border-color: var(--fc-border-color);
}

.fc .fc-col-header-cell-cushion {
    color: var(--kl-accent-2);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    padding: 10px 4px;
}

.fc .fc-daygrid-day-number {
    color: var(--kl-navy-soft);
    font-weight: 600;
    padding: 6px 8px;
}

.fc .fc-day-today .fc-daygrid-day-number {
    color: #fff;
    background: var(--kl-accent-2);
    border-radius: 999px;
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 4px;
    padding: 0;
}

.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number {
    opacity: .45;
}

.fc-event {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(23, 32, 57, .12);
}

.fc-daygrid-event {
    padding: 1px 4px;
}

.fc .fc-list-day-cushion {
    background: #f7f8fc !important;
    color: var(--kl-navy);
    font-weight: 700;
}

.fc .fc-list-event:hover td {
    background: rgba(23, 32, 57, .04) !important;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: var(--fc-border-color);
}

/* Vistas Semana/Día: con varias visitas a la misma hora, los bloques
   quedaban pegados unos con otros (se veían como una sola mancha navy) y
   el texto se salía de su propio bloque. Se les da separación, se recorta
   el texto que no cabe, y la columna de "hoy" se suaviza (antes era un
   celeste muy fuerte que tapaba toda la columna). */
.fc-timegrid-event-harness {
    margin-right: 2px;
}

.fc-timegrid-event {
    border-radius: 6px !important;
    padding: 1px 3px;
    box-shadow: 0 0 0 1.5px #fff;
}

.fc-timegrid-event .fc-event-main {
    overflow: hidden;
}

.fc-timegrid-event .fc-event-title,
.fc-timegrid-event .fc-event-time {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}

.fc-timegrid-col.fc-day-today {
    background: rgba(155, 195, 54, .08) !important;
}

.fc-timegrid-now-indicator-line {
    border-color: var(--kl-accent-2);
}

.fc-timegrid-now-indicator-arrow {
    border-color: var(--kl-accent-2);
    color: var(--kl-accent-2);
}

/* Fila de "todo el día": con muchos eventos, los checkboxes de cada uno
   quedaban amontonados en una sola línea ilegible. Se envuelven en varias
   líneas en vez de aplastarse. */
.fc-daygrid-body .fc-daygrid-day-events {
    flex-wrap: wrap;
}

.fc-timegrid-axis-cushion,
.fc-timegrid-slot-label-cushion {
    color: var(--kl-navy-soft);
    font-size: 11px;
}

/* Buscador de la tabla de Clientes (pestaña del calendario): quedaba muy
   angosto y pegado a la tabla de abajo. */
#clientesTable_filter {
    margin-bottom: 12px !important;
}

#clientesTable_filter input {
    width: 220px !important;
    margin-left: .5rem !important;
}

.col-sm-12.email-id-row {
  border: 1px solid #ccc;
}
.col-sm-12.email-id-row input {
  border: 0px; outline:0px;
}
span.to-input {
  display: block;
  float: left;
  padding-right: 11px;
}
.col-sm-12.email-id-row {
  padding-top: 6px;
  padding-bottom: 7px;
  margin-top: 23px;
}
/* Multiple emails */

.battery {
  width: 80px;
  height: 30px;
  border: 2px solid #000;
  border-radius: 5px;
  position: relative;
  background-color: #fff;
  margin-left: 20px;
}
.battery::after {
  content: '';
  width: 7px;
  height: 15px;
  background-color: #000;
  position: absolute;
  top: 6px;
  right: 100%;
}
.charge {
  height: 100%;
  background-color: green; /* Color de la carga */
  transition: width 0.5s; /* Animación suave al cambiar el porcentaje */
}