/* ============================================================
   ECEP · Plataforma de estudio — portal (login + dashboard)
   Identidad: petróleo/teal + acento ámbar (académico, cálido, confiable).
   Fuentes cargadas por el layout: Poppins, Inter, Montserrat.
   ============================================================ */
:root{
  --ec-ink:#0c2127;        /* petróleo casi negro — títulos */
  --ec-body:#33474d;       /* cuerpo (>=7:1 en blanco) */
  --ec-meta:#566b71;       /* meta pequeña (>=4.5:1 en blanco) */
  --ec-line:#dde6e7;
  --ec-bg:#eef3f3;         /* off-white frío, teñido al teal de marca */
  --ec-surface:#ffffff;
  --ec-brand:#0e7d8a;      /* teal-petróleo (marca) */
  --ec-brand-deep:#0a525d;
  --ec-brand-ink:#0a444e;  /* texto de marca en blanco (>=7:1) */
  --ec-brand-soft:#e4f1f2;
  --ec-accent:#e08a1e;     /* ámbar/maravilla (acción/realce) */
  --ec-accent-deep:#b9690c;
  --ec-accent-soft:#fbeed8;
  --ease-out:cubic-bezier(.22,1,.36,1);
}
.ecp{ font-family:'Inter',system-ui,sans-serif; color:var(--ec-body); -webkit-font-smoothing:antialiased; }
.ecp h1,.ecp h2,.ecp h3{ font-family:'Poppins','Inter',sans-serif; letter-spacing:-0.02em; color:var(--ec-ink); }

@keyframes ec-rise{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes ec-pop{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes ec-aura{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,-14px,0) scale(1.06); } }

/* ====================== LOGIN ====================== */
.ecp-login{ position:relative; min-height:100dvh; display:grid; place-items:center; padding:24px; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -20%, #11535f 0%, #0b323a 42%, #07222a 100%);
}
/* halo cálido de marca, sutil y en lento movimiento (decorativo, respeta reduced-motion) */
.ecp-login::before{ content:""; position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(640px 420px at 16% 8%, rgba(224,138,30,.18), transparent 60%),
    radial-gradient(720px 520px at 92% 96%, rgba(14,125,138,.40), transparent 58%);
  animation:ec-aura 16s var(--ease-out) infinite alternate; }
/* trama académica tenue */
.ecp-login::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:26px 26px; }

.ecp-card{ position:relative; z-index:1; width:100%; max-width:436px; background:var(--ec-surface); border-radius:24px;
  padding:42px 38px 30px; text-align:center; border:1px solid rgba(255,255,255,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 40px 90px -34px rgba(3,18,22,.7), 0 12px 30px -22px rgba(3,18,22,.6); }
html:not(.ecg) .ecp-card{ animation:ec-rise .6s var(--ease-out) both; }
html:not(.ecg) .ecp-card > *{ animation:ec-pop .55s var(--ease-out) both; }
html:not(.ecg) .ecp-card > *:nth-child(2){ animation-delay:.05s; }
html:not(.ecg) .ecp-card > *:nth-child(3){ animation-delay:.1s; }
html:not(.ecg) .ecp-card > *:nth-child(4){ animation-delay:.15s; }
html:not(.ecg) .ecp-card > *:nth-child(5){ animation-delay:.2s; }
html:not(.ecg) .ecp-card > *:nth-child(6){ animation-delay:.25s; }
html:not(.ecg) .ecp-card > *:nth-child(7){ animation-delay:.3s; }
html:not(.ecg) .ecp-card > *:nth-child(8){ animation-delay:.35s; }

.ecp-mark{ position:relative; width:62px; height:62px; border-radius:19px; margin:0 auto 20px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--ec-brand) 0%, var(--ec-brand-deep) 100%); color:#fff; font-size:28px;
  box-shadow:0 12px 26px -10px rgba(10,82,93,.7); }
.ecp-mark::after{ content:""; position:absolute; right:-5px; bottom:-5px; width:18px; height:18px; border-radius:7px;
  background:var(--ec-accent); border:3px solid var(--ec-surface); }  /* detalle ámbar */
