/* robots-ia/embed — hoja de estilo autonoma.
   Sin fuentes externas: el snippet va en un iframe de sitios de terceros y
   cada peticion extra suma latencia. Se usa la pila de sistema.
   Los colores son los mismos tokens que el resto del sitio. */

:root {
  --bg: #06060a;
  --surface: #0d111a;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --brand: #8f6cc7;
  --accent: #bda0e2;
  --text: #f8fafc;
  --text-2: #cbd5e1;
  --text-dim: #94a3b8;
  --ok: #34d399;
  --no: #f87171;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Space Grotesk", sans-serif;
}

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

/* ── Scrollbars ──
   Sin esto el navegador pinta su barra gris claro sobre el fondo negro, que
   es justo lo que delata que el snippet es un iframe incrustado. Mismos
   valores que la barra global del sitio. */
.rc-input, .rc-out { scrollbar-width: thin; scrollbar-color: rgba(143, 108, 199, 0.55) transparent; }

.rc-input::-webkit-scrollbar,
.rc-out::-webkit-scrollbar { width: 6px; height: 6px; }

.rc-input::-webkit-scrollbar-track,
.rc-out::-webkit-scrollbar-track { background: transparent; }

.rc-input::-webkit-scrollbar-thumb,
.rc-out::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #8f6cc7, #472d75);
  border-radius: 999px;
}

