/* ============================================================
   ACOOP — Casa de Cambio · Design tokens & helpers
   Used by ToolBar.vue (header + ticker), Web.vue (landing),
   FootBar.vue (footer). Light/dark via [data-theme] on <html>.
   These variables are namespaced (--acoop-*) so they never
   collide with the legacy --altoken-* theme used by the rest
   of the public pages.
   ============================================================ */

:root {
  --bg:#ffffff; --surface:#ffffff; --surface-2:#F2F8F4; --elevated:#ffffff;
  --text:#0A1C13; --text-soft:#5C6F65; --line:#E4EDE7;
  --green:#12A150; --green-deep:#0B8A42; --green-bright:#23B24E; --green-soft:rgba(18,161,80,.10);
  --red:#E11D1D; --red-deep:#C21616; --red-soft:rgba(225,29,29,.09);
  --ink:#07140E; --on-ink:#E9F4ED; --on-ink-soft:#9CB7A7;
  --nav-bg:rgba(255,255,255,.82);
  --shadow:0 30px 70px -34px rgba(7,28,18,.45);
  --shadow-sm:0 12px 30px -18px rgba(7,28,18,.30);
  --op:var(--green); --op-deep:var(--green-deep); --op-soft:var(--green-soft);
  --font-sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-display:'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
}

[data-theme="dark"] {
  --bg:#06120C; --surface:#0D2418; --surface-2:#0B1F15; --elevated:#10301E;
  --text:#E9F4ED; --text-soft:#9CB7A7; --line:rgba(255,255,255,.10);
  --green-soft:rgba(35,178,78,.16); --red-soft:rgba(225,29,29,.18);
  --nav-bg:rgba(6,18,12,.80);
  --shadow:0 30px 70px -30px rgba(0,0,0,.7);
  --shadow-sm:0 12px 30px -16px rgba(0,0,0,.55);
}

/* operation accent: comprar = verde, vender = rojo */
[data-op="comprar"]{ --op:var(--green); --op-deep:var(--green-deep); --op-soft:var(--green-soft); }
[data-op="vender"] { --op:var(--red);   --op-deep:var(--red-deep);   --op-soft:var(--red-soft); }

