:root {
  --body-font: 'Open Sans', sans-serif;
  --body-font-size: 16px;
  --accent-text-color: #ffffff;
  --accent-base-layer-1: #001ED4;
  --accent-base-layer-2: #5F74E5;
  --accent-border-gray: 1px solid #d6d6d6;
  --accent-border-blue: 1px solid #001EAD;
  --font-text-color: #1e1e21;
  --neutral-layer-1: #fbfbfb;
  --neutral-layer-2: #f3f3f3;
  --neutral-layer-3: #ebebeb;
  --neutral-layer-4: #e0e0e0;
  --body-font-color: #1e1e21;
  --start-background-color: #f1f3f4;
  --container-background-color: #fff;
  --link-color-text: #001EAD;
  --link-color-line: 2px solid #001EAD;
}
@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.floating-alert {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1050;
  min-width: 250px;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
}

.floating-alert.show {
  animation: slideFadeIn 0.5s ease forwards;
  pointer-events: auto;
   
}
/* Navbar */
.navbar {
  z-index: 1030;
  transition: all 0.3s ease;
}

.navbar .nav-link {
  font-weight: 500;
  color: var(--font-text-color);
  transition: color 0.2s ease-in-out;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--accent-base-layer-1);
}

/* Contenido */
#contenido {
  padding: 1rem;
  min-height: 80vh;
  overflow-x: hidden;
}

/* Texto adaptativo */
.card-text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
  font-size: clamp(12px, 2vw, 16px);
}

/* Responsividad */
@media (max-width: 768px) {
  .navbar-brand img {
    width: 55px;
  }
  .navbar .dropdown-toggle .card-text {
    max-width: 80px;
    font-size: 14px;
  }
}

/* Popup Styles */
.Popup-Section {
    border-radius: 1em;
    height: 94vh;
    max-height: auto	;
    max-width: 600px;
    overflow: auto;
    width: 94vw;
    background: var(--container-background-color);
    box-shadow: 0 9.39px 15px #00000026;
    padding: 20px;
}

.Popup-Dialog {
    z-index: 1000;
    backdrop-filter: blur(4px);
    background-color: #6666;
    left: 0;
    position: fixed;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: none;
    unicode-bidi: isolate;
    align-items: center;
    justify-content: center;
}

.Popup-Close {
    display: flex;
    opacity: 0.5;
    justify-content: right;
    cursor: pointer;
    -webkit-user-select: none; 
    user-select: none;
    white-space: nowrap;
}

.Popup-Close:hover {
    opacity: unset;
    transform: translateY(-1px);
}
.texto
{
  color: var(--body-font-color);
	text-transform: none;
	transition: all 0.2s ease-in-out;
	line-height:150%;
}
.titulo
{
  font-size: 28px;
  color: var(--body-font-color);
  line-height:150%;
}

/* Scrollbar minimalista */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* --- Tema oscuro --- */
@media (prefers-color-scheme: dark) {
  :root {
    --accent-base-layer-1: #46A7F4;
    --accent-base-layer-2: #94BAE1;
    --font-text-color: #ffffff;
    --neutral-layer-1: #272727;
    --neutral-layer-2: #212529;
    --neutral-layer-3: #0b0b0b;
    --neutral-layer-4: #000000;
    --body-font-color: #ffffff;
    --container-background-color: #1e1e21;
    --link-color-text: #479ef5;
    --link-color-line: 2px solid #479ef5;
  }

  .navbar,
  .navbar-collapse {
    background-color: var(--neutral-layer-2) !important;
  }

  .nav-link {
    color: #ddd !important;
  }

  .nav-link.active {
    color: var(--accent-base-layer-1) !important;
  }
  	.texto {
	color: #FFFFFF;
	transition: all 0.2s ease-in-out;
	}
	.titulo
	{
		color: #FFFFFF;
		transition: all 0.2s ease-in-out;
		}
}
input[type=text],input[type=tel],input[type=email],input[type=password],input[type=search]
{	
	font-family: var(--body-font);
	font-size: var(--body-font-size);
	color: var(--color-texto);
	text-transform: none;
	padding: 8px;
	overflow:auto;
	-webkit-appearance: none;
	-moz-appearance: textfield;
	background-color: var(--neutral-layer-2);
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom: var(--accent-border-gray,var(--accent-border-gray));
	height: 40px;
	outline: 0;
	transition-duration: 150ms;
	transition-property: border-color;
	width: 100%;
	display: block;
	line-height: normal;
	margin: 0;
  margin-bottom: 0px;
}
  
input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus,input[type=password]:focus,input[type=search]:focus
{
	border-bottom: var(--accent-border-blue,var(--accent-border-blue));
	background-color: var(--neutral-layer-3);
	outline: none;
}
button{
    background-color: #333dab;
    border-radius: 10px;
}

.center-div{
	display: flex;
    align-items: center;
    margin: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
}
.floating-container {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 1060; /* encima de casi todo */
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-end;
}


.float-btn {
width: 75px;
height: 75px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(0,0,0,.18);
transition: transform .12s ease, box-shadow .12s ease;
cursor: pointer;
border: none;
}


.float-btn:active { transform: translateY(1px); }
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }


/* Badges pequeños (por ejemplo: mensajes nuevos) */
.float-badge {
position: absolute;
top: 6px;
right: 6px;
font-size: .65rem;
padding: .18rem .36rem;
border-radius: 999px;
}


/* Etiqueta expandible (texto) */
.float-label {
background: rgba(0,0,0,.75);
color: #fff;
padding: .38rem .6rem;
border-radius: 999px;
font-size: .9rem;
margin-right: .5rem;
white-space: nowrap;
transform-origin: right center;
opacity: 0;
transform: scale(.9) translateX(6px);
transition: opacity .12s ease, transform .12s ease;
pointer-events: none;
}


.float-row { position: relative; display: flex; align-items: center; }
.float-row:hover .float-label { opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; }


/* Colores oficiales aproximados */
.whatsapp { background: #25D366; color: #fff; }
.facebook { background: #1877F2; color: #fff; }


/* Peek responsive: reduce padding / tamaño en pantallas pequeñas */
@media (max-width: 420px) {
.float-label { display: none; }
.float-btn { width: 48px; height: 48px; }
}
 .container{width:100%;max-width:760px}
    .card{background:linear-gradient(180deg,var(--card),#071428);border-radius:12px;padding:20px;box-shadow:0 8px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
    h1{margin:0 0 8px;font-size:20px}
    p.lead{margin:0 0 18px;color:var(--muted)}
    .options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .option{background:var(--glass);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;border:1px solid transparent;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,border-color .12s}
    .option:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(2,6,23,0.6)}
    .option input{appearance:none;opacity:0;position:absolute}
    .option .icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;background:rgba(255,255,255,0.04)}
    .option .meta{flex:1}
    .option .meta b{display:block;font-size:15px}
    .option .meta span{display:block;font-size:13px;color:var(--muted);margin-top:4px}
    .option .badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:13px}
    /* selected state */
    .option.selected{border-color:rgba(110,231,183,0.28);box-shadow:0 10px 30px rgba(14,52,38,0.18)}
    .option.selected .icon{background:linear-gradient(180deg,var(--accent),#34d399);color:#022617}
.option:has(input:checked) {
  border-color: #4f46e5;
  
}

.option:has(input:checked) .icon {
  
  color: #fff;
}
    /* footer */
    
    .help{color:var(--muted);font-size:13px}
    

    /* responsive */
    @media (max-width:520px){.options{grid-template-columns:1fr}}