.rc-input::-webkit-scrollbar-thumb:hover,
.rc-out::-webkit-scrollbar-thumb:hover { background: #bda0e2; }

body {
  background: radial-gradient(520px 380px at 8% -10%, rgba(85, 55, 142, 0.22), transparent 60%),
              radial-gradient(420px 320px at 95% 8%, rgba(85, 55, 142, 0.14), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* Columna que ocupa exactamente el alto del iframe: ni scroll de pagina ni
   huecos muertos al final. Antes llevaba min-height:100vh sobre un contenido
   corto y aparecia un vacio enorme debajo del pie.
   max-width + centering: la primera version solo se probo dentro de un iframe
   de 480 px. Abierta como pagina suelta a 1200 px el textarea se convertia en
   una tira de 1200x76 y el texto se estiraba de borde a borde. */
.rc {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100vh;
  padding: 14px 16px;
  gap: 10px;
}

/* min-width:0 en los hijos: en columna flex el ancho minimo automatico dejaba
 * que el lead creciera mas que el iframe y body lo recortaba por la derecha,
 * con la frase cortada a media palabra. */
.rc > * { min-width: 0; max-width: 100%; }

/* ── Cabecera ── */
.rc-head { flex: none; }

.rc-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.22;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}

.rc-lead {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

/* ── Entrada ── */
.rc-inputwrap { flex: none; }

/* Alto par que no corta la linea a medias: 3 lineas de 11.5px/1.5 mas padding */
.rc-input {
  width: 100%;
  height: 76px;
  background: rgba(5, 7, 11, 0.85);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  resize: none;
  overflow-y: auto;
}

.rc-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(143, 108, 199, 0.22);
}

.rc-input::placeholder { color: rgba(148, 163, 184, 0.45); }

.rc-actions { display: flex; gap: 8px; margin-top: 8px; }

.rc-btn {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.rc-btn:hover { color: var(--text); border-color: var(--brand); }

.rc-btn--go {
  background: linear-gradient(180deg, #55378e, #38215c);
  border-color: rgba(143, 108, 199, 0.5);
  color: #fff;
}

.rc-btn--go:hover {
  background: linear-gradient(180deg, #8f6cc7, #472d75);
  border-color: var(--accent);
}

.rc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Veredicto ──
   La pregunta que se hace el visitante es "que IA puede leer mi sitio". Esa
   respuesta va en grande y arriba; la lista de 18 tokens es el detalle. */
.rc-sum {
  flex: none;
  display: none;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}

.rc-sum.is-shown { display: block; }

.rc-sum-idle { color: var(--text-dim); font-size: 12.5px; text-align: center; }

.rc-verdict {
  display: flex;
  align-items: baseline;
  gap: 7px;
  line-height: 1.15;
}

.rc-verdict b {
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}

.rc-verdict span { font-size: 12.5px; color: var(--text-2); }

.rc-sum--mixed { border-color: rgba(251, 191, 36, 0.4); background: rgba(245, 158, 11, 0.09); }
.rc-sum--mixed .rc-verdict b { color: #fbbf24; }

.rc-sum--open { border-color: rgba(251, 191, 36, 0.4); background: rgba(245, 158, 11, 0.09); }
.rc-sum--open .rc-verdict b { color: #fbbf24; }

.rc-sum--closed { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.09); }
.rc-sum--closed .rc-verdict b { color: var(--ok); }

.rc-sum-warn {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-dim);
}

/* ── Resultados ──
   Un solo contenedor con scroll. Los bloqueados van primero: son lo que el
   visitante viene a comprobar. */
.rc-out {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(5, 7, 11, 0.5);
  padding: 6px;
  display: none;
  flex-direction: column;
  gap: 8px;
}

.rc-out.is-shown { display: flex; }

/* Cuando lo que hay dentro es el bloque explicativo no debe estirarse: con
   flex:1 la caja crecia hasta el pie y dejaba 200 px de negro dentro de un
   borde, que es lo que hacia que se viera inacabada. Sin estirar, el hueco
   queda en el fondo de la pagina en vez de dentro de un marco. */
.rc-out.is-static {
  flex: none;
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Degradado en el borde inferior: avisa de que la lista sigue sin obligar a
   descubrirlo, que era como seellia la captura anterior. */
.rc-out {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.rc-out.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}

.rc-group {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px 3px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}

.rc-group--no { color: var(--no); }
.rc-group--ok { color: var(--ok); }

/* ── Estado vacio ──
   Explica por que existe la herramienta. Sin esto el area de resultados queda
   como un rectangulo negro vacio, que es lo que hace que la pagina parezca sin
   terminar cuando se abre sin datos. */
.rc-primer {
  padding: 4px 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.rc-primer-h {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 7px;
}

.rc-primer p + p { margin-top: 8px; }

.rc-primer b { color: var(--text); font-weight: 700; }

.rc-primer code {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--accent);
  background: rgba(143, 108, 199, 0.12);
  border-radius: 4px;
  padding: 1px 4px;
}

.rc-primer ul {
  margin: 9px 0 0;
  padding-left: 17px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
}

.rc-primer li::marker { color: rgba(143, 108, 199, 0.7); }

.rc-primer-f {
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  color: var(--text-dim);
  font-size: 12px;
}

.rc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12px;
  line-height: 1.35;
}

.rc-row:hover { background: rgba(255, 255, 255, 0.035); }

.rc-mark { font-size: 11px; line-height: 1; width: 11px; text-align: center; flex: none; }
.rc-row.is-ok .rc-mark { color: var(--ok); }
.rc-row.is-no .rc-mark { color: var(--no); }

.rc-tok {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* El grupo (training / search / user) solo si hay sitio; a 480px estorba */
.rc-grp {
  display: none;
  margin-left: auto;
  padding-right: 2px;
  font-size: 10px;
  color: rgba(148, 163, 184, 0.65);
  white-space: nowrap;
  flex: none;
}

@media (min-width: 560px) {
  .rc-grp { display: inline; }
}

/* ── Pie ── */
/* margin-top:auto lo ancla al fondo. Sin esto el pie se pegaba al contenido y
   en el estado vacio dejaba el resto del iframe como un hueco muerto; ademas
   hacia que el pie subiera y bajara cada vez que aparecian resultados. */
.rc-foot {
  flex: none;
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 10px;
  padding-top: 4px;
  font-size: 10px;
  line-height: 1.3;
  color: rgba(148, 163, 184, 0.8);
}

/* El enlace puede partirse: con nowrap se salia del iframe por la derecha a
   partir de unos 400 px de ancho. */
.rc-brand { color: var(--accent); text-decoration: none; font-weight: 600; }
.rc-brand:hover { text-decoration: underline; }

@media (max-width: 420px) {
  .rc-foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   Como pagina suelta
   El mismo archivo sirve para dos contextos: embebido en un iframe estrecho
   y abierto en una pestana. El primero manda en 480 px; a partir de 640 px de
   ventana se abre el respiro y la escala de titulo, porque si no queda una
   columna diminuta aplastada en el centro de una pantalla grande.
   ========================================================================== */
@media (min-width: 640px) {
  .rc {
    padding: 28px 24px 20px;
    gap: 14px;
    justify-content: center;
  }

  .rc-title {
    font-size: 30px;
    letter-spacing: -0.03em;
  }

  .rc-lead {
    font-size: 14px;
    margin-top: 6px;
    max-width: 56ch;
  }

  .rc-input {
    height: 150px;
    font-size: 12.5px;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .rc-actions { margin-top: 12px; }

  .rc-btn { font-size: 13px; padding: 8px 20px; }

  .rc-sum { padding: 14px 16px; }

  .rc-verdict b { font-size: 34px; }

  .rc-verdict span { font-size: 14px; }

  .rc-sum-warn { font-size: 12.5px; }

  .rc-out {
    padding: 10px;
    gap: 10px;
    border-radius: 10px;
  }

  .rc-row {
    padding: 7px 9px;
    font-size: 13px;
  }

  .rc-primer { font-size: 13.5px; padding: 6px 10px; }
  .rc-primer code { font-size: 12px; }
  .rc-primer ul { gap: 8px; }

  .rc-tok { font-size: 12.5px; }

  .rc-group { font-size: 10.5px; padding: 4px 8px 5px; }

  .rc-foot { font-size: 11px; padding-top: 8px; }
}