/* Sistema visual del Ecosistema Escriba: crema, tinta y un color por producto.
   El de notarum es el azul tinta; cambiarlo acá lo cambia en todo el sitio. */
:root {
  --crema: #fff8f3;
  --crema-hondo: #f7ece2;
  --tinta: #2a1b14;
  --tinta-suave: rgba(42, 27, 20, 0.64);
  --tinta-tenue: rgba(42, 27, 20, 0.40);
  --linea: rgba(42, 27, 20, 0.12);
  --acento: #1f5f8b;
  --acento-tenue: rgba(31, 95, 139, 0.10);
  --acento-texto: #1f5f8b;
  --terracota: #e06a3a;
  --radio: 18px;
  --sans: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: "cv02", "cv03", "cv04";
}

a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }

.contenedor { max-width: 940px; margin: 0 auto; padding: 0 20px; }
.angosto { max-width: 760px; }

/* ------------------------------------------------------------------ cabecera */

.cabecera {
  border-bottom: 1px solid var(--linea);
  padding: 18px 0;
  margin-bottom: 28px;
}
.cabecera-fila { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.marca { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--tinta); }
.marca:hover { text-decoration: none; }
/* La balanza: el símbolo de la ley, que es lo que notarum lee. Blanca sobre
   el azul de la marca, que a este tamaño se lee mejor que un trazo suelto. */
.marca-icono { width: 22px; height: 22px; flex: none; border-radius: 6px; }
.marca-nota { font-family: var(--mono); font-size: 11px; color: var(--tinta-tenue); font-weight: 400; letter-spacing: 0; }

/* El menú de la cabecera, con el patrón de la suite: arriba sólo la marca y
   un botón, y todo lo demás adentro. Con <details> y no con JavaScript: acá
   se usa para una sola cosa, y no va a ser el menú. */
.menu-caja { position: relative; margin-left: auto; flex: none; }
.menu-boton { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--linea); background: var(--crema); color: var(--tinta-suave);
  font-size: 19px; line-height: 1; user-select: none; }
.menu-boton::-webkit-details-marker { display: none; }
.menu-boton:hover { background: var(--crema-hondo); color: var(--tinta); }
.menu-caja[open] .menu-boton { background: var(--crema-hondo); color: var(--tinta); }

.menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 260px;
  background: var(--crema); border: 1px solid var(--linea); border-radius: 14px;
  box-shadow: 0 10px 30px rgba(42, 27, 20, 0.13); padding: 6px; z-index: 60;
  display: flex; flex-direction: column; gap: 1px; }
.menu-quien { padding: 8px 12px 5px; font-size: 12.5px; color: var(--tinta-tenue);
  font-family: var(--mono); }
.menu-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  border-radius: 9px; text-decoration: none; color: var(--tinta); font-size: 14px; }
.menu-item:hover { background: var(--crema-hondo); }
.menu-item.activa { color: var(--acento-texto); font-weight: 600; }
.menu-ico { width: 18px; height: 18px; flex: none; color: var(--tinta-tenue); display: inline-flex; }
.menu-ico svg { width: 18px; height: 18px; }
.menu-item:hover .menu-ico, .menu-item.activa .menu-ico { color: currentColor; }
.menu-grupo { padding: 7px 12px 3px; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-tenue); }
.menu-sep { height: 1px; background: var(--linea); margin: 5px 4px; }
/* Con los grupos, el menú es más alto que un teléfono acostado: que se
   desplace adentro en vez de quedar cortado abajo de la pantalla. */
.menu { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px);
  overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 480px) {
  .menu { min-width: 0; width: calc(100vw - 40px); }
  .menu-item { padding: 11px 12px; }
}

/* Para lectores de pantalla: el botón dice "Menú" aunque se vea un ⋮. */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* -------------------------------------------------------------------- barras */

.barra { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }

/* Los campos, todos con la misma cara.
   La regla de antes enumeraba tipos —date, search, text— y el que no estaba en
   la lista se quedaba con el estilo del navegador: las cuotas del panel, la
   clave de la entrada, los años de la búsqueda. Quedaban dos estilos distintos
   en la misma pantalla sin ningún motivo visible.
   Ahora se nombran por exclusión: se estilan todos menos los que tienen forma
   propia. Un tipo de campo nuevo entra solo, que es lo que hace que esto no se
   vuelva a desalinear.
   La exclusión va adentro de :where() para que no sume especificidad. Escrita
   con :not() encadenados, esta regla pesaba más que .clave-caja input y le
   ganaba: el campo de la clave se quedaba sin el espacio para el ojito y el
   texto le pasaba por abajo. Con :where() la regla vale lo que un selector de
   elemento, que es lo que corresponde a una base. */
input:where(:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="file"], [type="range"], [type="color"])),
select,
textarea {
  font-family: var(--sans); font-size: 14px; color: var(--tinta);
  background: var(--crema); border: 1px solid var(--linea);
  border-radius: 10px; padding: 8px 12px; min-height: 38px;
  max-width: 100%;
}
textarea { min-height: 62px; resize: vertical; line-height: 1.55; }

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--acento); outline-offset: -1px;
}
input::placeholder, textarea::placeholder { color: var(--tinta-tenue); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--crema-hondo); color: var(--tinta-tenue); cursor: not-allowed;
}

input[type="search"] { flex: 1 1 240px; }
/* Los años y las cuotas son de pocos dígitos: a lo ancho de la caja quedan
   perdidos, y con el ancho justo se lee de qué tamaño es el número. */
input[type="number"] { width: 7.5em; }

/* Las casillas, con el color de la marca y del tamaño del texto que las
   acompaña. Sin esto quedan con el celeste del sistema, que no es de acá. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--acento);
  width: 16px; height: 16px; margin: 0;
  vertical-align: -2px; cursor: pointer;
}
.casilla { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-size: 14px; }
label { cursor: pointer; }

.boton {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  background: var(--acento); color: var(--crema);
  border: 1px solid var(--acento); border-radius: 10px;
  padding: 8px 16px; min-height: 38px; cursor: pointer;
}
.boton:hover { filter: brightness(1.08); text-decoration: none; }
.boton.suave { background: transparent; color: var(--acento-texto); }
.boton.suave:hover { background: var(--acento-tenue); }

/* --------------------------------------------------------------------- texto */

