/* Pantallas de cuenta «A · Mural» (18-10-2026): el formulario a un lado y un mural de capturas
   reales de EduDesk que sube despacio al otro. Se carga DESPUÉS de landing-2026 + publico-2026 y
   usa sus variables (--ink, --paper, --line…): el claro y el noche salen de la web. Lo cargan
   todas las plantillas que heredan de account/base_auth.html (también el alta con Google). */
:root{
  --am-verde:#3D7A64; --am-verde-hover:#2F6B5A; --am-verde-txt:#2F6B55;
  --am-error:#B42318; --am-error-bg:#FCEBE9; --am-enlace:#2B55C9; --am-borde:#6B7C8A;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --am-verde-txt:#86C9AF; --am-error:#FF9C92; --am-error-bg:#3A1A1A; --am-enlace:#9CB8FF; --am-borde:#6A7F94;
}}
:root[data-theme="dark"]{--am-verde-txt:#86C9AF; --am-error:#FF9C92; --am-error-bg:#3A1A1A; --am-enlace:#9CB8FF; --am-borde:#6A7F94}

.am-ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.am-ic .r{fill:currentColor;fill-opacity:.25}

/* ---------- Rejilla: formulario | mural ---------- */
.am{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:32px;width:min(1320px,100% - 32px);margin:8px auto 64px;min-height:calc(100vh - 110px)}
.am-izq{display:flex;align-items:flex-start;justify-content:center;padding:40px 8px 24px;min-width:0}
.am-panel{width:100%;max-width:500px}
.am-panel--ancho{max-width:560px}
.am-titulo{font-size:clamp(1.75rem,3vw,2.35rem) !important;line-height:1.1;letter-spacing:-.025em;margin:0 0 .35em !important;color:var(--ink)}
.am-sub{color:var(--ink-2);margin:0 0 1.4rem !important;font-size:1.02rem;line-height:1.5}
.am-centro{text-align:center}

/* ---------- Campos ---------- */
.am-campo{margin-bottom:16px;position:relative}
.am-campo>label,.am-etq{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px;color:var(--ink)}
.p26 .am-input{width:100%;box-sizing:border-box;min-height:52px;padding:12px 14px;border:2px solid var(--am-borde);border-radius:14px;
  background:var(--paper);color:var(--ink);font:400 1.05rem var(--font);transition:border-color .18s ease,box-shadow .18s ease}
.p26 .am-input::placeholder{color:var(--ink-2);opacity:.9}
.p26 .am-input:hover{border-color:var(--ink-2)}
.p26 .am-input:focus{outline:none;border-color:var(--am-verde);box-shadow:0 0 0 4px color-mix(in oklab,var(--am-verde) 35%,transparent)}
.p26 .am-input[aria-invalid="true"]{border-color:var(--am-error);background:color-mix(in oklab,var(--am-error) 6%,var(--paper))}
.am-ayuda{display:block;margin-top:6px;font-size:.9rem;color:var(--ink-2)}
.am-error{display:flex;gap:6px;align-items:flex-start;margin:6px 0 0 !important;color:var(--am-error);font-size:.92rem;font-weight:600;line-height:1.35}
.am-error:empty{display:none}
.am-fila-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media (max-width:560px){.am-fila-2{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){
  .am-error:not(:empty){animation:amEntra .32s var(--ease-out)}
  .am-tiembla{animation:amTiembla .38s var(--ease-out)}
}
@keyframes amEntra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes amTiembla{0%,100%{transform:none}20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}

/* Contraseña visible / oculta (el botón lo crea acceso-mural.js) */
.am-clave{position:relative}
.p26 .am-clave .am-input{padding-right:56px}
.am-ver{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer}
.am-ver:hover{background:var(--wall-2);color:var(--ink)}
.am-ver:focus-visible{outline:3px solid var(--focus);outline-offset:1px}
.am-ver .am-oculta{display:none}
.am-ver[aria-pressed="true"] .am-visible{display:none}
.am-ver[aria-pressed="true"] .am-oculta{display:block}

/* Casillas */
.am-casilla{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.95rem;color:var(--ink-2);line-height:1.45;font-weight:400}
.am-casilla input{flex:none;width:22px;height:22px;margin:1px 0 0;accent-color:var(--am-verde);cursor:pointer}
.am-casilla input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.am-casilla a{color:var(--am-enlace) !important;text-decoration:underline;text-underline-offset:2px;font-weight:600}
.am-casilla input[aria-invalid="true"]{outline:2px solid var(--am-error);outline-offset:2px;border-radius:4px}
.am-legal{border:2px solid var(--line);border-radius:16px;background:var(--card);padding:16px;margin-bottom:16px;display:flex;flex-direction:column;gap:10px}
.am-legal-tit{font-weight:700;font-size:.92rem;color:var(--ink)}
.am-legal-nota{font-size:.85rem;color:var(--ink-2)}
.am-extra-rol{border:2px solid var(--am-verde);border-radius:12px;padding:12px;background:color-mix(in oklab,var(--am-verde) 8%,var(--paper))}
.am-extra-rol[hidden]{display:none}
.am-fila-recuerda{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:-2px 0 16px}
.p26 .am .am-enlace,.p26 .am-enlace{color:var(--am-enlace);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.am-enlace:hover{text-decoration-thickness:2.5px}
.am :is(a,button):focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* Roles (alumno · padre/madre · profesor): includes/signup_role_birth.html */
.am-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.am-rol{position:relative;cursor:pointer;display:block}
.am-rol input{position:absolute;opacity:0;width:1px;height:1px}
.am-rol-caja{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;padding:14px 8px;border:2px solid var(--am-borde);border-radius:14px;background:var(--paper);
  transition:border-color .18s ease,background-color .18s ease,transform .18s var(--ease-out)}
.am-rol-caja .am-ic{width:34px;height:34px;color:var(--ink-2);transition:color .18s ease,transform .3s var(--ease-back)}
.am-rol-nom{font-weight:700;font-size:.95rem;color:var(--ink)}
.am-rol-desc{font-size:.82rem;color:var(--ink-2)}
.am-rol input:checked+.am-rol-caja{border-color:var(--am-verde);background:color-mix(in oklab,var(--am-verde) 12%,var(--paper))}
.am-rol input:checked+.am-rol-caja .am-ic{color:var(--am-verde-txt);transform:scale(1.1)}
.am-rol input:focus-visible+.am-rol-caja{outline:3px solid var(--focus);outline-offset:3px}
.am-rol:active .am-rol-caja{transform:scale(.97)}
@media (max-width:420px){.am-rol-caja{padding:12px 4px}.am-rol-desc{font-size:.78rem}}

/* Botones */
.p26 .am-verde{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;min-height:54px;padding:0 22px;border-radius:14px;
  font:700 1.07rem var(--font);color:#fff !important;background:var(--am-verde);border:2px solid #13202B;box-shadow:0 4px 0 #13202B;cursor:pointer;text-decoration:none;
  transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),background-color .2s ease}
.p26 .am-verde:hover{background:var(--am-verde-hover)}
.p26 .am-verde:active{transform:translateY(3px);box-shadow:0 1px 0 #13202B}
@media (hover:hover) and (pointer:fine){.p26 .am-verde:hover{transform:translateY(-2px);box-shadow:0 6px 0 #13202B}}
.p26 .am-verde[aria-busy="true"]{cursor:progress;background:var(--am-verde-hover);transform:none;box-shadow:0 2px 0 #13202B}
.p26 .am-sec{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:14px;font:700 1rem var(--font);
  color:var(--ink) !important;background:transparent;border:2px solid var(--ink-2);text-decoration:none;cursor:pointer}
.p26 .am-sec:hover{background:var(--wall-2)}
.p26 .am-fant{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:12px;color:var(--ink-2) !important;font-weight:700;text-decoration:none;font-size:.95rem}
.p26 .am-fant:hover{color:var(--ink) !important;background:var(--wall-2)}
.am-fant .am-ic{width:20px;height:20px}
.am-giro{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.35);border-top-color:#fff;display:none}
[aria-busy="true"] .am-giro{display:block}
@media (prefers-reduced-motion:no-preference){.am-giro{animation:amGira .8s linear infinite}}
@keyframes amGira{to{transform:rotate(360deg)}}
.am-separa{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-2);font-size:.95rem}
.am-separa::before,.am-separa::after{content:"";flex:1;height:2px;background:var(--line)}
.p26 .am-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;box-sizing:border-box;min-height:52px;border-radius:14px;border:2px solid #8A99A6;
  background:#fff;color:#3c4043 !important;font:700 1rem var(--font);text-decoration:none}
.p26 .am-google:hover{border-color:#5F6E7B}
.am-pie{margin-top:20px;text-align:center;color:var(--ink-2)}
.am-pie .am-volver{margin-top:10px}
.am .cf-turnstile{min-height:65px}

/* Avisos (errores generales del servidor y mensajes de Django) */
.am-aviso{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:14px;border:2px solid var(--am-error);background:var(--am-error-bg);
  color:var(--ink);font-weight:600;margin-bottom:16px;line-height:1.4}
.am-aviso .am-ic{color:var(--am-error)}
.am-aviso--ok{border-color:var(--am-verde);background:color-mix(in oklab,var(--am-verde) 12%,var(--paper))}
.am-aviso--ok .am-ic{color:var(--am-verde-txt)}
.am-aviso--info{border-color:var(--am-enlace);background:color-mix(in oklab,var(--am-enlace) 10%,var(--paper))}
.am-aviso--info .am-ic{color:var(--am-enlace)}
.am-aviso:focus{outline:3px solid var(--focus);outline-offset:2px}

/* Pantallas de «hecho» (correo enviado, contraseña cambiada…) */
.am-sobre{width:96px;height:96px;margin:0 auto 18px;border-radius:28px;display:grid;place-items:center;color:var(--am-verde-txt);
  background:color-mix(in oklab,var(--am-verde) 14%,var(--paper));border:2px solid color-mix(in oklab,var(--am-verde) 40%,var(--line))}
.am-sobre .am-ic{width:56px;height:56px}
.am-nota{color:var(--ink-2);font-size:.95rem;margin:12px 0 0 !important}
@media (prefers-reduced-motion:no-preference){
  .am-sobre{animation:amSobre .7s var(--ease-back) both}
  .am-sobre .am-trazo{stroke-dasharray:80;stroke-dashoffset:80;animation:amTraza .9s var(--ease-out) .25s forwards}
}
@keyframes amSobre{from{transform:translateY(16px) scale(.7) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes amTraza{to{stroke-dashoffset:0}}

/* ---------- El mural: capturas reales que suben despacio ---------- */
.am-der{position:sticky;top:84px;border-radius:32px;overflow:hidden;background:var(--formica);min-height:560px;height:calc(100vh - 110px);max-height:900px;
  box-shadow:inset 0 0 0 2px color-mix(in oklab,var(--formica) 70%,#000)}
.am-mural{position:absolute;inset:-12% -10%;transition:filter .9s var(--ease-out),opacity .6s ease}
.am-giro-mural{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;height:100%;transform:rotate(-8deg) scale(1.05);transform-origin:center}
.am-pista{display:flex;flex-direction:column;gap:22px;will-change:transform}
.am-hoja{margin:0;border-radius:14px;overflow:hidden;border:3px solid #13202B;box-shadow:0 18px 30px -18px rgba(0,0,0,.6);background:var(--paper)}
.am-col-1{margin-top:-120px}
.am-col-2{margin-top:-60px}
@media (prefers-reduced-motion:no-preference){
  .am-col-0 .am-pista{animation:amSube 70s linear infinite}
  .am-col-1 .am-pista{animation:amBaja 84s linear infinite}
  .am-col-2 .am-pista{animation:amSube 62s linear infinite}
  .am-tira-pista{animation:amLado 60s linear infinite}
}
@keyframes amSube{to{transform:translateY(-50%)}}
@keyframes amBaja{from{transform:translateY(-50%)}to{transform:none}}
@keyframes amLado{to{transform:translateX(-50%)}}
/* Mientras escribe, el mural baja la voz; al recuperar la contraseña, se calma y se apaga */
.am:has(.am-izq :focus-within) .am-mural{opacity:.72}
.am:is([data-pantalla="recuperar"],[data-pantalla="enviado"],[data-pantalla="cerrado"]) .am-mural{filter:saturate(.25) brightness(.8)}
.am-rotulo{position:absolute;left:24px;right:24px;bottom:24px;display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:20px;
  background:var(--paper);color:var(--ink);border:2px solid #13202B;box-shadow:0 6px 0 #13202B}
.am-rotulo strong{font-size:1.35rem;letter-spacing:-.02em;line-height:1.15}
.am-rotulo span{color:var(--ink-2);font-size:.98rem;line-height:1.45}
@media (prefers-reduced-motion:no-preference){.am-rotulo{animation:amRotulo .55s var(--ease-out) .12s both}}
@keyframes amRotulo{from{opacity:0;transform:translateY(18px)}}
.am-pausa{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:14px;border:2px solid #13202B;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 0 #13202B}
.am-pausa .am-ic-r{display:none}
.am-pausa[aria-pressed="true"] .am-ic-p{display:none}
.am-pausa[aria-pressed="true"] .am-ic-r{display:block}
@media (prefers-reduced-motion:reduce){.am-pausa{display:none}}
.am-tira{display:none}

/* Fotos en claro y en noche: se ve la del tema activo (la otra, con display:none y
   loading=lazy, ni se descarga) */
.am-foto{position:relative;overflow:hidden}
.am-foto img{display:block;width:100%;height:auto}
.am-foto .am-noche{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .am-foto .am-claro{display:none}:root:not([data-theme="light"]) .am-foto .am-noche{display:block}}
:root[data-theme="dark"] .am-foto .am-claro{display:none}
:root[data-theme="dark"] .am-foto .am-noche{display:block}

/* Móvil: el mural se queda en una tira fina arriba, y se va con el teclado abierto */
@media (max-width:900px){
  .am{grid-template-columns:minmax(0,1fr);gap:0;margin-top:0;min-height:0}
  .am-der{order:-1;position:relative;top:0;height:auto;min-height:0;max-height:none;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
  .am-mural,.am-rotulo,.am-pausa{display:none}
  .am-tira{display:block;overflow:hidden;margin:4px -16px 0;padding:6px 0 4px;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
  .am-tira-pista{display:flex;gap:12px;width:max-content}
  .am-mini{width:150px;margin:0;border-radius:10px;overflow:hidden;border:2px solid #13202B;transform:rotate(-2deg)}
  .am-mini:nth-child(even){transform:rotate(2deg) translateY(6px)}
  .am-izq{padding:16px 0 8px}
  :root.am-teclado .am-tira{display:none}
}
@media (max-height:500px) and (max-width:900px){.am-tira{display:none}}