/* EL RADAR DE NORU · el sistema de Mercura (DESIGN.md, Nono 22 oct 2026): papel crema, titulares enormes en serif fina con su
   parte en naranja, etiquetas de máquina en monoespaciada, rayas finas y ninguna sombra. Lo demás, una sans limpia y pequeña.
   Colores y radios, siempre con sus variables. Ningún texto con ancho máximo (regla de NORU). Solo claro. */
:root {
  --papel: #f8f7f2; --blanco: #ffffff; --oscuro: #2a2819;
  --tinta: #1d1d1b; --tinta-2: rgba(23, 21, 13, 0.64); --tinta-3: rgba(23, 21, 13, 0.46); --tinta-4: rgba(23, 21, 13, 0.3);
  --raya: rgba(23, 21, 13, 0.14); --raya-2: rgba(23, 21, 13, 0.24); --piedra: #c7c7b8; --pozo: rgba(23, 21, 13, 0.035);
  --naranja: #ff4f21; --naranja-t: #d93a10; --naranja-suave: rgba(255, 79, 33, 0.1); --cielo: #66c2ea; --cielo-suave: rgba(102, 194, 234, 0.18);
  --verde: #2f7d4f; --verde-suave: rgba(47, 125, 79, 0.12); --ambar: #9a6400; --ambar-suave: rgba(240, 170, 20, 0.18);
  --acento: var(--naranja-t); --volt-t: var(--naranja-t);   /* los nombres que usa app.js en línea */
  --r-s: 4px; --r: 8px; --r-pill: 999px;
  --serif: 'Newsreader', 'Season Serif', Georgia, serif;
  --f: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --t: 160ms ease;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 15px/1.5 var(--f); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: var(--r-s); }
::selection { background: var(--naranja); color: #fff; }

/* la voz: titular serif enorme con su parte en naranja; etiqueta de máquina encima */
.eti { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.eti::before { content: ''; width: 7px; height: 7px; background: var(--naranja); }
h1 { margin-top: 18px; font: 400 64px/1.02 var(--serif); letter-spacing: -1.4px; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--naranja); }
h2 { margin: 56px 0 16px; font: 400 34px/1.08 var(--serif); letter-spacing: -0.4px; }
h3 { margin: 22px 0 8px; font-size: 15px; font-weight: 600; }
.sub { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--tinta-2); text-wrap: pretty; }
.gris { color: var(--tinta-2); }
.por { font-size: 13px; line-height: 1.45; color: var(--tinta-3); }
.mono { font-family: var(--mono); font-size: 12px; }

/* la barra */
.barra { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 60px; padding: 0 32px; background: rgba(248, 247, 242, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--raya); }
.barra__marca { display: flex; align-items: baseline; gap: 10px; }
.barra__marca b { font: 600 18px/1 var(--f); letter-spacing: -0.4px; }
.barra__marca span { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--naranja-t); }
.dos { display: flex; gap: 2px; justify-self: center; }
.dos a { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: var(--r-s); font-size: 14px; font-weight: 500; letter-spacing: -0.2px; color: var(--tinta-2); transition: color var(--t), background var(--t); }
.dos a:hover { color: var(--tinta); background: var(--pozo); }
.dos a[aria-current] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--naranja); border-radius: 0; }
.dos i { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--naranja); color: #fff; font: 600 11px/18px var(--mono); font-style: normal; text-align: center; }
.barra__der { justify-self: end; font: 500 11px/1 var(--mono); color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.06em; }

.pag { max-width: 1320px; margin: 0 auto; padding: 56px 32px 120px; }
.cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--raya); }
.cabeza > div:first-child { flex: 1 1 560px; }
.cabeza__acc { display: flex; gap: 8px; flex-wrap: wrap; }
.miga { display: inline-flex; gap: 6px; margin-bottom: 22px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); }
.miga:hover { color: var(--naranja-t); }