h1 { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
h2 { font-size: 17px; font-weight: 600; margin: 32px 0 12px; }
.bajada { color: var(--tinta-suave); font-size: 14px; margin: 0 0 26px; }

.dato-mono { font-family: var(--mono); font-size: 12px; color: var(--tinta-tenue); }

/* --------------------------------------------------------------------- rubro */

.rubro-titulo {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acento-texto); margin: 30px 0 12px; display: flex; align-items: baseline; gap: 9px;
}
.rubro-titulo .cuenta { font-family: var(--mono); font-weight: 400; color: var(--tinta-tenue); letter-spacing: 0; text-transform: none; }

.rubros-nube { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 26px; }
.rubro-pastilla {
  font-size: 12px; padding: 5px 11px; border-radius: 99px;
  background: var(--crema-hondo); color: var(--tinta-suave); border: 1px solid transparent;
}
.rubro-pastilla:hover { border-color: var(--acento); color: var(--acento-texto); text-decoration: none; }
.rubro-pastilla.activa { background: var(--acento); color: var(--crema); }
.rubro-pastilla .n { font-family: var(--mono); opacity: 0.7; margin-left: 5px; }

/* -------------------------------------------------------------------- avisos */

.aviso {
  display: block; padding: 15px 18px; margin-bottom: 9px;
  background: var(--crema-hondo); border-radius: var(--radio);
  border: 1px solid transparent; color: var(--tinta);
}
.aviso:hover { border-color: var(--acento); text-decoration: none; }
.aviso-organismo { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 2px; }
.aviso-norma { font-size: 13px; color: var(--acento-texto); margin-bottom: 2px; }
.aviso-sintesis { font-size: 13px; color: var(--tinta-suave); }
.aviso-pie { display: flex; gap: 12px; align-items: center; margin-top: 7px; flex-wrap: wrap; }

.marca-chica {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.03em;
  padding: 2px 7px; border-radius: 5px;
  background: var(--acento-tenue); color: var(--acento-texto);
}
.marca-chica.gris { background: rgba(42, 27, 20, 0.07); color: var(--tinta-tenue); }
.marca-chica.terracota { background: rgba(224, 106, 58, 0.13); color: #a8431c; }

/* ------------------------------------------------------------------- métrica */

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 26px; }
.metrica { background: var(--crema-hondo); border-radius: var(--radio); padding: 14px 16px; }
.metrica-cifra { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.metrica-nombre { font-size: 12px; color: var(--tinta-suave); margin-top: 1px; }

/* --------------------------------------------------------------------- aviso */

.aviso-cabecera { border-bottom: 1px solid var(--linea); padding-bottom: 20px; margin-bottom: 24px; }
.cuerpo { font-size: 15.5px; line-height: 1.75; }
.cuerpo p { margin: 0 0 15px; }
.cuerpo table {
  border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 13px;
  display: block; overflow-x: auto;
}
.cuerpo td, .cuerpo th { border: 1px solid var(--linea); padding: 6px 9px; text-align: left; vertical-align: top; }
.cuerpo th { background: var(--crema-hondo); font-weight: 600; }

.anexos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.anexo {
  font-size: 13px; padding: 8px 14px; border-radius: 10px;
  background: var(--crema-hondo); color: var(--acento-texto);
}
.anexo:hover { background: var(--acento); color: var(--crema); text-decoration: none; }

/* ---------------------------------------------------------------- calendario */

.meses { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.mes { background: var(--crema-hondo); border-radius: var(--radio); padding: 14px; }
.mes-nombre { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tinta-suave); margin-bottom: 9px; }
.dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dia {
  font-family: var(--mono); font-size: 11px; text-align: center;
  padding: 5px 0; border-radius: 6px; color: var(--tinta-tenue);
}
.dia.hay { background: var(--acento); color: var(--crema); }
.dia.hay:hover { text-decoration: none; filter: brightness(1.12); }
.dia.suplemento { box-shadow: inset 0 -3px 0 var(--terracota); }

/* -------------------------------------------------------------------- varios */

/* El asistente de consultas: una caja para escribir y el resultado abajo. */
.asistente { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.asistente textarea { flex: 1 1 340px; }

/* La configuración del panel: una grilla de campos cortos, porque son números
   de una o dos cifras y ponerlos uno abajo del otro haría una lista larguísima. */
.config { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 18px; background: var(--crema-hondo); border-radius: var(--radio);
  padding: 18px; margin-bottom: 16px; align-items: end; }
.config-campo { display: flex; flex-direction: column; gap: 5px; }
.config-ancho { grid-column: 1 / -1; }
.config-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: space-between; }
.config-pie .pie-nota { flex: 1 1 260px; margin: 0; }
.config-subtitulo { font-size: 15px; margin: 28px 0 10px; }
/* Sacar una credencial es secundario y destructivo: va aparte y en voz baja,
   lejos del botón de guardar. */
.config-quitar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: -4px 0 16px; font-size: 13.5px; }
.config-quitar .pie-nota { margin: 0; }
/* Una opción de radio con su explicación al lado, que es lo que se lee. */
.opcion { display: flex; gap: 10px; align-items: flex-start; font-size: 14px;
  line-height: 1.5; padding: 6px 0; cursor: pointer; }
.opcion input { margin-top: 4px; flex: none; }

/* El panel: el estado de cada fuente y lo que esté corriendo. */
.tarea { background: var(--crema-hondo); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 16px; font-size: 14px; }
.tarea.corriendo { background: rgba(31, 95, 139, 0.08); }
.tarea-linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tarea-avance { flex: 1; font-family: var(--mono); font-size: 13px; color: var(--tinta-suave); }
.pie-nota { font-size: 13px; color: var(--tinta-tenue); margin-top: 8px; }

