/* cc.css — estilos compartidos por index.html y red.html (ronda 3).
   Va con <link> en el <head> para que el velo de carga no parpadee. */
/* transición con el sello */
#cc-velo-nav{position:fixed;inset:0;z-index:9998;display:grid;place-items:center;gap:1rem;
  background:#081730;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
  grid-auto-flow:row;align-content:center;justify-items:center}
#cc-velo-nav.on{opacity:1;visibility:visible}
#cc-velo-nav .anillo{position:relative;width:110px;height:110px;display:grid;place-items:center}
#cc-velo-nav .anillo img{width:86px;height:86px;border-radius:50%;background:#fff;padding:6px;
  animation:cc-late 1.6s ease-in-out infinite}
#cc-velo-nav .anillo::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(255,255,255,.15);border-top-color:#C9A227;animation:cc-gira 1.1s linear infinite}
#cc-velo-nav p{color:#B9C6D8;font:300 .8rem 'Poppins',system-ui,sans-serif;
  letter-spacing:.08em;text-transform:uppercase;margin:0}
@keyframes cc-gira{to{transform:rotate(360deg)}}
@keyframes cc-late{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  #cc-velo-nav .anillo img,#cc-velo-nav .anillo::before{animation:none}
  #cc-velo-nav{transition:none}}

/* botones de accesibilidad en la topbar */

/* tarjeta de sesión */
.cc-sesion{background:linear-gradient(135deg,var(--card) 60%,var(--card-suave));
  border:1px solid var(--borde);border-left:4px solid var(--dorado);border-radius:14px;
  box-shadow:var(--sombra-2);padding:.75rem 1rem;margin-bottom:1rem;
  display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.cc-sesion .avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 25%,var(--dorado),var(--dorado-tinta));color:#081730;
  font:800 1.15rem 'Poppins',sans-serif;box-shadow:var(--sombra-1)}
.cc-sesion .quien{flex:1 1 15rem;min-width:0}
.cc-sesion .quien b{font-weight:600;font-size:.95rem;display:block}
.cc-sesion .quien small{color:var(--tenue);font-size:.74rem;font-weight:300;display:block}
.cc-sesion .acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.cc-sesion .invita{flex:1 1 16rem;font-size:.8rem;color:var(--tenue);font-weight:300;min-width:0}
.cc-sesion .invita b{color:var(--texto);font-weight:600}

/* modal de ingreso */
#cc-velo-login{position:fixed;inset:0;z-index:960;background:rgba(4,10,24,.6);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:1rem}
#cc-login{background:var(--card);border:1px solid var(--borde);border-radius:18px;
  box-shadow:var(--sombra-3);width:min(430px,96vw);max-height:92vh;overflow:auto;
  animation:cc-modal .28s cubic-bezier(.2,.8,.2,1)}
@keyframes cc-modal{from{opacity:0;transform:translateY(16px) scale(.97)}}
@media (prefers-reduced-motion:reduce){#cc-login{animation:none}}
#cc-login .cab{background:#081730;color:#fff;padding:.9rem 1.1rem;display:flex;gap:.6rem;align-items:center}
#cc-login .cab img{height:34px;width:34px;border-radius:50%;background:#fff;padding:3px}
#cc-login .cab b{font:600 .98rem 'Poppins',sans-serif}
#cc-login .cab button{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;
  font-size:1.05rem;min-width:42px;min-height:42px;border-radius:9px}
#cc-login .cab button:hover{background:rgba(255,255,255,.15)}
#cc-login .cuerpo{padding:1rem 1.1rem 1.2rem}
#cc-login .modos{display:flex;gap:.35rem;background:var(--card-hundida);padding:.25rem;
  border-radius:11px;margin-bottom:.9rem}
#cc-login .modos button{flex:1;border:none;background:none;cursor:pointer;min-height:44px;
  font:600 .84rem 'Poppins',sans-serif;color:var(--tenue);border-radius:9px;box-shadow:none}
#cc-login .modos button[aria-selected="true"]{background:var(--card);color:var(--primario);
  box-shadow:var(--sombra-1)}
#cc-login label{display:block;font:600 .72rem 'Poppins',sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tenue);margin:.7rem 0 .25rem}
#cc-login input,#cc-login select{width:100%;min-height:48px;padding:.6rem .8rem;
  font:400 .95rem 'Poppins',sans-serif;border:1px solid var(--borde-fuerte);border-radius:10px;
  background:var(--card);color:var(--texto)}
