/* Este código asume que el body base y otros estilos generales provienen de styles0.css
   o están definidos en otro lugar. Aquí se incluyen solo los estilos principales
   de las barras y la corrección responsiva. */

/* --- GENERAL VARIABLES AND STYLES --- */

:root {
  /* Modificar el color de fondo para la nueva barra gris */
  --bar-bg: #e4e4e4;
  --icon-blue: rgb(9, 73, 101); /* Variable para el azul de los iconos/texto */
  
  /* Valores del layout */
  --top-bar-h: 65px; 
  --top-bar-h-mobile: 60px;
  --sidebar-w: 80px;
  --bottom-menu-h: 60px;
}

/* AJUSTE DE PADDING EN EL BODY */
body {
  padding-top: var(--top-bar-h) !important; 
  padding-left: var(--sidebar-w) !important; 
}

/* --- TOP BAR (ESCRITORIO & MÓVIL) --- */

/* En styles.css (Sección Top Bar) */
.app-top-bar {
  position: fixed;
  top: 0;
  
  /* CAMBIO 1: Que empiece desde el borde izquierdo absoluto */
  left: 0; 
  
  /* CAMBIO 2: Que ocupe todo el ancho */
  width: 100%;
  
  height: var(--top-bar-h);
  background-color: var(--bar-bg);
  z-index: 10000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 20px;

  /* CAMBIO 3: Empujar el contenido interno (logo, etc) para que no quede tapado por el sidebar visualmente */
  padding-left: 0; 
  
  /* Aseguramos que el padding no aumente el ancho total */
  box-sizing: border-box; 

  /* Tu sombra existente ahora cubrirá todo el largo */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
}
/* Intersección (Desktop) */
.app-top-bar::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(0px - var(--sidebar-w)); 
    width: var(--sidebar-w);
    height: 100%;
    background-color: var(--bar-bg); 
    z-index: -1;
}

.top-bar-left,
.top-bar-right {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

/* Color del Username y Icono */
.user-placeholder {
  font-weight: 600;
  color: var(--icon-blue);
}
.user-placeholder i {
    color: var(--icon-blue) !important;
}

/* Ajustes de Logo (Desktop) */
.top-bar-left .logo-placeholder {
    padding-left: 0px;
}
.top-bar-left img {
    max-width: 200px;
    width: auto;
    height: 60px;
	
	  padding-top: 12px;
    padding-bottom: 12px;
}

/* --- SIDEBAR (ESCRITORIO) --- */
.app-sidebar {
  position: fixed;
  top: 0; 
  left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background-color: var(--bar-bg);
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

/* Pseudo-elemento para crear 70px de espacio vertical (150px total desde top) */
@media (min-width: 1025px) {
    .app-sidebar::before {
        content: '';
        display: block;
        height: 65px;  
        width: 100%;
    }
} 

/* Estilos base de Iconos (Desktop & Mobile) */
.sidebar-icon {
  width: 100%;
  height: 80px; 
  padding: 10px 0; 
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  /* Eliminar borde divisor */
  border-bottom: none; 
  cursor: pointer;
  font-size: 12px;
  color: #555; 
  transition: background-color 0.2s;
}

/* Asegurar que el último icono no tenga borde (aunque ya fue eliminado arriba, es una doble capa) */
.app-sidebar .sidebar-icon:last-child {
    border-bottom: none;
}

.sidebar-icon i {
    font-size: 18px; 
    margin-bottom: 5px;
    color: #094965;
}
.sidebar-icon:hover i, .sidebar-icon:hover .icon-label {
    color: var(--icon-blue)!important;
}
.sidebar-icon:hover {
   
    color:  var(--icon-blue)!important;
}

.icon-label {
        font-size: 12px;
    line-height: 1.2;
    color: #094965;
}

.app-sidebar a .icon-label:hover{

    color: var(--icon-blue)!important;
}

.app-sidebar a:hover{
color: var(--icon-blue)!important;
   
}
.app-sidebar:hover span{
color: var(--icon-blue)!important;
   
}
 
.app-sidebar a:hover{
	background:  rgba(0, 0, 0, 0.03)!important;
}
.app-sidebar a:hover .icon-label, .app-sidebar a:hover .sidebar-icon, .app-sidebar a:hover i{
	
}


/* --- RESPONSIVE STYLES (Mobile View) --- */
@media (max-width: 1024px) {
	
	.app-sidebar a{
	
    flex: 1;
}
  /* Ajuste de padding en el body (para dejar espacio al Top Bar móvil y al Bottom Menu) */
  body {
    padding-top: var(--top-bar-h-mobile) !important; 
    padding-left: 0 !important;
    padding-bottom: var(--bottom-menu-h) !important;
  }

  /* TOP BAR (Mobile) */
  .app-top-bar {
      left: 0;
      width: 100%;
      height: var(--top-bar-h-mobile); 
      padding: 0 10px;
      background-color: var(--bar-bg);
  }
  .app-top-bar::before {
      display: none;
  }
  
  /* Ajustes de Logo y Usuario (Mobile) */
  .top-bar-left {
      width: 60%;
  }
  .top-bar-left .logo-placeholder {
      padding-left: 0;
  }
  .top-bar-left img {
      max-width: 200px; 
      width: 100%;
      height: auto;
  }
  .top-bar-right {
      width: 40%;
      justify-content: flex-end;
  }
  
  /* SIDEBAR/BOTTOM MENU (Mobile) */
  .app-sidebar {
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--bottom-menu-h);
    flex-direction: row;
    border-top: 1px solid #bbb;
    background-color: var(--bar-bg); 
  }

  /* Quitar el espacio fantasma en modo móvil */
  .app-sidebar::before {
      content: none;
  }

  /* Quitar padding-top del primer icono en móvil */
  .app-sidebar .sidebar-icon:first-child {
      
  }
  #topBarUserName{
	  
	      font-size: 12px;
  }
  
  .sidebar-icon .icon-label {
        font-size: 12px!important; 
    line-height: 1.2;
    font-weight: 500!important;
    color: #094965;
}


  /* Reducir padding vertical en móvil */
  .sidebar-icon {
    flex: 1;
    width: auto;
    height: 100%;
    border-right: none;
    padding: 10px 0; /* Ajustado para 60px de altura */
	        
  }
  
  .sidebar-icon i {
      margin-bottom: 0; 
  }
}






