/* ============================================================
   appht.css — Tema cromático para botones, textos y campos
   Inspirado en la promoción Happy Time (imagen de referencia)
   ============================================================ */

.ht-theme {
  --ht-primary: #9c1cb3;          /* Morado principal */
  --ht-primary-hover: #b728cc;   /* Morado más claro para hover */
  --ht-accent: #e0007a;          /* Fucsia intenso / acento */
  --ht-dark: #2e2e2e;           /* Texto principal */
  --ht-muted: #707070;          /* Texto secundario / placeholder */
  --ht-bg-input: #ffffff;       /* Fondo inputs */
  --ht-border: #cccccc;         /* Bordes neutros */
  --ht-focus: rgba(156, 28, 179, 0.25); /* halo morado */
  --ht-font: 'Helvetica Neue', Arial, sans-serif;
}

/* ===========================
   BACKGROUND PROMOCIÓN HAPPY TIME
   =========================== */

body.ht-theme {
  /* Capa base: radial gradient naranja */
  background: linear-gradient(162deg, #FFA533 10%, #FF7338 30%, #9B1695 80%);
  /*background: radial-gradient(circle at center,
    #ffef53 0%,
    #eb474a 100%*/
  /*  #e66036 0%,
    #f47b45 40%,
    #f9a66d 100%*/

  /* Degradado lineal encima para dar más profundidad */
  /*background-image: linear-gradient(162deg, #FFA533 10%, #FF7338 30%, #9B1695 80%);*/
    /*radial-gradient(circle at center,
      #ffef53 0%,
    #eb474a 100%
    /*#e66036 0%,
      #f47b45 40%,
      #f9a66d 100%
    );*/

    /*linear-gradient(180deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(0, 0, 0, 0.05) 100%
    );*/

  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

/* OPCIONAL: rayos suaves como en la imagen */
body.ht-theme::before {
  content: "";
  position: fixed;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0.08) 0deg,
    transparent 15deg,
    transparent 30deg,
    rgba(255, 255, 255, 0.08) 45deg,
    transparent 60deg
  );
  background-size: cover;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}



/* ===========================
   TEXTOS
   =========================== */
.ht-theme h1,
.ht-theme h2,
.ht-theme h3 {
  font-family: var(--ht-font);
  color: var(--ht-dark);
  letter-spacing: 0.3px;
}

.ht-theme h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--ht-primary);
}

.ht-theme h2 {
  font-size: 1.5rem;
  font-weight: 700;
}

.ht-theme p,
.ht-theme label,
.ht-theme small,
.ht-theme .muted {
  font-family: var(--ht-font);
  color: var(--ht-muted);
  font-size: 0.95rem;
}

.ht-theme a {
    color: #ffffff !important;
  /*color: var(--ht-primary);*/
  text-decoration: underline; 
  font-weight: 600;
}

.ht-theme a:hover {
    color: #ffffff !important;
  /*color: var(--ht-primary-hover);*/
  text-decoration: underline; 
}

.politica:link{
  color: #ffffff !important;
   text-decoration: underline !important;
  font-weight: 600;
}

.politica:hover{
  color: #ffffff !important;
  text-decoration: underline !important;
}


/* === Links personalizados === */
.link2 {
  color: #9B1695;
}



/* ===========================
   BOTONES
   =========================== */
.ht-theme .btn,
.ht-theme button.btn,
.ht-theme input[type="submit"].btn {
  background: linear-gradient(180deg, var(--ht-primary), var(--ht-accent));
  color: #fff;
  font-family: var(--ht-font);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 18px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.1s ease, filter 0.25s ease;
  box-shadow: 0 4px 10px rgba(156, 28, 179, 0.3);
  text-decoration: none;
}

.ht-theme .btn:hover {
  filter: brightness(1.08) saturate(1.2);
  transform: translateY(-1px);
  text-decoration: none;
}

.ht-theme .btn:active {
  transform: translateY(1px);
  text-decoration: none;
}

/* Botones secundarios (fantasma) */
.ht-theme .btn--ghost {
  background: linear-gradient(180deg, var(--ht-primary), var(--ht-accent));
  color: #ffffff;
  border: 2px solid var(--ht-primary);
  box-shadow: none;
  text-decoration: none;
}
.ht-theme .btn--ghost:hover {
  background: rgba(156, 28, 179, 0.08);
  text-decoration: none;
  color: #ffffff;
}

/* Botón acento (ej. amarillo / promo especial) */
.ht-theme .btn--accent {
  background: linear-gradient(90deg, #ffa500, #ffcc00);
  color: #2e2e2e;
  font-weight: 800;
  border: none;
  text-decoration: none;
}
.ht-theme .btn--accent:hover {
  filter: brightness(1.05);
  text-decoration: none;
}

/* ===========================
   CAMPOS DE TEXTO
   =========================== */
.ht-theme input[type="text"],
.ht-theme input[type="number"],
.ht-theme input[type="tel"],
.ht-theme input[type="email"],
.ht-theme .input,
.ht-theme .cedula-input {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  font-size: 1.1rem;
  font-family: var(--ht-font);
  border: 1.5px solid var(--ht-border);
  border-radius: 12px;
  background-color: var(--ht-bg-input);
  color: var(--ht-dark);
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ht-theme ::placeholder {
  color: var(--ht-muted);
}

.ht-theme input:focus,
.ht-theme .input:focus,
.ht-theme .cedula-input:focus {
  outline: none;
  border-color: var(--ht-primary);
  box-shadow: 0 0 0 4px var(--ht-focus);
}

/* Input grande estilo H1 (ej. cédula) */
.ht-theme .big-input {
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  text-align: center;
}

/* ===========================
   UTILIDADES
   =========================== */
.ht-theme .text-primary { color: var(--ht-primary); }
.ht-theme .text-accent { color: var(--ht-accent); }
.ht-theme .text-muted { color: var(--ht-muted); }
.ht-theme .align-center { text-align: center; }