#cc-login input:focus,#cc-login select:focus{border-color:var(--dorado);
  box-shadow:0 0 0 3px var(--anillo);outline:none}
#cc-login .pista{font-size:.72rem;color:var(--tenue);font-weight:300;margin-top:.25rem}
#cc-login .enviar{width:100%;margin-top:1rem;min-height:50px;border:none;border-radius:11px;
  background:var(--primario);color:#fff;font:600 .95rem 'Poppins',sans-serif;cursor:pointer;
  box-shadow:var(--sombra-2)}
html[data-tema="oscuro"] #cc-login .enviar{background:#1E4D8A;color:#EAF2FC}
#cc-login .enviar:disabled{opacity:.6;cursor:progress}
#cc-login .aviso{margin-top:.9rem;background:var(--chip-oro-f);color:var(--chip-oro-t);
  border-radius:10px;padding:.6rem .75rem;font-size:.74rem;font-weight:400;line-height:1.5}
#cc-login .aviso b{font-weight:700}
#cc-login .error{margin-top:.8rem;background:var(--chip-rojo-f);color:var(--chip-rojo-t);
  border-radius:10px;padding:.6rem .75rem;font-size:.8rem;font-weight:500}
#cc-login .fila2{display:flex;gap:.6rem;align-items:end}#cc-login .fila2>div{flex:1;min-width:0}

/* ── Ayuda plegable: una línea visible, el párrafo solo si lo pides ──
   Ronda 3: los muros de texto explicativo confundían más de lo que aclaraban. */
details.cc-ayuda{margin:.1rem 0 .65rem}
details.cc-ayuda>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:.4rem;font:500 .75rem 'Poppins',system-ui,sans-serif;color:var(--accion);
  min-height:34px;border-radius:8px;user-select:none}
details.cc-ayuda>summary::-webkit-details-marker{display:none}
details.cc-ayuda>summary::before{content:"?";display:grid;place-items:center;width:19px;height:19px;
  flex:none;border-radius:50%;background:var(--chip-azul-f);color:var(--chip-azul-t);
  font:800 .68rem 'Poppins',sans-serif}
details.cc-ayuda[open]>summary{color:var(--tenue)}
details.cc-ayuda[open]>summary::before{content:"×";background:var(--chip-gris-f);color:var(--chip-gris-t)}
details.cc-ayuda .txt{font-size:.77rem;color:var(--tenue);font-weight:300;line-height:1.6;
  margin-top:.3rem;padding-left:1.6rem;max-width:42rem}
details.cc-ayuda .txt b{color:var(--texto);font-weight:600}
details.cc-ayuda .txt+.txt{margin-top:.5rem}

/* Frase guía: la instrucción corta que sí se lee */
.cc-guia{font:500 .84rem 'Poppins',system-ui,sans-serif;color:var(--texto);margin-bottom:.5rem}
.cc-guia b{font-weight:700;color:var(--primario)}
html[data-tema="oscuro"] .cc-guia b{color:var(--sidebar)}

/* Aviso breve no bloqueante (reemplaza alert()) */
#cc-aviso{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,120%);z-index:970;
  background:#081730;color:#fff;padding:.75rem 1.15rem;border-radius:12px;max-width:min(30rem,92vw);
  font:500 .84rem 'Poppins',system-ui,sans-serif;box-shadow:0 14px 34px rgba(4,10,24,.45);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .28s;opacity:0;text-align:center}