/* Definición de la sombra */
.shadow-style {
    /* box-shadow: horizontal-offset vertical-offset blur spread color; */
    /* Usamos una sombra sutil que se extiende hacia afuera (spread positivo) */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
    /* Esta sombra irá hacia la derecha y hacia abajo */
}

/* Aplicar la sombra a la barra superior */
.app-top-bar {
    /* ... (estilos existentes) ... */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
}

/* Aplicar la sombra a la barra lateral */
.app-sidebar {
    /* ... (estilos existentes) ... */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
    /* Aseguramos que el z-index sea menor que el del pseudo-elemento de la Top Bar
       para que la sombra de la Top Bar no se superponga de manera extraña, 
       aunque en este caso la intersección es limpia por los colores */
}

/* Ajuste del pseudo-elemento de la Top Bar */
/* Esto es crucial para que la sombra de la barra superior no aparezca
   sobre el área de la barra lateral, manteniendo la unión. 
   Dado que el pseudo-elemento tiene el mismo color de fondo,
   la sombra de la Top Bar se proyectará solo hacia la derecha. */
.app-top-bar::before {
    /* ... (estilos existentes) ... */
    /* No debe tener box-shadow, debe ser una continuación sólida del fondo */
}


.app-sidebar a{
	text-decoration:none;
	display: flex;
  
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-bottom: none;
    cursor: pointer;
}


.preloader{
	z-index:100000000000000!important;
}


/* Asegura que el contenedor padre sea relativo para posicionar el hijo */
.custom-select {
    position: relative;
}

/* El menú debe ser absoluto y tener un z-index muy alto */
.custom-select-menu {
    position: absolute;
    top: 100%; /* Justo debajo del select display */
    left: 0;
    right: 0;
    z-index: 9999 !important; /* Flota sobre todo */
    background: white;
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none; /* Oculto por defecto */
}

/* Mostrar cuando tiene clase open */
.custom-select-menu.open {
    display: block;
}

/* Color para email inválido */
.modal-email-invalid {
    border-color: #00CDE5 !important;
    color: #00CDE5 !important;
}


/* Agregar a styles.css */
.custom-select {
    position: relative;
    z-index: 100;
}

