/* Two Eyes · Visual Base v210
   Capa común de marca. CSS-only: no toca JS, localStorage, chats, rescates, saldo ni flujos. */
:root{
  /* Fondo oficial tomado de Crear cuenta */
  --twoeyes-bg-top:var(--te-bg-top);
  --twoeyes-bg-bottom:var(--te-bg-bottom);
  --twoeyes-outer-top:var(--te-surface-3);
  --twoeyes-outer-bottom:var(--te-bg-outer);

  /* Marca */
  --twoeyes-orange:#FE8A00;
  --twoeyes-orange-soft:#FEC45E;
  --twoeyes-orange-deep:#E77900;
  --twoeyes-pink:#FF7FA3;
  --twoeyes-pink-strong:#FF7FA3;
  --twoeyes-green:var(--te-success);
  --twoeyes-yellow:#F6C15D;
  --twoeyes-red:#FF5A5F;

  /* Texto */
  --twoeyes-text:var(--te-text);
  --twoeyes-subtext:#C8C1B6;
  --twoeyes-muted:#8E8792;
  --twoeyes-faint:#6F7684;
  --twoeyes-dark:var(--te-surface-3);

  /* Superficies */
  --twoeyes-line:rgba(var(--te-overlay-rgb), .08);
  --twoeyes-line-strong:rgba(var(--te-overlay-rgb), .12);
  --twoeyes-card:linear-gradient(180deg,rgba(18,26,39,.88) 0%,rgba(9,14,22,.93) 100%);
  --twoeyes-card-soft:linear-gradient(180deg,rgba(var(--te-overlay-rgb), .055) 0%,rgba(var(--te-overlay-rgb), .026) 100%);
  --twoeyes-radius-card:24px;
  --twoeyes-radius-subcard:18px;
  --twoeyes-radius-pill:999px;
  --twoeyes-shadow:0 24px 54px rgba(var(--te-shadow-rgb), .34), inset 0 1px 0 rgba(var(--te-overlay-rgb), .035);
  --twoeyes-shadow-orange:0 14px 38px rgba(254,138,0,.24);
  --font-main:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Compatibilidad con nombres antiguos */
  --bg-top:var(--twoeyes-bg-top);
  --bg-bottom:var(--twoeyes-bg-bottom);
  --bg-1:var(--twoeyes-bg-top);
  --bg-2:var(--twoeyes-bg-bottom);
  --bg-app:var(--twoeyes-bg-bottom);
  --orange:var(--twoeyes-orange);
  --orange-light:var(--twoeyes-orange-soft);
  --orange-dark:var(--twoeyes-orange-deep);
  --primary:var(--twoeyes-orange);
  --primary2:var(--twoeyes-orange-soft);
  --premium:var(--twoeyes-pink);
  --premium-strong:var(--twoeyes-pink-strong);
  --pink:var(--twoeyes-pink);
  --green:var(--twoeyes-green);
  --text-main:var(--twoeyes-text);
  --text-primary:var(--twoeyes-text);
  --text-soft:var(--twoeyes-subtext);
  --text-secondary:var(--twoeyes-subtext);
  --text-muted:var(--twoeyes-muted);
  --muted:var(--twoeyes-subtext);
  --line:var(--twoeyes-line);
  --stroke-soft:var(--twoeyes-line);
}

*{box-sizing:border-box;}
html,body{font-family:var(--font-main)!important;}
body{
  color:var(--twoeyes-text);
  background:
    radial-gradient(circle at 50% 0%, rgba(254,138,0,.06), transparent 18%),
    linear-gradient(180deg,var(--twoeyes-outer-top) 0%,var(--twoeyes-outer-bottom) 100%)!important;
}
button,input,select,textarea{font-family:var(--font-main)!important;}

/* Shell oficial: mismo ambiente que Crear cuenta */
.phone,.app-shell,.mobile-shell,.device-frame{
  background:
    radial-gradient(circle at 50% 0%, rgba(254,138,0,.08), transparent 24%),
    linear-gradient(180deg,var(--twoeyes-bg-top) 0%,var(--twoeyes-bg-bottom) 100%)!important;
  border:1px solid var(--twoeyes-line)!important;
  box-shadow:0 26px 80px rgba(var(--te-shadow-rgb), .48), inset 0 1px 0 rgba(var(--te-overlay-rgb), .04)!important;
}
.screen{background:transparent!important;}

/* Tipografía común */
h1,h2,h3,.title,.headline,.screen-title,.page-title,.section-title{
  color:var(--twoeyes-text);
  letter-spacing:-.035em;
}
.title,.headline,.screen-title,.page-title,h1{font-weight:800;}
.subtitle,.screen-subtitle,.description,.hint,.help,.note,.muted,p{
  color:var(--twoeyes-subtext);
}
.eyebrow,.section-label,.kicker,.card-label{
  color:rgba(248,244,234,.44)!important;
  text-transform:uppercase;
  letter-spacing:.18em!important;
  font-size:11px!important;
  font-weight:800!important;
}
.eyebrow::first-letter,.section-label::first-letter,.kicker::first-letter{color:var(--twoeyes-orange);}