.ecp-kicker{ display:inline-block; font:600 12.5px 'Inter'; color:var(--ec-brand-ink);
  background:var(--ec-brand-soft); padding:4px 12px; border-radius:999px; }
.ecp-card h1{ font-size:27px; margin:13px 0 8px; font-weight:600; }
.ecp-card h1 b{ color:var(--ec-brand-ink); font-weight:700; }
.ecp-card .sub{ color:var(--ec-meta); font-size:14.5px; line-height:1.62; margin:0 auto 26px; max-width:32ch; }

.ecp-google{ width:100%; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:#fff; color:#1f2937; font:600 16px 'Inter'; border:1.5px solid #dfe3e6; border-radius:14px;
  padding:14px 18px; cursor:pointer; transition:box-shadow .18s var(--ease-out), border-color .18s, transform .08s; }
.ecp-google:hover{ box-shadow:0 8px 22px -10px rgba(3,18,22,.32); border-color:#c4ccd0; }
.ecp-google:active{ transform:scale(.985); }
.ecp-google:disabled{ opacity:.6; cursor:default; }
.ecp-google svg{ width:20px; height:20px; flex:0 0 auto; }
.ecp-google.loading span{ opacity:.5; }
.ecp-only{ margin-top:16px; font-size:12.5px; color:var(--ec-meta); display:flex; align-items:center; justify-content:center; gap:7px; }
.ecp-only i{ color:var(--ec-brand); }
.ecp-error{ display:none; margin-top:16px; background:#fef2f2; border:1px solid #fbcaca; color:#b4231d;
  font-size:13.5px; padding:11px 14px; border-radius:12px; text-align:left; }
.ecp-card .foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--ec-line); font-size:12.5px; }
.ecp-card .foot a{ color:var(--ec-brand-ink); text-decoration:none; transition:color .15s; }
.ecp-card .foot a:hover{ color:var(--ec-accent-deep); }

/* ====================== DASHBOARD ====================== */
.ecp-dash{ min-height:100dvh; background:var(--ec-bg);
  background-image:radial-gradient(1100px 460px at 100% -8%, rgba(14,125,138,.07), transparent 60%); }
.ecp-topbar{ position:sticky; top:0; z-index:30; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.5) blur(12px); border-bottom:1px solid var(--ec-line); }
.ecp-topbar .in{ max-width:1080px; margin:0 auto; padding:13px 22px; display:flex; align-items:center; gap:14px; }
.ecp-logo{ display:flex; align-items:center; gap:11px; font:600 16px 'Poppins'; color:var(--ec-ink); text-decoration:none; }
.ecp-logo b{ font-weight:800; color:var(--ec-brand-ink); }
.ecp-logo .mark{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; font-size:16px; color:#fff;
  background:linear-gradient(160deg,var(--ec-brand),var(--ec-brand-deep)); box-shadow:0 6px 14px -7px rgba(10,82,93,.8); }
.ecp-user{ margin-left:auto; display:flex; align-items:center; gap:11px; }
.ecp-user .who{ text-align:right; line-height:1.15; }
.ecp-user .who b{ font:600 14px 'Inter'; color:var(--ec-ink); display:block; }
.ecp-user .who small{ font-size:12px; color:var(--ec-meta); }
.ecp-ava{ width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--ec-brand-soft);
  color:var(--ec-brand-ink); display:grid; place-items:center; font:700 15px 'Poppins'; border:1px solid var(--ec-line); }
.ecp-logout{ background:#fff; border:1px solid var(--ec-line); color:var(--ec-body); font:600 13px 'Inter';
  padding:8px 13px; border-radius:10px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:border-color .15s, color .15s, transform .08s; }
