/* Estilos de las páginas privadas (ingresar, mis cursos, curso, administración).
   Misma identidad que la landing: marino, arena y durazno. */
:root{
  --fondo:#FAF6F0; --papel:#FFFFFF; --niebla:#EEF1F4; --linea:#E4DCD0;
  --marino:#071739; --azul:#4B6382; --celeste:#A4B5C4; --gris:#CDD5DB;
  --arena:#A68868; --durazno:#E3C39D; --durazno-suave:#F6E9D8;
  --texto:#071739; --texto-2:#4B6382; --btn:#071739; --btn-txt:#FFFFFF; --logo:#071739;
  --ok:#2F7A55; --error:#B5483B;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){:root{
  --fondo:#0A1631; --papel:#0F1E40; --niebla:#13254D; --linea:#22355E;
  --texto:#F1EEE8; --texto-2:#A4B5C4; --arena:#E3C39D; --durazno-suave:#1A2B52;
  --btn:#E3C39D; --btn-txt:#071739; --logo:#F1EEE8; --ok:#6FCF9C; --error:#F08A7C; color-scheme:dark }}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--texto);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1 em,h2 em{font-style:italic;font-weight:500;color:var(--arena)}
p{margin:0}
a{color:inherit}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--arena)}
.muted{color:var(--texto-2)}
.logo{display:block;background:var(--logo);-webkit-mask:url(/assets/img/logo.png) center/contain no-repeat;mask:url(/assets/img/logo.png) center/contain no-repeat;aspect-ratio:440/329}

/* Botones y campos */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 13px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:15px 22px;border-radius:10px;border:0;cursor:pointer;text-decoration:none;background:var(--btn);color:var(--btn-txt);transition:opacity .2s}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.5;cursor:default}
.btn.alt{background:transparent;color:var(--texto);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn.peligro{background:transparent;color:var(--error);box-shadow:inset 0 0 0 1.5px currentColor}
.btn.mini{padding:10px 14px;font-size:11.5px}
.link-btn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--arena);outline-offset:2px}
label{display:grid;gap:6px;font-size:14px;font-weight:700}
input,select,textarea{font:16px var(--body);padding:12px 14px;border-radius:10px;border:1px solid var(--linea);background:var(--fondo);color:var(--texto);width:100%}
textarea{min-height:110px;resize:vertical}
.check{display:flex;align-items:center;gap:10px;font-weight:600}
.check input{width:auto}

/* Encabezado de la app */
#app-header{border-bottom:1px solid var(--linea);background:var(--papel);position:sticky;top:0;z-index:5}
#app-header .bar{display:flex;align-items:center;gap:24px;padding-block:12px}
#app-header .brand .logo{width:78px}
#app-header .nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
#app-header .nav a{text-decoration:none;color:var(--texto-2);white-space:nowrap}
#app-header .nav a[aria-current="page"],#app-header .nav a:hover{color:var(--texto)}
#app-header .nav .link-btn{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2)}
#app-header .hola{font-size:14px;color:var(--texto-2)}
@media (max-width:600px){#app-header .hola{display:none}#app-header .nav{gap:14px;font-size:11.5px}#app-header .nav .link-btn{font-size:11.5px}#app-header .brand .logo{width:64px}}

main.app{padding-block:44px 80px}
.page-head{display:grid;gap:10px;margin-bottom:32px}
.page-head h1{font-size:clamp(32px,4.4vw,46px)}

/* Tarjetas de cursos */
.cursos{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px}
.curso-card{background:var(--papel);border:1px solid var(--linea);border-radius:20px;overflow:hidden;display:grid;grid-template-rows:auto 1fr;text-decoration:none;transition:transform .2s, box-shadow .2s}
.curso-card:hover{transform:translateY(-2px);box-shadow:0 20px 40px -28px rgba(7,23,57,.5)}
.curso-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--durazno-suave)}
.curso-card .cuerpo{padding:20px 22px 22px;display:grid;gap:10px;align-content:start}
.curso-card h3{font-size:24px}
.barra{height:8px;border-radius:999px;background:var(--niebla);overflow:hidden}
.barra span{display:block;height:100%;background:var(--arena);border-radius:999px}
.avance{display:flex;justify-content:space-between;font-size:13.5px;color:var(--texto-2);font-variant-numeric:tabular-nums}
.vacio{background:var(--papel);border:1px dashed var(--linea);border-radius:20px;padding:40px;text-align:center;display:grid;gap:14px;justify-items:center}

/* Página de curso */
.curso-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
.player{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050E24;position:relative}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .estado{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#F5EFE6;padding:24px;gap:8px}
.leccion-info{display:grid;gap:12px;margin-top:22px}
.leccion-info h2{font-size:clamp(26px,3.2vw,34px)}
.panel{background:var(--papel);border:1px solid var(--linea);border-radius:18px;padding:20px;display:grid;gap:12px}
.panel h3{font-size:20px}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.lista button,.lista a{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;text-align:left;padding:11px 12px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--texto);font:600 14.5px/1.35 var(--body);cursor:pointer;text-decoration:none}
.lista button:hover,.lista a:hover{background:var(--niebla)}
.lista button[aria-current="true"]{background:var(--durazno-suave);border-color:var(--durazno)}
.num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;background:var(--niebla);color:var(--texto-2)}
.hecha .num{background:var(--ok);color:#fff}
.lista .tipo{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--arena)}
@media (max-width:900px){.curso-layout{grid-template-columns:1fr}}

/* Formularios centrados (ingresar, contraseña) */
.auth{min-height:100vh;display:grid;place-items:center;padding-block:40px}
.auth-card{width:100%;max-width:440px;background:var(--papel);border:1px solid var(--linea);border-radius:24px;padding:36px 32px;display:grid;gap:18px;box-shadow:0 30px 70px -45px rgba(7,23,57,.5)}
.auth-card .logo{width:96px;justify-self:center}
.auth-card h1{font-size:30px;text-align:center}
.auth-card form{display:grid;gap:14px}
.auth-card .pie{text-align:center;font-size:14px;color:var(--texto-2)}
.aviso{font-size:14px;padding:12px 14px;border-radius:10px;background:var(--durazno-suave);color:var(--texto)}
.aviso.error{background:color-mix(in srgb,var(--error) 14%,transparent);color:var(--error)}
.aviso.ok{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}

/* Administración */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--linea);padding-bottom:12px}
.tabs button{font:800 12.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:11px 16px;border-radius:10px;border:0;background:transparent;color:var(--texto-2);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--marino);color:#F5EFE6}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:700px){.grid-2,.grid-3{grid-template-columns:1fr}}
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:14px;background:var(--papel)}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
th{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--texto-2);background:var(--niebla)}
tr:last-child td{border-bottom:0}
td input{padding:9px 10px;font-size:14.5px}
.acciones{display:flex;gap:8px;flex-wrap:wrap}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:800}
.pill.si{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.no{background:var(--niebla);color:var(--texto-2)}
.seccion{display:grid;gap:18px;margin-bottom:36px}
.seccion > h2{font-size:26px}

/* Avisos flotantes */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--marino);color:#F5EFE6;padding:14px 20px;border-radius:12px;font-weight:700;font-size:14.5px;transition:.25s;z-index:50;max-width:calc(100% - 32px)}
.toast.error{background:#8E2F25}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.cargando{color:var(--texto-2);padding:30px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}