/* botones */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 1px solid var(--raya-2); border-radius: var(--r-s); background: var(--blanco); color: var(--tinta); font-size: 14px; font-weight: 600; letter-spacing: -0.28px; cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t); }
.bt:hover { border-color: var(--tinta); }
.bt--cobalt { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.bt--cobalt:hover { border-color: var(--naranja); background: var(--naranja); }
.bt[disabled] { border-color: var(--raya); background: transparent; color: var(--tinta-4); cursor: default; }
.bt--s { height: 30px; padding: 0 10px; font-size: 13px; }

/* filtros, píldoras y casillas */
.barra-f { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 24px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip { height: 30px; padding: 0 12px; border: 1px solid var(--raya-2); border-radius: var(--r-pill); background: transparent; font-size: 13px; font-weight: 500; color: var(--tinta-2); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.chip:hover { border-color: var(--tinta); color: var(--tinta); }
.chip[aria-pressed='true'] { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.chips__t { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); margin-right: 4px; }
.buscador { height: 34px; min-width: 240px; flex: 0 1 320px; padding: 0 12px; border: 1px solid var(--raya-2); border-radius: var(--r-s); background: var(--blanco); font-size: 14px; }
.buscador:focus { outline: 0; border-color: var(--tinta); }
.et { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; margin: 2px 4px 2px 0; border: 1px solid var(--raya); border-radius: var(--r-pill); background: var(--blanco); font-size: 12px; font-weight: 500; color: var(--tinta); white-space: nowrap; }
.et b { font: 500 11px var(--mono); color: var(--naranja-t); }
.et--si, .et--parte, .et--no, .et--azul, .et--naranja { border-color: transparent; }
.et--si { background: var(--verde-suave); color: var(--verde); }
.et--parte { background: var(--ambar-suave); color: var(--ambar); }
.et--no { background: var(--naranja-suave); color: var(--naranja-t); }
.et--azul { background: var(--cielo-suave); color: #1c6a8c; }
.et--naranja { background: var(--naranja); color: #fff; }
.et--gris { border-color: transparent; background: var(--pozo); color: var(--tinta-2); }
.casilla { width: 16px; height: 16px; accent-color: var(--tinta); cursor: pointer; }

/* tablas */
.tabla { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; background: var(--blanco); border: 1px solid var(--raya); border-radius: var(--r); overflow: hidden; }
.tabla th { padding: 11px 14px; text-align: left; font: 500 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); border-bottom: 1px solid var(--raya); white-space: nowrap; }
.tabla td { padding: 14px; border-bottom: 1px solid var(--raya); vertical-align: top; font-size: 14px; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tbody tr[data-ir] { cursor: pointer; }
.tabla tbody tr { transition: background var(--t); }
.tabla tbody tr:hover { background: #fcfbf8; }
.tabla .nom b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.2px; }
.tabla .nom span { display: block; margin-top: 2px; font-size: 13px; color: var(--tinta-3); }
.tabla .c { text-align: center; width: 44px; }
.tabla .n { text-align: right; white-space: nowrap; }
.tabla .f { white-space: nowrap; font: 12px/1.5 var(--mono); color: var(--tinta-2); }
.tabla .que { color: var(--tinta-2); }
.tabla .que i { color: var(--tinta-3); }
.tabla tr.ya td { background: var(--pozo); }
.tabla tr.fuera td:not(:first-child) { opacity: 0.45; }
.tabla tr.sel td { background: var(--naranja-suave); }
.puntos { font: 500 18px/1 var(--mono); color: var(--naranja-t); }
.cuenta { margin-top: 14px; font: 500 12px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-3); }

/* tarjetas y bloques */
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 28px; }
.tarjeta { display: block; padding: 18px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); transition: border-color var(--t); }
a.tarjeta:hover { border-color: var(--tinta); }
.tarjeta__t { margin-top: 10px; font: 400 22px/1.12 var(--serif); letter-spacing: -0.2px; }
.tarjeta > .por:first-child { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--naranja-t); }
.tarjeta__t + .por { margin-top: 10px; font-family: var(--mono); font-size: 12px; }
.tarjeta--noche, .oscuro { border: 0; background: var(--oscuro); color: #fff; }
.tarjeta--noche .por, .oscuro .por { color: rgba(255, 255, 255, 0.64); }
.tarjeta--noche a, .oscuro a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.datos { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); }
.datos > div { flex: 1 1 160px; padding: 14px 16px; border-right: 1px solid var(--raya); }
.datos > div:last-child { border-right: 0; }
.datos dt { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }
.datos dd { margin: 8px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.datos dd a { color: var(--naranja-t); }
.cifra { font: 400 40px/1 var(--serif); }

/* la ficha de una empresa: de qué startups sería cliente */
.cliente { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; padding: 18px 20px; border: 1px solid var(--raya); border-left: 3px solid var(--naranja); border-radius: var(--r); background: var(--blanco); }
.cliente > div { flex: 1 1 420px; }

/* el motor */
.motor { display: grid; gap: 22px; margin-top: 32px; padding: 26px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); }
.motor__fila { display: grid; gap: 10px; }
.motor__t { font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-2); }
.elegidos { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.elegido { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 12px; border-radius: var(--r-pill); background: var(--tinta); color: #fff; font-size: 13px; font-weight: 500; }
.elegido b { font: 500 12px var(--mono); color: var(--naranja); }
.elegido button { display: grid; place-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; }
.sugerencias { border: 1px solid var(--raya); border-radius: var(--r-s); background: var(--blanco); max-height: 300px; overflow: auto; }
.sugerencias button { display: grid; grid-template-columns: 56px 1fr; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--raya); background: transparent; text-align: left; font-size: 14px; cursor: pointer; }
.sugerencias button:last-child { border-bottom: 0; }
.sugerencias button:hover { background: var(--naranja-suave); }
.sugerencias b { font: 500 13px var(--mono); color: var(--naranja-t); }
.form input[type=text], .motor input[type=text] { height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--raya-2); border-radius: var(--r-s); background: var(--blanco); font-size: 15px; }
.form input[type=text]:focus, .motor input[type=text]:focus { outline: 0; border-color: var(--tinta); }
.motor__pie { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--raya); }
.form { display: grid; gap: 14px; margin-top: 20px; padding: 22px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.form select { height: 40px; padding: 0 10px; border: 1px solid var(--raya-2); border-radius: var(--r-s); background: var(--blanco); }
.form input[type=file] { font-size: 13px; }
.form .fila { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* la ficha de una empresa: índice a la izquierda, nota a la derecha */
.ficha { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; margin-top: 32px; align-items: start; }
.indice { position: sticky; top: 84px; display: grid; gap: 1px; }
.indice a { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: var(--r-s); font-size: 14px; color: var(--tinta-2); transition: background var(--t), color var(--t); }
.indice a:hover { background: var(--pozo); color: var(--tinta); }
.indice a[aria-current] { background: var(--tinta); color: #fff; }
.indice a[aria-current] .mono { color: var(--naranja); }
.indice .mono { color: var(--tinta-4); }
.indice p { margin: 14px 10px 6px; font: 500 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-3); }

/* la nota, leída del Markdown */
.nota { margin-top: 28px; padding: 34px 40px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); font-size: 15.5px; line-height: 1.62; }
.ficha .nota { margin-top: 0; }
.nota h1 { margin: 0 0 18px; font-size: 40px; }
.nota h2 { margin: 40px 0 14px; padding-top: 26px; border-top: 1px solid var(--raya); font-size: 28px; }
.nota h2:first-child, .nota h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.nota h3 { font-size: 16px; }
.nota p, .nota ul, .nota ol, .nota table, .nota blockquote, .nota pre { margin: 0 0 14px; }
.nota p, .nota li { color: rgba(23, 21, 13, 0.82); }
.nota ul { padding-left: 20px; list-style: disc; } .nota ol { padding-left: 22px; list-style: decimal; }
.nota li { margin-bottom: 6px; }
.nota b { color: var(--tinta); font-weight: 600; }
.nota em { color: var(--tinta-3); font-size: 0.92em; }
.nota a { color: var(--naranja-t); }
.nota a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nota blockquote { padding: 4px 0 4px 16px; border-left: 2px solid var(--naranja); }
.nota pre { padding: 14px 16px; border-radius: var(--r-s); background: var(--pozo); overflow-x: auto; font: 13px/1.5 var(--mono); }
.nota table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; }
.nota th, .nota td { padding: 9px 12px; border-bottom: 1px solid var(--raya); text-align: left; vertical-align: top; }
.nota th { font: 500 11px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--tinta-3); }
.nota code, .registro code { font: 13px var(--mono); padding: 1px 5px; border-radius: var(--r-s); background: var(--pozo); }

