/* ====== Tokens/Resets suaves ====== */
:root{
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-s: 6px;
  --radius-m: 8px;
  --shadow-1: 0 4px 12px rgba(0,0,0,0.05);
  --shadow-2: 0 6px 18px rgba(0,0,0,0.06);
  --text-muted: #707070;
}

/* Mejora el ritmo vertical por defecto */
* { box-sizing: border-box; }
label{ display:block; margin-bottom: var(--space-2); font-weight: 600; }
.form-group{ margin-bottom: var(--space-5); }

/* ====== Password + Toggle ====== */
.password-input {
  position: relative;
}
.password-input input[type="password"],
.password-input input[type="text"]{
  padding-right: 44px; /* deja espacio para el ícono */
}
.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;   /* hit area cómodo */
  border-radius: 50%;
}
.toggle-password .icon { font-size: 1.25rem; }

/* Estados utilitarios */
.disabled { opacity: .5; pointer-events: none; }
.icon-info { cursor: pointer; }
.badge-error { background-color: #b94a48; }
#emailAsterisk { font-size: 20px; }

/* ====== Article/Card base ====== */
article{
  background:#fff;
  color: var(--text-muted);
  border-radius: 10px;
  padding: var(--space-8);
  font-size: 16px;
  line-height: 1.9;
  box-shadow: 5px 5px 50px rgba(0,0,0,.10);
}

/* ====== Tooltip mejor posicionado ====== */
.custom-tooltip{
  font-weight: normal;
  color: #333;
  text-decoration: none;
  position: relative;
}
.custom-tooltip .tooltip-box{
  display: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: #ffc107;
  line-height: 1.4;
  z-index: 500;
  text-align: center;
  color: #000;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 5px;
  box-shadow: var(--shadow-1);
  max-width: 260px;
  white-space: normal;
}
.custom-tooltip:hover .tooltip-box{ display: inline-block; }
.tooltip-box::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -7px;
  border-top: 7px solid #ffc107;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
}

/* Inputs vacíos/erróneos */
.campos-vacios, input.error{ border-color: red !important; }

/* Checkboxes más grandes sin deformar layout */
.custom-checkbox{
  transform: scale(1.3);
  transform-origin: left center;
}

/* Centrado real de modal, evita “salto” */
#alertInputsModal .modal-dialog{
  margin: 0;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

#alertCategoriasModal .modal-dialog {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ====== Subcard (bloques) ====== */
.subcard{
  border: 1px solid #e6e6e6;
  border-radius: var(--radius-m);
  background:#fff;
  box-shadow: var(--shadow-2);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.subcard .container{
  width: 100%;
  padding: var(--space-3);
}
.subcard h5{ margin: 6px 0 12px 0; font-weight: 700; }
.subcard h6{ margin: 0 0 10px 0; font-weight: 700; }
.row + .row{ margin-top: var(--space-3); }
.sub-sep{ margin: 8px 0 12px; border: 0; border-top: 1px solid #eee; }

/* Si usa Bootstrap, abrimos un poco los gutters dentro del subcard */
.subcard .row{
  --bs-gutter-x: 1.25rem;  /* aumenta separación horizontal */
  --bs-gutter-y: 0.5rem;   /* añade separación vertical en wrap */
}

/* ====== Bloque principal mercado ====== */
.principal-mercado-hospedaje{
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid #e6e6e6;
  border-radius: var(--radius-m);
  background: #fafafa;
  box-shadow: var(--shadow-1);
}
.principal-mercado-hospedaje h4{
  margin: 0 0 var(--space-4) 0;
  font-weight: 700; color: #333;
}
.principal-mercado-hospedaje .row{ margin-bottom: var(--space-3); }
.principal-mercado-hospedaje select,
.principal-mercado-hospedaje input{
  border-radius: var(--radius-s);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
  padding: 10px 12px;
}

/* Aceptación SICCS */
#AceptacionSiccs{
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-2);
  padding: var(--space-4);
}