#cc-aviso.on{transform:translate(-50%,0);opacity:1}
html[data-tema="oscuro"] #cc-aviso{background:#1E4D8A;color:#EAF2FC}
@media (prefers-reduced-motion:reduce){#cc-aviso{transition:opacity .2s}}

/* En móvil el botón flotante del asistente tapaba la última fila de contenido */
@media (max-width:640px){
  body{padding-bottom:4.5rem}
  .cc-sesion{padding:.7rem .8rem}
  .cc-sesion .acciones{margin-left:0;width:100%}
  .cc-sesion .acciones button{flex:1}
}
/* Foco visible en TODO control interactivo, también dentro del módulo */
#cc-login :focus-visible,.cc-sesion :focus-visible{
  outline:3px solid var(--dorado,#C9A227);outline-offset:2px;border-radius:6px}

/* Transición del sello al cambiar de pestaña/tarjeta: el logo CSS centrado con
   su anillo dorado "cargando" — el mismo gesto del portal real de Mi Caja
   Digital (pantalla «Finalizando…»), en versión de 0.7 s. */
#cc-destello{position:fixed;inset:0;z-index:930;display:grid;place-items:center;
  pointer-events:none;opacity:0;background:rgba(8,23,48,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#cc-destello .anillo{position:relative;width:106px;height:106px;display:grid;place-items:center}
#cc-destello img{width:82px;height:82px;border-radius:50%;background:#fff;padding:6px;
  box-shadow:0 16px 44px rgba(4,10,24,.5)}
#cc-destello .anillo::before{content:"";position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(255,255,255,.22);border-top-color:#C9A227;animation:cc-gira .9s linear infinite}
#cc-destello.on{animation:cc-destello-velo .7s ease}
#cc-destello.on img{animation:cc-destello-sello .7s cubic-bezier(.2,.8,.2,1)}
@keyframes cc-destello-velo{0%{opacity:0}25%{opacity:1}75%{opacity:1}100%{opacity:0}}
@keyframes cc-destello-sello{0%{transform:scale(.72);opacity:0}
  30%{transform:scale(1);opacity:1}100%{transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){#cc-destello{display:none}}

/* Botones de la tarjeta de sesión (Ingresar / Crear cuenta demo): identidad
   navy+dorado y micro-animación — antes heredaban el botón gris genérico. */
.cc-sesion .acciones button{min-height:44px;padding:.55rem 1.05rem;border-radius:11px;
  cursor:pointer;font:600 .84rem 'Poppins',system-ui,sans-serif;
  border:1.5px solid var(--primario,#083D6C);background:var(--card,#fff);
  color:var(--primario,#083D6C);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,background .18s,color .18s}
.cc-sesion .acciones button:hover{transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(8,23,48,.18)}
.cc-sesion .acciones button:active{transform:translateY(0) scale(.97)}
.cc-sesion .acciones button.primario{background:var(--primario,#083D6C);color:#fff;
  border-color:transparent}
.cc-sesion .acciones button.primario:hover{background:var(--dorado,#C9A227);color:#081730}
html[data-tema="oscuro"] .cc-sesion .acciones button{background:transparent;color:#EAF2FC;
  border-color:#3C567B}
html[data-tema="oscuro"] .cc-sesion .acciones button.primario{background:#C9A227;
  color:#081730;border-color:transparent}
@media (prefers-reduced-motion:reduce){.cc-sesion .acciones button{transition:none}}

/* Modal de acceso: el cambio Ya tengo cuenta ⇄ Crear cuenta se desliza,
   y el botón de enviar responde al pasar el mouse. */
#cc-login #cc-campos-crear:not([hidden]),#cc-login #cc-campo-tel:not([hidden]){
  animation:cc-desliza .25s ease}
@keyframes cc-desliza{from{opacity:0;transform:translateY(-6px)}}
#cc-login .modos button{transition:background .18s,color .18s,box-shadow .18s}
#cc-login .enviar{transition:transform .18s,box-shadow .18s,background .18s,color .18s}
#cc-login .enviar:hover{transform:translateY(-1.5px);
  box-shadow:0 10px 24px rgba(8,23,48,.25);background:var(--dorado,#C9A227);color:#081730}
@media (prefers-reduced-motion:reduce){
  #cc-login #cc-campos-crear:not([hidden]),#cc-login #cc-campo-tel:not([hidden]){animation:none}
  #cc-login .enviar{transition:none}}

/* Campo opcional del formulario de acceso */
#cc-login .opc{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}

/* Pedir cupo: la especialidad se elige aquí, no al registrarse */
.cc-sesion .pedir-cupo{display:inline-flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.cc-sesion .pedir-cupo select{font:500 .82rem 'Poppins',system-ui,sans-serif;min-height:44px;
  padding:.5rem .6rem;border:1px solid var(--borde-fuerte);border-radius:9px;
  background:var(--card);color:var(--texto);max-width:min(52vw,14rem);cursor:pointer}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}