/* Identidad visual Ángel Linares — paleta de prompteca-menu-referencia.html */
:root {
  color-scheme: light;
  --c-paper: #FBF7F0; --c-paper-2: #F4ECDC;
  --c-ink: #1A1410; --c-ink-2: #4A3F38; --c-ink-3: #857B71;
  --c-leche: #FFFCF6;
  --c-dorado-deep: #B47619; --c-dorado: #E8A53A;
  --c-line: #ECE2CD; --c-line-strong: #D6C8AA;
  --c-oliva: #6B7B3F;
  --c-turquesa: #1FA3A8; --c-turquesa-deep: #157379;
  --c-rojo-deep: #8E1620; --c-rojo: #C8202C;
  --sombra: 0 1px 2px rgba(26, 20, 16, .04), 0 4px 12px rgba(26, 20, 16, .05);
  --sombra-alta: 0 2px 4px rgba(26, 20, 16, .06), 0 12px 28px rgba(26, 20, 16, .10);
}

* { box-sizing: border-box; margin: 0; }

body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: "ALM DIN", -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  padding: 0;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

.contenedor { max-width: 1500px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

.logo { height: 40px; width: auto; display: block; }
h1 { font-size: 20px; font-weight: 800; letter-spacing: .02em; margin: 0; }
.rotulo { font-size: 10.5px; letter-spacing: .14em; font-weight: 700; color: var(--c-dorado-deep); text-transform: uppercase; }

/* ============ BIENVENIDA ============ */
.centrado {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; padding: 24px 16px;
  background:
    radial-gradient(circle at 18% 12%, rgba(232, 165, 58, .16), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(31, 163, 168, .13), transparent 45%),
    var(--c-paper);
}

.bienvenida {
  background: var(--c-leche);
  border: 1px solid var(--c-line);
  border-radius: 20px;
  box-shadow: var(--sombra-alta);
  padding: clamp(28px, 5vw, 48px);
  max-width: 560px; width: 100%;
  text-align: center;
}
.bienvenida .logo { height: 68px; margin: 0 auto 20px; }
.bienvenida h1 { font-size: clamp(26px, 5vw, 34px); letter-spacing: .04em; }
.bienvenida .rotulo { margin-top: 4px; font-size: 11.5px; }
.bienvenida .entradilla {
  color: var(--c-ink-2); margin: 20px 0 24px;
  font-size: 15px; line-height: 1.6;
}

.puntos {
  display: grid; gap: 12px; text-align: left;
  margin: 0 0 28px; padding: 20px;
  background: var(--c-paper); border-radius: 14px; border: 1px solid var(--c-line);
}
.punto { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--c-ink-2); }
.punto .emoji { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.punto b { color: var(--c-ink); }

.pie-sesion { font-size: 12px; color: var(--c-ink-3); margin-top: 18px; line-height: 1.5; }

.cargando-marca { text-align: center; color: var(--c-ink-3); }
.cargando-marca .logo { height: 56px; margin: 0 auto 16px; opacity: .85; }
.puntitos::after {
  content: "…"; display: inline-block; width: 1em; text-align: left;
  animation: puntitos 1.4s steps(4, end) infinite;
}
@keyframes puntitos { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "…"; } }

/* ============ CABECERA ============ */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-line);
  padding: 12px 0 10px;
  margin-bottom: 20px;
}
.fila-cabecera { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cabecera-marca { display: flex; align-items: center; gap: 12px; }
.sesion { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; font-size: 12.5px; color: var(--c-ink-2); }
.usuario { font-weight: 600; }

.fila-busqueda { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }

.buscador-caja { position: relative; flex: 1; min-width: 240px; max-width: 520px; }
.buscador-caja .lupa {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-ink-3); font-size: 14px; pointer-events: none;
}
#buscador {
  width: 100%; font-family: inherit; font-size: 14px;
  padding: 10px 38px 10px 38px;
  border: 1px solid var(--c-line-strong); border-radius: 999px;
  background: var(--c-leche); color: var(--c-ink);
  transition: border-color .12s, box-shadow .12s;
}
#buscador:focus {
  outline: none; border-color: var(--c-dorado-deep);
  box-shadow: 0 0 0 3px rgba(180, 118, 25, .13);
}
.limpiar {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: none; background: var(--c-paper-2); color: var(--c-ink-2);
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  font-size: 13px; line-height: 1; display: none; font-family: inherit;
}
.buscador-caja.con-texto .limpiar { display: block; }

