/* Paleta de colores */
:root {
    --color-primary: #2D3090; /* Color de marca */
    --color-light-gray: #f8f9fa; /* Gris claro sutil para fondo */
    --color-dark-gray: #343a40; /* Gris oscuro para textos */
    --color-accent: #FF6F61; /* Color de acento para botones CTA */
    --color-muted: #6c757d; /* Gris para textos menos importantes */
    --color-orange: rgb(250, 179, 6); /* Color naranja para el botón "Registrar tu Curriculum" */
	 --bs-link-color: rgb(13, 22, 78); /* Cambia el color de los links */
	 /* Asegura RGB disponible para el tinte */
  --color-primary-rgb: 45, 48, 144;   /* #2D3090 */
  --color-muted-rgb:   108,117,125;   /* #6c757d */
	
	--color-success: #198754;
  --color-success-rgb: 25,135,84;

  --color-danger: #dc3545;
  --color-danger-rgb: 220,53,69;

  --color-warning: #ffc107;
  --color-warning-rgb: 255,193,7;
	
	 --color-info: #0dcaf0;
  --color-info-rgb: 13,202,240;
	
}
a {
    color: #1A1A1A !important; /* Cambia el color de todos los enlaces */
}

a:hover {
    color: rgb(13, 22, 78) !important; /* Cambia el color de los enlaces al hacer hover */
}
/* Cabecera */
header {
    background-color: var(--color-light-gray); /* Fondo claro para la cabecera */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
}
	.red{
		color:red;
	}
.navbar {
    background-color: white; /* Navbar con fondo blanco */
    border-bottom: 1px solid #e0e0e0; /* Borde gris sutil */
}

.navbar-brand {
    color: var(--color-primary); /* Color de marca para el logo */
    font-weight: bold;
    font-size: 1.25rem;
}

.navbar-nav .nav-link {
    color: var(--color-dark-gray); /* Color oscuro para los enlaces */
}

.navbar-nav .nav-link:hover {
    color: var(--color-primary); /* Cambio a color de marca al hacer hover */
}

.navbar-nav .nav-link {
    font-size: 1rem;
}

.navbar-toggler {
    border-color: var(--color-primary); /* Color del toggle de navbar */
}
/* Acciones: mismo ancho para Editar y Eliminar */
.cell-actions{
  --action-w: 5rem; /* ajusta a tu gusto (9–10rem suele ir bien) */
}
.cell-actions .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--action-w);
}

/* Asegurar que todos los botones btn-primary mantengan el mismo fondo */
.btn-primary {
    background-color: var(--color-primary) !important; /* Aseguramos el fondo primario */
    border-color: var(--color-primary) !important; /* Aseguramos el borde primario */
    color: white !important; /* Aseguramos que el texto siempre sea blanco */
    transition: all 0.3s ease; /* Transición suave para el fondo y el borde */
}

/* Hover sobre el botón btn-primary */
.btn-primary:hover {
    background-color: rgba(45, 48, 144, 0.8) !important; /* Aclaramos el fondo con un color más claro (opacidad ajustada) */
    border-color: var(--color-primary) !important; /* Mantiene el borde igual */
    color: white !important; /* Mantiene el color del texto blanco */
    cursor: pointer; /* Añadir un cursor de puntero */
}


/* Foco en el botón btn-primary */
.btn-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(45, 48, 144, 0.5); /* Agrega sombra en el foco para mayor visibilidad */
    background-color: var(--color-primary) !important; /* Evitar que el fondo cambie en foco */
    border-color: var(--color-primary) !important;
}
	