/* los trabajos */
.punto { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-4); }
.punto--corriendo { background: var(--naranja); animation: late 1.2s ease-in-out infinite; }
.punto--hecho { background: var(--verde); } .punto--fallo, .punto--cortado { background: var(--naranja-t); }
@keyframes late { 50% { opacity: 0.3; } }
.marcha { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 16px 18px; border-radius: var(--r); }
/* un trabajo: lo que ha hecho, en grande; lo que va haciendo, claro; el registro técnico, plegado */
.ahora { margin-top: 28px; padding: 26px 30px; border-radius: var(--r); background: var(--oscuro); color: #fff; }
.ahora .eti { color: rgba(255, 255, 255, 0.64); }
.ahora__dicho { margin-top: 14px; font: 400 24px/1.3 var(--serif); letter-spacing: -0.2px; }
.ahora__dicho p { margin: 0 0 8px; }
.ahora__paso { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, 0.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ahora__paso .punto { flex: none; }
.nota.hecho { margin-top: 28px; }
.nota.hecho .eti { margin-bottom: 16px; }
.pasos { margin-top: 28px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); }
.pasos > summary { padding: 16px 20px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; }
.pasos > summary::-webkit-details-marker { display: none; }
.pasos > summary::before { content: '+'; display: inline-block; width: 18px; color: var(--naranja-t); font-family: var(--mono); }
.pasos[open] > summary::before { content: '−'; }
.registro { margin: 0; padding: 0 20px 8px; border-top: 1px solid var(--raya); font-size: 14px; }
.registro > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--raya); list-style: none; }
.registro > li:last-child { border-bottom: 0; }
.registro time { color: var(--tinta-4); font: 12px/1.6 var(--mono); }
.registro > li > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tinta-3); font-size: 13.5px; }
.registro > li.claude > div { color: var(--tinta); font-size: 15px; line-height: 1.5; }
.registro > li.claude p { margin: 0 0 6px; }
.registro > li.claude ul, .registro > li.claude ol { margin: 4px 0 8px; padding-left: 20px; list-style: disc; }
.registro > li.claude ol { list-style: decimal; }
.registro > li.claude li { margin-bottom: 4px; }
.registro > li.claude table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 13.5px; }
.registro > li.claude th, .registro > li.claude td { padding: 6px 10px; border-bottom: 1px solid var(--raya); text-align: left; vertical-align: top; }
.registro > li.error > span { color: var(--naranja-t); }
.registro > li.fin > span, .registro > li.orden > span { color: var(--verde); font-weight: 500; }
.encargo { margin: 0 20px 16px; }
.encargo summary { padding: 10px 0; font-size: 13px; color: var(--tinta-3); cursor: pointer; }
.encargo p { padding: 12px 14px; border-radius: var(--r-s); background: var(--pozo); font-size: 13px; line-height: 1.55; color: var(--tinta-2); }
.resultado { margin-top: 24px; padding: 22px 24px; border-radius: var(--r); background: var(--oscuro); color: #fff; }

/* el aviso de coste */
dialog.coste { width: min(520px, calc(100% - 32px)); padding: 28px; border: 1px solid var(--raya); border-radius: var(--r); background: var(--blanco); color: var(--tinta); }
dialog.coste::backdrop { background: rgba(29, 29, 27, 0.4); }
dialog.coste h2 { margin: 12px 0 10px; font-size: 30px; }
dialog.coste .fila { display: flex; gap: 8px; justify-content: flex-end; margin-top: 22px; }

.aviso { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 9; padding: 11px 16px; border-radius: var(--r-s); background: var(--tinta); color: #fff; font-size: 14px; font-weight: 500; }
.vacio { margin-top: 24px; padding: 22px; border: 1px dashed var(--raya-2); border-radius: var(--r); color: var(--tinta-2); }

@media (max-width: 900px) {
  .barra { grid-template-columns: 1fr auto; height: auto; padding: 10px 16px; row-gap: 6px; }
  .dos { grid-column: 1 / -1; justify-self: stretch; overflow-x: auto; }
  .pag { padding: 36px 16px 80px; }
  h1 { font-size: 42px; letter-spacing: -0.8px; }
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tabla .ocultable { display: none; }
  .nota { padding: 22px; }
}