.acciones-cabecera { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* ============ FILTROS ============ */
#chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip {
  border: 1px solid var(--c-line-strong); background: var(--c-leche);
  border-radius: 999px; padding: 5px 13px; font-size: 12.5px;
  cursor: pointer; color: var(--c-ink-2); font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s, border-color .12s, color .12s;
}
.chip:hover { border-color: var(--c-ink-3); }
.chip .punto-color { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip .cuenta { font-size: 11px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
.chip.activo { background: var(--c-dorado-deep); border-color: var(--c-dorado-deep); color: var(--c-leche); }
.chip.activo .cuenta { color: rgba(255, 252, 246, .75); }

.sub { color: var(--c-ink-3); font-size: 12.5px; margin: 10px 0 16px; }

/* ============ REJILLA ÚNICA ============
   Un solo grid para todas las tarjetas: agrupar por tema abría una rejilla
   nueva por sección, y un tema con una sola skill dejaba dos huecos vacíos.
   Aquí el tema viaja como etiqueta dentro de la tarjeta. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 12px;
  padding-bottom: 28px;
  /* Mosaico: las filas son una rejilla fina y cada tarjeta ocupa tantas como
     mida. Lo calcula ajustarCollage() en app.js, porque el masonry nativo de
     CSS todavía no está disponible fuera de Firefox experimental.
     Sin JS, cada tarjeta ocupa su celda y el resultado sigue siendo legible. */
  grid-auto-rows: minmax(min-content, max-content);
  align-items: start;
}
.grid.collage { grid-auto-rows: 4px; align-items: stretch; }
.grid.collage .sep-dept { align-self: end; }

/* Encabezado de departamento: ocupa la fila entera del grid, así separa de
   verdad sin abrir una rejilla nueva que dejaría medias filas vacías. */
.sep-dept {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: 10px;
  margin: 18px 0 2px;
}
.sep-dept:first-child { margin-top: 0; }
.sep-num {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 12px; font-weight: 700; color: var(--c-line-strong);
}
.sep-dept h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-dorado-deep); margin: 0; white-space: nowrap;
}
.sep-cuenta { font-size: 11.5px; color: var(--c-ink-3); white-space: nowrap; }
.sep-linea { flex: 1; height: 1px; background: var(--c-line-strong); }

.card {
  position: relative;
  border-radius: 14px; padding: 14px 16px;
  background: var(--c-leche);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-line-strong);
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  display: flex; flex-direction: column; gap: 8px;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.card:focus-visible { outline: 2px solid var(--c-dorado-deep); outline-offset: 2px; }

.card-cab { display: flex; gap: 11px; align-items: flex-start; }
.icono {
  font-size: 19px; line-height: 1; width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--c-paper-2);
}
.card-titulo { flex: 1; min-width: 0; }
.nombre { font-weight: 700; font-size: 14px; word-break: break-word; display: block; line-height: 1.3; }

