@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;700&display=swap');

:root {
  --bg: #f3f3f1;
  --panel: #ffffff;
  --border: #e3e3df;
  --text: #16171b;
  --muted: #5e606a;
  --brand: #e11d6f;
  /* Un tinte por facultad. Mismo croma y luminosidad entre sí para que ninguno grite: solo
     aparecen al pasar el mouse (o al tocar), el resto del tiempo el mosaico es blanco. */
  --c-fain: #d81b60;
  --c-face: #1f8a5b;
  --c-faen: #d9631e;
  --c-faju: #2f6fd6;
  --c-fadi: #7b4fd1;
  --c-fasa: #1a8f98;
  --c-faru: #b07a1a;
  --tint: 12%;   /* cuánto del color de la facultad se mezcla en el fondo de la baldosa en hover */
}
/* El mapa guarda el tema que elegiste en uademap::theme. La landing lo respeta: theme-init.js
   traduce esa clave a data-theme antes de pintar, así quien puso tema claro con el sistema en
   oscuro no ve una landing oscura y después un mapa claro. Sin elección explícita sigue
   mandando la preferencia del sistema. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f14; --panel: #13151c; --border: #22242e; --text: #e6e8f0; --muted: #8a8ea0;
    --brand: #fb5fa0; --tint: 18%;
    --c-fain: #f06292; --c-face: #4cc38a; --c-faen: #f0955a; --c-faju: #6ea0f0;
    --c-fadi: #a98bf0; --c-fasa: #4fc3cc; --c-faru: #d9a94a;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0f14; --panel: #13151c; --border: #22242e; --text: #e6e8f0; --muted: #8a8ea0;
  --brand: #fb5fa0; --tint: 18%;
  --c-fain: #f06292; --c-face: #4cc38a; --c-faen: #f0955a; --c-faju: #6ea0f0;
  --c-fadi: #a98bf0; --c-fasa: #4fc3cc; --c-faru: #d9a94a;
}

/* Motion (según fluidfunctionalism.com/docs/motion): micro-interacciones cortas, ~80 ms de
   entrada y la salida más corta todavía, sin sobre-impulso. En CSS: la duración del estado
   base es la de SALIDA (se aplica al dejar el hover) y la de :hover es la de ENTRADA. */
:root {
  --ease: cubic-bezier(.2, 0, 0, 1);  /* curva de salida sin rebote (critically damped) */
  --t-in: 110ms;
  --t-out: 80ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Outfit', sans-serif;
  /* Todo entra en una pantalla: cabecera / mosaico (lo que sobre) / pie. Sin scroll. */
  min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(16px, 2.4vh, 28px);
  padding: clamp(20px, 3.5vh, 44px) clamp(18px, 4vw, 56px) clamp(16px, 2.6vh, 32px);
}

header { display: flex; flex-direction: column; gap: 6px; }
header .top { display: flex; justify-content: space-between; align-items: center; }
.brand { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
/* Mismo botón redondo que el del mapa; cambia la misma clave (uademap::theme), así el tema
   elegido acá es el que después muestra el mapa, y al revés. */
.theme-btn {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  transition: color var(--t-out) var(--ease), border-color var(--t-out) var(--ease), transform var(--t-out) var(--ease);
}
.theme-btn:hover { color: var(--text); border-color: var(--muted); transform: translateY(-1px); transition-duration: var(--t-in); }
.theme-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.theme-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand em { font-style: normal; color: var(--brand); }
/* Acceso a la página del MCP: una píldora chica al lado del tema, no compite con el mosaico. */
.top-right { display: flex; align-items: center; gap: 8px; }
.mcp-link {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--border);
  color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: color var(--t-out) var(--ease), border-color var(--t-out) var(--ease), transform var(--t-out) var(--ease);
}
.mcp-link:hover { color: var(--text); border-color: var(--muted); transform: translateY(-1px); transition-duration: var(--t-in); }
.mcp-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mcp-tag { background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border-radius: 999px; }
@media (max-width: 420px) { .mcp-link { padding-right: 6px; } .mcp-link .mcp-txt { display: none; } }
h1 { margin: 0; font-size: clamp(26px, 3vw, 40px); font-weight: 500; letter-spacing: -.025em; line-height: 1.05; }