/* La normativa provincial: una lista larga que se filtra, así que la barra
   de filtros tiene más campos y las páginas se navegan de a una. */
.casilla { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tinta-suave); white-space: nowrap; }
.paginas { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 26px; }
.materias { display: flex; flex-wrap: wrap; gap: 6px; }
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; margin: 20px 0; padding: 16px 18px; background: var(--crema-hondo); border-radius: var(--radio); font-size: 14px; }
.dato-nombre { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-tenue); margin-bottom: 2px; }
.miga { font-size: 14px; margin-bottom: 18px; }

/* Entrar por el hub de la suite: es la vía principal cuando está encendida,
   así que va primero y con el mismo peso visual que el botón propio. */
.boton.hub { display: block; text-align: center; text-decoration: none; margin-bottom: 18px; }
.o-bien { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--tinta-tenue); font-size: 13px; }
.o-bien::before, .o-bien::after { content: ""; flex: 1; height: 1px; background: var(--linea); }

/* El modo de acceso de la instancia, arriba de la cuenta: quien la opera
   tiene que poder verlo sin abrir la configuración. */
.modo-acceso { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; background: var(--crema-hondo); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 26px; }
.modo-explicacion { color: var(--tinta-suave); font-size: 14px; }
.modo-cuota { color: var(--tinta-tenue); font-size: 13px; font-family: var(--mono); margin-left: auto; }

.vacio { background: var(--crema-hondo); border-radius: var(--radio); padding: 28px; text-align: center; color: var(--tinta-suave); font-size: 14px; }
.vacio strong { display: block; color: var(--tinta); font-size: 16px; margin-bottom: 5px; }

.navegar { display: flex; justify-content: space-between; gap: 12px; margin: 26px 0; font-size: 14px; }

.pie {
  border-top: 1px solid var(--linea); margin-top: 52px; padding: 22px 0 36px;
  font-size: 12.5px; color: var(--tinta-tenue); display: flex; gap: 16px; flex-wrap: wrap;
}

.aviso-nota {
  background: var(--acento-tenue); border-radius: 12px; padding: 11px 15px;
  font-size: 13px; color: var(--tinta-suave); margin-bottom: 20px;
}

@media (max-width: 620px) {
  .secciones { margin-left: 0; width: 100%; }
  h1 { font-size: 21px; }
}

/* ------------------------------------------------------- InfoLEG en el aviso */

.infoleg {
  margin: 22px 0 4px;
  padding: 15px 18px;
  background: var(--crema-hondo);
  border-radius: var(--radio);
  border-left: 3px solid var(--acento);
}
.infoleg-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acento-texto); margin-bottom: 7px;
}
.infoleg-tema { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.infoleg-nota { margin: 0; font-size: 13px; color: var(--tinta-suave); line-height: 1.55; }
.infoleg-enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.infoleg-enlaces .boton { font-size: 13px; padding: 6px 13px; min-height: 0; }

/* --------------------------------------------------------- documentación */

.docs-indice {
  display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 30px;
  padding-bottom: 18px; border-bottom: 1px solid var(--linea);
}
.docs-indice a {
  font-size: 13px; padding: 5px 12px; border-radius: 99px;
  background: var(--crema-hondo); color: var(--tinta-suave);
}
.docs-indice a:hover { background: var(--acento); color: var(--crema); text-decoration: none; }

.docs-parrafo { font-size: 14.5px; color: var(--tinta-suave); line-height: 1.65; margin: 0 0 18px; max-width: 66ch; }
.docs-parrafo code, .docs-tabla code { font-family: var(--mono); font-size: 12.5px; color: var(--acento-texto); }

.docs-grupo {
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--acento-texto); margin: 34px 0 14px;
}

.ruta { background: var(--crema-hondo); border-radius: var(--radio); padding: 15px 18px; margin-bottom: 12px; }
.ruta-linea { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ruta-metodo {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.05em;
  background: var(--acento); color: var(--crema); padding: 3px 8px; border-radius: 5px;
}
.ruta-metodo.mcp { background: var(--terracota); }
.ruta-camino { font-family: var(--mono); font-size: 13.5px; color: var(--tinta); word-break: break-all; }
.ruta-titulo { font-size: 12.5px; color: var(--tinta-tenue); }
.ruta-resumen { margin: 0 0 4px; font-size: 14px; font-weight: 500; }
.ruta-detalle { margin: 0 0 10px; font-size: 13px; color: var(--tinta-suave); line-height: 1.6; max-width: 70ch; }

.ruta-ejemplo {
  margin: 12px 0 0; padding: 9px 12px; background: var(--crema);
  border-radius: 9px; overflow-x: auto;
}
.ruta-ejemplo code { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-suave); white-space: pre; }

.ruta-respuestas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.respuesta { font-size: 12px; color: var(--tinta-tenue); }
.respuesta b { font-family: var(--mono); color: var(--tinta-suave); font-weight: 500; }