.ecp-logout:hover{ border-color:#f0a8a0; color:#c0322a; }
.ecp-logout:active{ transform:scale(.97); }

.ecp-main{ max-width:1080px; margin:0 auto; padding:40px 22px 72px; }
html:not(.ecg) .ecp-main > *{ animation:ec-rise .6s var(--ease-out) both; }
html:not(.ecg) .ecp-grid{ animation:none; }
html:not(.ecg) .ecp-head{ animation-delay:.02s; }
html:not(.ecg) .ecp-tile:nth-child(1){ animation:ec-pop .6s var(--ease-out) both; animation-delay:.1s; }
html:not(.ecg) .ecp-tile:nth-child(2){ animation:ec-pop .6s var(--ease-out) both; animation-delay:.18s; }
html:not(.ecg) .ecp-how{ animation-delay:.26s; }

.ecp-head{ max-width:62ch; }
.ecp-hello{ font-size:30px; font-weight:600; margin:0 0 8px; }
.ecp-hello span{ color:var(--ec-brand-ink); }
.ecp-lede{ color:var(--ec-body); font-size:16px; line-height:1.6; margin:0; }

.ecp-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px; margin-top:30px; }
.ecp-tile{ position:relative; background:var(--ec-surface); border:1px solid var(--ec-line); border-radius:20px;
  padding:24px 24px 22px; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  box-shadow:0 1px 2px rgba(12,33,39,.04), 0 22px 48px -34px rgba(12,33,39,.4);
  transition:transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s; }
.ecp-tile.link:hover{ transform:translateY(-4px); border-color:#cfe0e1;
  box-shadow:0 1px 2px rgba(12,33,39,.05), 0 34px 66px -34px rgba(10,82,93,.5); }
.ecp-tile-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.ecp-ico{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:22px; flex:0 0 auto; }
.ecp-ico.ico-dossier{ background:var(--ec-brand-soft); color:var(--ec-brand-ink); }
.ecp-ico.ico-prueba{ background:var(--ec-accent-soft); color:var(--ec-accent-deep); }
.ecp-kind{ font:600 12.5px 'Inter'; color:var(--ec-meta); }
.ecp-tile h3{ font-size:20px; margin:0 0 7px; }
.ecp-tile p{ color:var(--ec-body); font-size:14.5px; line-height:1.58; margin:0 0 16px; }
.ecp-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:0 0 18px; }
.ecp-chips span{ font:600 12.5px 'Inter'; color:var(--ec-brand-ink); background:var(--ec-brand-soft);
  padding:5px 11px; border-radius:999px; }