/* Mosaico 4+3: doce columnas; las 4 de arriba ocupan 3, las 3 de abajo ocupan 4. Cero huecos. */
#faculties {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 1fr;
  gap: clamp(10px, 1.2vw, 16px); min-height: 0;
}
.tile {
  grid-column: span 3;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(16px, 2vw, 28px);
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  color: var(--text); text-decoration: none; min-height: 0; overflow: hidden;
  transition: background-color var(--t-out) var(--ease), border-color var(--t-out) var(--ease),
              transform var(--t-out) var(--ease);
}
.tile:nth-child(n+5) { grid-column: span 4; }

.sigla {
  font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: .9;
  transition: color var(--t-out) var(--ease);
}
.meta { display: flex; flex-direction: column; gap: 4px; }
.name { font-size: clamp(14px, 1.3vw, 20px); font-weight: 500; line-height: 1.15; }
.count { font-size: 13px; color: var(--muted); }

/* Hover: la baldosa toma un velo del color de su facultad y la sigla se tiñe. Sutil a
   propósito: el mosaico sigue siendo blanco y el color solo cuenta qué baldosa estás por abrir. */
.f-fain { --c: var(--c-fain); } .f-face { --c: var(--c-face); } .f-faen { --c: var(--c-faen); }
.f-faju { --c: var(--c-faju); } .f-fadi { --c: var(--c-fadi); } .f-fasa { --c: var(--c-fasa); }
.f-faru { --c: var(--c-faru); }
.tile:hover, .tile:focus-visible {
  background: color-mix(in oklab, var(--c) var(--tint), var(--panel));
  border-color: color-mix(in oklab, var(--c) 45%, var(--border));
  transform: translateY(-2px);
  transition-duration: var(--t-in);
  outline: none;
}
.tile:hover .sigla, .tile:focus-visible .sigla { color: var(--c); transition-duration: var(--t-in); }
.tile:active { transform: translateY(0); transition-duration: var(--t-out); }

footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}
footer a { color: var(--muted); text-decoration: underline; transition: color var(--t-out) var(--ease); }
footer a:hover { color: var(--text); transition-duration: var(--t-in); }