.docs-tabla { width: 100%; border-collapse: collapse; margin: 11px 0 0; font-size: 13px; display: block; overflow-x: auto; }
.docs-tabla th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--tinta-tenue); padding: 0 10px 6px 0; white-space: nowrap;
}
.docs-tabla td { padding: 6px 10px 6px 0; border-top: 1px solid var(--linea); vertical-align: top; color: var(--tinta-suave); }
.docs-tabla td:first-child { white-space: nowrap; }
.docs-opciones { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.docs-opciones code { background: var(--crema); padding: 1px 6px; border-radius: 4px; }

.esquema { background: var(--crema-hondo); border-radius: var(--radio); padding: 12px 18px; margin-bottom: 9px; }
.esquema summary { cursor: pointer; font-size: 14px; color: var(--tinta-suave); }
.esquema summary code { font-size: 13.5px; font-weight: 500; color: var(--tinta); }
.esquema[open] summary { margin-bottom: 4px; }

.docs-bloque {
  background: var(--crema-hondo); border-radius: var(--radio);
  padding: 14px 18px; overflow-x: auto; margin: 0 0 18px;
}
.docs-bloque code { font-family: var(--mono); font-size: 12.5px; color: var(--tinta-suave); white-space: pre; }

/* ------------------------------------------------------------- cuentas */

.entrar { max-width: 380px; margin: 0 auto; }
.formulario { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-nombre { font-size: 13px; color: var(--tinta-suave); }
.campo input { width: 100%; }

.clave-caja { position: relative; display: block; }
.clave-caja input { width: 100%; padding-right: 44px; }
.ojo {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 16px;
  padding: 6px 8px; line-height: 1; border-radius: 8px;
}
.ojo:hover { background: var(--crema-hondo); }

.aviso-error {
  background: rgba(224, 106, 58, 0.12); color: #8c2f14;
  border-radius: 12px; padding: 11px 15px; font-size: 13.5px; margin-bottom: 4px;
}

/* La entrada con código: el número se escribe grande y espaciado, como se
   lee en el correo, y lo secundario va abajo y en voz baja. */
.campo input.codigo {
  font-family: var(--mono); font-size: 22px; letter-spacing: .18em;
  text-align: center; padding-top: 12px; padding-bottom: 12px;
}
.entrar-pie {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 20px; font-size: 13.5px; color: var(--tinta-tenue);
}
.entrar-nota { margin: 10px 0 0; font-size: 12.5px; color: var(--tinta-tenue); }
/* Apellido y nombre van juntos, como se leen; en un teléfono, uno abajo del
   otro. */
.campos-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .campos-par { grid-template-columns: 1fr; } }
.campo-ayuda { font-size: 12.5px; color: var(--tinta-tenue); line-height: 1.45; }
.campo select { width: 100%; }
.formulario.angosto { max-width: 380px; }
.plegable { margin-bottom: 26px; }
.plegable > summary { cursor: pointer; color: var(--acento-texto); font-size: 14.5px; }
.plegable[open] > summary { margin-bottom: 4px; }
.en-linea { display: inline; margin: 0; }
.boton-texto {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--acento-texto); cursor: pointer;
}
.boton-texto:hover { text-decoration: underline; }

.token-nuevo {
  background: var(--crema-hondo); border-radius: var(--radio);
  border-left: 3px solid var(--terracota); padding: 16px 18px; margin-bottom: 26px;
}
.token-nuevo-titulo { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.token-nuevo-nota { margin: 0 0 10px; font-size: 13px; color: var(--tinta-suave); line-height: 1.55; }
.token-valor {
  background: var(--crema); border-radius: 10px; padding: 12px 14px;
  margin-bottom: 12px; overflow-x: auto;
}
.token-valor code { font-family: var(--mono); font-size: 13px; color: var(--tinta); white-space: pre; }

.fila-revocada td { opacity: 0.55; }

/* Las cuentas del panel: la cuota se edita en la misma fila, sin ir a otra
   página, porque se ajusta de a varias. */
.tabla-cuentas td { vertical-align: middle; }
.tabla-cuentas .marca-chica { margin-left: 4px; }
.cuota-uno { display: flex; gap: 8px; align-items: center; margin: 0; }
.cuenta-quien { display: block; font-weight: 600; color: var(--tinta); }
.cuenta-correo { font-size: 12.5px; }
.cuenta-detalle { display: block; font-size: 12px; color: var(--tinta-tenue); }
.cuota-uno input[type="number"] { width: 84px; padding: 5px 8px; font-size: 13px; }
.docs-tabla form { margin: 0; }

/* Armar la consulta desde la documentación.
   Cada ruta trae su formulario: se ponen los valores y sale la consulta hecha,
   en vez de un ejemplo fijo que después hay que editar a mano. */
.docs-subtitulo {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-tenue); margin: 16px 0 6px; font-weight: 600;
}
.armar { margin: 4px 0 6px; }
/* Los campos del armador heredan todo y sólo cambian lo suyo: van a lo ancho
   de su celda y en tipografía monoespaciada, porque lo que se escribe ahí son
   valores que después aparecen en una URL.
   Antes esto redefinía el borde con var(--borde), que no existe: un var()
   inválido invalida la declaración entera, así que estos campos quedaban
   directamente sin borde. */
.armar input, .armar select {
  width: 100%; font-family: var(--mono); font-size: 13px;
  padding: 6px 9px; min-height: 34px;
}
.armar .docs-tabla td { vertical-align: top; }
/* La columna del valor, con lugar para escribir; la de la explicación, angosta
   para que no empuje al campo contra el borde. */
.armar .docs-tabla td:nth-child(2) { width: 34%; min-width: 160px; }
.armar .docs-tabla td:nth-child(3) { font-size: 12.5px; }

/* Las tres fuentes, arriba de todo: qué hay acá y para qué sirve cada cosa. */
.fuentes { display: grid; gap: 12px; margin: 16px 0 24px; }
@media (min-width: 720px) { .fuentes { grid-template-columns: repeat(3, 1fr); } }
.fuente {
  background: var(--crema-hondo); border-radius: var(--radio);
  padding: 14px 16px; border-left: 3px solid var(--acento);
}
.fuente h3 { margin: 0 0 4px; font-size: 15px; }
.fuente p { margin: 0 0 8px; font-size: 13px; color: var(--tinta-suave); line-height: 1.6; }
.fuente .dato-mono { font-size: 12.5px; }

/* Las normas relacionadas: qué modificó a ésta y a cuáles modificó ella.
   La ficha decía "modificada 7 veces" sin decir cuáles, que obliga a ir a
   buscarlas a otro lado. */
