/* Sistema de diseño "notarial moderno", común a las herramientas del despacho
   (mismo esquema que motor-plazos: serif para títulos, sans humanista para el
   cuerpo, azul marino sobre gris claro, con tema oscuro). */

/* ---------------------------------------------------------------------------
   Tipografías servidas desde el propio sitio, no desde Google Fonts: así la
   aplicación funciona sin conexión y el navegador no hace ninguna petición a
   servidores ajenos. Las dos son "variables" (un solo archivo cubre todos los
   grosores), de ahí el  font-weight  con rango.
   El rango de caracteres es el subconjunto "latin" de Google, que cubre el
   español completo. Los archivos están en  public/fuentes/ .
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("fuentes/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fuentes/libre-baskerville-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Le dice al navegador de qué color va la aplicación, para que pinte en
     consonancia lo que dibuja él y no nosotros: el desplegable de la clase de
     pena, las flechas de los campos numéricos, el cursor de texto, las barras
     de desplazamiento y, en el móvil, el teclado. Sin esto, en tema oscuro
     Safari los sigue pintando en blanco. */
  color-scheme: light;
  --fondo: #e1e1e1;
  --panel: #ffffff;
  --texto: #1f3044;
  --texto-sec: #5a6678;
  --gris-claro: #ededed;
  --hover: #f3f5f8;
  --borde: #c6cdd8;
  --azul: #1f3044;
  --azul-boton: #33506f;
  --azul-tinte: #dde4ec;
  --verde: #2f6d4f;
  --verde-claro: #e2efe8;
  --rojo: #b23a3a;
  --rojo-claro: #f6e7e7;
  --ambar: #946514;
  --ambar-claro: #f6efdd;
  --violeta: #6a3fa0;
  --violeta-claro: #ece3f7;
  --cabecera: #1f3044;
  --tabs-fondo: #1f3044;
  --tabs-inactivo: #cdd9e8;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  --sombra-elevada: 0 12px 28px rgba(31, 48, 68, 0.35);
}

html[data-theme="oscuro"] {
  color-scheme: dark;
  --fondo: #10171f;
  --panel: #1b2532;
  --texto: #e6ebf2;
  --texto-sec: #9aa6b6;
  --gris-claro: #243140;
  --hover: #222e3c;
  --borde: #33414f;
  --azul: #9dbbdc;
  --azul-boton: #3a78c2;
  --azul-tinte: #243a52;
  --verde: #5fb98c;
  --verde-claro: #1d3528;
  --rojo: #e07a7a;
  --rojo-claro: #3a2525;
  --ambar: #d8b15f;
  --ambar-claro: #352c18;
  --violeta: #b69ae0;
  --violeta-claro: #2c2140;
  --cabecera: #14223a;
  --tabs-fondo: #14223a;
  --tabs-inactivo: #9fb4cd;
}

* {
  box-sizing: border-box;
}

/* El atributo `hidden` sólo lo aplica la hoja del navegador con
   `[hidden] { display: none }`, así que cualquier regla nuestra que declare un
   `display` (por ejemplo `.cuota { display: flex }`) lo anula y el elemento
   sigue viéndose. Esta regla lo zanja para toda la aplicación: lo que se marca
   como oculto en el JS queda oculto. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

h1,
h2,
h3 {
  font-family: "Libre Baskerville", Georgia, "Times New Roman", serif;
  font-weight: 700;
  margin: 0;
}

/* Franja de la barra de estado (sólo iPhone instalado en pantalla de inicio).
   Con  apple-mobile-web-app-status-bar-style: black-translucent  la aplicación
   se dibuja por debajo del reloj y la batería, que iOS pinta SIEMPRE en blanco.
   Ahí arriba está el fondo de la página, que en tema claro es gris claro: el
   reloj quedaba ilegible. Se pinta esa franja del azul de la cabecera, con la
   que enlaza sin costura porque  .layout  reserva exactamente esa altura.
   En Android, en el navegador y en el escritorio  env(safe-area-inset-top)  vale
   cero, así que la franja mide cero y no se ve: no cambia nada de lo que ya
   funcionaba. */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-top);
  background: var(--cabecera);
  z-index: 50;
}

