@import url("/assets/shared/styles/00-tokens.css");
@import url("/assets/shared/styles/08-dark.css");

/* Variables base (alineadas con docente) */
:root{
  --line:var(--border);
  /* =========================================================
     IMPORTANTE:
     No hardcodeamos el naranja aquí.
     "accent" debe ser un alias del BRAND global (cobre).
     ========================================================= */
  --accent: var(--brand);
  --accent-soft: var(--brand-soft);
  --accent-soft-2: var(--brand-soft-2);
  --accent-border: var(--brand-border);
  --accent-contrast: var(--brand-contrast);

  /* 👉 Fondo (cámbialo aquí y SOLO aquí) */
  --bg-photo: url("/assets/bg/instituto.jpg");
  /* Para test rápido: comenta --bgImage y descomenta esto */
  /* --bgTest: #ffd400; */

  /* Radius */
  --radius:16px;

  /* Spacing scale (para consistencia) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;

  /* Shadow scale */
  --shadow-sm:0 4px 12px rgba(0,0,0,.06);
  --shadow-md:0 12px 30px rgba(0,0,0,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.25);

  /* Compat (no romper lo existente) */
  --shadow:var(--shadow-md);
  --shadow2:0 18px 50px rgba(0,0,0,.10);

  /* Motion */
  --transition:.25s ease;
}

/* ---------- BASE ---------- */
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:18px;
  position:relative;
}

/* ✅ Capa intermedia: SIEMPRE ocupa toda la pantalla */
.bgLayer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--bg); /* fallback */
  background-image:var(--bg-photo);
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  transform:translateZ(0);
  will-change:transform;
}

/* ✅ Velo/blur encima de la foto (no en el body) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
  transform:translateZ(0);
}

/* Card principal del home */
.card{
  position:relative;
  overflow:hidden;
  background:var(--panel);
  padding:22px;
  border-radius:18px;
  max-width:420px;
  width:min(420px, 92vw);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  text-align:center;
  z-index:2;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Asegura que el contenido quede por encima del brillo */
.card > *{
  position:relative;
  z-index:1;
}

.tag{
  display:inline-block;
  font-size:13px;
  padding:6px 12px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  margin-bottom:12px;
  font-weight:800;
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.06em;
}

h1{
  margin:0;
  font-size:24px;
  letter-spacing:-.02em;
}

p{
  margin:4px 0 0;
  line-height:1.4;
  color:var(--muted);
}

.note{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}

.portalStep{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
}

.portalStep.hidden{
  display:none;
}

.field{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  text-align:left;
  font-size:12px;
  color:var(--muted);
}

.field input{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:14px;
  outline:none;
}

.field input:focus{
  border-color:var(--accent-border);
  box-shadow:0 0 0 2px var(--accent-soft);
}

.stepTitle{
  font-weight:800;
  text-align:left;
}

.hint{
  font-size:12px;
  color:var(--muted);
  margin:0;
}

.error{
  margin:0;
  font-size:12px;
  color:#ffb4a4;
  display:none;
}
.errorRef{
  font-size:0.85em;
  opacity:0.7;
  margin-left:6px;
}

.row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  justify-content:center;
}

.btn{
  display:inline-block;
  font-weight:700;
  border-radius:999px;
  padding:9px 16px;
  border:1px solid var(--border);
  cursor:pointer;
  background:var(--surface);
  color:var(--text);
  font-size:15px;
}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-contrast);
  box-shadow:0 6px 16px rgba(0,0,0,.12);
}
.btn.primary:hover,
.btn.primary:focus-visible{
  background:var(--accent);
  border-color:var(--accent-border);
  box-shadow:0 0 0 2px var(--accent-soft), 0 8px 18px rgba(0,0,0,.16);
  outline:none;
}
.btn:active{ transform:translateY(1px); }

.btn.ghost{
  background:transparent;
  border-color:var(--border);
  color:var(--text);
}
.btn.ghost:hover,
.btn.ghost:focus-visible{
  border-color:var(--accent-border);
  box-shadow:0 0 0 2px var(--accent-soft);
}
.btn.link{
  background:transparent;
  border:0;
  color:var(--accent);
  padding:4px 6px;
  font-weight:800;
  text-decoration:underline;
}
.btn.link:hover,
.btn.link:focus-visible{
  color:var(--accent-contrast);
  outline:none;
}

/* --- Join tenant: layout compacto --- */
#stepJoinTenant .stepTitle.center { text-align: center; }

#stepJoinTenant .joinGrid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin: 10px 0 12px;
}

@media (max-width: 520px){
  #stepJoinTenant .joinGrid{ grid-template-columns: 1fr; }
}