.ecp-go{ display:inline-flex; align-items:center; gap:8px; font:600 14.5px 'Inter'; color:var(--ec-brand-ink); margin-top:auto; }
.ecp-go i{ transition:transform .2s var(--ease-out); }
.ecp-tile.link:hover .ecp-go i{ transform:translateX(4px); }
.ecp-tile.soon{ background:linear-gradient(180deg,#fff, #fbfdfd); }
.ecp-soon{ display:inline-flex; align-items:center; gap:7px; font:600 13px 'Inter'; color:var(--ec-accent-deep);
  background:var(--ec-accent-soft); padding:7px 13px; border-radius:999px; align-self:flex-start; margin-top:auto; }

/* franja "cómo estudiar" — secuencia real (no scaffolding decorativo) */
.ecp-how{ margin-top:40px; }
.ecp-how h2{ font-size:15px; font-weight:700; color:var(--ec-ink); margin:0 0 4px; }
.ecp-how .hint{ color:var(--ec-meta); font-size:13.5px; margin:0 0 16px; }
.ecp-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; }
.ecp-steps li{ display:flex; gap:13px; padding:18px 20px; border-top:2px solid var(--ec-brand); }
.ecp-steps li + li{ border-left:1px solid var(--ec-line); }
.ecp-steps .n{ flex:0 0 auto; width:27px; height:27px; border-radius:50%; display:grid; place-items:center;
  font:700 13px 'Poppins'; color:var(--ec-brand-ink); background:var(--ec-brand-soft); }
.ecp-steps b{ display:block; font:600 14.5px 'Inter'; color:var(--ec-ink); margin-bottom:3px; }
.ecp-steps p{ margin:0; font-size:13px; line-height:1.5; color:var(--ec-meta); }

.ecp-foot-note{ margin-top:30px; padding-top:18px; border-top:1px solid var(--ec-line);
  font-size:13.5px; color:var(--ec-meta); }
.ecp-foot-note b{ color:var(--ec-brand-ink); font-weight:700; }

@media (max-width:680px){
  .ecp-user .who{ display:none; }
  .ecp-main{ padding-top:26px; }
  .ecp-hello{ font-size:25px; }
  .ecp-steps li + li{ border-left:0; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .ecp-login::before{ animation:none !important; }
}

/* ============ Protección de contenido (anti-copia + marca de agua) ============ */
.ecep-noselect{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none; }
.ecep-noselect input, .ecep-noselect textarea{ -webkit-user-select:text; user-select:text; }
.ecep-watermark{
  position:fixed; inset:0; z-index:9990; pointer-events:none;
  background-repeat:repeat; background-position:0 0; opacity:.9;
}
.ecep-protected img{ -webkit-user-drag:none; user-drag:none; pointer-events:none; }
.ecep-shield-flash{
  position:fixed; left:50%; top:18px; transform:translateX(-50%); z-index:10001;
  background:#0f172a; color:#fff; padding:10px 18px; border-radius:999px; font:600 13px/1 Inter,system-ui,sans-serif;
  box-shadow:0 10px 30px -10px rgba(15,23,42,.5);
}
@media print{
  html.ecep-protected body{ display:none !important; }
  html.ecep-protected::after{ content:"Contenido protegido — impresión deshabilitada."; font:600 16px Inter,sans-serif; color:#000; }
}

/* ============ Paywall ============ */
body.ecep-paywalled{ overflow:hidden; }
body.ecep-paywalled main{ filter:blur(9px); pointer-events:none; user-select:none; }
.ecep-paywall{
  position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center;
  padding:24px; background:linear-gradient(160deg, rgba(14,125,138,.96), rgba(10,68,78,.97));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ecep-pw-card{
  width:100%; max-width:460px; background:#fff; border-radius:22px; padding:32px 28px; text-align:center;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55); animation:ecepPwIn .35s ease-out both;
}
@keyframes ecepPwIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.ecep-pw-ico{ width:58px; height:58px; margin:0 auto 14px; border-radius:16px; display:grid; place-items:center;
  background:#fef3c7; color:#b45309; font-size:26px; }
.ecep-pw-kicker{ display:inline-block; font:700 11px/1 Inter,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:#0e7d8a; background:#e4f1f2; padding:5px 12px; border-radius:999px; margin-bottom:10px; }
.ecep-pw-card h1{ font:800 23px/1.2 Poppins,system-ui,sans-serif; color:#0f172a; margin:0 0 8px; }
.ecep-pw-sub{ color:#475569; font-size:14px; line-height:1.5; margin:0 0 18px; }
.ecep-pw-price{ display:flex; flex-direction:column; gap:2px; margin:0 0 18px; }
.ecep-pw-price b{ font:800 34px/1 Poppins,sans-serif; color:#0f172a; }
.ecep-pw-price span{ font-size:12.5px; color:#64748b; }
.ecep-pw-buy, .ecep-pw-wsp, .ecep-pw-refresh, .ecep-pw-logout{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; box-sizing:border-box;
  padding:13px 16px; border-radius:13px; font:700 15px Inter,sans-serif; cursor:pointer; border:0; text-decoration:none; margin-bottom:10px;
}
.ecep-pw-buy{ background:#009ee3; color:#fff; }
.ecep-pw-buy:hover{ background:#008fcc; }
.ecep-pw-wsp{ background:#25d366; color:#063e1e; }
.ecep-pw-wsp:hover{ filter:brightness(1.05); }
.ecep-pw-refresh{ background:#f1f5f9; color:#334155; }
.ecep-pw-refresh:hover{ background:#e2e8f0; }
.ecep-pw-note{ font-size:12.5px; color:#64748b; line-height:1.5; margin:4px 0 14px; }
.ecep-pw-logout{ background:none; color:#94a3b8; font-weight:600; font-size:13px; margin:0; padding:6px; }
.ecep-pw-logout:hover{ color:#475569; text-decoration:underline; }