/* ===== Outline Primary ===== */
.btn-outline-primary{
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-primary .bi{ color: inherit; } /* icono hereda */

.btn-outline-primary:hover,
.btn-outline-primary:focus{
 color: white !important;         /* texto = borde */
  border-color: var(--color-primary) !important;
  background-color: rgba(45, 48, 144, 0.8) !important; 
  box-shadow: 0 0 0 .15rem rgba(var(--color-primary-rgb), .12);
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle{
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  /*background-color: rgba(var(--color-primary-rgb), .15);*/
  background-color: var(--color-primary);
}
.btn-outline-primary:disabled,
.btn-outline-primary.disabled{
  color: rgba(var(--color-primary-rgb), .45) !important;
  border-color: rgba(var(--color-primary-rgb), .45) !important;
}

/* ===== Outline Secondary (muted) — mismo patrón ===== */
.btn-outline-secondary{
  color: var(--color-muted) !important;
  border-color: var(--color-muted) !important;
  background-color: transparent;
}
.btn-outline-secondary .bi{ color: inherit; }

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  color: black !important;
  border-color: var(--color-muted) !important;
  background-color: rgba(var(--color-muted-rgb), .10);
  box-shadow: 0 0 0 .15rem rgba(var(--color-muted-rgb), .12);
}
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle{
  color: var(--color-muted) !important;
  border-color: var(--color-muted) !important;
  background-color: rgba(var(--color-muted-rgb), .15);
}
.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled{
  color: rgba(var(--color-muted-rgb), .45) !important;
  border-color: rgba(var(--color-muted-rgb), .45) !important;
}


/* ===== Outline Success ===== */
.btn-outline-success{
  color: var(--color-success) !important;
  border-color: var(--color-success) !important;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-success .bi{ color: inherit; }

.btn-outline-success:hover,
.btn-outline-success:focus{
  color: #fff !important;
  border-color: var(--color-success) !important;
  background-color: rgba(var(--color-success-rgb), .8) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--color-success-rgb), .12);
}
.btn-outline-success:active,
.btn-outline-success.active,
.show > .btn-outline-success.dropdown-toggle{
  color: #fff !important;
  border-color: var(--color-success) !important;
  background-color: var(--color-success) !important;
}
.btn-outline-success:disabled,
.btn-outline-success.disabled{
  color: rgba(var(--color-success-rgb), .45) !important;
  border-color: rgba(var(--color-success-rgb), .45) !important;
}

/* ===== Outline Danger ===== */
.btn-outline-danger{
  color: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-danger .bi{ color: inherit; }

.btn-outline-danger:hover,
.btn-outline-danger:focus{
  color: #fff !important;
  border-color: var(--color-danger) !important;
  background-color: rgba(var(--color-danger-rgb), .82) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--color-danger-rgb), .14);
}
.btn-outline-danger:active,
.btn-outline-danger.active,
.show > .btn-outline-danger.dropdown-toggle{
  color: #fff !important;
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger) !important;
}
.btn-outline-danger:disabled,
.btn-outline-danger.disabled{
  color: rgba(var(--color-danger-rgb), .45) !important;
  border-color: rgba(var(--color-danger-rgb), .45) !important;
}

/* ===== Outline Warning ===== */
.btn-outline-warning{
  color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-warning .bi{ color: inherit; }

.btn-outline-warning:hover,
.btn-outline-warning:focus{
  /* Para mejor contraste en amarillos, subimos opacidad */
  color: #212529 !important; /* legible sobre amarillo intenso */
  border-color: var(--color-warning) !important;
  background-color: rgba(var(--color-warning-rgb), .92) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--color-warning-rgb), .18);
}
.btn-outline-warning:active,
.btn-outline-warning.active,
.show > .btn-outline-warning.dropdown-toggle{
  color: #212529 !important;
  border-color: var(--color-warning) !important;
  background-color: var(--color-warning) !important;
}
.btn-outline-warning:disabled,
.btn-outline-warning.disabled{
  color: rgba(var(--color-warning-rgb), .55) !important;
  border-color: rgba(var(--color-warning-rgb), .45) !important;
}