.layout {
  max-width: 1100px;
  margin: 0 auto;
  /* Los env() dejan sitio al notch y a la barra inferior cuando la página se
     instala en el móvil y ocupa toda la pantalla (viewport-fit=cover). */
  padding: max(18px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) 60px
    max(22px, env(safe-area-inset-left));
}

/* --- Cabecera --- */
.cabecera {
  background: var(--cabecera);
  color: #fff;
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--sombra);
}
.cabecera h1 {
  font-size: 20px;
  color: #fff;
}
.cabecera p {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: 0.85;
}
.tema-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  padding: 0;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.tema-btn:hover {
  filter: brightness(1.15);
}

/* --- Pestañas --- */
.tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0 0;
  background: var(--tabs-fondo);
  border-radius: 12px;
  padding: 6px;
  box-shadow: var(--sombra);
  flex-wrap: wrap;
}
.tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--tabs-inactivo);
  padding: 10px 18px 13px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  font-family: inherit;
}
.tab:hover {
  color: #fff;
}
.tab.activa {
  background: var(--panel);
  color: var(--texto);
}
.tab.activa::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--ambar);
}
.tab-panel {
  display: none;
  animation: aparece 0.2s ease;
}
.tab-panel.activa {
  display: block;
}

/* Horquilla a medio escribir. Lo que se ve en estas dos pestañas es el cálculo
   anterior, que ya no responde a lo escrito en los campos: se atenúa para que
   nadie lo lea como vigente. No se borra porque al corregir un número el campo
   queda vacío un instante y la pantalla parpadearía en cada pulsación; el
   porqué está en  recalcula() , en app.js. La pestaña de concursos no entra:
   el art. 76 no depende del marco de partida y el art. 77 se apaga solo. */
#tab-calculo,
#tab-individualizacion {
  transition: opacity 0.15s ease;
}
html.marco-invalido #tab-calculo,
html.marco-invalido #tab-individualizacion {
  opacity: 0.4;
}
@keyframes aparece {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Tarjetas --- */
.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-top: 16px;
}
.tarjeta h2 {
  font-size: 17px;
  margin-bottom: 4px;
}
.tarjeta h3.ap {
  font-size: 14px;
  margin: 20px 0 6px;
  color: var(--azul);
}
.tarjeta .sub {
  color: var(--texto-sec);
  font-size: 12.5px;
  margin: 0 0 12px;
}
.cab-acciones {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.parrafo {
  font-size: 13.5px;
  line-height: 1.6;
  margin: 0 0 10px;
}
.parrafo.aviso-legal {
  color: var(--texto-sec);
  font-size: 12.5px;
  border-top: 1px solid var(--borde);
  padding-top: 12px;
  margin-top: 14px;
}
.ejemplo {
  background: var(--gris-claro);
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.65;
  margin: 10px 0 4px;
}
.ejemplo-tit {
  display: block;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  font-weight: 600;
  margin-bottom: 4px;
}

/* --- Formularios --- */
label.campo {
  display: block;
  margin-bottom: 14px;
}
.etiqueta {
  display: block;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  margin-bottom: 5px;
  font-weight: 600;
}
input[type="number"],
input[type="text"],
select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: var(--panel);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
}
input:focus,
select:focus {
  outline: none;
  border-color: var(--azul-boton);
  box-shadow: 0 0 0 2px var(--azul-tinte);
}
input.invalido {
  border-color: var(--rojo);
  box-shadow: 0 0 0 2px var(--rojo-claro);
}
.fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 700px) {
  .fila {
    grid-template-columns: 1fr;
  }
}

/* --- Botones --- */
button.btn {
  background: var(--azul-boton);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
button.btn:hover {
  filter: brightness(1.1);
}
button.btn.sec {
  background: var(--panel);
  color: var(--azul);
  border: 1px solid var(--borde);
}
button.btn.peligro {
  background: var(--rojo);
}
button.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* --- Marco de partida: los seis campos años/meses/días --- */
/* Sin franja de color arriba: los recuadros van lisos y el relieve se reserva
   para el paso del cursor. */
.fila-marco {
  margin-bottom: 2px;
}
.horquilla {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
}
.extremo {
  flex: 1;
  min-width: 260px;
}
.extremo-sep {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 16px;
  color: var(--texto-sec);
  padding-bottom: 10px;
}
.amd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.amd label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.amd input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.amd span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  font-weight: 600;
  text-align: right;
}

