/* =====================================================================
   COOEBAN — Servicios en Línea | Devolución Ahorro Navideño
   Versión CLARA con colores institucionales (azul + verde)
   Colores tomados de www.cooeban.com.co y del logo oficial
   ===================================================================== */

:root {
  /* Marca */
  --azul:#001c71;          /* barra superior y menú del sitio */
  --azul-logo:#152660;     /* azul del logo */
  --azul-tit:#003366;      /* títulos del sitio */
  --verde:#4ea929;         /* verde del logo */
  --verde-osc:#3a8a1b;     /* verde para texto sobre blanco (legible) */
  --verde-suave:#eef7ea;
  --azul-suave:#eef2fb;

  /* Interfaz */
  --texto:#33415c;
  --muted:#6b7a99;
  --linea:#e3e8f1;
  --card:#ffffff;
  --fondo:#f3f6fb;
  --success:#3a8a1b;
  --danger:#dc2626;
  --radius:12px; --radius-sm:7px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

body {
  font-family:'Barlow',sans-serif;
  color:var(--texto);
  min-height:100vh;
  background:
    radial-gradient(1200px 700px at 10% 15%, rgba(0,28,113,.07) 0%, transparent 65%),
    radial-gradient(800px 500px at 90% 85%, rgba(78,169,41,.08) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23001c71' fill-opacity='0.035'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    var(--fondo);
}

/* ---------- Estructura ---------- */
.page-wrapper { max-width:900px; margin:0 auto; padding:2rem 1.5rem 4rem; }

.inst-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem; background:#fff; border:1px solid var(--linea);
  border-top:4px solid var(--azul); border-radius:16px; margin-bottom:2rem;
  box-shadow:0 6px 20px rgba(0,28,113,.06);
}
.inst-brand { display:flex; align-items:center; gap:1rem; }
.inst-logo-img { height:50px; width:auto; max-width:220px; object-fit:contain; }
.inst-badge {
  font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600;
  background:var(--verde-suave); border:1px solid rgba(78,169,41,.35);
  color:var(--verde-osc); padding:.35rem .8rem; border-radius:20px;
}

.form-card {
  background:var(--card); border:1px solid var(--linea); border-radius:16px;
  overflow:hidden; box-shadow:0 20px 50px rgba(0,28,113,.08);
}

/* ---------- Banner ---------- */
.product-banner {
  background:linear-gradient(135deg,#f6f8fd 0%,#e7edf9 100%);
  border-bottom:3px solid var(--verde); padding:1.75rem 2rem;
  position:relative; overflow:hidden;
}
.product-banner::before {
  content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; background:radial-gradient(circle, rgba(78,169,41,.18) 0%, transparent 70%);
}
.product-tag {
  display:inline-block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  background:#fff; border:1px solid rgba(0,28,113,.18);
  color:var(--azul); padding:.3rem .75rem; border-radius:20px; margin-bottom:.75rem;
}
.product-name {
  font-family:'Barlow Condensed',sans-serif; font-size:2.2rem; font-weight:800;
  letter-spacing:.04em; color:var(--azul); line-height:1.1; margin-bottom:.75rem;
}
.product-name span { color:var(--verde); }
.product-desc { font-size:.88rem; color:var(--texto); line-height:1.6; max-width:620px; }
.product-desc strong { color:var(--azul-tit); }

/* ---------- Secciones ---------- */
.form-section { padding:1.75rem 2rem; border-bottom:1px solid var(--linea); }
.form-section:last-of-type { border-bottom:none; }
.section-head { display:flex; align-items:center; gap:.65rem; margin-bottom:1.5rem; }
.section-icon {
  width:36px; height:36px; border-radius:8px; background:var(--azul-suave);
  display:flex; align-items:center; justify-content:center; color:var(--azul);
  font-size:1rem; flex-shrink:0;
}
.section-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--azul-tit);
}
.section-note { font-size:.75rem; color:var(--muted); margin-top:.1rem; }

