/* Las tipografias de Google NO se cargan con @import.
   Con @import, el navegador tiene que ir hasta Google y esperar respuesta
   ANTES de pintar la pagina: con internet lento (datos moviles, wifi del
   colegio) eso deja la pantalla en blanco varios segundos o indefinidamente.
   Ahora se cargan desde app.js cuando la pagina ya esta a la vista, y
   mientras tanto se usan las tipografias de respaldo del sistema definidas
   en --font-display y --font-body. */

:root {
  /* Tema claro pensado para proyectar en clase: el fondo es un pergamino
     claro y todo el texto es tinta oscura, para que se lea sin problema en
     un salon iluminado o con un videobeam de poco contraste. */
  --bg: #d9cbaa;
  --bg-alt: #fffdf6;
  --card: #f6efdc;
  --card-border: #bda87e;
  --parchment: #f4ecd8;
  --parchment-dim: #e0d3b2;
  --parchment-light: #fffdf6;
  --ink: #2a2013;
  --ink-dim: #5d4e33;
  --text: #2a2013;
  --text-dim: #5d4e33;
  --accent: #8a6420;
  --accent-2: #8a1f1f;
  --accent-3: #3d5a4c;
  --success: #3f6b34;
  --warning: #8a6420;
  --danger: #a3312c;
  --radius: 8px;
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  /* Ancho compartido: tabs y hoja de contenido siempre alineados */
  --content-max: 1200px;
  --content-pad: 24px;
  /* Color de pestaña por defecto (se sobreescribe segun data-tab) */
  --tab-color: var(--accent);
  --tab-color-soft: rgba(201,162,74,0.14);
  --tab-color-mid: rgba(201,162,74,0.32);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  background:
    radial-gradient(ellipse at 15% -10%, rgba(201,162,74,0.08) 0%, transparent 45%),
    radial-gradient(ellipse at 90% 110%, rgba(138,31,31,0.08) 0%, transparent 45%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1999;
  box-shadow: inset 0 0 160px rgba(90,70,35,0.16);
}

.hidden { display: none !important; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.3px; }

/* ---------- Login ---------- */
#login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

#login-screen::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(201,162,74,0.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(138,31,31,0.07), transparent 45%);
  animation: driftFog 22s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes driftFog {
  0% { transform: translate(0,0) scale(1); }
  100% { transform: translate(3%, -2%) scale(1.08); }
}

.login-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #fffdf6, var(--card));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 44px 38px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 18px 44px rgba(90,70,35,0.28), 0 0 0 1px rgba(138,100,32,0.14);
  animation: caseFileIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes caseFileIn {
  0% { opacity: 0; transform: translateY(18px) rotate(-1deg) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}

.brand { text-align: center; margin-bottom: 30px; }
.brand-icon {
  font-size: 46px;
  display: block;
  margin-bottom: 10px;
  filter: drop-shadow(0 0 10px rgba(201,162,74,0.35));
  animation: lampFlicker 5s ease-in-out infinite;
}
@keyframes lampFlicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 10px rgba(201,162,74,0.35)); }
  4% { opacity: 0.75; }
  6% { opacity: 1; }
  8% { opacity: 0.85; }
  10% { opacity: 1; filter: drop-shadow(0 0 16px rgba(201,162,74,0.55)); }
  60% { opacity: 1; }
  62% { opacity: 0.8; }
  64% { opacity: 1; }
}

.brand h1 {
  font-size: 22px;
  margin: 0 0 10px;
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.tagline {
  color: var(--text-dim);
  font-size: 13px;
  margin: 0;
  font-family: var(--font-display);
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--accent);
  width: 0;
  display: inline-block;
  max-width: 0;
  width: auto;
  animation: typewriter 2.6s steps(46, end) 0.5s forwards, caretBlink 0.8s step-end infinite;
}
@keyframes typewriter { from { max-width: 0; } to { max-width: 100%; } }
@keyframes caretBlink { 50% { border-color: transparent; } }

#login-form label {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

input, select, textarea {
  width: 100%;
  margin-top: 7px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--text);
  font-size: 16px;
  font-family: var(--font-body);
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,74,0.15);
}

.btn {
  border: none;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-display);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.2s ease, opacity 0.15s ease;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(0.97); }
