/* Existing CSS code */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

::after,
::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit; 
}

li {
    list-style: none;
}

html, body {
    font-family: 'Poppins', sans-serif;
    height: 100%;
    overflow: hidden; 
    
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.wrapper {
    display: flex;
    height: 100vh;
    width: 100%;    
    overflow: hidden;
}

.main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    overflow: auto;
    transition: all 0.35s ease-in-out;
    background-color: #fff;
    min-width: 0;
    flex-grow: 1; /* Permite que el main ocupe el espacio restante */
    overflow: hidden;  /* el scroll ya no va en .main */
}

#sidebar {
    width: 70px;
    min-width: 70px;
    z-index: 1000;
    transition: all .25s ease-in-out;
    background-color: #003d59;
    display: flex;
    flex-direction: column;
    height: 100vh;
    
}

#sidebar.expand {
    width: 230px;
    min-width: 230px;
}

.toggle-btn {
    background-color: transparent;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.5rem;
}

.toggle-btn i {
    font-size: 1.5rem;
    color: #FFF;
}




@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.sidebar-nav {
    padding: 1rem 0;
    flex: 1 1 auto;
}


a.sidebar-link {
    padding: .625rem 1.625rem;
    color: #FFF;
    display: block;
    font-size: 0.9rem;
    white-space: nowrap;
    border-left: 3px solid transparent;
}

.sidebar-link i,
.dropdown-item i {
    font-size: 1.1rem;
    margin-right: .75rem;
}

a.sidebar-link:hover {
    background-color: rgba(22, 112, 112, 0.25);
    border-left: 3px solid #fd6625;
}

.sidebar-item {
    position: relative;
}

#sidebar:not(.expand) .sidebar-item .sidebar-dropdown {
    position: absolute;
    top: 0;
    left: 70px;
    background-color: #003d59;
    padding: 0;
    min-width: 15rem;
    display: none;
}

#sidebar:not(.expand) .sidebar-item:hover .has-dropdown+.sidebar-dropdown {
    display: block;
    max-height: 15em;
    width: 100%;
    opacity: 1;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"]::after {
    border: solid;
    border-width: 0 .075rem .075rem 0;
    content: "";
    display: inline-block;
    padding: 2px;
    position: absolute;
    right: 1.5rem;
    top: 1.4rem;
    transform: rotate(-135deg);
    transition: all .2s ease-out;
}

#sidebar.expand .sidebar-link[data-bs-toggle="collapse"].collapsed::after {
    transform: rotate(45deg);
    transition: all .2s ease-out;
}

.navbar {
    
    box-shadow: 0 0 2rem 0 rgba(22, 112, 112, 0.25);
}

.navbar-expand .navbar-collapse {
    min-width: 200px;
}

.avatar {
    height: 40px;
    width: 40px;
}

.card {
    background-color: #f5f5f5;
    transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor: pointer;
    color: #000;
    margin-bottom: 1rem;
}