/* ====== Pills (botones tipo check) ====== */
.activity-pills{
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3); /* respira mejor */
}
.activity-pills .pill{
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  padding: 8px 14px;
  background:#fff;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}
.activity-pills .pill:hover{ transform: translateY(-1px); box-shadow: var(--shadow-1); }
.activity-pills .pill.active{
  background:#198754; color:#fff; border-color:#198754;
}
.activity-pills .pill-other{ width: 100%; }

/* ====== Pequeños ajustes responsivos ====== */
@media (max-width: 768px){
  article{ padding: var(--space-6); }
  .subcard{ padding: var(--space-3); }
  .subcard .container{ padding: var(--space-2); }
  .principal-mercado-hospedaje{ padding: var(--space-4); }
}


/* MEJORAS EN EL SCROLL DEL MOUSE PARA QUE NO SE PEQUE MUCHO AL BAJAR */

/* 1) Evitar parallax pesado en el fondo (muy común en jank) */
body,
.bg-fixed,        /* ajuste si su contenedor del fondo tiene esta clase */
.hero,
.main-bg {
  background-attachment: scroll !important; /* quitar el 'fixed' */
}

/* 2) Reducir costo de repintado en tarjetas durante scroll */
.subcard,
.principal-mercado-hospedaje,
article {
  /* sombras más livianas */
  box-shadow: 0 3px 16px rgba(0,0,0,0.08) !important;
  /* aísla pintura para que no “ensucie” el resto al desplazarse */
  contain: paint; 
}

/* 3) Promover la capa que más se desplaza (el área de contenido) */
.main-content, #app, .container-page {   /* use la que corresponda a su wrapper */
  transform: translateZ(0);              /* capa propia de composición */
  will-change: transform;                /* (no abuse esta propiedad en muchos nodos) */
}

/* 4) Scroll suave: desactívelo si hay microcortes */
html { scroll-behavior: auto; }

/* 5) iOS (scroll nativo fluido si hay contenedores con overflow) */
.scroll-area, .modal-body {
  -webkit-overflow-scrolling: touch;
}

/* 6) “Pintar menos”: retrasar render de secciones offscreen (Chrome/Edge) */
.section, .subcard, .principal-mercado-hospedaje {
  content-visibility: auto;
  /* tamaño intrínseco para evitar saltos al entrar en viewport */
  contain-intrinsic-size: 600px 400px;
}

/* 7) Evite sombras gigantes en hover dentro de listas largas */
.activity-pills .pill:hover{
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

body {
  background-size: cover;
  background-position: center;
  /* nada de background-attachment: fixed; */
}


#DatosPersonales .alert {
  padding: 8px 12px;
  font-size: 13px;
  margin: 8px 0 0 0; /* sólo margen superior */
  border-radius: 6px;
}
#DatosPersonales .form-control.is-invalid {
  border-color: #dc3545;
}




/* ESTILO QUE ESTABA DIRECTO EN LA VISTA  */
.password-input {
  position: relative;
}

.toggle-password {
  position: absolute;
  right: 10px; /* Ajusta la posición del ícono según sea necesario */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.toggle-password .icon {
  font-size: 1.5em; /* Ajusta el tamaño del ícono según sea necesario */
}

.disabled {
opacity: 0.5;
pointer-events: none;
}

.icon-info {
cursor: pointer;
}

article {
background: #fff;
color: #707070;
border-radius: 10px;
padding: 40px;
font-size: 16px;
line-height: 32px;
box-shadow: 5px 5px 50px rgba(0,0,0,.10);
}

.custom-tooltip {
font-weight: normal;
color: #333;
text-decoration: none;
position: relative;
}


.custom-tooltip:hover .tooltip-box {
display: inline-block;
}

.tooltip-box {
display: none;
position: absolute;
background: #ffc107;
line-height: 20px;
z-index: 500;
text-align: center;
color: #000000;
font-size: 14px;
padding: 1px 5px;
border-radius: 5px;
left: 0;
right: 0;
bottom: 20px;
}

.tooltip-box::after {
content: "";
display: block;
border-top: 7px solid #ffc107;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
bottom: -7px;
left: calc(50% - 7px);
}

.campos-vacios {
  border-color: red;
}

.badge-error {
background-color: #b94a48;
}

#emailAsterisk {
      font-size: 20px;
}

.custom-checkbox {
  transform: scale(2); /* Ajusta el tamaño del checkbox */
}











.campos-vacios { border-color:#d9534f !important; box-shadow:0 0 0 0.2rem rgba(217,83,79,.15); }
.field-error {
  color: #d9534f;
  font-size: 1.25rem;
  position: absolute;
  margin-top: 2px;
}

.hidden { display:none !important; }