.btn-block { width: 100%; margin-top: 8px; }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #a8823a);
  color: #1a1209;
  box-shadow: 0 4px 14px rgba(201,162,74,0.25);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(201,162,74,0.4); }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  opacity: 0;
}
.btn-primary:active::after { animation: sealStamp 0.5s ease-out; }
@keyframes sealStamp {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(22); opacity: 0; }
}
.btn-ghost { background: transparent; border: 1px solid var(--card-border); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-danger { background: rgba(163,49,44,0.15); color: #d97874; border: 1px solid rgba(163,49,44,0.4); }
.btn-danger:hover { background: rgba(163,49,44,0.28); }
.btn-small { padding: 6px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.error-text { color: #d97874; font-size: 13px; margin-top: 10px; min-height: 16px; font-family: var(--font-body); }
.error-text:not(:empty)::before { content: '\26A0  '; }

/* ---------- App shell ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px var(--content-pad);
  border-bottom: 1px solid var(--card-border);
  background: linear-gradient(180deg, #f0e6cd, #e2d5b6);
  backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand-mini { display: flex; align-items: center; gap: 9px; font-size: 15px; font-family: var(--font-display); color: var(--accent); }
.brand-icon-mini { font-size: 21px; }
.topbar-right { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-dim); flex-wrap: wrap; }

/* Pestañas: comparten exactamente el mismo ancho y alineacion que la hoja
   de abajo, para que la carpeta se sienta como un solo objeto continuo. */
.tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 10px var(--content-pad) 0;
  border-bottom: none;
  overflow-x: auto;
  overflow-y: visible;
  background: transparent;
  position: relative;
  z-index: 6;
  scrollbar-width: thin;
}
.tab-btn {
  position: relative;
  background: linear-gradient(180deg, #e6dabb, #d5c69f);
  border: 1px solid var(--card-border);
  border-top: 3px solid var(--tab-color);
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  color: var(--text-dim);
  padding: 10px 18px 11px;
  font-size: 12px;
  font-family: var(--font-display);
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
  margin-right: -9px;
  transform: translateY(7px);
  transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1), color 0.2s, background 0.25s, border-color 0.2s;
  box-shadow: 0 -2px 5px rgba(90,70,35,0.18);
  flex: 0 0 auto;
}
.tab-btn:hover { transform: translateY(3px); color: var(--ink); background: linear-gradient(180deg, #f0e6cd, #ded0aa); }
.tab-btn.active {
  background: linear-gradient(180deg, var(--parchment), var(--parchment-dim));
  color: #2a2013;
  transform: translateY(0);
  z-index: 5;
  box-shadow: 0 -4px 12px rgba(90,70,35,0.18), inset 0 3px 0 var(--tab-color);
  text-shadow: none;
}
.tab-btn:nth-child(1) { z-index: 4; } .tab-btn:nth-child(2) { z-index: 3; }
.tab-btn:nth-child(3) { z-index: 2; } .tab-btn:nth-child(4) { z-index: 1; }
.tab-btn.tab-pulse::after {
  content: '🔍';
  position: absolute;
  top: -6px; right: -6px;
  animation: tabMagnify 0.4s ease-out;
}
@keyframes tabMagnify {
  0% { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(5deg); }
  100% { opacity: 0; transform: scale(1) rotate(0); }
}

/* Colores de expediente por pestaña: cada carpeta/hoja tiene su propio tono,
   asi se distingue una categoria de otra de un vistazo. */
.tab-btn[data-tab="resumen"]     { --tab-color: #c9a24a; --tab-color-soft: rgba(201,162,74,0.16); --tab-color-mid: rgba(201,162,74,0.36); }
.tab-btn[data-tab="usuarios"]    { --tab-color: #3f7d7d; --tab-color-soft: rgba(63,125,125,0.16); --tab-color-mid: rgba(63,125,125,0.36); }
.tab-btn[data-tab="asignaturas"] { --tab-color: #3a5a8c; --tab-color-soft: rgba(58,90,140,0.16); --tab-color-mid: rgba(58,90,140,0.36); }
.tab-btn[data-tab="misiones"]    { --tab-color: #8a1f1f; --tab-color-soft: rgba(138,31,31,0.16); --tab-color-mid: rgba(138,31,31,0.36); }
.tab-btn[data-tab="casos"]       { --tab-color: #8a1f1f; --tab-color-soft: rgba(138,31,31,0.16); --tab-color-mid: rgba(138,31,31,0.36); }
.tab-btn[data-tab="ranking"]     { --tab-color: #b8860b; --tab-color-soft: rgba(184,134,11,0.16); --tab-color-mid: rgba(184,134,11,0.36); }
.tab-btn[data-tab="progresion"]  { --tab-color: #6b3fa0; --tab-color-soft: rgba(107,63,160,0.16); --tab-color-mid: rgba(107,63,160,0.36); }
.tab-btn[data-tab="insignias"]   { --tab-color: #6b3fa0; --tab-color-soft: rgba(107,63,160,0.16); --tab-color-mid: rgba(107,63,160,0.36); }
.tab-btn[data-tab="perfil"]      { --tab-color: #b5651d; --tab-color-soft: rgba(181,101,29,0.16); --tab-color-mid: rgba(181,101,29,0.36); }
.tab-btn[data-tab="otorgar"]     { --tab-color: #4a7a4a; --tab-color-soft: rgba(74,122,74,0.16); --tab-color-mid: rgba(74,122,74,0.36); }

/* Mismos tonos aplicados a la hoja de contenido: al ser variables CSS,
   heredan automaticamente a todos los hijos (.view-inner, .card, etc). */
#view-root[data-tab="resumen"]     { --tab-color: #c9a24a; --tab-color-soft: rgba(201,162,74,0.14); --tab-color-mid: rgba(201,162,74,0.32); }
#view-root[data-tab="usuarios"]    { --tab-color: #3f7d7d; --tab-color-soft: rgba(63,125,125,0.14); --tab-color-mid: rgba(63,125,125,0.32); }
#view-root[data-tab="asignaturas"] { --tab-color: #3a5a8c; --tab-color-soft: rgba(58,90,140,0.14); --tab-color-mid: rgba(58,90,140,0.32); }
#view-root[data-tab="misiones"]    { --tab-color: #8a1f1f; --tab-color-soft: rgba(138,31,31,0.14); --tab-color-mid: rgba(138,31,31,0.32); }
#view-root[data-tab="casos"]       { --tab-color: #8a1f1f; --tab-color-soft: rgba(138,31,31,0.14); --tab-color-mid: rgba(138,31,31,0.32); }
#view-root[data-tab="ranking"]     { --tab-color: #b8860b; --tab-color-soft: rgba(184,134,11,0.14); --tab-color-mid: rgba(184,134,11,0.32); }
#view-root[data-tab="progresion"]  { --tab-color: #6b3fa0; --tab-color-soft: rgba(107,63,160,0.14); --tab-color-mid: rgba(107,63,160,0.32); }
#view-root[data-tab="insignias"]   { --tab-color: #6b3fa0; --tab-color-soft: rgba(107,63,160,0.14); --tab-color-mid: rgba(107,63,160,0.32); }
#view-root[data-tab="perfil"]      { --tab-color: #b5651d; --tab-color-soft: rgba(181,101,29,0.14); --tab-color-mid: rgba(181,101,29,0.32); }
#view-root[data-tab="otorgar"]     { --tab-color: #4a7a4a; --tab-color-soft: rgba(74,122,74,0.14); --tab-color-mid: rgba(74,122,74,0.32); }

/* El area de contenido = una carpeta abierta sobre el escritorio.
   Mismo max-width/padding que .tabs para que quede pegada justo debajo
   de la pestaña activa, como una pagina real dentro de la carpeta. */
.view-root {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-pad) 60px;
  position: relative;
  perspective: 1800px;
  width: 100%;
  transition: filter 0.2s ease;
}
.view-root::before {
  content: '';
  position: absolute;
  top: 4px; left: calc(var(--content-pad) - 8px); right: calc(var(--content-pad) - 16px); bottom: 4px;
  background: linear-gradient(160deg, #cbbc97, #b9a880);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  z-index: -1;
  box-shadow: 0 16px 36px rgba(90,70,35,0.3);
}
.folder-clip {
  position: absolute;
  top: -6px;
  left: calc(var(--content-pad) + 16px);
  font-size: 26px;
  transform: rotate(-18deg);
  filter: drop-shadow(0 2px 3px rgba(90,70,35,0.4));
  z-index: 7;
}

/* La hoja/pagina de papel dentro de la carpeta: todo el contenido de cada
   pestana vive "escrito" sobre esta hoja. Ocupa el ancho completo del
   contenedor para sentirse como una pagina real, no una tarjeta flotando.
   El borde superior toma el color de la pestaña activa. */
.view-inner {
  padding: 30px 30px 40px;
  transform-style: preserve-3d;
  transform-origin: left center;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), transparent 12%),
    linear-gradient(175deg, var(--parchment-light) 0%, var(--parchment) 55%, var(--parchment-dim) 100%);
  border: 1px solid #8a7444;
  border-top: 5px solid var(--tab-color);
  border-radius: 0 4px 10px 10px;
  box-shadow:
    0 12px 28px rgba(90,70,35,0.25),
    inset 0 0 60px rgba(138,31,31,0.04);
  color: var(--ink);
  min-height: 60vh;
  width: 100%;
  transition: border-top-color 0.25s ease;
}

/* Animacion de "pasar de pagina" del expediente al cambiar de categoria */
.view-flip-out {
  animation: pageFlipOut 0.22s ease-in forwards;
}
.view-flip-in {
  animation: pageFlipIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes pageFlipOut {
  0% { transform: rotateY(0deg); opacity: 1; }
  100% { transform: rotateY(-18deg); opacity: 0; }
}
@keyframes pageFlipIn {
  0% { transform: rotateY(18deg); opacity: 0; }
  100% { transform: rotateY(0deg); opacity: 1; }
}

/* Spinner de lupa mientras carga */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 70px 20px;
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 13px;
}
.magnify-spinner {
  font-size: 32px;
  animation: magnifySweep 1.1s ease-in-out infinite;
}
@keyframes magnifySweep {
  0%, 100% { transform: rotate(-18deg) translateX(-4px); }
  50% { transform: rotate(18deg) translateX(4px); }
}

/* ---------- Cards / stats (ahora como notas sujetas a la hoja) ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.stat-card {
  background: linear-gradient(165deg, #fbf5e6, var(--parchment-light));
  border: 1px solid #b39860;
  border-radius: 4px;
  padding: 16px 18px;
  box-shadow: 0 4px 10px rgba(42,32,19,0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(42,32,19,0.28); }
.stat-card .value { font-size: 26px; font-weight: 700; color: var(--tab-color); font-family: var(--font-display); transition: color 0.25s ease; }
.stat-card .label { font-size: 11px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 0.6px; }

.card {
  background: linear-gradient(165deg, #fbf5e6, var(--parchment-light));
  border: 1px solid #b39860;
  border-radius: 4px;
  padding: 20px 22px;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 5px 14px rgba(42,32,19,0.2);
}
/* "Pin" de tablero de corcho en la esquina de cada nota */
.card::before {
  content: '📌';
  position: absolute;
  top: -10px;
  left: 18px;
  font-size: 16px;
  opacity: 0.9;
  transform: rotate(-8deg);
  filter: drop-shadow(0 1px 2px rgba(90,70,35,0.35));
}
.card h2, .card h3 { margin-top: 0; }
.section-title { font-size: 15px; margin: 0 0 14px; color: var(--ink); display:flex; align-items:center; gap:8px; font-family: var(--font-display); border-bottom: 2px solid var(--tab-color); padding-bottom: 10px; transition: border-color 0.25s ease; }

/* Perfil detective (estudiante) */
.profile-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: linear-gradient(165deg, #fbf5e6, var(--parchment-light));
  border: 1px solid #b39860;
  border-radius: 4px;
  padding: 26px;
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(42,32,19,0.2);
}
.profile-hero::after {
  content: '🔍';
  position: absolute;
  right: -10px;
  bottom: -22px;
  font-size: 110px;
  opacity: 0.06;
  transform: rotate(-15deg);
}
.profile-avatar {
  width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d8b667, var(--accent) 70%);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  flex-shrink: 0;
  border: 2px solid rgba(138,31,31,0.35);
  box-shadow: 0 0 18px rgba(201,162,74,0.35);
  animation: pulseGlow 3s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(201,162,74,0.25); }
  50% { box-shadow: 0 0 22px rgba(201,162,74,0.45); }
}
.profile-info h2 { margin: 0 0 4px; font-size: 21px; color: var(--ink); }
.profile-rank { color: var(--tab-color); font-weight: 600; font-size: 14px; font-family: var(--font-display); }
.profile-points { font-size: 30px; font-weight: 800; margin: 8px 0 2px; color: var(--ink); font-family: var(--font-display); }
.profile-points span { font-size: 12px; color: var(--ink-dim); font-weight: 500; font-family: var(--font-body); text-transform: uppercase; }

.progress-bar {
  height: 10px;
  background: rgba(42,32,19,0.12);
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 4px;
  border: 1px solid #b39860;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tab-color), var(--accent));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-caption { font-size: 12px; color: var(--ink-dim); }

/* Grid de misiones (estilo "expediente" grapado sobre la hoja) */
.mission-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.mission-card {
  background: linear-gradient(180deg, #fbf5e6 0%, var(--parchment) 100%);
  color: var(--ink);
  border: 1px solid #8a7444;
  border-radius: 3px;
  padding: 16px 18px;
  position: relative;
  box-shadow: 0 6px 16px rgba(42,32,19,0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.mission-card:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 12px 26px rgba(42,32,19,0.4); }
.mission-card::before {
  content: 'EXPEDIENTE';
  position: absolute;
  top: 8px; right: -28px;
  background: var(--tab-color);
  color: #fff2e6;
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 1px;
  padding: 3px 32px;
  transform: rotate(35deg);
  box-shadow: 0 2px 5px rgba(90,70,35,0.3);
}
.mission-card .mission-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.mission-title { font-weight: 700; font-size: 14.5px; margin: 0 0 6px; font-family: var(--font-display); color: var(--ink); }
.mission-desc { color: var(--ink-dim); font-size: 13px; line-height: 1.5; margin: 8px 0 0; }
.mission-desc-details { margin: 0 0 12px; }
.mission-desc-details summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11.5px;
  color: var(--tab-color);
  list-style: none;
  user-select: none;
}
.mission-desc-details summary::-webkit-details-marker { display: none; }
.mission-desc-details summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 6px;
  font-size: 9px;
  transition: transform 0.15s ease;
}
.mission-desc-details[open] summary::before { transform: rotate(90deg); }
.points-pill {
  background: var(--tab-color-soft);
  color: var(--tab-color);
  border: 1px solid var(--tab-color-mid);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  font-family: var(--font-display);
}
.status-pill {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--font-display);
}
.status-active { background: rgba(74,106,90,0.18); color: #2f4a3c; }
.status-closed { background: rgba(90,74,48,0.18); color: var(--ink-dim); }

/* Insignias: efecto de sello oficial sobre la hoja */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.badge-item {
  text-align: center;
  padding: 16px 8px;
  border-radius: 50%/12%;
  border: 2px dashed var(--tab-color);
  background: radial-gradient(circle, var(--tab-color-soft), #fbf5e6 70%);
  animation: stampIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.badge-item:nth-child(1) { animation-delay: 0.02s; }
.badge-item:nth-child(2) { animation-delay: 0.08s; }
.badge-item:nth-child(3) { animation-delay: 0.14s; }
.badge-item:nth-child(4) { animation-delay: 0.2s; }
.badge-item:nth-child(5) { animation-delay: 0.26s; }
.badge-item:nth-child(n+6) { animation-delay: 0.3s; }
@keyframes stampIn {
  0% { opacity: 0; transform: scale(1.6) rotate(-14deg); }
  70% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(-4deg); }
}
.badge-item.locked { opacity: 0.4; filter: grayscale(1); border-style: solid; border-color: #b39860; animation: none; }
.badge-icon { font-size: 30px; display: block; margin-bottom: 6px; }
.badge-name { font-size: 12px; font-weight: 700; color: var(--tab-color); font-family: var(--font-display); }
.badge-desc { font-size: 11px; color: var(--ink-dim); margin-top: 4px; }

/* Leaderboard y tablas de datos, como un registro escrito a maquina */
.leaderboard { width: 100%; border-collapse: collapse; }
.leaderboard th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--ink-dim); padding: 8px 10px; border-bottom: 2px solid var(--tab-color); font-family: var(--font-display); }
.leaderboard td { padding: 10px; border-bottom: 1px solid rgba(138,116,68,0.4); font-size: 13.5px; color: var(--ink); }
.leaderboard tr { transition: background 0.15s; }
.leaderboard tr:hover td { background: var(--tab-color-soft); }
.leaderboard tr.me { background: var(--tab-color-soft); }
.rank-medal { font-weight: 800; font-family: var(--font-display); }

table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--ink-dim); padding: 8px 10px; border-bottom: 2px solid var(--tab-color); font-family: var(--font-display); }
table.data-table td { padding: 9px 10px; border-bottom: 1px solid rgba(138,116,68,0.4); vertical-align: middle; color: var(--ink); }
table.data-table tr:hover td { background: var(--tab-color-soft); }

/* Cualquier tarjeta que contenga una tabla puede desplazarse en horizontal
   en pantallas angostas, para no romper el diseño en moviles. */
.card, #users-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; }
.form-row label { font-size: 11px; color: var(--ink-dim); display: block; text-transform: uppercase; letter-spacing: 0.5px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }

/* Campos de formulario dentro de la hoja: se ven como casillas escritas a maquina */
.view-inner input, .view-inner select, .view-inner textarea {
  background: #fffdf6;
  border: 1px solid #b39860;
  color: var(--ink);
}
.view-inner input:focus, .view-inner select:focus, .view-inner textarea:focus {
  border-color: var(--tab-color);
  box-shadow: 0 0 0 3px var(--tab-color-soft);
}
.view-inner .btn-ghost { background: rgba(42,32,19,0.05); border: 1px solid #b39860; color: var(--ink); }
.view-inner .btn-ghost:hover { border-color: var(--tab-color); color: var(--tab-color); }

.tag {
  display:inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--tab-color-soft); color: var(--tab-color);
  border: 1px solid var(--tab-color-mid);
  font-size: 11px; margin: 2px 4px 2px 0; font-family: var(--font-display);
}
.muted { color: var(--ink-dim); font-size: 13px; }
.view-inner .empty-state { text-align: center; padding: 40px 20px; color: var(--ink-dim); font-style: italic; }
.empty-state::before { content: '🔎  '; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  left: 24px;
  max-width: 360px;
  margin-left: auto;
  background: linear-gradient(165deg, #fffdf6, var(--card));
  border: 1px solid var(--accent);
  color: var(--parchment);
  padding: 13px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-family: var(--font-display);
  z-index: 100;
  box-shadow: 0 10px 24px rgba(90,70,35,0.26);
  animation: toastRise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes toastRise {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.error { border-color: var(--danger); color: #eec7c4; }

/* =========================================================================
   MINI AGENTES: dos detectives pixel-art que rondan por la pagina
   ========================================================================= */
.mascot {
  position: fixed;
  top: 0;
  left: 0;
  width: 42px;
  height: 58px;
  z-index: 350;
  cursor: pointer;
  display: none;
  filter: drop-shadow(0 3px 4px rgba(90,70,35,0.4));
  will-change: transform;
}
.mascot-flip { width: 100%; height: 100%; }
.mascot-bob { width: 100%; height: 100%; animation: mascotIdle 2.4s ease-in-out infinite; }
.mascot-bob.mascot-hop { animation: mascotHop 0.35s ease-in-out infinite; }
.mascot-bob.mascot-react { animation: mascotReact 0.6s ease; }
.mascot-svg { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }

@keyframes mascotIdle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
@keyframes mascotHop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  40% { transform: translateY(-9px) scaleY(1.04); }
  100% { transform: translateY(0) scaleY(1); }
}
@keyframes mascotReact {
  0% { transform: scale(1) rotate(0); }
  30% { transform: scale(1.2) rotate(-10deg); }
  60% { transform: scale(1.15) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

.mascot-bubble {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(0.85);
  margin-bottom: 6px;
  background: var(--parchment-light);
  color: var(--ink);
  border: 1px solid #8a7444;
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 10.5px;
  font-family: var(--font-display);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 3px 8px rgba(90,70,35,0.3);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.mascot-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #8a7444;
}
.mascot-bubble.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* =========================================================================
   RESPONSIVE: escritorio grande (por defecto) -> laptop/tablet -> movil
   ========================================================================= */

/* Laptops pequeños / tablets en horizontal */
@media (max-width: 1024px) {
  :root { --content-pad: 18px; }
  .mission-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* Tablets en vertical */
@media (max-width: 768px) {
  :root { --content-pad: 14px; }
  .view-inner { padding: 22px 18px 32px; min-height: 50vh; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .value { font-size: 21px; }
  .profile-hero { padding: 18px; gap: 16px; }
  .profile-avatar { width: 58px; height: 58px; font-size: 26px; }
  .profile-points { font-size: 24px; }
  .card, .profile-hero { padding-left: 16px; padding-right: 16px; }
  .section-title { font-size: 13.5px; }
  .view-root { perspective: 1200px; }
  .mascot { width: 36px; height: 50px; }
}

/* Celulares */
@media (max-width: 640px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .brand-mini { font-size: 13px; }
  .topbar-right { font-size: 11.5px; gap: 8px; }
  .tabs { padding: 8px 12px 0; }
  .tab-btn { padding: 9px 12px; font-size: 10.5px; }
  .view-root { padding: 0 12px 40px; perspective: 900px; }
  .view-root::before { left: 4px; right: 2px; }
  .folder-clip { left: 22px; font-size: 20px; }
  .view-inner { padding: 18px 14px 26px; border-radius: 0 3px 8px 8px; }
  .card { padding: 16px; }
  .mission-grid { grid-template-columns: 1fr; }
  .badge-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
  .leaderboard th, .leaderboard td, table.data-table th, table.data-table td { padding: 7px 6px; font-size: 12px; }
  table.data-table, .leaderboard { min-width: 460px; }
  .profile-hero { flex-direction: column; text-align: center; padding: 20px 16px; }
  .profile-hero::after { display: none; }
  .toast { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .login-card { padding: 30px 22px; }
  .brand-icon { font-size: 38px; }
  .brand h1 { font-size: 19px; }
  .mascot { width: 30px; height: 42px; }
  .mascot-bubble { font-size: 9.5px; padding: 3px 7px; }
}

/* Celulares muy pequeños */
@media (max-width: 380px) {
  .tab-btn { padding: 8px 9px; font-size: 9.5px; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}

/* =========================================================================
   RÚBRICA SUGERIDA Y ASIGNACIÓN DE PUNTOS (individual / masiva)
   ========================================================================= */

.rubric-box {
  margin-top: 14px;
  padding: 14px;
  border: 1px dashed var(--tab-color, #8a7444);
  border-radius: 4px;
  background: rgba(0,0,0,0.02);
}
.rubric-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.rubric-title { font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.rubric-levels { display: flex; flex-direction: column; gap: 10px; }
.rubric-level-row {
  display: grid;
  grid-template-columns: 110px 90px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px;
  background: #fffdf6;
  border: 1px solid #d8c8a0;
  border-radius: 4px;
}
.rubric-level-label {
  font-family: var(--font-display);
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 4px;
  text-align: center;
  color: #fff2e6;
  align-self: center;
}
.rubric-level-excelente { background: #2f7d3f; }
.rubric-level-sobresaliente { background: #6b8f3f; }
.rubric-level-aceptable { background: #b8860b; }
.rubric-level-insuficiente { background: #b5651d; }
.rubric-level-no_logrado { background: #8a1f1f; }
.rubric-points-field, .rubric-criteria-field { font-size: 10.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .4px; }
.rubric-points-input { width: 100%; margin-top: 4px; }
.rubric-criteria-input { width: 100%; margin-top: 4px; resize: vertical; font-family: var(--font-body); }
.rubric-note { font-size: 12px; margin-top: 10px; font-style: italic; }

.rubric-picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.rubric-pick-btn {
  flex: 1 1 130px;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 2px solid #d8c8a0;
  background: #fffdf6;
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.rubric-pick-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(42,32,19,0.18); }
.rubric-pick-btn .rp-label { font-family: var(--font-display); font-size: 11.5px; color: var(--ink); }
.rubric-pick-btn .rp-points { font-size: 11px; color: var(--ink-dim); }
.rubric-pick-btn.selected { border-color: var(--tab-color); box-shadow: 0 0 0 3px var(--tab-color-soft); }
.rubric-pick-excelente.selected { border-color: #2f7d3f; }
.rubric-pick-sobresaliente.selected { border-color: #6b8f3f; }
.rubric-pick-aceptable.selected { border-color: #b8860b; }
.rubric-pick-insuficiente.selected { border-color: #b5651d; }
.rubric-pick-no_logrado.selected { border-color: #8a1f1f; }
.rubric-pick-manual { border-style: dashed; }

.rubric-view { margin-top: 12px; font-size: 12.5px; }
.rubric-view summary { cursor: pointer; font-family: var(--font-display); font-size: 11.5px; color: var(--tab-color); }
.rubric-view-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rubric-view-list li { padding: 6px 8px; background: rgba(0,0,0,0.03); border-radius: 4px; color: var(--ink-dim); }
.rubric-view-list li strong { color: var(--ink); }

/* Selector de estudiantes para otorgar puntos (individual o masivo) */
.student-picker {
  margin: 10px 0;
  border: 1px solid #d8c8a0;
  border-radius: 4px;
  overflow: hidden;
}
.student-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0,0,0,0.04);
  border-bottom: 1px solid #d8c8a0;
  flex-wrap: wrap;
  gap: 6px;
}
.student-check-all { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.student-check-all input { width: auto; margin: 0; }
.student-list {
  max-height: 220px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px;
  padding: 6px;
}
.student-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s ease;
}
.student-row:hover { background: var(--tab-color-soft); }
.student-row input { width: auto; margin: 0; }

.mission-rubric-slot:empty { display: none; }

@media (max-width: 640px) {
  .rubric-level-row { grid-template-columns: 1fr; }
  .rubric-pick-btn { flex: 1 1 45%; }
  .student-list { grid-template-columns: 1fr; max-height: 180px; }
}

.mascot-bob.mascot-tired {
  animation: mascotTired 1.6s ease-in-out infinite;
}
@keyframes mascotTired {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(1px) rotate(-3deg); }
}

/* ---------- Selector de íconos (rangos e insignias) ---------- */
.icon-picker-toggle { margin: 6px 0 0; display: inline-block; }
.icon-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 10px;
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--card-border, #d8c8a0);
  border-radius: 6px;
  max-height: 160px;
  overflow-y: auto;
  max-width: 320px;
}
.icon-pick-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  border-radius: 5px;
  border: 2px solid transparent;
  background: #fffdf6;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.icon-pick-btn:hover { transform: translateY(-1px) scale(1.08); }
.icon-pick-btn.selected { border-color: var(--tab-color); background: var(--tab-color-soft); }

/* ---------- Rangos: fila en edicion ---------- */
table.data-table .rk-icon input,
table.data-table .rk-points input { width: 90px; }
table.data-table .rk-name input { min-width: 140px; }

/* ---------- Insignias: acciones y otorgamiento manual ---------- */
.badge-item { position: relative; padding-bottom: 20px; }
.badge-criteria { font-size: 10px; margin-top: 3px; }
.badge-actions { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.badge-award-box {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--tab-color-mid, #d8c8a0);
  flex-wrap: wrap;
}
.badge-award-select { font-size: 11px; max-width: 120px; }

@media (max-width: 640px) {
  .icon-picker-grid { max-width: 100%; }
  .badge-award-box { flex-direction: column; }
  .badge-award-select { max-width: 100%; width: 100%; }
}


/* ---------- Selector de idioma ES / EN ---------- */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  overflow: hidden;
  background: var(--parchment-light);
}
.lang-btn {
  border: none;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 5px 11px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-btn:hover { background: var(--tab-color-soft); color: var(--ink); }
.lang-btn.active { background: var(--accent); color: #fffdf6; }
.lang-switch-login {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.login-card { position: relative; }

/* ---------- Grupo/curso en el perfil ---------- */
.profile-group { font-size: 13px; color: var(--ink-dim); margin: 2px 0 6px; }

/* ---------- Vista previa de importacion de listas ---------- */
.import-preview { margin-top: 12px; }
.import-table-wrap { max-height: 320px; overflow-y: auto; border: 1px solid var(--card-border); border-radius: 6px; }
.import-table-wrap table.data-table { min-width: 0; }
.import-preview .imp-name { width: 100%; min-width: 140px; }
.import-preview input[type="checkbox"] { width: auto; margin: 0; }
input[type="file"] { padding: 8px; background: var(--parchment-light); }

@media (max-width: 640px) {
  .lang-switch-login { top: 8px; right: 8px; }
  .import-table-wrap { max-height: 260px; }
}


/* ---------- Accesibilidad ---------- */

/* Foco visible para quien navega con teclado. Sin esto, una persona que usa
   Tab no sabe donde esta parada. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn:focus-visible,
.tab-btn:focus-visible,
.lang-btn:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

/* Solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Areas tactiles comodas en pantallas pequeñas: un boton de 6px de alto es
   muy dificil de tocar con el dedo, sobre todo para los mas pequeños. */
@media (max-width: 768px) {
  .btn { min-height: 40px; }
  .btn-small { min-height: 36px; padding: 8px 12px; }
  .tab-btn { min-height: 42px; }
  .student-row { min-height: 38px; }
  input[type="checkbox"] { min-width: 20px; min-height: 20px; }
}

/* Respeta la preferencia del sistema "reducir movimiento".
   Algunos estudiantes sienten mareo o se desconcentran con animaciones
   continuas. Si activan esa opcion en su dispositivo, la plataforma se
   queda quieta y sigue siendo completamente usable. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .brand-icon,
  .tagline,
  .mascot-bob,
  #login-screen::before {
    animation: none !important;
  }
  .tagline { max-width: 100%; border-right: none; }
  .mission-card:hover { transform: none; }
  /* Los detectives dejan de recorrer la pantalla y se quedan discretos en
     una esquina, sin desaparecer del todo. */
  .mascot { transition: none !important; opacity: 0.55; }
}


/* ---------- Ventana "Mi cuenta" (cambio de contraseña) ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(42,32,19,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 500;
  animation: modalFade 0.18s ease-out;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
  background: linear-gradient(180deg, #fffdf6, var(--card));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 26px 24px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 18px 44px rgba(90,70,35,0.4);
  animation: modalRise 0.25s cubic-bezier(0.2,0.8,0.2,1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 10px;
}
.modal-card label {
  display: block;
  font-size: 11px;
  color: var(--ink-dim);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.modal-card input {
  background: #fffdf6;
  border: 1px solid var(--card-border);
  color: var(--ink);
}
.modal-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.modal-actions .btn { flex: 1 1 auto; }

@media (max-width: 640px) {
  .modal-card { padding: 20px 16px; }
}

/* Nota de seguridad bajo el boton de entrar */
.login-note {
  font-size: 11px;
  margin: 14px 0 0;
  text-align: center;
  line-height: 1.5;
}

/* Etiqueta de la cuenta principal protegida (no editable desde el panel) */
.protected-tag {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(138,31,31,0.10);
  border: 1px solid rgba(138,31,31,0.35);
  color: var(--accent-2);
  font-family: var(--font-display);
  font-size: 10.5px;
  white-space: nowrap;
  cursor: help;
}