/* ===== Outline Info ===== */
.btn-outline-info{
  color: var(--color-info) !important;
  border-color: var(--color-info) !important;
  background-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn-outline-info .bi{ color: inherit; }

.btn-outline-info:hover,
.btn-outline-info:focus{
  color: #fff !important;
  border-color: var(--color-info) !important;
  background-color: rgba(var(--color-info-rgb), .85) !important;
  box-shadow: 0 0 0 .15rem rgba(var(--color-info-rgb), .14);
}
.btn-outline-info:active,
.btn-outline-info.active,
.show > .btn-outline-info.dropdown-toggle{
  color: #fff !important;
  border-color: var(--color-info) !important;
  background-color: var(--color-info) !important;
}
.btn-outline-info:disabled,
.btn-outline-info.disabled{
  color: rgba(var(--color-info-rgb), .45) !important;
  border-color: rgba(var(--color-info-rgb), .45) !important;
}

/* Focus danger button*/	
.btn-danger:hover,
.btn-danger:focus{
  color: white !important;
  
}
	

/* Buscador en una línea */
/*.card-body {
    background-color: var(--color-light-gray); 
}*/

/*.row.g-2 > .col {
    display: flex;
    align-items: center;
    justify-content: center;
}*/

/* Fondo de la sección de busqueda */
section.py-3 {
    padding: 2rem 0;
}

/* Footer */
footer {
    background-color: var(--color-light-gray); /* Fondo gris claro */
    padding: 2rem 0;
}

/* Offcanvas móvil */
.offcanvas {
    background-color: var(--color-light-gray);
    color: var(--color-dark-gray);
}

/* Ajustes de los enlaces del offcanvas */
.offcanvas .nav-link {
    color: var(--color-dark-gray);
}

.offcanvas .nav-link:hover {
    color: var(--color-primary);
}

/* Estilo de los países en footer */
.footer_countries .col a {
    font-size: 1rem;
    color: var(--color-dark-gray);
    display: flex;
    align-items: center;
}

.footer_countries .col a:hover {
    color: var(--color-primary);
}


/* Mejorar la estructura de la fila de inputs y botones */
.card-body {
    background-color: #fff; /* Fondo blanco para la tarjeta */
    padding: 2rem; /* Padding interno para mayor espacio */
}

.card-body-search {
    background-color: #fff; /* Fondo blanco para la tarjeta */
	    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
}

.row.g-2 > .col {
    display: flex;
    /*align-items: center;*/
    /*justify-content: center;*/
    gap: 15px; /* Espacio entre elementos */
}

/* Responsividad: Asegurarse de que se ve bien en dispositivos móviles */
@media (max-width: 768px) {
    .col-12 {
        margin-bottom: 10px; /* Espacio entre los elementos en móviles */
    }

    #but_search_main {
        width: 100%; /* Hacer que el botón ocupe toda la fila en móviles */
    }
}