/* Superficies comunes: no cambia estructura ni display */
.panel,.card,.glass-card,.settings-card,.profile-card,.premium-card,.account-card,.create-card,.chat-card,.match-card,.rescue-card,.legal-card,.delete-account-card,.delete-flow-card,.delete-confirm-card,.module-shell,.balance-card,.plan-card,.payment-card,.item,.row-card{
  border:1px solid var(--twoeyes-line)!important;
  border-radius:var(--twoeyes-radius-card)!important;
  box-shadow:var(--twoeyes-shadow);
}
.panel,.card,.settings-card,.profile-card,.premium-card,.account-card,.create-card,.chat-card,.match-card,.rescue-card,.legal-card,.delete-account-card,.delete-flow-card,.delete-confirm-card,.module-shell,.plan-card,.payment-card,.item,.row-card{
  background:var(--twoeyes-card)!important;
}
.subcard,.field,.input-card,.mini-card,.info-card,.help-card,.phrase,.segmented{
  border:1px solid var(--twoeyes-line)!important;
  border-radius:var(--twoeyes-radius-subcard)!important;
  background:rgba(var(--te-overlay-rgb), .045)!important;
}

/* Botones */
button,.btn,.primary,.secondary,.primary-btn,.secondary-btn,.danger-btn,.ghost-btn,.outline-btn,.cta,.cta-primary,.btn-primary,.btn-secondary,.tab-btn,.main-cta,.pay-btn,.rescue-pay-btn{
  border-radius:var(--twoeyes-radius-pill)!important;
  letter-spacing:-.01em;
  -webkit-tap-highlight-color:transparent;
}
.primary-btn,.btn-primary,.cta,.cta-primary,.orange-btn,button.primary,.pay-btn,.rescue-pay-btn,.main-cta,.primary{
  background:linear-gradient(180deg,var(--twoeyes-orange-soft) 0%,var(--twoeyes-orange) 56%,var(--twoeyes-orange-deep) 100%)!important;
  color:var(--twoeyes-dark)!important;
  border:1px solid rgba(254,196,94,.30)!important;
  box-shadow:var(--twoeyes-shadow-orange)!important;
  font-weight:800!important;
}
.secondary-btn,.btn-secondary,.ghost-btn,.outline-btn,button.secondary,.secondary{
  background:rgba(var(--te-overlay-rgb), .055)!important;
  border:1px solid var(--twoeyes-line-strong)!important;
  color:var(--twoeyes-subtext)!important;
  box-shadow:none!important;
}
.danger-btn,.btn-danger,button.danger,.delete-btn{
  background:linear-gradient(135deg,var(--te-danger-start,#FF7A6E) 0%,var(--te-danger) 100%)!important;
  border:none!important;
  color:#fff!important;
  box-shadow:none!important;
}
.premium-btn,.btn-premium,.pink-btn{
  background:linear-gradient(180deg,var(--twoeyes-pink) 0%,var(--twoeyes-pink-strong) 100%)!important;
  color:#fff!important;
}

/* Chips / badges */
.badge,.pill,.tag,.chip,.status-chip,.alias-pill,.alias-chip,.balance-pill{
  border-radius:var(--twoeyes-radius-pill)!important;
  font-weight:800!important;
}
.online,.is-online,.chip-online,.success{background:var(--twoeyes-green)!important;color:#062116!important;}
.premium,.chip-premium,.premium-chip{background:linear-gradient(180deg,var(--twoeyes-pink),var(--twoeyes-pink-strong))!important;color:#fff!important;}
.warning,.pending,.chip-pending,.chip-warning{background:var(--twoeyes-yellow)!important;color:#241602!important;}
.neutral,.chip-neutral{background:rgba(var(--te-overlay-rgb), .07)!important;color:var(--twoeyes-subtext)!important;}

/* Navegación inferior común */
.bottom-nav,.tabbar,.nav-bottom{
  background:rgba(9,14,23,.94)!important;
  border-top:1px solid rgba(var(--te-overlay-rgb), .07)!important;
  backdrop-filter:blur(16px);
}
.bottom-nav a,.tabbar a,.nav-bottom a,.nav-item{color:var(--twoeyes-muted)!important;}
.bottom-nav a.active,.tabbar a.active,.nav-bottom a.active,.nav-item.active{color:var(--twoeyes-orange)!important;}
.bottom-nav svg,.tabbar svg,.nav-bottom svg{stroke-width:1.9;}

.divider,.separator{background:rgba(var(--te-overlay-rgb), .065)!important;border-color:rgba(var(--te-overlay-rgb), .065)!important;}
.text-muted{color:var(--twoeyes-muted)!important;}
.text-faint{color:var(--twoeyes-faint)!important;}
.text-orange{color:var(--twoeyes-orange)!important;}

@media(max-width:430px){
  .primary-btn,.secondary-btn,.danger-btn,.btn,.cta-primary,.btn-primary,.btn-secondary{min-height:48px;}
}