/* docs/estilos/base.css */
:root{
  --paper:#fbfaf7; --band:#f2f0ea; --ink:#16151a; --dim:#6a6760; --rule:#dcd8ce;
  --blue:#1b4fd4; --blue-soft:#8aa3e6; --red:#c02a24; --graph:#8e8a80;
}
:root[data-theme="dark"]{
  --paper:#131316; --band:#191a1e; --ink:#eceae4; --dim:#948f86; --rule:#2e2f35;
  --blue:#7aa2ff; --blue-soft:#3f5694; --red:#ef5f52; --graph:#6f6c66;
}

/* Y el mismo oscuro cuando lo pide el sistema y el lector todavia no eligio nada.
   El `:not([data-theme="light"])` es todo el asunto: sin el, quien pidio claro
   teniendo el sistema en oscuro veria oscuro igual, o sea le pisariamos una
   decision consciente -- peor que no respetar el sistema. Por eso el boton escribe
   SIEMPRE un valor explicito y nunca borra el atributo: «claro» y «no elegi nada»
   tienen que poder distinguirse.
   Si tocas esta paleta, toca tambien la de arriba: son la misma y hay una prueba
   (test/tokens.test.js) que se cae si se separan. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
  --paper:#131316; --band:#191a1e; --ink:#eceae4; --dim:#948f86; --rule:#2e2f35;
  --blue:#7aa2ff; --blue-soft:#3f5694; --red:#ef5f52; --graph:#6f6c66;
  }
}
/* Los titulos de nota van a 52px fijos, y una palabra larga no entra en un
   telefono chico: «homomorfismo» mide 335px a ese cuerpo, asi que a 320px de
   viewport desbordaba 39px la PAGINA ENTERA, no el titulo. Partir la palabra es
   mas feo que no partirla y mucho menos feo que una barra de scroll horizontal
   en todo el documento. Va en `h1` y no en una clase porque el problema es del
   cuerpo de letra, no de una nota. */
h1{overflow-wrap:break-word}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);
     font-family:"Source Serif 4",Charter,Georgia,serif;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none;border-bottom:1px solid var(--blue-soft)}
a:hover{color:var(--red);border-bottom-color:var(--red)}

/* La miga de pan del encabezado. Queda en --dim para no competirle al titulo,
   pero con subrayado propio: sin el se lee como texto y no como enlace, y sin
   enlace visible no hay forma de salir de una nota. Los enlaces normales del
   sitio van en --blue; este no, porque el azul de Logica significa «lo que
   estas mirando» y la miga es justamente lo que NO estas mirando. */
.miga a { color:var(--dim); border-bottom:1px solid var(--rule) }
.miga a:hover { color:var(--ink); border-bottom-color:var(--ink) }
input[type=range]{accent-color:var(--blue);background:transparent}
button{font-family:"JetBrains Mono",ui-monospace,monospace}
/* Las franjas de widget son width:100% con padding lateral, asi que sin esto
   suman 40 px de mas y la pagina desborda en pantallas angostas. Va acotado a
   `section` a proposito: un `box-sizing` global cambiaria el ancho util de las
   columnas de texto, que hoy calculan su padding por fuera del max-width. */
section { box-sizing: border-box; }

/* Las ocho clases salen de contar los atributos `style` de las cuatro paginas: 391
   atributos con 62 valores distintos. Cada declaracion de aca es una copia textual del
   atributo que reemplaza -- este archivo no decide nada de diseno, solo deja de repetir
   lo que el archivo de diseno ya decidio. */

.columna { max-width: 680px; margin: 0 auto; padding: 0 24px; display: flex; flex-direction: column; gap: 0; }
.columna-final { padding-bottom: 80px; }

/* La columna de apertura de una nota: el ancho de lectura, centrado, con el
   aire de arriba y sin el de abajo -- lo de abajo lo pone cada seccion. Estaba
   copiada como atributo `style` en las trece paginas del sitio; es la misma
   decision de diseno en todas, asi que vive una vez. */
.columna-inicial { max-width: 680px; margin: 0 auto; padding: 56px 24px 0; display: flex; flex-direction: column; gap: 0; }

.banda { width: 100%; background: var(--band); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 26px 20px 28px; margin: 30px 0 0; display: flex; justify-content: center; }
.marco-widget { width: 100%; max-width: 880px; display: flex; flex-direction: column; gap: 14px; }

.encabezado-widget { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

.boton { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: transparent; border: 1px solid var(--rule); border-radius: 2px; padding: 9px 13px; cursor: pointer; }
.boton-primario { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--blue); border: none; border-radius: 2px; padding: 9px 16px; cursor: pointer; }

.control { display: flex; flex-direction: column; gap: 5px; }

.lecturas { display: flex; flex-wrap: wrap; gap: 0 26px; border-top: 1px solid var(--rule); padding-top: 12px; font: 400 12px/1.5 'JetBrains Mono', monospace; color: var(--dim); }

canvas { width: 100%; aspect-ratio: 16/8; display: block; touch-action: none; }

/* Las diez clases tipograficas. Salen de medir los 587 atributos `style` de las nueve
   paginas y quedarse con los diez valores mas repetidos que son tipografia y no layout
   (la medicion completa, con el conteo de los 60 valores distintos, esta en
   .superpowers/investigacion-deuda/medicion.md). Cada declaracion es copia textual del
   atributo que reemplaza. */

.lectura-valor { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.lectura-valor.roja { color: var(--red); }
.lectura-valor.azul { color: var(--blue); }
.lectura-valor.tenue { color: var(--dim); }
.lectura-valor.grafico { color: var(--graph); }

/* Hermana de .lectura-valor y NO un modificador suyo: el eco en vivo del valor de un
   slider vive en un <output> y va sin negrita; el resultado final vive en un <b> y va
   con negrita. Son dos componentes distintos a proposito, verificado en las ocho
   paginas con widgets. Fusionarlos pondria en negrita los ecos o se la sacaria a los
   resultados -- un cambio visual real. */
.valor-control { color: var(--ink); font-variant-numeric: tabular-nums; }

.parrafo { font: 400 19px/1.62 'Source Serif 4', Georgia, serif; margin: 18px 0 0; text-wrap: pretty; }
.parrafo-suelto { font: 400 19px/1.62 'Source Serif 4', Georgia, serif; margin: 30px 0 0; text-wrap: pretty; }

/* line-height 1.35 y no 1: en pantallas angostas un rotulo largo envuelve --«TRABAJO,
   ENERGIA Y CANTIDAD DE MOVIMIENTO» a 390 px-- y con 1 las dos lineas se tocan: la tilde
   de ENERGIA pisa la de abajo. En un rotulo de una sola linea no cambia nada. */
.titulo-seccion { font: 600 13px/1.35 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 52px 0 0; }

/* .rotulo-mono titula el widget ("Simulacion 1"); .rotulo-campo etiqueta un control.
   Difieren solo en letter-spacing (.14em vs .1em) y tampoco es descuido: la distincion
   es consistente en las ocho paginas. Dos roles, dos clases. */
.rotulo-mono { font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rotulo-campo { font: 500 10.5px/1 'JetBrains Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

.titulo-fila { font: 600 15px/1.2 'Source Serif 4', Georgia, serif; }
.nota-fila { font: 400 13px/1.3 'Source Serif 4', Georgia, serif; color: var(--dim); }

.negrita { font-weight: 600; }

@keyframes tp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(27,79,212,0)}
  50%{box-shadow:0 0 0 7px rgba(27,79,212,.16)}
}