@keyframes acoop-slide { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes acoop-ping  { 0% { box-shadow:0 0 0 0 var(--op-soft) } 100% { box-shadow:0 0 0 9px rgba(0,0,0,0) } }
@keyframes acoop-spin  { to { transform: rotate(360deg) } }

/* ============================================================
   COMPAT — neutralize legacy adaptation.css `!important` element
   rules INSIDE the ACOOP surfaces only. This file loads LAST.
   adaptation.css forces:
     body { font-family:'Rubik'!important }
     input,select { height:48px!important; font-size:1rem!important;
                    font-weight:300!important; border-radius:8px!important;
                    border-color:gray!important }
     input:focus/:hover { border-color:#241F60!important }
     h1..h6 { font-size:…!important }   p { font-size:.875rem!important }
   so our overrides must also use `!important` with ≥ specificity.
   ============================================================ */

/* base font + sane line-height (body line-height is 100%) */
.acoop-landing, .acoop-header, .acoop-footer, .acoop-auth { font-family: var(--font-sans) !important; line-height: 1.5; }

/* display font (Space Grotesk) on headings / numbers */
.acoop-landing .acoop-h1,
.acoop-landing .acoop-h2,
.acoop-landing .acoop-cta-copy h2,
.acoop-landing .acoop-stat-num,
.acoop-landing .acoop-step-num,
.acoop-landing .acoop-step h4,
.acoop-landing .acoop-otc-feat h4,
.acoop-landing .acoop-news-body h5,
.acoop-landing .acoop-calc-head strong,
.acoop-footer .acoop-footer-col h6,
.acoop-auth .acoop-auth-h { font-family: var(--font-display) !important; }

/* headings — override adaptation h1..h6 !important font-size */
.acoop-landing .acoop-h1 { font-size: clamp(34px,4.4vw,55px) !important; font-weight: 700 !important; line-height: 1.04 !important; }
.acoop-landing .acoop-h2,
.acoop-landing .acoop-cta-copy h2 { font-size: clamp(26px,3vw,38px) !important; font-weight: 700 !important; line-height: 1.1 !important; }
.acoop-landing .acoop-step h4 { font-size: 19px !important; font-weight: 600 !important; }
.acoop-landing .acoop-otc-feat h4 { font-size: 16px !important; font-weight: 600 !important; }
.acoop-landing .acoop-news-body h5 { font-size: 15px !important; font-weight: 700 !important; }
.acoop-footer .acoop-footer-col h6 { font-size: 14px !important; font-weight: 600 !important; }

/* paragraphs — override adaptation p !important (.875rem) */
.acoop-landing .acoop-lead { font-size: 18px !important; }
.acoop-landing .acoop-step p { font-size: 15px !important; }
.acoop-landing .acoop-testi p { font-size: 15px !important; }
.acoop-landing .acoop-otc-feat p { font-size: 14px !important; }
.acoop-landing .acoop-otc-sub { font-size: 16px !important; }
.acoop-landing .acoop-cta-copy p { font-size: 17px !important; }
.acoop-landing .acoop-about-text, .acoop-landing .acoop-about-text p { font-size: 15px !important; }
.acoop-footer .acoop-footer-desc { font-size: 14px !important; }
.acoop-footer .acoop-footer-legal-min { font-size: 12.5px !important; }
.acoop-footer .acoop-footer-support { font-size: 14px !important; }
.acoop-footer .acoop-footer-disclaimer { font-size: 11.5px !important; }
.acoop-footer .acoop-footer-bottom { font-size: 12.5px !important; }

/* ---- calculator borderless numeric input ---- */
.acoop-landing .acoop-input {
  height: auto !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important;
  font-family: var(--font-display) !important; font-size: 27px !important; font-weight: 600 !important;
  line-height: 1.2 !important; padding: 0 !important;
}
.acoop-landing .acoop-input:focus, .acoop-landing .acoop-input:hover { border: 0 !important; box-shadow: none !important; }
.acoop-landing .acoop-input::placeholder { color: #9fb0a5 !important; font-weight: 600 !important; }

/* ---- OTC amount input + select ---- */
.acoop-landing .acoop-otc-input input {
  height: auto !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: #0A1C13 !important; font-size: 17px !important; font-weight: 700 !important; font-family: var(--font-sans) !important;
}
.acoop-landing .acoop-otc-input input:focus, .acoop-landing .acoop-otc-input input:hover { border: 0 !important; box-shadow: none !important; }
.acoop-landing .acoop-otc-select {
  height: auto !important; border: 0 !important; border-radius: 9px !important; background: var(--surface-2) !important;
  color: #0A1C13 !important; font-size: 14px !important; font-weight: 700 !important; font-family: var(--font-sans) !important;
}
.acoop-landing .acoop-otc-select:focus, .acoop-landing .acoop-otc-select:hover { border: 0 !important; box-shadow: none !important; }

/* ---- form fields used by auth + recovery + status views ---- */
.acoop-fld {
  height: 48px !important; border: 1.5px solid var(--line) !important; border-radius: 12px !important;
  background: var(--surface) !important; color: var(--text) !important;
  font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 500 !important;
  padding: 0 14px !important; line-height: normal !important;
}
.acoop-fld:focus, .acoop-fld:hover { border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--green-soft) !important; }
.acoop-fld::placeholder { color: #9fb0a5 !important; font-weight: 500 !important; }
.acoop-auth .acoop-auth-h { font-size: clamp(24px,3vw,30px) !important; font-weight: 700 !important; }
.acoop-auth .acoop-auth-sub { font-size: 14px !important; }
.acoop-auth label { display: block !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; padding: 0 !important; color: var(--text) !important; }
.acoop-auth p { font-size: 14px !important; }
.acoop-auth .acoop-auth-brand-inner h3 { font-size: 22px !important; font-weight: 700 !important; font-family: var(--font-display) !important; }

/* ===== Auth (login / registro) layout — shared by both views ===== */
.acoop-auth { max-width: 1060px; margin: 40px auto 60px; padding: 0 24px; font-family: var(--font-sans); color: var(--text); }
.acoop-auth-card { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; }
.acoop-auth-form { padding: 40px clamp(24px, 4vw, 52px); }
.acoop-auth-h { margin: 0; }
.acoop-auth-sub { color: var(--text-soft); margin: 8px 0 24px; }
.acoop-auth-link { color: var(--green-deep); font-weight: 700; text-decoration: none; }
.acoop-auth-link:hover { text-decoration: underline; }
.acoop-auth-field { margin-bottom: 16px; }
.acoop-fld { width: 100%; display: block; }
.acoop-auth-pass { position: relative; }
.acoop-auth-pass .acoop-fld { padding-right: 44px !important; }
.acoop-auth-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: transparent; color: var(--text-soft); cursor: pointer; border-radius: 8px; }
.acoop-auth-eye:hover { color: var(--green-deep); }
.acoop-auth-err { display: block; color: var(--red-deep); font-size: 12.5px; margin-top: 6px; }
.acoop-auth-errors ul { list-style: none; margin: 0 0 14px; padding: 0; }
.acoop-auth-errors li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--red-deep); padding: 3px 0; }
.acoop-auth-errors li i { margin-top: 2px; }
.acoop-auth-forgot { text-align: right; margin: 0 0 16px; }
.acoop-auth-forgot a { color: var(--green-deep); text-decoration: none; font-size: 13px; }
.acoop-auth-forgot a:hover { text-decoration: underline; }
.acoop-auth-submit { width: 100%; background: var(--green); color: #fff; font-weight: 700; font-size: 16px; padding: 13px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font-sans); transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.acoop-auth-submit:hover:not(:disabled) { background: var(--green-deep); }
.acoop-auth-submit:disabled { opacity: .65; cursor: default; }
.acoop-auth-loading { display: inline-flex; align-items: center; gap: 8px; }
.acoop-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: acoop-spin .7s linear infinite; display: inline-block; }
.acoop-auth-divider { display: flex; align-items: center; gap: 12px; color: var(--text-soft); font-size: 13px; margin: 22px 0 16px; }
.acoop-auth-divider span { white-space: nowrap; }
.acoop-auth-divider::before, .acoop-auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.acoop-auth .google-btn { display: flex; justify-content: center; }
.acoop-auth .acoop-auth-check { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 16px; }
.acoop-auth .acoop-auth-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--green); flex: none; }
.acoop-auth .acoop-auth-check label { display: inline !important; font-size: 13px !important; font-weight: 400 !important; color: var(--text-soft) !important; margin: 0 !important; line-height: 1.5; }
.acoop-auth .acoop-auth-check a { color: var(--green-deep); font-weight: 600; }