.custom-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/* Agregar a styles.css */
.custom-select {
    position: relative;
    z-index: 100;
}

.custom-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}


/* Asegura que el contenedor del select tenga un contexto de apilamiento alto cuando esté abierto */
.custom-select.active-zindex {
    z-index: 1005 !important; /* Más alto que los elementos hermanos */
}

/* Asegura que el menú salga visualmente por encima */
.custom-select-menu {
    z-index: 1006 !important;
}  


/* Permitir que los dropdowns floten fuera de la tarjeta sin empujar el contenido */
.borrower-info-block, 
.expand-pane, 
.borrower-grid {
    overflow: none!important;
}

/* Asegurar que el menú tenga el índice más alto y no afecte el flujo */
.custom-select-menu {
    position: absolute;
    z-index: 99999 !important;
    width: 100%; /* Opcional: para que coincida con el ancho del select */
} 


.small-hint{display:none!important;}


#openAddLead{
    background: #e4e4e4!important;
}


/* =========================================
   NUEVO MENÚ MÓVIL (HAMBURGUESA & SLIDER)
   ========================================= */

/* 1. Estilos del Botón Hamburguesa (Por defecto oculto en escritorio) */
.mobile-menu-toggle {
    display: none; /* Oculto en PC */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
    z-index: 10002; /* Por encima de todo */
    margin-left: 15px;
}

.mobile-menu-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--icon-blue);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    transform-origin: left center;
}

/* Animación: Convertir Hamburguesa a X */
.mobile-menu-toggle.open span:nth-child(1) {
    transform: rotate(45deg);
    top: 0px;
    left: 3px;
    position: relative;
}

.mobile-menu-toggle.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: rotate(-45deg);
    top: 0px;
    left: 3px;
    position: relative;
}


/* 2. Media Query para Móvil (Sobrescribir comportamiento actual) */
@media (max-width: 1024px) {

    /* Mostrar el botón hamburguesa */
    .mobile-menu-toggle {
        display: flex;
    }

    /* Ocultar el usuario y nombre */
    .user-placeholder {
        display: none !important;
    }

    /* Ajuste de la Sidebar (Menú) */
   /* Dentro de @media (max-width: 1024px) */

.app-sidebar {
    position: fixed;
    top: var(--top-bar-h-mobile); 
    left: 0;
    
    width: 25% !important; 
    max-width:100px;
    /* --- CAMBIO IMPORTANTE 1: Usar 100dvh --- */
    /* dvh (dynamic viewport height) calcula la altura visible real,
       restando la barra de URL si está presente. */
    height: calc(100dvh - var(--top-bar-h-mobile)) !important;
    
    background-color: #e4e4e4; 
    flex-direction: column !important;
    padding: 20px 0;
    gap: 10px;
    
    box-shadow: 5px 0 20px rgba(0,0,0,0.2); 
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;

    transform: translateX(-100%); 
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 9998; 

    /* --- CAMBIO IMPORTANTE 2: Permitir Scroll --- */
    /* Si la pantalla es muy pequeña (ej. horizontal) y los iconos no caben,
       esto permite deslizar dentro del menú para ver el último icono. */
    overflow-y: auto !important;
    
    /* --- CAMBIO IMPORTANTE 3: Safe Area para iPhones --- */
    /* Agrega un padding extra al final para que la barra negra inferior
       de los iPhones modernos no tape el último ítem */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
} 

    /* Estado Activo: Menú visible (Baja deslizándose) */
    .app-sidebar.mobile-active {
        transform: translateX(0%);
    }

    /* Ajustes visuales de los items del menú en vertical */
   
    
    .app-sidebar .sidebar-icon:last-child {
        border-bottom: none;
    }

    .sidebar-icon i {
        font-size: 18px;
      
        text-align: center;
    }
    .sidebar-icon {
        gap: 8px; 
    }

    .sidebar-icon .icon-label {
        font-size: 12px !important;
        font-weight: 400 !important;
    }





/* Dentro de @media (max-width: 1024px) */

.app-sidebar {
    position: fixed;
    top: var(--top-bar-h-mobile);
    left: 0;
    width: 25% !important;
    
    /* --- CAMBIO CLAVE: ANCLAJE FIJO --- */
    /* En lugar de height: calc(...), usamos bottom: 0.
       Esto le dice al navegador: "Pégate al fondo visible siempre". */
    bottom: 0 !important;
    height: auto !important; 
    /* ---------------------------------- */
    
    background-color: #e4e4e4;
    flex-direction: column !important;
    padding: 20px 0;
    gap: 10px;
    box-shadow: 5px 0 20px rgba(0,0,0,0.3);
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 9998;
    overflow-y: auto !important;
    
    /* Mantenemos el padding safe-area para iPhones */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
.top-bar-left,
.top-bar-right {
  padding-left: 0px!important;
}


}

/* Clase auxiliar para congelar el scroll del body */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh; /* Ayuda a fijar algunos navegadores móviles */
}