/* --- Cuota diaria de la multa (art. 50.4 CP) --- */
.cuota {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--borde);
}
.cuota-campo {
  margin-bottom: 0;
  width: 170px;
  flex: none;
}
.cuota-input {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cuota-input input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.cuota-eur {
  font-size: 11.5px;
  color: var(--texto-sec);
  white-space: nowrap;
  font-weight: 600;
}
.cuota-info {
  flex: 1;
  min-width: 240px;
  padding-bottom: 2px;
}
.cuota-rango {
  font-size: 11.5px;
  color: var(--texto-sec);
  line-height: 1.5;
}
.cuota-importe {
  font-size: 13px;
  color: var(--azul);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.cuota-importe:empty {
  display: none;
}

/* Aviso del marco de partida: pegado a los campos, no a los resultados. */
#marco-avisos:not(:empty) {
  margin-top: 14px;
}

/* --- Escala visual del marco --- */
.escala {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 4px;
}
.esc-fila {
  display: grid;
  grid-template-columns: 190px 1fr;
  align-items: center;
  gap: 12px;
}
.esc-rot {
  font-size: 11.5px;
  color: var(--texto-sec);
  font-weight: 600;
  text-align: right;
  line-height: 1.25;
}
.esc-rango {
  display: block;
  font-weight: 500;
  font-size: 11px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.esc-pista {
  position: relative;
  height: 26px;
  background: var(--gris-claro);
  border-radius: 6px;
  overflow: hidden;
}
.esc-barra {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  min-width: 3px;
}
.esc-barra.azul {
  background: var(--azul-tinte);
  color: var(--azul);
  border: 1px solid var(--azul-boton);
}
.esc-barra.verde {
  background: var(--verde-claro);
  color: var(--verde);
  border: 1px solid var(--verde);
}
.esc-barra.ambar {
  background: var(--ambar-claro);
  color: var(--ambar);
  border: 1px solid var(--ambar);
}
.esc-barra.rojo {
  background: var(--rojo-claro);
  color: var(--rojo);
  border: 1px solid var(--rojo);
}
.esc-barra.violeta {
  background: var(--violeta-claro);
  color: var(--violeta);
  border: 1px solid var(--violeta);
}
.esc-barra.marco-base {
  border-width: 2px;
}
.esc-ejes {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
  margin-top: 2px;
}
.esc-ejes-linea {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  color: var(--texto-sec);
  font-variant-numeric: tabular-nums;
}

/* --- Rejilla de resultados --- */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.res {
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  font-family: inherit;
  color: var(--texto);
  width: 100%;
  display: block;
}
.res:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-elevada);
}
/* El marco legal del delito sigue distinguiéndose del resto, pero por el fondo
   y no por una franja de color. */
.res.destacada {
  background: var(--ambar-claro);
}
.res-rot {
  display: block;
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  font-weight: 600;
}
.res-valor {
  display: block;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--azul);
  margin: 5px 0 4px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.res.destacada .res-valor {
  color: var(--ambar);
}
.res-art {
  display: block;
  font-size: 11px;
  color: var(--texto-sec);
}

/* --- Avisos --- */
.aviso {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
}
.aviso:first-child {
  margin-top: 0;
}
/* Tramos a los que afecta un mismo aviso: la advertencia se escribe una vez y
   aquí debajo se dice a cuáles alcanza y con qué cifras. */
.aviso-tramos {
  margin: 8px 0 0;
  padding: 8px 0 0 18px;
  border-top: 1px solid currentColor;
  opacity: 0.85;
  list-style: disc;
}
.aviso-tramos li {
  margin-top: 3px;
}
.aviso-tramos li:first-child {
  margin-top: 0;
}
.aviso.rojo {
  background: var(--rojo-claro);
  color: var(--rojo);
}
.aviso.verde {
  background: var(--verde-claro);
  color: var(--verde);
}
.aviso.ambar {
  background: var(--ambar-claro);
  color: var(--ambar);
}
.aviso.azul {
  background: var(--azul-tinte);
  color: var(--azul);
}
#avisos-card {
  display: none;
}
#avisos-card.visible {
  display: block;
}