/* brand panel */
.acoop-auth-brand { position: relative; background: var(--ink); color: var(--on-ink); display: flex; align-items: center; overflow: hidden; }
.acoop-auth-brand-glow { position: absolute; inset: 0; background: radial-gradient(420px 240px at 100% 0%, rgba(35,178,78,.34), transparent 60%), radial-gradient(360px 220px at 0% 100%, rgba(225,29,29,.22), transparent 60%); }
.acoop-auth-brand-inner { position: relative; padding: 44px; }
.acoop-auth-logo { height: 46px; width: auto; margin-bottom: 22px; display: block; }
.acoop-auth-brand-inner h3 { line-height: 1.25; color: #fff; margin: 0 0 22px; }
.acoop-auth-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.acoop-auth-bullets li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--on-ink-soft); }

@media (max-width: 820px) {
  .acoop-auth-card { grid-template-columns: 1fr; }
  .acoop-auth-brand { display: none; }
}

/* ===== Generic ACOOP buttons + boxes (auxiliary public views) ===== */
.acoop-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--green); color: #fff; font-weight: 700; font-size: 15px; padding: 12px 22px; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; font-family: var(--font-sans); transition: background .15s; }
.acoop-btn-primary:hover:not(:disabled) { background: var(--green-deep); color: #fff; }
.acoop-btn-primary:disabled { opacity: .55; cursor: default; }
.acoop-btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); color: var(--text); font-weight: 600; font-size: 15px; padding: 11px 20px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; text-decoration: none; font-family: var(--font-sans); }
.acoop-btn-outline:hover { border-color: var(--green); color: var(--green-deep); }
.acoop-btn-wa { display: inline-flex; align-items: center; gap: 8px; background: var(--green); color: #fff !important; font-weight: 700; font-size: 15px; padding: 12px 20px; border: none; border-radius: 12px; cursor: pointer; text-decoration: none; transition: background .15s; }
.acoop-btn-wa:hover { background: var(--green-bright); }
.acoop-msg-box { background: var(--surface-2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--text-soft); line-height: 1.55; }

/* status / message page (MensajeRegistro) */
.acoop-status { max-width: 820px; margin: 48px auto 64px; padding: 0 24px; font-family: var(--font-sans); color: var(--text); }
.acoop-status-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: center; padding: clamp(28px,4vw,44px); }
.acoop-status-glow { position: absolute; inset: 0; background: radial-gradient(420px 240px at 100% 0%, var(--green-soft), transparent 60%); pointer-events: none; }
.acoop-status-body { position: relative; }
.acoop-status .acoop-status-h { font-family: var(--font-display) !important; font-size: clamp(26px,3vw,34px) !important; font-weight: 700 !important; margin: 0 0 12px !important; }
.acoop-status-desc { color: var(--text-soft); font-size: 15px; line-height: 1.6; }
.acoop-status-count { color: var(--green-deep); font-weight: 600; margin-top: 14px; }
.acoop-status-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.acoop-status-actions .acoop-fld { flex: 1; min-width: 200px; }
.acoop-status-img { position: relative; text-align: center; }
.acoop-status-img img { width: 100%; max-width: 260px; }
@media (max-width: 720px) { .acoop-status-card { grid-template-columns: 1fr; } .acoop-status-img { display: none; } }