.relaciones { display: grid; gap: 8px; margin: 8px 0 20px; }
.relacion {
  display: block; text-decoration: none; color: inherit;
  background: var(--crema-hondo); border-radius: 12px; padding: 10px 13px;
  border-left: 3px solid var(--terracota);
}
.relacion:hover { background: var(--acento-tenue); text-decoration: none; }
.relacion-norma { display: block; font-weight: 600; font-size: 14px; color: var(--acento-texto); }
.relacion-titulo { display: block; font-size: 13.5px; margin-top: 2px; }
.relacion-pie {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px;
  font-size: 12px; color: var(--tinta-tenue);
}

/* Las alertas: búsquedas guardadas que avisan cuando aparece algo nuevo. */
.alerta {
  background: var(--crema-hondo); border-radius: var(--radio);
  padding: 13px 16px; margin-bottom: 10px;
}
.alerta-linea { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alerta-criterios { font-size: 13.5px; color: var(--tinta-suave); margin-top: 4px; }
.alerta-pie { font-size: 12px; color: var(--tinta-tenue); margin-top: 6px; }

/* La dirección del feed, para copiarla. */
.alerta-feed {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  background: var(--crema); border-radius: 10px;
}
.alerta-feed code { font-size: 12px; word-break: break-all; flex: 1 1 240px; }


/* ------------------------------------------------------------- la portada */

/* El buscador. Sin resultados es el centro de la página; con resultados
   sube y queda como barra, para no tener que volver atrás a cambiar algo. */
.portada { max-width: 760px; margin: 0 auto; }
.portada:not(.con-resultados) { padding-top: 7vh; }
.portada-titulo { font-size: 34px; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 10px; text-align: center; }
.portada-bajada { color: var(--tinta-suave); text-align: center; margin: 0 auto 30px; max-width: 540px; font-size: 16px; }

.buscador-caja { display: flex; gap: 10px; }
.buscador-caja input[type="search"] { flex: 1; min-width: 0; font-size: 17px; padding: 14px 18px; border-radius: 14px; }
.buscador-caja .boton { padding-left: 22px; padding-right: 22px; border-radius: 14px; }

/* Las fuentes son radios de verdad, vestidos de pastilla: se eligen con el
   teclado y los lectores de pantalla las anuncian como opciones. */
.fuentes { border: 0; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.portada:not(.con-resultados) .fuentes { justify-content: center; }
.fuente-opcion { position: relative; cursor: pointer; }
.fuente-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fuente-opcion span {
  display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 14px;
  background: var(--crema-hondo); color: var(--tinta-suave); border: 1px solid transparent;
}
.fuente-opcion:hover span { border-color: var(--linea); }
.fuente-opcion input:checked + span { background: var(--acento); color: #fff; }
.fuente-opcion input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }

.mas-filtros { margin-top: 12px; font-size: 14px; }
.portada:not(.con-resultados) .mas-filtros { text-align: center; }
.mas-filtros > summary { cursor: pointer; color: var(--tinta-suave); display: inline-block; }
.mas-filtros[open] { text-align: left; }
.mas-filtros-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; text-align: left; }

/* La búsqueda con IA va aparte y con otro color: gasta la cuota del día, y
   quien la usa tiene que saber que es otra cosa que buscar. */
.buscador-ia {
  display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 14px; border-radius: 14px;
  background: rgba(224, 106, 58, 0.08);
}
.buscador-ia .pie-nota { margin: 0; flex: 1 1 260px; }
.boton.boton-ia { background: var(--terracota); border-color: var(--terracota); }
.buscador-sin-ia { text-align: center; }

/* Los resultados. */
.resultados { max-width: 760px; margin: 30px auto 0; }
.resultados-cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--linea);
}
.resultados-cuenta { margin: 0; font-size: 14.5px; color: var(--tinta-suave); }
.grupo { margin-top: 28px; }
.grupo-titulo { font-size: 16px; display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; }
.grupo-total {
  font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--tinta-suave);
  background: var(--crema-hondo); padding: 1px 8px; border-radius: 999px;
}
.grupo-vacio { color: var(--tinta-tenue); font-size: 14px; margin: 6px 0 0; }
.hallazgos { list-style: none; padding: 0; margin: 6px 0 0; }
.hallazgo { padding: 12px 0; border-bottom: 1px solid var(--linea); }
.hallazgo:last-child { border-bottom: 0; }
.hallazgo-titulo { font-weight: 600; line-height: 1.4; }
.hallazgo-detalle {
  margin: 3px 0 2px; font-size: 14px; color: var(--tinta-suave); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hallazgo-fecha { font-family: var(--mono); font-size: 12px; color: var(--tinta-tenue); }
.ver-todos { display: inline-block; margin-top: 8px; font-size: 14px; }

/* Las secciones de siempre, a un clic. */
.accesos {
  max-width: 760px; margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
}
.acceso {
  background: var(--crema-hondo); border-radius: var(--radio); padding: 16px 18px;
  color: inherit; border: 1px solid transparent;
}
.acceso:hover { border-color: var(--acento); text-decoration: none; }
.acceso-titulo { display: block; font-weight: 600; color: var(--tinta); }
.acceso-texto { display: block; font-size: 13px; color: var(--tinta-suave); margin-top: 3px; line-height: 1.45; }

@media (max-width: 620px) {
  .portada-titulo { font-size: 27px; }
  .buscador-caja { flex-direction: column; }
}


/* ------------------------------------------------------ la búsqueda con IA */

.ia-trabajando {
  display: flex; gap: 14px; align-items: center; padding: 18px 20px;
  background: rgba(224, 106, 58, 0.08); border-radius: var(--radio);
}
.ia-trabajando strong { display: block; }
.ia-avance { font-size: 14px; color: var(--tinta-suave); }
.ia-punto {
  width: 12px; height: 12px; border-radius: 50%; background: var(--terracota); flex: none;
  animation: ia-late 1.2s ease-in-out infinite;
}
@keyframes ia-late { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ia-punto { animation: none; } }

.ia-pregunta { font-size: 17px; font-weight: 600; margin: 0 0 18px; }
.ia-pregunta .dato-nombre { margin-bottom: 4px; }
.ia-respuesta {
  background: #fff; border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 20px 24px; line-height: 1.65;
}
.ia-parrafo { margin: 0 0 12px; }
.ia-parrafo:last-child { margin-bottom: 0; }
.ia-item { position: relative; padding-left: 18px; margin-bottom: 6px; }
.ia-item::before { content: "–"; position: absolute; left: 0; color: var(--tinta-tenue); }
/* Las citas: chicas, para no cortar la lectura, pero fáciles de tocar. */
.cita {
  display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 1px;
  font-size: 11.5px; font-weight: 600; line-height: 17px; text-align: center; vertical-align: 2px;
  background: var(--acento-tenue); border-radius: 6px;
}
.cita:hover { background: var(--acento); color: #fff; text-decoration: none; }
.ia-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 6px; }
.ia-fuentes-titulo { margin-top: 26px; }
.ia-fuentes { list-style: none; padding: 0; margin: 8px 0 0; }
.ia-fuente { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); scroll-margin-top: 80px; }
.ia-fuente:target { background: var(--acento-tenue); border-radius: 10px; }
.ia-fuente-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--crema-hondo);
  font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