h2 {
    font-size: 2rem;
    font-weight: 700;
}



		  body{ background: #f7f8fb; }
        /* Estilos de las tarjetas */
        .card-soft {
          border: 1px solid #eef2f7; /* Borde tenue */
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra más visible */
          transition: box-shadow 0.3s ease, transform 0.3s ease; /* Efecto suave al pasar el cursor */
          border-radius: 0.75rem; /* Bordes redondeados */
        }

        .card-soft:hover {
          box-shadow: 0 12px 30px rgba(15,23,42,.08);/* Sombra más fuerte al pasar el cursor */
        }

        .card-soft .card-body {
          padding: 1.5rem; /* Espaciado adicional */
        }

        .card-soft h2 {
		 font-size: 1.25rem; /* Ajuste de tamaño del título */
          font-weight: 600;
          color: #333;
        }

        .list-group-item {
          border-radius: 0.375rem;
          font-size: 1rem; /* Tamaño de fuente más adecuado */
        }

        .badge {
          font-size: 0.85rem;
          padding: 0.4rem 0.6rem; /* Más espacio alrededor de la badge */
		  font-weight: normal;	
        }

        /* Estilos para los badges de jornada laboral */
        .full-time {
          background-color: #007bff;
          color: #fff;
        }

        .part-time {
          background-color: #ffc107;
          color: #fff;
        }

        .temporary {
          background-color: #6c757d;
          color: #fff;
        }

        .intern {
          background-color: #28a745;
          color: #fff;
        }

        .home-office {
          background-color: #17a2b8;
          color: #fff;
        }

        .other {
          background-color: #f8f9fa;
          color: #343a40;
        }

        /* Mejora en las imágenes de los usuarios */
        .user-avatar {
          border: 2px solid #e0e0e0;
          transition: transform 0.3s ease;
        }

        .user-avatar:hover {
          transform: scale(1.1); /* Agrandar al pasar el cursor */
        }

        /* Efecto hover para enlaces */
        a.text-decoration-none:hover {
          color: #0056b3;
        }

        /* Estilos generales de las imágenes de empresas */
        .company-avatar {
          border-radius: 50%;
          border: 3px solid #e0e0e0;
        }

        .company-avatar:hover {
          transform: scale(1.05); /* Efecto de agrandado */
        }
	
/* Contenedor para imagen, texto principal (titulo y empresa) y el botón */
.job-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Si la imagen existe, se asegura que no se reduzca */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Hace que el contenido de texto ocupe el resto del espacio */
.flex-grow-1 {
    flex-grow: 1;
}

/* Ajuste del título */
h4.h6 {
    font-size: 1.25rem; /* Ajuste de tamaño del título */
    font-weight: 600;
    margin-bottom: 0.5rem; /* Espacio entre título y contenido */
}

/* Ajuste de los textos pequeños */
.small {
    font-size: 0.875rem; /* Tamaño de texto más pequeño */
}

/* Fila de salario, jornada laboral y ubicación */
.card-body .d-flex.align-items-center {
    gap: 15px; /* Espacio entre los elementos de la fila */
}

/* Alineación de la descripción de la oferta */
.card-body p.text-body {
    margin-top: 1rem;
    text-align: left; /* Asegura que el texto esté alineado a la izquierda */
}

/* Responsividad para dispositivos pequeños */
@media (max-width: 768px) {
    .d-flex {
        flex-direction: column; /* Cambiar la dirección a columna en dispositivos pequeños */
        align-items: flex-start; /* Alinea el contenido a la izquierda */
    }

    /* Ajusta el padding cuando la imagen y el texto se apilan */
    .card-body .d-flex > div.flex-grow-1 {
        padding-left: 0;
    }

    /* Alineación de los elementos en la fila de salario, jornada y ubicación */
    .card-body .d-flex.align-items-center {
        flex-direction: row;
        flex-wrap: wrap; /* Los elementos se envuelven si es necesario */
        gap: 10px;
    }

    /* Alineación de la imagen con el título */
    .card-body .d-flex .flex-grow-1 {
        padding-left: 0;
    }
}


	.time-publish{
		
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: rgb(102, 100, 116);
    margin: 0px;
		
	}

	
/* Usa chevrón › y tono muted en todo el breadcrumb */
.breadcrumb {
  --bs-breadcrumb-divider: '»';
  color: var(--bs-secondary-color); /* mismo tono que .text-muted en BS5.3+ */
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: inherit; /* separador en el mismo color */
}
.breadcrumb .breadcrumb-item a {
  color: inherit; /* enlaces en muted */
  text-decoration: none;
}


	
  /* Ajuste sticky en escritorio: separarlo del header fijo (si tienes navbar fixed) */
@media (min-width: 992px){
  .sidebar-col{
    position: sticky;
    top: 10px;         /* ajusta si tu header fuera fixed; si NO es fixed, pon 0 */
    z-index: 1020;
    height: fit-content;  /* evita estiramientos raros */
  }
}

/* DASHBOARD */	
.error_msg{ display:none; font-size:.85rem; margin-top:.25rem; }
  .error_msg.err{ display:block; color:#dc3545; }   /* rojo */
  .error_msg.ok{  display:block; color:#198754; }   /* verde */

  .form-control.is-valid, .form-select.is-valid { border-color:#198754; }
  .form-control.is-invalid, .form-select.is-invalid { border-color:#dc3545; }
  .form-control.is-valid:focus, .form-select.is-valid:focus { box-shadow:0 0 0 .2rem rgba(25,135,84,.15); }
  .form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow:0 0 0 .2rem rgba(220,53,69,.15); }

  #formAlert.d-none{ display:none; }
	
	/* Contenedor posicionable (asegura el ancla del overlay) Foto CV */
#my_photo_container-1,
#my_photo_container-1 .photo-wrap {
  position: relative;
  display: inline-block;
}

/* Miniatura */
.avatar-thumb {
  max-width: 120px;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Botón X arriba-derecha */
.avatar-remove,
.my_photo_list .removeImg {       /* si tu X es .removeImg, hereda estas reglas */
  position: absolute;
  top: -6px;
  right: -6px;                    /* esquina superior derecha */
  left: auto;                     /* por si antes estaba a la izquierda */
  z-index: 3;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Opcional: que “muerda” la esquina y tenga mejor click */
.avatar-remove i,
.my_photo_list .removeImg i {
  pointer-events: none;
}

	
/* Contenedor CV y botón eliminar */
.my_cv_list{position:relative;display:inline-block;}
.cv-thumb{max-width:150px;height:auto;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.08);}
.cv-remove{position:absolute;top:6px;right:6px;z-index:3; }
.my_cv_list.loading::after{
  content:'Subiendo...';position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(255,255,255,.7);font-weight:600;border-radius:8px;
}
	
	
	/* tabla responsiva */
	/* Tablet/desktop: queda como tabla normal */
  .table-stacked{width:100%}

/* ===== Tabla responsiva sin scroll (mejorada) ===== */
@media (max-width: 768px){
  .table-stacked thead{ display:none; }

  .table-stacked tbody tr{
    display:block;
    border:1px solid var(--bs-border-color,#dee2e6);
    border-radius:12px;
    padding:12px 12px 8px;
    margin-bottom:12px;
    background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
  }

  /* Celdas apiladas con GRID para label + valor */
  .table-stacked tbody td{
    display:grid;
    grid-template-columns: 120px 1fr; /* ancho del “label” */
    gap:.5rem;
    align-items:flex-start;
    border:0 !important;
    padding:.35rem 0 !important;
    background:transparent !important;
  }

  /* Texto del “label” */
  .table-stacked tbody td::before{
    content:attr(data-label);
    font-weight:600;
    color:var(--bs-secondary-color,#6c757d);
  }

  /* PRIMERA CELDA (Experiencia): sin label y a ancho completo */
  .table-stacked tbody td.cell-exp{
    display:block;          /* ocupa 100% */
    padding-top:0 !important;
    word-break:break-word;  /* evita desbordes/duplicados visuales */
  }
  .table-stacked tbody td.cell-exp::before{ content:none; }

  .table-stacked .fw-semibold{ line-height:1.2; margin-bottom:.1rem; }
  .table-stacked .badge{ margin-top:.35rem; }

  /* Acciones: botones alineados a la derecha y sin label */
  .table-stacked tbody td.cell-actions{
    display:flex;
    justify-content:flex-end;
    gap:.5rem;
    padding-top:.5rem !important;
  }
  .table-stacked tbody td.cell-actions::before{ content:none; }
}

/* === Tabla responsive sin scroll (stacked) === */
@media (max-width: 576px){
  /* Oculta encabezado */
  .table-stacked thead { display:none; }

  /* Tarjeta por fila */
  .table-stacked tbody tr{
    display:block;
    padding:12px;
    margin-bottom:12px;
    border:1px solid #eee;
    border-radius:12px;
    background:#fff;
  }
  .table-stacked tbody tr > td{
    display:block;
    width:100%;
    padding:.25rem 0;
    border:0 !important;
  }

  /* Muestra el nombre del campo arriba y en su propia línea */
  .table-stacked tbody tr > td[data-label]::before{
    content: attr(data-label);
    display:block;              /* << clave para que el badge baje */
    font-size:.8125rem;
    color:#6c757d;
    margin-bottom:.125rem;
    font-weight:500;
  }

  /* El badge debe poder partirse y no desbordar */
  .table-stacked tbody tr > td .badge{
    display:inline-block;       /* o block si prefieres ocupar toda la línea */
    max-width:100%;
    white-space:normal;         /* permite salto de línea */
    word-break:break-word;      /* por si hay textos muy largos */
    line-height:1.2;
    margin-top:.125rem;
  }

  /* Acciones debajo, en fila y sin pegarse */
  .table-stacked .cell-actions{
    display:flex;
    gap:.5rem;
    justify-content:flex-start;
    margin-top:.5rem;
  }
}

	/* ==== Paginación con paleta del sitio ==== */
.pagination .page-link {
  color: var(--bs-link-color);
  border: 1px solid rgba(0,0,0,.08);
  background-color: #fff;
}

.pagination .page-link:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: rgba(45,48,144, .06); /* primary muy suave */
}

.pagination .page-item.active .page-link {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .page-item.disabled .page-link {
  color: var(--color-muted);
  background-color: var(--color-light-gray);
  border-color: rgba(0,0,0,.06);
}

.pagination .page-link:focus {
  box-shadow: 0 0 0 .2rem rgba(45,48,144,.15);
}
/* Forzar texto blanco en la página activa de la paginación */
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover,
.pagination .page-item.active .page-link:focus {
  color: #fff !important;              /* texto blanco */
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

	/* =======================================================================================
   BOTONES SOFT (UX consistente con Bootstrap 5)
   - Base .btn-soft + skins: primary, success, warning, muted, secondary, danger, dark
   - Mantiene color de texto en hover/focus/active (evita "saltos" a color primario)
   - Usa variables por skin para unificar fondo/borde/texto
   ======================================================================================= */

/* ====== BASE GENÉRICA ====== */
.btn-soft{
  --btn-bg: #ECEFF3;         /* más fuerte que #f6f7f9 */
  --btn-border: #DFE3E8;     /* borde consistente */
  --btn-text: #2F3439;

  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .02s ease;
}
.btn-soft:hover{
  background: #F6F8FB;
  color: var(--btn-text);
  border-color: var(--btn-border);
  filter: none;
}
.btn-soft:focus{
  outline: 0;
  border-color: var(--btn-border);
  box-shadow: 0 0 0 .2rem rgba(223, 227, 232, .45);
}
.btn-soft:active{ transform: translateY(1px); }
.btn-soft:disabled,
.btn-soft.disabled{ opacity:.65; }

/* Fijar color de texto (evita que cambie en :hover con reglas globales) */
.btn-soft,
.btn-soft:hover,
.btn-soft:focus,
.btn-soft:active {
  --bs-btn-color: var(--btn-text);
  --bs-btn-hover-color: var(--btn-text);
  --bs-btn-active-color: var(--btn-text);
  color: var(--btn-text) !important;
}
a.btn-soft:hover,
a.btn-soft:focus { color: var(--btn-text) !important; }

/* Iconos heredan el color del texto */
.btn-soft i, .btn-soft .bi { color: inherit !important; }

/* ====== SKINS ====== */

/* PRIMARY */
.btn-soft-primary{
  --btn-bg: #E3EBFF;
  --btn-border: #C7D5FF;
  --btn-text: #0B3ECF;
  background: var(--btn-bg); color: var(--btn-text); border: 1px solid var(--btn-border);
}
.btn-soft-primary:hover{ background:#EEF4FF; border-color: var(--btn-border); }
.btn-soft-primary:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(199,213,255,.5); }
.btn-soft-primary,
.btn-soft-primary:hover,
.btn-soft-primary:focus,
.btn-soft-primary:active{
  --bs-btn-color:#0B3ECF; --bs-btn-hover-color:#0B3ECF; --bs-btn-active-color:#0B3ECF;
  color:#0B3ECF !important;
}

/* SUCCESS */
.btn-soft-success{
  --btn-bg: #DBF1E3;
  --btn-border: #BFE7CD;
  --btn-text: #157347;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-success:hover{ background:#EAF7EF; border-color: var(--btn-border); }
.btn-soft-success:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(191,231,205,.5); }
.btn-soft-success,
.btn-soft-success:hover,
.btn-soft-success:focus,
.btn-soft-success:active{
  --bs-btn-color:#157347; --bs-btn-hover-color:#157347; --bs-btn-active-color:#157347;
  color:#157347 !important;
}

/* WARNING */
.btn-soft-warning{
  --btn-bg: #FFE9CC;
  --btn-border: #FFD9A6;
  --btn-text: #995000;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-warning:hover{ background:#FFF4E6; border-color: var(--btn-border); }
.btn-soft-warning:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(255,217,166,.5); }
.btn-soft-warning,
.btn-soft-warning:hover,
.btn-soft-warning:focus,
.btn-soft-warning:active{
  --bs-btn-color:#995000; --bs-btn-hover-color:#995000; --bs-btn-active-color:#995000;
  color:#995000 !important;
}

/* MUTED (neutro) */
.btn-soft-muted{
  --btn-bg: #ECEFF3;
  --btn-border: #DFE3E8;
  --btn-text: #495057;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-muted:hover{ background:#F6F7F9; border-color: var(--btn-border); }
.btn-soft-muted:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(223,227,232,.5); }
.btn-soft-muted,
.btn-soft-muted:hover,
.btn-soft-muted:focus,
.btn-soft-muted:active{
  --bs-btn-color:#495057; --bs-btn-hover-color:#495057; --bs-btn-active-color:#495057;
  color:#495057 !important;
}

/* SECONDARY */
.btn-soft-secondary{
  --btn-bg: #EFF1F5;
  --btn-border: #E2E6EA;
  --btn-text: #495057;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-secondary:hover{ background:#F7F8FA; border-color: var(--btn-border); }
.btn-soft-secondary:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(226,230,234,.5); }
.btn-soft-secondary,
.btn-soft-secondary:hover,
.btn-soft-secondary:focus,
.btn-soft-secondary:active{
  --bs-btn-color:#495057; --bs-btn-hover-color:#495057; --bs-btn-active-color:#495057;
  color:#495057 !important;
}

/* DANGER */
.btn-soft-danger{
  --btn-bg: #FDECEC;     /* acorde a tu paleta previa */
  --btn-border: #F8D7DA;
  --btn-text: #B02A37;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-danger:hover{ background:#FFF1F1; border-color: var(--btn-border); }
.btn-soft-danger:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(248,215,218,.5); }
.btn-soft-danger,
.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger:active{
  --bs-btn-color:#B02A37; --bs-btn-hover-color:#B02A37; --bs-btn-active-color:#B02A37;
  color:#B02A37 !important;
}

/* DARK */
.btn-soft-dark{
  --btn-bg: #F1F3F5;
  --btn-border: #E9ECEF;
  --btn-text: #343A40;
  background: var(--btn-bg); color: var(--btn-text); border:1px solid var(--btn-border);
}
.btn-soft-dark:hover{ background:#F7F9FA; border-color: var(--btn-border); }
.btn-soft-dark:focus{ border-color: var(--btn-border); box-shadow:0 0 0 .2rem rgba(233,236,239,.5); }
.btn-soft-dark,
.btn-soft-dark:hover,
.btn-soft-dark:focus,
.btn-soft-dark:active{
  --bs-btn-color:#343A40; --bs-btn-hover-color:#343A40; --bs-btn-active-color:#343A40;
  color:#343A40 !important;
}

/* ====== PREMIUM (dorado) ====== */
.btn-premium{
  --prem-gold:   #ffc107;
  --prem-gold-d: #ffb300;
  --prem-gold-l: #ffd24d;
  --prem-border: #ffc107;

  color:#2a1e00;
  background: var(--prem-gold-l);
  border:1px solid var(--prem-border);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .02s ease;
}
.btn-premium:hover{
  background: var(--prem-gold);
  color:#241a00;
  border-color: var(--prem-border);
}
.btn-premium:focus{
  border-color: var(--prem-border);
  box-shadow: 0 0 0 .2rem rgba(255,193,7,.35), 0 10px 22px rgba(255,193,7,.25);
  outline: 0;
}
.btn-premium:active{ transform: translateY(1px); }
.btn-premium.btn-pill{ border-radius: 999px; }

/* Premium: texto estable */
.btn-premium,
.btn-premium:hover,
.btn-premium:focus,
.btn-premium:active{
  --bs-btn-color:#2a1e00; --bs-btn-hover-color:#2a1e00; --bs-btn-active-color:#2a1e00;
  color:#2a1e00 !important;
}

/* Variante premium outline (secundaria) */
.btn-premium-outline{
  color:#8a6a00;
  background:#fff7e0;
  border:1px solid var(--prem-border, #ffc107);
}
.btn-premium-outline:hover{
  background:#fff3cc;
  border-color: var(--prem-border, #ffc107);
  color:#664f00;
}
.btn-premium-outline:focus{
  border-color: var(--prem-border, #ffc107);
  box-shadow: 0 0 0 .2rem rgba(255,193,7,.35);
}

/* ====== Accesibilidad de movimiento ====== */
@media (prefers-reduced-motion: reduce){
  .btn-soft,
  .btn-soft-primary,
  .btn-soft-success,
  .btn-soft-warning,
  .btn-soft-muted,
  .btn-soft-secondary,
  .btn-soft-danger,
  .btn-soft-dark,
  .btn-premium,
  .btn-premium-outline{
    transition: none;
  }
}

#body_404 ul{
  list-style: disc;
  list-style-position: inside; /* bullets dentro del bloque */
  padding-left: 0;             /* ya no hace falta indentación extra */
  margin: .25rem 0 1rem;
}
#body_404 li{ margin: .15rem 0; }

.chip-link-404{
      display:inline-flex; align-items:center; gap:.35rem;
      padding:.4rem .7rem; border:1px solid #e9ecef; border-radius:999px;
      background:#f8f9fa; color:#343a40; text-decoration:none; font-weight:500;
    }
    .chip-link-404:hover{ background:#eef2ff; border-color:#e0e7ff; color:#2D3090; }

/* Elimina los puntos de la lista */
ul.benefits-list {
  list-style-type: none; /* Elimina los puntos */
  padding-left: 0; /* Elimina el espaciado a la izquierda */
}

/* Estilo para los íconos de check */
ul.benefits-list li {
  position: relative;
  padding-left: 25px; /* Espacio para el ícono de check */
  margin-bottom: 10px; /* Espaciado entre los elementos */
}

ul.benefits-list li i {
  position: absolute;
  left: 0; /* Ubicación del ícono de check */
  top: 50%;
  transform: translateY(-50%); /* Centra el ícono verticalmente */
  font-size: 20px; /* Ajusta el tamaño del ícono */
  color: #28a745; /* Color verde para el check */
}