/* 404 */
.acoop-404 { max-width: 1000px; margin: 40px auto 64px; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; font-family: var(--font-sans); color: var(--text); }
.acoop-404-img { text-align: center; }
.acoop-404-img img { width: 100%; max-width: 320px; }
.acoop-404-code { font-family: var(--font-display); font-size: clamp(48px,7vw,84px); font-weight: 700; line-height: 1; color: var(--green); }
.acoop-404-lead { color: var(--text-soft); font-size: 16px; line-height: 1.6; margin: 10px 0 22px; }
@media (max-width: 760px) { .acoop-404 { grid-template-columns: 1fr; text-align: center; } }

/* ===== Legal / content pages (Términos, Privacidad, KYC/AML, Cookies) =====
   Always light (content is hard-coded dark) so it stays readable regardless of theme. */
.acoop-legal { max-width: 880px; margin: 40px auto 64px; padding: 0 24px; font-family: var(--font-sans); color: #0A1C13; }
.acoop-legal-head { margin-bottom: 22px; }
.acoop-legal-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #0B8A42; }
.acoop-legal .acoop-legal-title { font-family: var(--font-display) !important; font-size: clamp(28px,4vw,40px) !important; font-weight: 700 !important; letter-spacing: -.02em; color: #0A1C13 !important; margin: 8px 0 0 !important; }
.acoop-legal-meta { color: #5C6F65; font-size: 13px; margin-top: 10px; }
.acoop-legal-card { background: #fff; border: 1px solid #E4EDE7; border-radius: 20px; box-shadow: 0 12px 30px -18px rgba(7,28,18,.30); padding: clamp(24px,4vw,40px); }

/* ===== Generic form page (LibroReclamaciones, FormularioDj) — ACOOP-skins all form controls ===== */
.acoop-formpage { max-width: 920px; margin: 40px auto 64px; padding: 0 24px; font-family: var(--font-sans); color: var(--text); }
.acoop-formpage--wide { max-width: 1160px; }
.acoop-formpage-head { text-align: center; margin-bottom: 4px; }
.acoop-formpage-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--green-deep); }
.acoop-formpage .acoop-formpage-title { font-family: var(--font-display) !important; font-size: clamp(24px,3.4vw,36px) !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--text) !important; margin: 8px 0 0 !important; }
.acoop-formpage-sub { color: var(--text-soft); font-size: 14px; margin-top: 8px; }
.acoop-form-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); padding: clamp(24px,4vw,40px); margin-top: 22px; }
.acoop-formpage h1, .acoop-formpage h2, .acoop-formpage h3, .acoop-formpage h4 { font-family: var(--font-display); }
.acoop-formpage h5, .acoop-formpage h6 { font-family: var(--font-display); color: var(--green-deep) !important; font-weight: 700 !important; }
.acoop-formpage .btn-yellow { background: var(--green) !important; color: #fff !important; border: none !important; }
.acoop-formpage .btn-yellow:hover { background: var(--green-deep) !important; }

.acoop-formpage input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]),
.acoop-formpage select,
.acoop-formpage textarea {
  height: auto !important; min-height: 46px; width: 100%;
  border: 1.5px solid var(--line) !important; border-radius: 12px !important;
  background: var(--surface) !important; color: var(--text) !important;
  font-family: var(--font-sans) !important; font-size: 15px !important; font-weight: 500 !important;
  padding: 11px 14px !important; line-height: 1.4 !important; box-shadow: none !important;
}
.acoop-formpage textarea { min-height: 110px !important; }
.acoop-formpage input:focus, .acoop-formpage select:focus, .acoop-formpage textarea:focus { border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--green-soft) !important; }
.acoop-formpage input::placeholder, .acoop-formpage textarea::placeholder { color: #9fb0a5 !important; }
.acoop-formpage label { font-weight: 600 !important; font-size: 13px !important; color: var(--text) !important; margin-bottom: 6px !important; }
.acoop-formpage input[type=checkbox], .acoop-formpage input[type=radio] { width: 18px !important; height: 18px !important; min-height: 0 !important; accent-color: var(--green); }
.acoop-formpage .acoop-form-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--green); color: #fff; font-weight: 700; font-size: 16px; padding: 13px 28px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--font-sans); transition: background .15s; }
.acoop-formpage .acoop-form-submit:hover:not(:disabled) { background: var(--green-deep); }
.acoop-formpage .acoop-form-submit:disabled { opacity: .6; cursor: default; }