.ia-fuente-pie { display: block; font-size: 12.5px; color: var(--tinta-tenue); }
.ia-aviso { margin-top: 18px; }

/* -------------------------------------------------------------- acerca de */

.acerca h2 { margin-top: 40px; }
.acerca-lema { font-size: 18px; line-height: 1.5; color: var(--tinta); margin: 4px 0 14px;
  max-width: 34ch; font-weight: 500; letter-spacing: -0.01em; }
.acerca-fuente {
  background: var(--crema-hondo); border-radius: var(--radio);
  padding: 18px 20px; margin: 0 0 12px; border-left: 3px solid var(--acento);
}
.acerca-fuente h3 { margin: 0 0 12px; font-size: 16px; }
.acerca-fuente p { margin: 0 0 8px; font-size: 14px; color: var(--tinta-suave); line-height: 1.6; }
.acerca-origen { font-size: 12.5px !important; margin: 10px 0 0 !important; }
.cifras { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 12px; }
.cifra { display: flex; flex-direction: column; min-width: 0; }
.cifra strong { font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.2; }
.cifra span { font-size: 12.5px; color: var(--tinta-suave); }
.acerca-sub { font-size: 15px; margin: 24px 0 8px; }
.acerca-lista { list-style: none; padding: 0; margin: 0 0 6px; }
.acerca-lista li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 0;
  border-bottom: 1px solid var(--linea); font-size: 14px; }
.acerca-lista li:last-child { border-bottom: 0; }
.acerca-tenue { font-size: 13px; color: var(--tinta-tenue); line-height: 1.55; }
.acerca-avisos { padding: 0; margin: 0; list-style: none; display: grid; gap: 10px; }
.acerca-avisos li { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave);
  padding: 12px 16px; border-radius: 12px; border: 1px solid var(--linea); }
.acerca-avisos strong { color: var(--tinta); }
.acerca-datos { margin: 0; display: grid; grid-template-columns: 11rem 1fr; gap: 0; }
.acerca-datos dt { font-weight: 600; font-size: 14px; padding: 12px 16px 12px 0;
  border-top: 1px solid var(--linea); }
.acerca-datos dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave);
  padding: 12px 0; border-top: 1px solid var(--linea); }
.acerca-enlaces { display: grid; gap: 10px; margin: 0 0 12px; }
@media (min-width: 620px) { .acerca-enlaces { grid-template-columns: 1fr 1fr; } }
.acerca-enlace { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--crema); }
.acerca-enlace:hover { background: var(--crema-hondo); text-decoration: none; }
.acerca-enlace-que { font-weight: 600; color: var(--tinta); font-size: 14.5px; }
.acerca-enlace-donde { font-family: var(--mono); font-size: 12.5px; color: var(--acento-texto);
  overflow-wrap: anywhere; }

/* En el teléfono, cada dato de «tus datos» va arriba de su explicación: en
   dos columnas, la explicación quedaría de a tres palabras por renglón. */
@media (max-width: 620px) {
  .acerca-lema { font-size: 16.5px; }
  .acerca-fuente { padding: 16px; }
  .cifra strong { font-size: 20px; }
  .acerca-datos { grid-template-columns: 1fr; }
  .acerca-datos dt { padding: 14px 0 2px; }
  .acerca-datos dd { border-top: 0; padding: 0 0 12px; }
}

/* ------------------------------------------------------------ los carteles */

/* Un <dialog> abierto desde el servidor. Sin showModal() el navegador no le
   pone fondo ni lo centra, así que lo hace esto: el dialog ocupa la pantalla
   y hace de fondo, y la caja va adentro. Cerrarlo lo cierra todo. */
dialog.modal[open] {
  position: fixed; inset: 0; z-index: 100; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 16px; border: 0;
  background: rgba(42, 27, 20, 0.45); display: flex; align-items: center;
  justify-content: center; overflow-y: auto; color: var(--tinta);
}
.modal-caja {
  background: var(--crema); border-radius: 18px; width: 100%; max-width: 460px;
  padding: 24px 24px 20px; box-shadow: 0 20px 50px rgba(42, 27, 20, 0.25);
  margin: auto;
}
.modal-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--acento-tenue);
  color: var(--acento-texto); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.modal-ico svg { width: 22px; height: 22px; }
.modal-titulo { font-size: 19px; margin: 0 0 8px; }
.modal-texto { font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); margin: 0 0 12px; }
.modal-texto strong { color: var(--tinta); }
.modal-puntos { margin: 0 0 16px; padding-left: 20px; font-size: 14px; line-height: 1.55;
  color: var(--tinta-suave); display: grid; gap: 5px; }
.modal-puntos strong { color: var(--tinta); }
.modal-botones { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 16px 0 0; }
.modal-pie { font-size: 12.5px; color: var(--tinta-tenue); margin: 12px 0 0; }
@media (max-width: 480px) {
  .modal-caja { padding: 20px 18px 16px; }
  .modal-botones { flex-direction: column-reverse; }
  .modal-botones .boton { width: 100%; text-align: center; }
}