/* Solo Safari iOS (detección por feature de WebKit) */
@supports (-webkit-touch-callout: none) {
  /* Dejar que los dropdowns puedan salir del panel en iPhone */
  .borrower-info-block {
    overflow: visible !important;
    -webkit-overflow-scrolling: auto !important;
  }

  /* Por si acaso la tarjeta padre también limita */
  .expand-pane {
    overflow: visible !important;
  }
}



/* Borrower Info en UNA columna en móvil */
@media (max-width: 650px) {

  /* Solo afecta al Borrower Info dentro del pane expandido */
  .expand-pane .borrower-info-block .borrower-grid {
    display: block;          /* quitamos el grid en móvil */
    min-width: 0;            /* por si acaso había min-width */
  }

  /* Cada campo toma 100% de ancho y va uno debajo del otro */
  .expand-pane .borrower-info-block .borrower-field,
  .expand-pane .borrower-info-block .borrower-blank-col,
  .expand-pane .borrower-info-block .borrower-actions {
    width: 100%;
    margin-bottom: 12px;
  }

  /* Arreglar los botones Archive / Delete para que no se hagan altos */
  .expand-pane .borrower-info-block .borrower-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    height: auto;            /* ya no estirarse a 100% de la fila */
  }

  .expand-pane .borrower-info-block .borrower-actions button.soft-btn,
  .expand-pane .borrower-info-block .borrower-actions button.danger-btn {
    flex: 0 0 auto;          /* que no se estiren raro */
  }
}












/* --- AJUSTES PARA MÓVIL (Reemplaza o actualiza esta sección en styles.css) --- */
@media (max-width: 1024px) {
    
    /* 1. PREPARAR TOP BAR PARA EFECTO STICKY */
    .app-top-bar {
        position: fixed !important; /* Fijo para que flote */
        transition: top 0.3s ease-in-out; /* Animación suave al subir/bajar */
        top: 0; /* Posición inicial */
    }

    /* 2. BOTÓN DE MENÚ (24x24px) */
    .mobile-menu-toggle {
        width: 24px;
        height: 24px;
        /* Recalculamos las posiciones internas para esta altura */
    }
    
    /* Ajuste fino de las líneas para altura 24px */
    .mobile-menu-toggle span:nth-child(1) { top: 2px; }
    .mobile-menu-toggle span:nth-child(2) { top: 10px; } /* Centro exacto */
    .mobile-menu-toggle span:nth-child(3) { top: 18px; }

    /* Animación X (Ajustada para 24px) */
    .mobile-menu-toggle.open span:nth-child(1) {
        top: 10px; left: 3px; /* Ajuste al centro */
    }
    .mobile-menu-toggle.open span:nth-child(3) {
        top: 10px; left: 3px;
    }

    /* 3. ICONO DE USUARIO (24px) */
    .user-trigger i.fa-user-circle {
        font-size: 22px !important; /* Forzar tamaño */
        display: block; /* Asegurar bloque */
    }

    /* 4. OCULTAR CHEVRON (Flecha) */
    .user-trigger .chevron {
        display: none !important;
    }

    /* Ajuste del contenedor del usuario para que no tenga padding extra */
    .user-trigger {
        padding: 0;
        gap: 0;
    }
}










@supports (-webkit-touch-callout: none) {
  /* Aseguramos que el menú que ahora vive en <body> esté siempre por encima en iOS */
  .custom-select-menu {
    transform: translateZ(0);          /* fuerza su propia capa */
  }
}



#waitingSection textarea{
	
	height: 71px; 
	
}