/* Hover más sutil para todas las cards */
.card:hover,
.card:focus-within {
    background-color: #f0f4f7 !important;  /* gris-azulado suave */
    color: #000 !important;
    transform: translateY(-2px);           /* pequeño levantamiento */
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

/* En hover, que los enlaces y botones hereden el color normal */
.card:hover a,
.card:hover .btn,
.card:hover .btn-orange {
    color: inherit;
}


.text-success {
    background-color: #71c664;
    padding: 0.25rem 0.35rem;
    font-size: 0.715rem;
    color: #f5f5f5 !important;
    border-radius: 5px;
}



tr.highlight th {
    background-color: #003d59;
    color: #f5f5f5;
}

.content {
    flex: 1 1 auto;
    overflow-y: auto;    /* aquí vive ahora el scroll */
    padding: 0 1rem 1rem; /* opcional: algo de padding interno */
}

footer {
    background-color: #f5f5f5;
    padding: 1rem .875rem;
}

@media (min-width: 768px) {
    .navbar form {
        max-width: 320px;
    }

    .input-group-navbar .form-control:focus {
        outline: none;
        box-shadow: 0 0 0 0 rgba(255,255,255);
        border: none;
    }

    .input-group-navbar .form-control {
        color: #3e4455;
    }

    .form-control::placeholder {
        background-color: #f5f5f5;
    }

    .input-group-navbar .btn {
        background-color: #fd6625;
        color: f5f5f5;
        font-family: 'Poppins', sans-serif;
        cursor: pointer;
        z-index: 10000;
    }

    .navbar-expand .navbar-nav .dropdown-menu {
        box-shadow: 0 .1rem .2rem rgba(0, 0, 0, 0.5);
    }
}

.btn-outline-success {
    color: #fff; /* Cambia el color del texto al blanco */
    background-color: #167070; /* Tu color personalizado para el fondo */
    border-color: #fd6625; /* Tu color personalizado para el borde */
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active {
    background-color: #fd6625; /* Un color más oscuro para hover/focus/active */
    border-color: #167070; /* Asegúrate de que el borde también cambie */
}

/* Estilos para los títulos */
.titulo {
    color: #003d59; /* Color del texto */
    font-size: 24px; /* Tamaño de la fuente */
    font-weight: bold; /* Grosor de la fuente */
    
}

/* Estilos para los pies de página */
.footer {
    background-color: #f5f5f5;
    padding: 0.75rem 0.875rem;
    font-size: 14px;
    color: #414a4f;
    font-style: italic;

    position: sticky;   /* se pega al borde inferior del contenedor .main */
    bottom: 0;
    z-index: 10;
}


/* Estilos base para .shadow-div aplicados a cualquier tamaño de pantalla */
.shadow-div {
    box-shadow: 0px 0px 10px rgba(100, 100, 100, 0.2); /* Sombra más suave en un tono de gris */
    border: 1px solid #e0e0e0; /* Borde sutil */
    background-color: #f4f4f4; /* Fondo en una gama sutil de gris */
    padding: 10px; /* Añade un poco de padding dentro del div */
    margin-bottom: 0px !important; /* Espacio debajo de cada div */
}

.sidebar-footer {
    margin-top: auto; /* Añadido aquí */
}

/* Centrar Texto creado para Pagina Login */
.text-center {
    text-align: center;
}

/* Ordenar botones Login en tamaño sm */
@media (max-width: 576px) {
    .button-group {
        flex-direction: column !important;
        align-items: center !important;
    }
    .button-group .btn {
        width: 100%;
        margin-bottom: 10px;
    }
    .button-group .btn:last-child {
        margin-bottom: 0;
    }
    .button-group .order-1 {
        order: 1;
    }
    .button-group .order-2 {
        order: 2;
    }
    .button-group .order-3 {
        order: 3;
    }
}

/* Custom styles for Nueva Cuenta button */
.btn-orange {
    background-color: #fd6625; /* Orange background color */
    border-color: #fd6625; /* Orange border color */
    color: #fff; /* White text */
}

.btn-orange:hover {
    background-color: #fd6625; /* Orange background on hover */
    color: #fff; /* White text on hover */
    border-color: #fd6625; /* Orange border on hover */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    background-color: #e55b1a; /* tono ligeramente más oscuro */
}


/* Estilos para la tabla de presupuestos */
#datatable_presupuestos .table-total,
#datatable_presupuestos_centro_gestor .table-total {
    font-weight: bold;
    background-color: #f0f0f0;
}

/* Estilos para el encabezado de la tabla */
#datatable_presupuestos thead th,
#datatable_presupuestos_centro_gestor thead th {
    background-color: #003d59;  /* Color de fondo oscuro */
    color: white;  /* Letras en color blanco */
    padding: 8px;  /* Añade algo de espacio alrededor del texto */
    border-bottom: solid 1px #ddd; /* Línea del borde inferior para separar del contenido de la tabla */
}

/* Estilos adicionales para mejorar la visibilidad y el contraste */
#datatable_presupuestos th, #datatable_presupuestos td,
#datatable_presupuestos_centro_gestor th, #datatable_presupuestos_centro_gestor td {
    border-bottom: 1px solid #dee2e6;  /* Líneas de separación entre filas para mejor lectura */
}

#datatable_presupuestos tbody td:first-child,
#datatable_presupuestos_centro_gestor tbody td:first-child {
    font-weight: bold;  /* Aplica negrita */
}

.data-table,
.chart-container {
    width: 100%; /* Asegura que ambos contenedores ocupen el ancho completo de su contenedor padre */
}

.chart-container {
    margin-top: 20px; /* Añade un espacio entre la tabla y el gráfico para una mejor separación visual */
}

/* Estilos para los íconos de los premios */
.icon-first {
    font-size: 25px; /* Tamaño del ícono */
    color: #003d59; /* Color del ícono */
}

.icon-second {
    font-size: 25px;
    color: #fb9334;
}

.icon-third {
    font-size: 25px;
    color: #167070; /* Bronce */
}

/* Badges de estado reutilizables para Contratación */
/* Badges de estado reutilizables para Contratación */
.status-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background-color: #e9ecef !important;
    color: #495057 !important;
    border: 1px solid #dee2e6;
}

/* Detalle PAC: texto con varias líneas, sin cortar con ... */
.pac-detalle {
    white-space: normal;
    word-wrap: break-word;
}
/* Detalle PAC: botones edicion linea PAC ... */
td .btn.btn-light.border {
    padding-inline: 0.45rem;
    padding-block: 0.15rem;
}