/* Los dos cifrados, como tarjetas que se eligen. La contraseña se pide sólo
   si se elige el cifrado que la usa. */
.cifrados { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.cifrado { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--linea); border-radius: 12px; cursor: pointer; font-size: 13.5px;
  line-height: 1.5; color: var(--tinta-suave); background: var(--crema); }
.cifrado input { margin-top: 3px; flex: none; accent-color: var(--acento); }
.cifrado strong { display: block; color: var(--tinta); font-size: 14px; margin-bottom: 1px; }
.cifrado:has(input:checked) { border-color: var(--acento); background: var(--acento-tenue); }
.cifrado-clave { display: none; margin-top: 4px; }
.cifrados:has(input[value="clave"]:checked) .cifrado-clave { display: flex; }

/* Debajo del buscador: si se guardan las consultas o no, siempre a la vista. */
.historial-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  margin: 14px auto 0; font-size: 13px; color: var(--tinta-suave); max-width: 100%; }
.portada:not(.con-resultados) .historial-estado { justify-content: center; }
.historial-ico { width: 15px; height: 15px; display: inline-flex; color: var(--tinta-tenue); }
.historial-ico svg { width: 15px; height: 15px; }
.historial-estado.guardando .historial-ico { color: var(--acento-texto); }
.fuente-mias span { background: transparent; border: 1px dashed var(--linea); }

/* Tus consultas. */
.consultas-cabecera { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.consultas { list-style: none; padding: 0; margin: 0 0 24px; }
.consulta { display: flex; gap: 8px 16px; align-items: flex-start; justify-content: space-between;
  padding: 13px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.consulta-cuerpo { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 280px; }
.consulta-tipo { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tinta-tenue); font-weight: 600; }
.consulta-tipo.ia { color: var(--terracota); }
.consulta-q { font-size: 15.5px; font-weight: 600; overflow-wrap: anywhere; }
.consulta-meta { font-size: 12.5px; color: var(--tinta-suave); }
.consulta-acciones { display: flex; gap: 14px; align-items: center; font-size: 13px; }
.consultas-dejar { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; }
.boton.peligro { background: #b1401d; }
.boton.suave.peligro { background: transparent; color: #b1401d; }
.boton.suave.peligro:hover { background: rgba(177, 64, 29, 0.08); }
.consultas-borrar { margin-top: 28px; }
.cuota-fija { font-size: 12.5px; color: var(--tinta-suave); width: 84px; display: inline-block; }
.historial-acciones { white-space: nowrap; }

/* La marca de letras: el nombre con una parte en el color de énfasis. */
.marca-letras { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; color: var(--tinta); }
.marca-resalte { color: var(--acento); }
.marca-imagen { height: 30px; width: auto; max-width: 180px; display: block; }

/* La marca: la muestra, y el color con su rueda. */
.marca-muestra { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 16px 18px; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--crema); margin-bottom: 8px; }
.marca-muestra-cosas { display: flex; align-items: center; gap: 14px; }
.cifrado-resaltar { display: none; }
.cifrados:has(input[value="letras"]:checked) .cifrado-resaltar { display: flex; }
.color-caja { display: flex; gap: 8px; align-items: center; }
.color-caja input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--linea);
  border-radius: 10px; background: var(--crema); cursor: pointer; flex: none; }
.color-caja input[type="text"] { font-family: var(--mono); max-width: 140px; }

/* El aviso de toda respuesta armada con IA. */
.ia-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px;
  padding: 11px 15px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
  background: rgba(224, 106, 58, 0.10); color: #8c2f14; }

/* --------------------------------------------------------- la vidriera */

.prelanzamiento { text-align: center; margin: 0 0 14px; font-size: 13px; color: var(--tinta-suave); }
.prelanzamiento span { display: inline-block; margin-right: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--acento); color: #fff; font-weight: 600; font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; }
.vidriera { max-width: 860px; margin: 8px auto 40px; }
.vidriera-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 26px 0 30px; }
.vidriera-cifras { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 44px; margin: 0 0 18px;
  padding: 20px 16px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); text-align: center; }
.vidriera-cifras .cifra { align-items: center; }
.vidriera-titulo { text-align: center; font-size: 22px; margin: 44px 0 18px; letter-spacing: -0.02em; }
.vidriera-grilla { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .vidriera-grilla { grid-template-columns: 1fr 1fr; } }
.vidriera-tarjeta { background: var(--crema-hondo); border-radius: var(--radio); padding: 20px 22px; }
.vidriera-tarjeta h3 { margin: 0 0 8px; font-size: 16px; }
.vidriera-tarjeta p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }
.vidriera-texto { max-width: 620px; margin: 0 auto; text-align: center; font-size: 15.5px; line-height: 1.65;
  color: var(--tinta-suave); }
.vidriera-preguntas { max-width: 680px; margin: 0 auto; }
.vidriera-preguntas details { border-bottom: 1px solid var(--linea); padding: 14px 4px; }
.vidriera-preguntas summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.vidriera-preguntas p { margin: 10px 0 2px; font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave); }
.vidriera-final { text-align: center; margin: 48px 0 10px; padding: 30px 16px; border-radius: var(--radio);
  background: var(--acento-tenue); }
.vidriera-final p { margin: 0 0 14px; font-size: 18px; font-weight: 600; }
@media (max-width: 620px) {
  .vidriera-titulo { font-size: 19px; margin-top: 34px; }
  .vidriera-cta .boton { flex: 1 1 100%; text-align: center; }
}

/* Los textos legales: para leerse, no para mirarse. */
.legal { max-width: 68ch; }
.legal h2 { font-size: 17px; margin: 30px 0 10px; }
.legal p, .legal li { font-size: 15px; line-height: 1.7; color: var(--tinta-suave); }
.legal strong { color: var(--tinta); }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal-aaip { font-size: 13.5px !important; border-left: 3px solid var(--linea); padding-left: 14px; }