.etiquetas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor;
  background: transparent; cursor: pointer; font-family: inherit; line-height: 1.5;
}
.tag:hover { filter: brightness(.85); }
.tag-dept { color: var(--c-ink-3); border-color: var(--c-line-strong); background: var(--c-paper); }
.tag-borrador { color: var(--c-dorado-deep); background: #FFF6E5; border-color: var(--c-dorado); cursor: help; }

.desc { font-size: 12.5px; color: var(--c-ink-2); }
.uso { font-size: 11.5px; font-style: italic; color: var(--c-ink-3); }

.card-pie { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 2px; }
.lapiz {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 14px; color: var(--c-ink-3); font-family: inherit; padding: 2px 4px;
  border-radius: 6px; opacity: 0; transition: opacity .12s;
}
.card:hover .lapiz, .lapiz:focus-visible { opacity: 1; }
.lapiz:hover { color: var(--c-dorado-deep); background: var(--c-paper-2); }

/* ---- Requisitos ---- */
.deps { display: flex; gap: 5px; flex-wrap: wrap; }
.dep {
  font-size: 12px; line-height: 1; cursor: help; background: #FFFFFF;
  border: 1.5px solid var(--c-line-strong); border-radius: 7px; padding: 3px 6px;
}
.dep.opc { background: var(--c-paper-2); border-color: var(--c-dorado); }
.dep.ok { border-color: var(--c-oliva); }
.dep.falta { background: var(--c-rojo); border-color: var(--c-rojo-deep); color: #fff; font-weight: 700; }

.card.bloqueada { opacity: .78; background: #FFF9F7; border-left-color: var(--c-rojo) !important; }
.card.bloqueada .nombre { text-decoration: line-through; text-decoration-color: var(--c-rojo); text-decoration-thickness: 2px; }
.bloq {
  color: #fff; background: var(--c-rojo); border-radius: 5px; font-size: 10px;
  font-weight: 800; padding: 2px 6px; cursor: help; letter-spacing: .04em;
}

/* ============ ESTADOS ============ */
.estado { padding: 48px 24px; text-align: center; color: var(--c-ink-3); }
.estado .grande { font-size: 32px; display: block; margin-bottom: 10px; opacity: .55; }
.error {
  background: #FBEAEA; border: 1px solid var(--c-rojo); border-radius: 12px;
  padding: 14px 16px; color: var(--c-rojo-deep); margin-bottom: 20px;
}
.pie {
  font-size: 11.5px; color: var(--c-ink-3); margin-top: 8px;
  border-top: 1px solid var(--c-line); padding: 14px 0 28px; line-height: 1.7;
}

/* ============ PANEL DE FICHA ============ */
#panel {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--c-leche);
  border: 1px solid var(--c-line-strong); border-bottom: none;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 28px rgba(26, 20, 16, .14);
  padding: 18px clamp(16px, 3vw, 28px);
  display: none; max-height: 62vh; overflow-y: auto;
  max-width: 1500px; margin: 0 auto;
}
#panel h3 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cerrar {
  margin-left: auto; cursor: pointer; border: 1px solid var(--c-line-strong);
  background: var(--c-paper-2); border-radius: 8px; padding: 5px 12px;
  font-size: 12px; font-family: inherit; color: var(--c-ink-2);
}
.cerrar:hover { background: var(--c-line); }

.ficha { font-size: 13px; color: var(--c-ink-2); line-height: 1.6; margin: 10px 0 14px; }
.ficha h1, .ficha h2, .ficha h3 { font-size: 13.5px; color: var(--c-dorado-deep); margin: 12px 0 5px; }
.ficha ul, .ficha ol { margin: 5px 0 5px 20px; }
.ficha li { margin: 3px 0; }
.ficha code { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12px; background: var(--c-paper-2); border-radius: 4px; padding: 1px 5px; }
.ficha pre { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; }
.ficha pre code { background: none; padding: 0; }
.ficha table { width: 100%; border-collapse: collapse; font-size: 12.5px; display: block; overflow-x: auto; }
.ficha td, .ficha th { border: 1px solid var(--c-line); padding: 5px 9px; text-align: left; }
.ficha th { background: var(--c-paper-2); }

.acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pista { font-size: 11.5px; color: var(--c-ink-3); margin-top: 10px; line-height: 1.5; }
.nota-bloqueo {
  margin-top: 10px; padding: 10px 14px; border: 1.5px solid var(--c-rojo);
  background: #FFF3F3; border-radius: 10px; font-size: 13px; color: var(--c-rojo-deep);
}

/* ============ BOTONES ============ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 9px; padding: 9px 15px;
  font-size: 13px; font-weight: 700; color: var(--c-leche); cursor: pointer;
  font-family: inherit; background: var(--c-ink-2);
  transition: filter .12s, transform .08s;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn.grande { padding: 13px 22px; font-size: 14.5px; background: var(--c-dorado-deep); width: 100%; justify-content: center; }
.btn.bloqueado { background: var(--c-rojo); opacity: .55; cursor: not-allowed; }
.aviso-copia { font-size: 12px; color: var(--c-oliva); display: none; }

:focus-visible { outline: 2px solid var(--c-dorado-deep); outline-offset: 2px; }

/* ============ RESPALDO DEL DEEP LINK ============ */
.respaldo {
  display: none; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(640px, 94vw); background: var(--c-leche);
  border: 2px solid var(--c-dorado-deep); border-radius: 14px;
  padding: 13px 16px; box-shadow: var(--sombra-alta);
  z-index: 9999; font-size: 13.5px; gap: 10px; align-items: center; flex-wrap: wrap;
}

@media (max-width: 700px) {
  .acciones-cabecera { width: 100%; margin-left: 0; }
  .acciones-cabecera .btn { flex: 1; justify-content: center; }
  .grid { grid-template-columns: 1fr; }
  .lapiz { opacity: 1; }
  header { position: static; }
}