td .btn.btn-light.border i {
    font-size: 0.9rem;
}


/* Fila clicable en PAC */
.table-row-clickable {
    cursor: pointer;
}

/* === Proceso de contratación – workflow de fases === */

.process-header-card {
    border-left: 4px solid #003d59;
}

/* Contenedor general de las fases */
.process-steps {
    max-width: 1000px;
}

/* Tarjeta de cada fase */
.step-card {
    background-color: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    padding: 1rem 1.25rem;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

/* Estado pendiente (por defecto) */
.step-card--pending {
    opacity: 0.95;
}

/* Estado activo (fase en uso) */
.step-card--active {
    border-left: 4px solid #fd6625;
    background-color: #fffaf5;
}

/* Más adelante puedes usar esto para fases completadas */
.step-card--completed {
    border-left: 4px solid #71c664;
    background-color: #f4f9f4;
}

.step-card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

/* Cabecera de cada fase */
.step-card-header {
    margin-bottom: 0.75rem;
}

.step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #003d59;
    color: #fff;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.25rem;
}

.step-status-badge {
    background-color: #e9ecef;
    color: #495057;
    font-size: 0.7rem;
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
}

/* Cuerpo y elementos dentro de la fase */
.step-card-body {
    border-top: 1px dashed #dee2e6;
    padding-top: 0.75rem;
}

.step-item {
    gap: 1rem;
}

.step-actions .btn {
    white-space: nowrap;
}

/* --- Brand navbar --- */

.brand-logo{
  height: 64px;
  width: auto;
}

.brand-text{
  margin-left: 2px;
}

.brand-title{
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #003d59;
}

.brand-subtitle{
  font-size: 1.0rem;
  font-weight: 600;
  color: #167070;
}

.brand-flag{
  width: 27px;
  height: auto;
  margin-left: 6px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,.08);
  transform: translateY(2px);
}

/* Responsive */
@media (max-width: 576px){
  .brand-title{ font-size: 0.75rem; }
  .brand-subtitle{ font-size: 0.6rem; }
  .brand-logo{ height: 45px; }
}

/* =========================
   SIDEBAR HEADER + BRAND
   ========================= */

.sidebar-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 12px 8px 12px; /* baja el bloque y le da “aire” */
  min-height: 72px;            /* define un header consistente */
}

/* El botón no debe empujar el layout con padding enorme */
.toggle-btn{
  padding: 0;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}



/* Expandido: animación suave */
#sidebar.expand .sidebar-brand{
  animation: fadeIn .25s ease;
}

/* 1) Cuando el sidebar está colapsado, NO debe verse texto */
#sidebar:not(.expand) a.sidebar-link span{
  display: none !important;
}

/* 2) Asegurar que el sidebar recorte cualquier sobrante */
#sidebar{
  overflow: hidden;
}

/* 3) (Opcional pero recomendado) En colapsado, centramos iconos para que se vea limpio */
#sidebar:not(.expand) a.sidebar-link{
  padding: .625rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 4) (Opcional) Evita que el ícono tenga margen a la derecha cuando no hay texto */
#sidebar:not(.expand) .sidebar-link i{
  margin-right: 0;
}



/* --- COLAPSADO: SOLO isotipo --- */
#sidebar:not(.expand) .brand-logo-collapsed{
  display: block;
  height: 28px;      /* <-- AQUÍ AJUSTA el tamaño del isotipo */
}

/* --- EXPANDIDO: LOGO COMPLETO --- */
#sidebar.expand .brand-logo-expanded{
  display: block;
  height: 44px;      /* <-- AQUÍ AJUSTA el tamaño del logo completo */
}

/* Título del sidebar */
.sidebar-title{
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.95rem;
  white-space: nowrap;
  opacity: 0.95;
}

/* Cuando está colapsado, ocultamos el título "Menú" */
#sidebar:not(.expand) .sidebar-title{
  display: none;
}

/* Contenedor del logo dentro del navbar */
.navbar-brand{
  display: flex;
  align-items: center;
  height: 64px;     /* debe ser igual al min-height de .navbar */
  padding: 0;       /* evita que el brand aumente altura */
  margin: 0;
}

/* Logo fijo en el header (no depende del sidebar) */
.brand-logo-top{
  height: 79px;   /* ajuste aquí */
  width: auto;
  display: block;
}

/* En móviles, un poco más pequeño */
@media (max-width: 576px){
  .brand-logo-top{
    height: 51px;
  }
}

/* Altura controlada del header */
.navbar{
  min-height: 55px;          /* o 70px si lo quiere más alto */
  padding-top: 0;
  padding-bottom: 0;
}