/* Celular: dos columnas, FAIN a lo ancho arriba y las otras 6 en 2×3. Tampoco quedan huecos. */
@media (max-width: 700px) {
  body { gap: 14px; }
  #faculties { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile, .tile:nth-child(n+5) { grid-column: span 1; padding: 14px 16px; border-radius: 16px; }
  .tile:first-child { grid-column: span 2; flex-direction: row; align-items: flex-end; }
  .tile:first-child .meta { align-items: flex-end; text-align: right; }
  .sigla { font-size: clamp(30px, 10vw, 42px); }
  .name { font-size: 14px; }
  .count { font-size: 12px; }
  footer { font-size: 11px; flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Celular apaisado: pantalla ancha pero baja (un iPhone en horizontal deja ~300px útiles).
   Con el mosaico de escritorio solo entraba la sigla y el nombre quedaba cortado. Acá cada
   baldosa pasa a una línea (sigla a la izquierda, nombre y cantidad a la derecha), todo más
   chico, y las filas miden al menos su contenido: si aun así no entra, scrollea. */
@media (max-height: 480px) {
  body { height: auto; gap: 8px; padding: 12px clamp(16px, 3vw, 28px) 10px; }
  #faculties { min-height: auto; } /* si no entra, la página scrollea; no se pisa con el pie */
  header { gap: 2px; }
  .brand { font-size: 15px; }
  .theme-btn { width: 30px; height: 30px; }
  h1 { font-size: 20px; }
  #faculties { grid-auto-rows: minmax(max-content, 1fr); gap: 8px; }
  .tile, .tile:nth-child(n+5) {
    flex-direction: row; align-items: center; gap: 12px;
    padding: 8px 14px; border-radius: 14px;
  }
  .sigla { font-size: clamp(24px, 3.6vw, 32px); }
  .meta { gap: 1px; min-width: 0; }
  .name { font-size: 12px; }
  .count { font-size: 11px; }
  footer { font-size: 11px; }
}

/* Con "reducir movimiento" activado quedan solo los cambios de color, sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .tile, .tile:hover, .tile:active { transform: none; }
}

/* ── Sugerencias (modal anónimo) ───────────────────────────── */
.linkish { background:none; border:0; padding:0; font:inherit; color:var(--muted); text-decoration:underline; cursor:pointer; transition:color var(--t-out) var(--ease); }
.linkish:hover { color:var(--text); transition-duration:var(--t-in); }
/* Motion de modal según fluidfunctionalism: entra en ~240ms, sale en ~160ms (más corto), sin rebote. */
#feedback-overlay {
  position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center; padding:16px;
  opacity:0; visibility:hidden; transition:opacity 160ms var(--ease), visibility 0s linear 160ms;
}
#feedback-overlay.show { opacity:1; visibility:visible; transition:opacity 240ms var(--ease), visibility 0s; }
#feedback-box {
  position:relative; width:100%; max-width:440px; box-sizing:border-box;
  background:var(--panel); border:1px solid var(--border); border-radius:20px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
  transform:translateY(8px) scale(.98); transition:transform 160ms var(--ease);
}
#feedback-overlay.show #feedback-box { transform:none; transition-duration:240ms; }
#feedback-box h2 { margin:0; font-size:20px; font-weight:600; letter-spacing:-.01em; }
#feedback-box p { margin:0; font-size:13.5px; color:var(--muted); line-height:1.4; }
#feedback-text {
  width:100%; min-height:120px; resize:vertical; box-sizing:border-box;
  font:inherit; font-size:14px; padding:12px; border-radius:12px;
  border:1px solid var(--border); background:var(--bg); color:var(--text);
}
#feedback-text:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:transparent; }
.feedback-email-label { margin:4px 0 -6px; font-size:13.5px; color:var(--text); }
#feedback-email {
  width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:10px 12px;
  border-radius:12px; border:1px solid var(--border); background:var(--bg); color:var(--text);
}
#feedback-email:focus { outline:2px solid var(--brand); outline-offset:1px; border-color:transparent; }
#feedback-email[aria-invalid="true"] { border-color:#c0392b; }
#feedback-box .feedback-email-hint { font-size:12px; margin-top:-6px; }
#feedback-box .feedback-email-error { font-size:12px; color:#c0392b; margin-top:-6px; }
#feedback-send {
  align-self:flex-end; font:inherit; font-weight:600; font-size:14px; padding:10px 18px;
  border-radius:999px; border:1px solid var(--brand); background:var(--brand); color:#fff; cursor:pointer;
  transition:transform var(--t-out) var(--ease), opacity var(--t-out) var(--ease);
}
#feedback-send:hover { transform:translateY(-1px); transition-duration:var(--t-in); }
#feedback-send:disabled { opacity:.7; cursor:default; transform:none; }
#feedback-close {
  position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; font-size:14px;
}
#feedback-close:hover { color:var(--text); }
@media (prefers-reduced-motion: reduce) { #feedback-box, #feedback-overlay.show #feedback-box { transform:none; } }
/* Con menos de 16px, iOS Safari hace zoom al enfocar un campo (mismo criterio que styles.css). */
@media (max-width: 700px) { #feedback-text, #feedback-email { font-size:16px; } }

.foot-links { display:flex; gap:18px; flex-wrap:wrap; }