/* Biblioteca de FiloCode: cards de argumentos publicados. Paleta del Intérprete. */
:root {
  --fondo: #060a0c;
  --superficie: #0e171b;
  --superficie-2: #122026;
  --linea: rgba(92, 242, 154, .10);
  --linea-fuerte: rgba(92, 242, 154, .35);
  --fosforo: #5cf29a;
  --menta: #62f5d9;
  --texto: #d7e6dc;
  --texto-suave: #7f9a8b;
  --texto-apagado: #4f6459;
  --rojo: #ff5c6c;
  --oro: #e8c46a;
  --set-l: #a98be0;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--mono); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column;
  background-color: var(--fondo);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(92, 242, 154, .07), transparent 55%),
    linear-gradient(var(--linea) 1px, transparent 1px),
    linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}
a { color: var(--menta); }
::selection { background: rgba(92, 242, 154, .35); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- cabecera ---- */
.cabecera {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(16px, 3vw, 28px); border-bottom: 1px solid var(--linea-fuerte);
  background: linear-gradient(180deg, rgba(14, 23, 27, .95), rgba(6, 10, 12, .6));
  position: sticky; top: 0; z-index: 2; backdrop-filter: blur(6px);
}
.marca { line-height: 0; flex: none; }
.marca img { width: 48px; height: auto; }
.titulo h1 { margin: 0; font-size: 1.25rem; font-weight: 600; color: #fff; letter-spacing: .04em; }
.titulo p { margin: 2px 0 0; font-size: .78rem; color: var(--texto-suave); font-weight: 300; }
.navegacion { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sesion-nombre { color: var(--fosforo); font-size: .8rem; }

.boton {
  display: inline-block; font: inherit; font-size: .8rem; padding: 7px 12px; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--texto); text-decoration: none; text-align: center;
  transition: background .2s, border-color .2s;
}
.boton:hover { background: rgba(92, 242, 154, .08); border-color: var(--fosforo); }
.boton.primario { background: var(--fosforo); color: var(--fondo); border-color: var(--fosforo); font-weight: 600; }
.boton.primario:hover { background: #7ff7b0; }
.boton:disabled, .boton[aria-disabled="true"] { opacity: .4; cursor: not-allowed; background: transparent; border-color: var(--linea-fuerte); pointer-events: auto; }
:focus-visible { outline: 1px solid var(--fosforo); outline-offset: 2px; }

/* ---- controles ---- */
.contenido { width: min(1240px, 100%); margin: 0 auto; padding: 22px clamp(16px, 3vw, 28px) 32px; flex: 1; }
.controles { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.buscar { flex: 1 1 320px; }
.buscar input, .orden select {
  font: inherit; font-size: .88rem; width: 100%; padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--linea-fuerte); background: rgba(0, 0, 0, .4); color: var(--texto);
}
.buscar input:focus, .orden select:focus { outline: 1px solid var(--fosforo); border-color: var(--fosforo); }
.orden { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--texto-suave); }
.orden select { width: auto; }
.orden select option { background: var(--superficie); }

.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.etiquetas button {
  font: inherit; font-size: .74rem; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: rgba(0, 0, 0, .3); color: var(--texto-suave);
}
.etiquetas button small { color: var(--texto-apagado); margin-left: 4px; }
.etiquetas button[aria-pressed="true"] { background: var(--menta); color: var(--fondo); border-color: var(--menta); }
.etiquetas button[aria-pressed="true"] small { color: rgba(6, 10, 12, .6); }

.aviso-libre { margin: 16px 0 0; font-size: .8rem; color: var(--texto-suave); border-left: 3px solid var(--oro); padding: 8px 12px; background: rgba(232, 196, 106, .06); }
.aviso-libre a { color: var(--oro); }
.estado { color: var(--texto-suave); font-size: .85rem; margin: 18px 0 10px; }

/* ---- cards ---- */
.rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: linear-gradient(160deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--fosforo); border-radius: 6px;
  padding: 14px 16px 16px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.card.es-destacado { border-left-color: var(--oro); }
.card-cab { display: flex; gap: 8px; align-items: center; font-size: .68rem; }
.destacado { color: var(--oro); }
.tuyo { color: var(--fondo); background: var(--fosforo); padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.cc { margin-left: auto; color: var(--texto-suave); text-decoration: none; border: 1px solid var(--linea-fuerte); padding: 1px 6px; border-radius: 3px; }
.cc:hover { color: var(--texto); border-color: var(--fosforo); }
.card-titulo { margin: 0; font-size: 1.02rem; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.card-titulo a { color: #fff; text-decoration: none; }
.card-titulo a:hover { color: var(--menta); }
.card-autor, .card-basado { margin: 0; font-size: .74rem; color: var(--texto-suave); }
.card-autor b { color: var(--texto); font-weight: 400; }
.card-basado { color: var(--texto-apagado); font-style: italic; }
.card-descripcion { margin: 2px 0; font-size: .82rem; line-height: 1.55; font-weight: 300; overflow-wrap: anywhere; }
.card-resumen { display: flex; gap: 18px; margin: 2px 0; }
.card-resumen div { display: flex; flex-direction: column-reverse; }
.card-resumen dt { font-size: .64rem; color: var(--texto-apagado); letter-spacing: .06em; }
.card-resumen dd { margin: 0; font-size: 1rem; color: var(--menta); font-weight: 600; }
.card-nombres, .card-firmas { margin: 0; font-size: .72rem; color: var(--texto-suave); line-height: 1.6; overflow-wrap: anywhere; }
.card-nombres span { display: inline-block; color: var(--set-l); border: 1px solid color-mix(in srgb, var(--set-l) 45%, transparent); border-radius: 3px; padding: 0 6px; margin: 0 4px 4px 0; }
.card-firmas b { color: var(--texto); font-weight: 400; }
.card-etiquetas { list-style: none; display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; }
.card-etiquetas li { font-size: .68rem; color: var(--texto-suave); }
.card-etiquetas li::before { content: "#"; color: var(--texto-apagado); }
.card-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.card-acciones .boton { flex: 1 1 auto; font-size: .74rem; }
.card-acciones .abrir { flex-basis: 100%; }
.card-mensaje { margin: 0; font-size: .76rem; color: var(--fosforo); }
.card-mensaje.error { color: var(--rojo); }

.mas { display: block; margin: 20px auto 0; }
.licencia { margin: 32px 0 0; font-size: .74rem; color: var(--texto-suave); text-align: center; }
.pie { display: flex; gap: 12px; justify-content: center; padding: 10px 16px; font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave); border-top: 1px solid var(--linea); }
.pie b { color: var(--texto); font-weight: 600; }

@media (max-width: 640px) {
  .titulo p { display: none; }
  .navegacion { margin-left: 0; width: 100%; }
}
.card-importa { margin: 0; font-size: .72rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.card-importa::before { content: "▤ "; color: var(--texto-apagado); }