/* --- Catálogo de reglas encadenables --- */
.catalogo {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cat-grupo-tit {
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  font-weight: 600;
  margin-bottom: 7px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borde);
}
.cat-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 8px;
}
.cat-btn {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--texto);
  padding: 9px 12px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cat-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-elevada);
  border-color: var(--azul-boton);
}
.cat-btn .mas {
  color: var(--azul-boton);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
/* Regla ya elegida: queda sombreada mientras esté en la cadena, sin perder el
   realce al pasar el cursor. */
.cat-btn.elegida {
  background: var(--azul-tinte);
  border-color: var(--azul-boton);
}
.cat-btn.elegida .mas {
  color: var(--azul);
}
.cat-btn.elegida strong {
  color: var(--azul);
}
.cat-btn strong {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
}
.cat-btn em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--texto-sec);
}

/* --- Recorrido de la cadena --- */
.paso {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--borde);
}
.paso-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--azul-boton);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.paso-txt strong {
  font-size: 13px;
  display: block;
}
.paso-txt .paso-art {
  font-size: 11px;
  color: var(--texto-sec);
}
.paso-txt .paso-marco {
  font-size: 12.5px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.paso-txt .paso-marco .flecha {
  color: var(--texto-sec);
  margin: 0 6px;
}
.paso-txt .paso-marco .destino {
  font-weight: 600;
  color: var(--azul);
}
.paso-quitar {
  background: none;
  border: none;
  color: var(--rojo);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 0 4px;
}
.paso-vacio {
  color: var(--texto-sec);
  font-style: italic;
  font-size: 13px;
  padding: 14px 0;
}

.final {
  text-align: center;
  background: var(--gris-claro);
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
}
.final .valor {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  margin: 4px 0;
}
.final-corto {
  font-size: 12px;
  color: var(--texto-sec);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.final-multa {
  font-size: 13px;
  font-weight: 600;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  margin: -6px 0 12px;
}

/* --- Responsabilidad subsidiaria por impago (art. 53 CP) --- */
.rps {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
}
.rps h3.ap {
  margin-top: 0;
}
.rps-valor {
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}

/* --- Concursos (arts. 73 a 78 CP) --- */
.conc-pena {
  display: grid;
  grid-template-columns: 28px minmax(200px, 2fr) minmax(120px, 1fr) auto 30px;
  align-items: end;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--borde);
}
.conc-n {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--azul-tinte);
  color: var(--azul);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.conc-abs-campo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conc-abs-campo input {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.conc-abs-campo span {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  font-weight: 600;
}
.conc-terror {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--texto-sec);
  white-space: nowrap;
  padding-bottom: 8px;
  cursor: pointer;
}
.conc-terror input {
  width: auto;
  margin: 0;
}
#conc-anadir {
  margin-top: 14px;
}
.conc-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin: 4px 0 4px;
}
.conc-cifra {
  background: var(--gris-claro);
  border-radius: 8px;
  padding: 10px 12px;
}
.conc-cifra strong {
  display: block;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: 15px;
  color: var(--azul);
  font-variant-numeric: tabular-nums;
  margin: 3px 0 2px;
}
.conc-cifra em {
  font-size: 11px;
  color: var(--texto-sec);
  font-style: normal;
}
.conc-extinguida td {
  color: var(--texto-sec);
  text-decoration: line-through;
}
.conc-otra {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.conc-otra .amd {
  flex: 1;
  min-width: 180px;
}
.conc-a {
  font-family: "Libre Baskerville", Georgia, serif;
  color: var(--texto-sec);
  padding-bottom: 18px;
}

/* --- Tablas de referencia --- */
table.datos {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}
table.datos th {
  background: var(--gris-claro);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--texto-sec);
  text-align: left;
  padding: 8px 10px;
}
table.datos td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--borde);
  font-size: 12.5px;
  vertical-align: top;
}
table.datos tr:hover td {
  background: var(--hover);
}
table.datos td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.topes td:last-child {
  white-space: nowrap;
  color: var(--texto-sec);
}
/* Tabla de la multa: el marco legal del delito se destaca como en las
   tarjetas de resultado, para encontrarlo de un vistazo entre los diez. */
table.multa-tabla tr.fila-base td {
  background: var(--azul-tinte);
  font-weight: 600;
}
table.multa-tabla tr.fila-base:hover td {
  background: var(--azul-tinte);
}
.nota-art50 {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--texto-sec);
}