/* ---------- Campos ---------- */
.fields-grid { display:grid; gap:1.1rem; }
.fields-grid.col2 { grid-template-columns:1fr 1fr; }
.fields-grid.col3 { grid-template-columns:1fr 1fr 1fr; }
.field-group { display:flex; flex-direction:column; gap:.35rem; }
.field-label {
  font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); display:flex; align-items:center; gap:.35rem;
}
.field-label .req { color:var(--verde-osc); font-size:.9em; }
.field-ctrl {
  background:#fff; border:1px solid #d5dbe7; border-radius:var(--radius-sm);
  color:var(--azul-tit); padding:.72rem 1rem; font-family:'Barlow',sans-serif;
  font-size:.93rem; width:100%; transition:border-color .2s, box-shadow .2s, background .2s;
}
.field-ctrl:focus { outline:none; border-color:var(--azul); box-shadow:0 0 0 3px rgba(0,28,113,.12); background:#fbfcff; }
.field-ctrl::placeholder { color:#a6b0c4; }
.field-ctrl.error { border-color:var(--danger); box-shadow:0 0 0 3px rgba(220,38,38,.10); }
.field-ctrl.valid { border-color:rgba(78,169,41,.7); }
select.field-ctrl option { background:#fff; color:var(--azul-tit); }
.field-error { font-size:.75rem; color:var(--danger); display:none; align-items:center; gap:.25rem; }
.field-error.show { display:flex; }

/* ---------- Opciones de destino ---------- */
.opciones-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.opcion-card { position:relative; cursor:pointer; display:block; }
.opcion-card input { position:absolute; opacity:0; pointer-events:none; }
.opcion-body {
  height:100%; display:flex; flex-direction:column; gap:.6rem;
  padding:1.25rem 1.1rem 1.1rem; border-radius:var(--radius);
  background:#fff; border:1.5px solid #dfe4ee;
  transition:border-color .2s, background .2s, transform .15s, box-shadow .2s;
}
.opcion-card:hover .opcion-body { border-color:rgba(0,28,113,.35); transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,28,113,.07); }
.opcion-num {
  font-family:'Barlow Condensed',sans-serif; font-size:.7rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.opcion-icon {
  width:44px; height:44px; border-radius:10px; background:var(--azul-suave);
  color:var(--azul); display:flex; align-items:center; justify-content:center; font-size:1.3rem;
  transition:background .2s, color .2s;
}
.opcion-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700;
  color:var(--azul-tit); line-height:1.2;
}
.opcion-desc { font-size:.8rem; color:var(--muted); line-height:1.5; }
.opcion-check {
  position:absolute; top:.85rem; right:.85rem; width:22px; height:22px; border-radius:50%;
  border:1.5px solid #c7cfdd; display:flex; align-items:center; justify-content:center;
  color:transparent; font-size:.8rem; transition:all .2s;
}
.opcion-card input:checked + .opcion-body {
  border-color:var(--verde); background:var(--verde-suave);
  box-shadow:0 0 0 3px rgba(78,169,41,.15), 0 10px 26px rgba(0,28,113,.07);
}
.opcion-card input:checked + .opcion-body .opcion-icon { background:var(--verde); color:#fff; }
.opcion-card input:checked + .opcion-body .opcion-check { background:var(--verde); border-color:var(--verde); color:#fff; }
.opcion-card input:focus-visible + .opcion-body { outline:2px solid var(--azul); outline-offset:2px; }
.opciones-grid.error .opcion-body { border-color:rgba(220,38,38,.5); }

/* ---------- Variante de 2 opciones (renovación) ---------- */
.opciones-grid.col2 { grid-template-columns:1fr 1fr; }
.opcion-card.no-sel input:checked + .opcion-body { border-color:var(--azul); background:var(--azul-suave); box-shadow:0 0 0 3px rgba(0,28,113,.12), 0 10px 26px rgba(0,28,113,.07); }
.opcion-card.no-sel input:checked + .opcion-body .opcion-icon,
.opcion-card.no-sel input:checked + .opcion-body .opcion-check { background:var(--azul); border-color:var(--azul); color:#fff; }

/* ---------- Paneles condicionales ---------- */
.cond-panel {
  display:none; margin-top:1.1rem; padding:1.25rem 1.35rem;
  background:#fbfcfe; border:1px solid var(--linea); border-left:4px solid var(--verde);
  border-radius:var(--radius); animation:aparecer .25s ease;
}
.cond-panel.show { display:block; }
.cond-title {
  font-family:'Barlow Condensed',sans-serif; font-size:1rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--azul-tit); display:flex; align-items:center; gap:.45rem; margin-bottom:1rem;
}
.cond-title i { color:var(--verde); }
@keyframes aparecer { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.field-help { font-size:.75rem; color:var(--muted); line-height:1.45; }

/* Campo con prefijo $ */
.input-prefix { position:relative; }
.input-prefix > span {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  font-weight:700; color:var(--azul); pointer-events:none;
}
.input-prefix .field-ctrl { padding-left:2rem; font-weight:600; font-size:1.05rem; letter-spacing:.02em; }

/* Leyenda informativa */
.info-note {
  display:flex; gap:.7rem; align-items:flex-start; margin-top:1rem;
  background:var(--azul-suave); border:1px solid rgba(0,28,113,.12);
  border-radius:var(--radius-sm); padding:.85rem 1rem;
  font-size:.8rem; line-height:1.55; color:var(--azul-tit);
}
.info-note i { color:var(--azul); font-size:1rem; margin-top:.05rem; flex-shrink:0; }

/* Selector tipo de cuenta (pastillas) */
.pill-group { display:flex; gap:.6rem; flex-wrap:wrap; }
.pill-opt { position:relative; cursor:pointer; }
.pill-opt input { position:absolute; opacity:0; pointer-events:none; }
.pill-opt span {
  display:inline-flex; align-items:center; gap:.4rem; padding:.62rem 1.2rem;
  border:1.5px solid #d5dbe7; border-radius:30px; background:#fff;
  font-size:.9rem; font-weight:600; color:var(--azul-tit); transition:all .2s;
}
.pill-opt span i { color:#c7cfdd; transition:color .2s; }
.pill-opt input:checked + span { border-color:var(--verde); background:var(--verde-suave); color:var(--verde-osc); }
.pill-opt input:checked + span i { color:var(--verde); }
.pill-opt input:focus-visible + span { outline:2px solid var(--azul); outline-offset:2px; }
.pill-group.error .pill-opt span { border-color:rgba(220,38,38,.5); }

/* ---------- Política ---------- */
.politica-wrap {
  background:var(--azul-suave); border:1px solid rgba(0,28,113,.12);
  border-radius:10px; padding:1.25rem 1.5rem; display:flex; flex-direction:column; gap:1rem;
}
.check-row { display:flex; align-items:flex-start; gap:.85rem; }
.check-input { width:20px; height:20px; min-width:20px; margin-top:2px; accent-color:var(--verde); cursor:pointer; border-radius:4px; }
.check-label { font-size:.88rem; color:var(--texto); line-height:1.55; cursor:pointer; }
.check-label a { color:var(--azul); text-decoration:underline; font-weight:600; }
.check-label a:hover { color:var(--verde-osc); }
.check-error { font-size:.78rem; color:var(--danger); display:none; align-items:center; gap:.3rem; padding-left:29px; }
.check-error.show { display:flex; }
.recaptcha-v3-note { font-size:.75rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.recaptcha-v3-note a { color:var(--azul); text-decoration:none; }
.recaptcha-v3-note a:hover { color:var(--verde-osc); }
.grecaptcha-badge { visibility:hidden; }

/* ---------- Pie y botones ---------- */
.form-footer {
  padding:1.5rem 2rem 2rem; border-top:1px solid var(--linea); background:#f8f9fc;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.footer-note { font-size:.78rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.btn-submit {
  background:linear-gradient(135deg,var(--verde) 0%,var(--verde-osc) 100%); color:#fff;
  border:none; border-radius:9px; padding:.85rem 2.5rem;
  font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:800; letter-spacing:.06em;
  cursor:pointer; display:inline-flex; align-items:center; gap:.5rem;
  box-shadow:0 4px 18px rgba(78,169,41,.30);
  transition:opacity .2s, transform .15s, box-shadow .2s;
}
.btn-submit:hover { opacity:.95; transform:translateY(-2px); box-shadow:0 8px 26px rgba(78,169,41,.38); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-consulta {
  background:transparent; border:1.5px solid var(--azul); color:var(--azul);
  border-radius:9px; padding:.75rem 1.75rem; font-family:'Barlow Condensed',sans-serif;
  font-size:1.1rem; font-weight:700; text-decoration:none; display:inline-flex;
  align-items:center; gap:.5rem; transition:.2s; cursor:pointer;
}
.btn-consulta:hover { background:var(--azul); color:#fff; }

/* ---------- Errores globales ---------- */
.global-errors {
  display:none; background:#fef2f2; border:1px solid #fecaca;
  border-radius:var(--radius-sm); padding:1rem 1.25rem; margin:1.25rem 2rem 0;
}
.global-errors.show { display:block; }
.global-errors ul { list-style:none; display:flex; flex-direction:column; gap:.3rem; }
.global-errors li { font-size:.83rem; color:#b91c1c; display:flex; align-items:flex-start; gap:.4rem; }
.global-errors li::before { content:"•"; color:var(--danger); flex-shrink:0; }

/* ---------- Aviso campaña cerrada ---------- */
.closed-box { padding:2.5rem 2rem; text-align:center; }
.closed-box .success-icon { background:var(--azul-suave); color:var(--azul); }

/* ---------- Modal de éxito ---------- */
.overlay {
  position:fixed; inset:0; background:rgba(0,28,113,.35); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; z-index:999; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.overlay.show { opacity:1; pointer-events:all; }
.success-card {
  background:#fff; border-top:4px solid var(--verde); border-radius:16px;
  padding:2.5rem 2rem; max-width:480px; width:100%; text-align:center;
  box-shadow:0 30px 70px rgba(0,28,113,.25);
  transform:translateY(20px); transition:transform .3s;
}
.overlay.show .success-card { transform:translateY(0); }
.success-icon {
  width:72px; height:72px; border-radius:50%; background:var(--verde-suave);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem;
  font-size:2.2rem; color:var(--verde);
}
.success-title { font-family:'Barlow Condensed',sans-serif; font-size:1.8rem; font-weight:800; color:var(--azul); margin-bottom:.5rem; }
.success-desc { font-size:.88rem; color:var(--muted); line-height:1.6; }
.success-desc strong { color:var(--verde-osc); }
.success-radicado { background:var(--azul-suave); border:1px solid rgba(0,28,113,.12); border-radius:8px; padding:.85rem 1.25rem; margin:1.25rem 0; }
.radicado-lbl { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); }
.radicado-val { font-family:'Barlow Condensed',sans-serif; font-size:1.8rem; font-weight:800; color:var(--azul); margin-top:.2rem; letter-spacing:.06em; }
.btn-close-modal {
  background:var(--azul); color:#fff; border:none; border-radius:8px; padding:.7rem 2rem;
  font-weight:700; cursor:pointer; font-family:'Barlow Condensed',sans-serif; font-size:1rem; margin-top:.5rem;
}
.btn-close-modal:hover { background:var(--azul-logo); }

.spinner {
  display:inline-block; width:18px; height:18px; border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite;
}
@keyframes spin { 100% { transform:rotate(360deg); } }

/* honeypot anti-bots */
.hp-field { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- Responsive ---------- */
@media (max-width:760px) {
  .opciones-grid, .opciones-grid.col2 { grid-template-columns:1fr; }
  .cond-panel { padding:1rem; }
  .opcion-body { flex-direction:row; align-items:center; flex-wrap:wrap; padding-right:3rem; }
  .opcion-body .opcion-num { width:100%; }
  .opcion-text { flex:1; min-width:0; }
}
@media (max-width:640px) {
  .fields-grid.col2, .fields-grid.col3 { grid-template-columns:1fr; }
  .page-wrapper { padding:1rem 1rem 3rem; }
  .inst-header { flex-direction:column; align-items:flex-start; gap:.75rem; padding:1rem 1.25rem; }
  .form-section { padding:1.25rem; }
  .product-banner { padding:1.25rem; }
  .product-name { font-size:1.7rem; }
  .form-footer { flex-direction:column; }
  .btn-submit { width:100%; justify-content:center; }
  .global-errors { margin:1rem 1.25rem 0; }
}