/* Las carpetas. */
.hallazgo-pie { display: flex; align-items: flex-start; gap: 8px 16px; flex-wrap: wrap; }
.guardar-en { font-size: 13px; }
.guardar-en > summary { cursor: pointer; color: var(--acento-texto); list-style: none; }
.guardar-en > summary::-webkit-details-marker { display: none; }
.guardar-en > summary::before { content: "＋ "; }
.guardar-en[open] > summary { font-weight: 600; }
.guardar-en-caja { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; padding: 10px;
  border: 1px solid var(--linea); border-radius: 12px; background: var(--crema); }
.guardar-en-caja select, .guardar-en-caja input[type="text"] { flex: 1 1 180px; font-size: 13.5px; }
.carpetas { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; }
.carpeta { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px;
  border-radius: 12px; background: var(--crema-hondo); color: var(--tinta); }
.carpeta:hover { text-decoration: none; background: var(--acento-tenue); }
.carpeta-nombre { font-weight: 600; }
.carpeta-cuantas { font-size: 13px; color: var(--tinta-suave); }
.carpeta-nota { margin: 6px 0 0; font-size: 13.5px; padding: 8px 12px; border-radius: 10px;
  background: var(--crema-hondo); color: var(--tinta); white-space: pre-line; }
.migas { font-size: 13px; margin: 0 0 6px; }

/* El panel de uso. */
.uso-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 10px; }
.uso-cifra { background: var(--crema-hondo); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.uso-cifra strong { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.uso-cifra span { font-size: 12.5px; color: var(--tinta-suave); }
.uso-tabla-caja { overflow-x: auto; }
.uso-tabla td { white-space: nowrap; }
.uso-tabla td:not(:first-child) { width: 30%; }
.uso-finde td { color: var(--tinta-tenue); }
.uso-barra { --p: 0%; display: inline-block; vertical-align: middle; height: 8px; border-radius: 4px; background: var(--acento);
  width: calc(var(--p) * 0.8); min-width: 2px; margin-right: 8px; }
.uso-barra.ia { background: var(--terracota); }
.uso-n { font-variant-numeric: tabular-nums; font-size: 13px; }
.uso-dos { display: grid; gap: 10px 30px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.uso-fila { display: grid; grid-template-columns: 9rem 1fr auto; align-items: center; gap: 8px; padding: 5px 0;
  font-size: 13.5px; border-bottom: 1px solid var(--linea); }
.uso-fila .uso-barra { width: var(--p); }

/* Volver a donde se estaba, sin usar el botón del navegador. */
.volver { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px;
  color: var(--tinta-suave); margin: -6px 0 14px; }
.volver:hover { color: var(--acento-texto); text-decoration: none; }

/* Lo que se puede deshacer se hace y se avisa, en vez de preguntar antes. */
.deshacer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.modal-ico.peligro { background: rgba(224, 106, 58, 0.14); color: #b1401d; }
.boton-texto.peligro { color: #b1401d; }

/* La ficha de una norma: el texto acotado para leer, y el índice al lado. */
.norma { display: grid; gap: 22px; }
@media (min-width: 1000px) {
  .norma.con-indice { grid-template-columns: 200px minmax(0, 1fr); }
  .norma-indice { position: sticky; top: 18px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; }
}
.norma-indice-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tinta-tenue); font-weight: 600; margin: 0 0 8px; }
.norma-indice ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.norma-indice a { display: block; padding: 4px 8px; border-radius: 8px; font-size: 13px;
  color: var(--tinta-suave); }
.norma-indice a:hover { background: var(--acento-tenue); color: var(--acento-texto); text-decoration: none; }
.norma-acciones { display: flex; justify-content: flex-end; gap: 14px; margin-bottom: 6px; }
.cuerpo > p, .cuerpo > ul, .cuerpo > ol { max-width: 72ch; }
.cuerpo p[id^="art-"] { scroll-margin-top: 16px; font-weight: 500; }
@media (max-width: 999px) {
  /* En el teléfono el índice va arriba del texto, así que se acota: una ley
     de sesenta artículos empujaba la lectura treinta renglones para abajo. */
  .norma-indice { background: var(--crema-hondo); border-radius: 12px; padding: 12px 14px;
    max-height: 180px; overflow-y: auto; overscroll-behavior: contain; }
  .norma-indice ol { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}
.vidriera-aviso { max-width: 620px; margin: 18px auto 0; padding: 14px 18px; border-radius: 14px;
  background: var(--acento-tenue); font-size: 14.5px; line-height: 1.6; color: var(--tinta-suave);
  text-align: center; }
.vidriera-aviso strong { color: var(--tinta); }

/* La charla sobre una norma. */
.flotante { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center;
  gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--terracota); color: #fff;
  font-size: 14.5px; font-weight: 600; box-shadow: 0 8px 24px rgba(42, 27, 20, 0.22); }
.flotante:hover { text-decoration: none; filter: brightness(1.06); }
.charla-titulo { font-size: 21px; }
.charla { list-style: none; padding: 0; margin: 18px 0 20px; display: grid; gap: 14px; }
.dicho { display: grid; gap: 4px; }
.dicho-quien { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-tenue);
  font-weight: 600; }
.dicho-texto { white-space: pre-line; font-size: 15px; line-height: 1.65; padding: 12px 15px;
  border-radius: 14px; background: var(--crema-hondo); max-width: 62ch; }
.dicho.mio .dicho-texto { background: var(--acento-tenue); }
.dicho.mio { justify-items: end; }
.charla-preguntar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.charla-preguntar textarea { flex: 1 1 320px; resize: vertical; font: inherit; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--linea); background: var(--crema); }
.charla-pie { display: flex; gap: 16px; align-items: center; margin-top: 24px; }
@media (max-width: 620px) { .flotante { right: 12px; bottom: 12px; padding: 11px 15px; font-size: 13.5px; } }