/* --- Crédito --- */
.creditos {
  position: fixed;
  right: 14px;
  bottom: 10px;
  z-index: 20;
  font-size: 11px;
  color: var(--texto-sec);
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 4px 10px;
  box-shadow: var(--sombra);
  opacity: 0.92;
}

/* =====================================================================
   Móvil. La herramienta se usa sobre todo en sala y en el pasillo del
   juzgado, con el teléfono en una mano: los tramos tienen que leerse
   sin zoom y todo lo pulsable tiene que ser de dedo, no de ratón.
   ===================================================================== */

/* Tablas anchas: se desplazan dentro de su caja, nunca empujan la página. */
.tabla-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
}
.tabla-scroll table.datos {
  margin-top: 0;
  min-width: 460px;
}

@media (max-width: 860px) {
  .esc-fila,
  .esc-ejes {
    grid-template-columns: 150px 1fr;
  }
}

@media (max-width: 680px) {
  .layout {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 40px
      max(12px, env(safe-area-inset-left));
  }
  .cabecera {
    padding: 14px 16px;
    border-radius: 10px;
  }
  .cabecera h1 {
    font-size: 17px;
  }
  .cabecera p {
    font-size: 11px;
  }
  .tarjeta {
    padding: 14px;
    margin-top: 12px;
  }
  .tarjeta h2 {
    font-size: 15.5px;
  }

  /* Las pestañas se deslizan en horizontal en vez de apilarse. */
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 12px;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tab {
    flex: 0 0 auto;
    padding: 9px 14px 12px;
    font-size: 12.5px;
  }
  .tab.activa::after {
    left: 14px;
    right: 14px;
  }

  /* 16px en los campos: por debajo de eso iOS hace zoom al enfocar. */
  input[type="number"],
  input[type="text"],
  select {
    font-size: 16px;
    padding: 10px;
  }
  button.btn {
    padding: 11px 16px;
    width: 100%;
  }
  .cab-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  /* Horquilla: mínimo y máximo uno debajo del otro, con la "a" de bisagra. */
  .horquilla {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .extremo {
    min-width: 0;
  }
  .extremo-sep {
    display: none;
  }
  .amd input {
    text-align: center;
  }
  .amd span {
    text-align: center;
  }

  /* Cuota: el campo a ancho completo y la nota legal debajo. */
  .cuota {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cuota-campo {
    width: auto;
  }
  .cuota-info {
    min-width: 0;
  }

  /* Escala: el rótulo pasa encima de su barra, que ocupa todo el ancho. */
  .esc-fila {
    display: block;
  }
  .esc-rot {
    text-align: left;
    font-size: 11px;
    margin-bottom: 3px;
  }
  .esc-rango {
    display: inline;
    margin-left: 7px;
  }
  .escala {
    gap: 10px;
  }
  .esc-pista {
    height: 24px;
  }
  .esc-ejes {
    display: block;
  }

  .rejilla,
  .cat-lista {
    grid-template-columns: 1fr;
  }
  .res {
    padding: 11px 13px;
  }
  .res-valor {
    font-size: 14.5px;
  }
  .cat-btn {
    padding: 11px 12px;
  }

  .paso {
    grid-template-columns: 22px 1fr 24px;
    gap: 9px;
  }
  .paso-quitar {
    font-size: 20px;
    padding: 0;
  }
  .paso-txt .paso-marco {
    line-height: 1.7;
  }
  .final .valor {
    font-size: 19px;
  }

  table.datos th,
  table.datos td {
    padding: 7px 8px;
    font-size: 12px;
  }

  .creditos {
    position: static;
    display: block;
    margin: 18px auto 0;
    width: max-content;
    box-shadow: none;
  }
}

/* Pantallas muy estrechas: los tres campos de una duración siguen en fila,
   pero apretados, para no partir la lectura "años · meses · días". */
@media (max-width: 380px) {
  .amd {
    gap: 5px;
  }
  .amd input {
    padding: 9px 4px;
  }
  .amd span {
    font-size: 9.5px;
    letter-spacing: 0.2px;
  }
  .esc-rot {
    font-size: 10.5px;
  }
}

/* En apaisado de móvil se recupera el diseño de dos columnas de la escala. */
@media (min-width: 681px) and (max-width: 900px) {
  .esc-fila,
  .esc-ejes {
    grid-template-columns: 130px 1fr;
  }
}