/* --- Quitar textos sobrantes SOLO cuando estamos en el paso de vincular centro --- */
#portalCard.isJoinStep p.note,
#portalCard.isJoinStep p:not(.error){
  display: none;
}

/* --- COBRE en vez de rojo en select invalid/focus --- */
#studentCourseSelect:focus{
  outline: none;
  border-color: var(--copper);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--copper) 35%, transparent);
}

#studentCourseSelect:invalid{
  border-color: var(--copper);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--copper) 25%, transparent);
}

.signupRow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

/* ---------- MODAL CHAT ---------- */
.modalOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:opacity var(--transition);
}

.modalOverlay.open{
  opacity:1;
  pointer-events:auto;
}

.modal{
  width:min(980px, 94vw);
  height:min(780px, 86vh);
  background:var(--panel);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transform:translateY(20px) scale(.96);
  transition:transform var(--transition);
  border:1px solid var(--border);
}

.modalOverlay.open .modal{
  transform:translateY(0) scale(1);
}

.modalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-weight:900;
  background:var(--surface-2);
  flex:0 0 auto;
  cursor: grab;
}

.modalTop button{
  border:0;
  background:var(--surface);
  border:1px solid var(--border);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:800;
  color:var(--text);
}

/* nuevo contenedor body: iframe + pad */
.modalBody{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:transparent;
}

#chatFrame{
  flex:1;
  width:100%;
  border:0;
  background:transparent;
}

/* ---------- MINI BAR ---------- */
.miniBar{
  position:fixed;
  right:18px;
  bottom:18px;
  display:none;
  align-items:center;
  gap:10px;
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  border-radius:14px;
  box-shadow:var(--shadow);
  z-index:1100;
}

.miniBar .label{
  font-weight:900;
  font-size:14px;
  white-space:nowrap;
}

.miniBar button{
  border:0;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* Botón de texto (Abrir): misma altura y radio que el resto */
.miniBar .openBtn{
  background:var(--accent);
  color:var(--accent-contrast);
  padding:0 14px;
  min-width:84px;
}

/* Botones de icono (maximizar / cerrar) */
.miniBar .miniIconBtn{
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  font-size:18px;
  line-height:1;
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
}

/* Hover / active sutil */
.miniBar .miniIconBtn:hover{
  background:var(--surface-3);
}
.miniBar .miniIconBtn:active{
  transform:translateY(1px);
}

.miniBar input{
  width:240px;
  max-width:40vw;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-3);
  color:var(--text);
  outline:none;
  font-size:16px;
}

/* ---------- UTILIDADES ---------- */
.hidden{ display:none !important; }
.flex{ display:flex; }
.center{ display:flex; align-items:center; justify-content:center; }
.miniBar input::placeholder{
  color:rgba(255,255,255,.75);
}

/* ---------- RESPONSIVE ---------- */
@media (min-width: 769px){
  .modal{
    overflow: hidden;
    min-width: 360px;
    min-height: 420px;
  }
}

/* ---------- DARK MODE ---------- */
html[data-theme="dark"]{
  --bg:#0b0f16;
  --panel:rgba(18,24,33,.78);
  --border:rgba(255,255,255,.10);
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --text:rgba(255,255,255,.95);
  --muted:rgba(255,255,255,.65);
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.10);
  --surface-3:rgba(255,255,255,.14);
  --bg-photo:url("/assets/bg/instituto.jpg");
  --bg-overlay-dark:linear-gradient(0deg, rgba(0,0,0,.42), rgba(0,0,0,.42));
}

html[data-theme="dark"] body::before{
  background:rgba(5,8,12,.28);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

html[data-theme="light"]{
  --bg:#eef1f4;
  --panel:rgba(255,255,255,.88);
  --border:rgba(0,0,0,.08);
  --shadow:0 18px 50px rgba(0,0,0,.12);
  --text:#111;
  --muted:rgba(0,0,0,.65);
  --surface:#f4f5f7;
  --surface-2:#e9ebef;
  --surface-3:#dde1e7;
  --bg-photo:url("/assets/bg/instituto.jpg");
  --bg-overlay-light:linear-gradient(0deg, rgba(0,0,0,.22), rgba(0,0,0,.22));
}

html[data-theme="light"] body::before{
  background:rgba(0,0,0,.18);
  backdrop-filter:blur(1px);
  -webkit-backdrop-filter:blur(1px);
}

html, body{
  height: 100%;
  overflow: hidden;
}

body{
  min-height: 100svh;
  overscroll-behavior: none;
}

/* === FIX: el iframe no debe meter un “panel” blanco propio === */
.modalBody{ background:transparent; }
#chatFrame{ background:transparent; }