/* Lenguaje de diseño modernista (estilo suizo): retícula, esquinas rectas, superficies planas,
   tipografía Montserrat con jerarquía fuerte y un solo color de acento. */
:root {
  --negro: #0b0b0b; --blanco: #ffffff; --acento: #e1251b;
  --card: rgb(11 11 11 / 0.88); --text: var(--blanco); --muted: rgb(255 255 255 / 0.66);
  --linea: rgb(255 255 255 / 0.28); --campo-bg: rgb(255 255 255 / 0.05);
  --ok: #3ccf7e; --err: #ff6b61;
  --disabled-bg: rgb(255 255 255 / 0.02); --stripe: rgb(255 255 255 / 0.10);
  --alto-campo: 44px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 20px 16px; background: var(--negro); color: var(--text);
  font: 400 15px/1.5 "Montserrat", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
[hidden] { display: none !important; }

/* Etiqueta pequeña en mayúsculas, usada en códigos, leyendas, etiquetas y botones */
.panel-codigo, legend, .campo > span, .resultado h2, .panel-boton, form button[type=submit],
.boton-recalcular, .resumen summary {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}

/* ---------- Inicio: tres paneles con bordes escalonados ---------- */
body.inicio { padding: 0; }
.paneles { position: relative; height: 100vh; height: 100dvh; min-height: 520px; overflow: hidden; }
.panel { position: absolute; inset: 0; color: var(--blanco); }
/* Los puntos de cada borde coinciden con las líneas del SVG .separadores */
.panel:nth-of-type(1) {
  clip-path: polygon(0 0, 40% 0, 36% 24%, 38% 24%, 34% 50%, 36% 50%, 30% 74%, 22% 100%, 0 100%);
  --img-x: 0%; --img-w: 40%; --titulo-x: 3%; --boton-x: 16%;
}
.panel:nth-of-type(2) {
  clip-path: polygon(40% 0, 68% 0, 64% 24%, 66% 24%, 60% 50%, 62% 50%, 67% 74%, 76% 100%,
                     22% 100%, 30% 74%, 36% 50%, 34% 50%, 38% 24%, 36% 24%);
  --img-x: 22%; --img-w: 54%; --titulo-x: 42%; --boton-x: 48%;
}
.panel:nth-of-type(3) {
  clip-path: polygon(68% 0, 100% 0, 100% 100%, 76% 100%, 67% 74%, 62% 50%, 60% 50%, 66% 24%, 64% 24%);
  --img-x: 60%; --img-w: 40%; --titulo-x: 70%; --boton-x: 81%;
}
/* Cada imagen cubre solo el área de su panel, para que el sujeto quede visible */
.panel-img {
  position: absolute; top: 0; height: 100%; left: var(--img-x); width: var(--img-w);
  object-fit: cover; filter: brightness(0.7); transition: transform 0.6s ease, filter 0.4s ease;
}
.panel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.32) 30%, rgb(0 0 0 / 0.42) 100%);
  transition: opacity 0.4s ease;
}
/* Atenuada en reposo; brillante al pasar el cursor o al enfocar su botón con el teclado */
.panel:hover .panel-img, .panel:focus-within .panel-img { transform: scale(1.03); filter: brightness(1.05); }
.panel:hover::after, .panel:focus-within::after { opacity: 0.55; }
.panel.pendiente .panel-img { filter: grayscale(1) brightness(0.6); }
.panel-info {
  position: absolute; z-index: 1; top: 6vh; left: var(--titulo-x); max-width: 24%;
}
.panel-codigo {
  display: flex; align-items: center; gap: 10px; font-size: 0.72rem;
}
.panel-codigo::before { content: ""; width: 28px; height: 3px; background: var(--acento); }
.panel-titulo {
  margin: 12px 0 0; font-size: clamp(1.6rem, 2.8vw, 2.8rem); font-weight: 800;
  line-height: 1.05; letter-spacing: -0.02em;
}
.panel-boton {
  position: absolute; z-index: 1; top: 54%; left: var(--boton-x); transform: translate(-50%, -50%);
  padding: 14px 26px; border: 2px solid var(--blanco); color: var(--blanco);
  font-size: 0.75rem; text-decoration: none; white-space: nowrap;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
a.panel-boton { background: var(--acento); border-color: var(--acento); }
a.panel-boton:hover, a.panel-boton:focus-visible { background: var(--blanco); border-color: var(--blanco); color: var(--negro); }
.panel-boton[aria-disabled="true"] { border-color: rgb(255 255 255 / 0.5); color: rgb(255 255 255 / 0.7); cursor: not-allowed; }
.separadores { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.separadores path { fill: none; stroke: var(--blanco); stroke-width: 4; vector-effect: non-scaling-stroke; }

.separadores-movil { display: none; }

/* Las reglas ".movil" aplican en un teléfono (user agent) o en una ventana angosta (base.html).
   En móvil los paneles se apilan, separados por las mismas líneas escalonadas
   giradas (x e y intercambiados en cada punto de los clip-path y del SVG .separadores-movil) */
.movil .paneles { min-height: 560px; }
.movil .panel:nth-of-type(1) {
  clip-path: polygon(0 0, 0 40%, 24% 36%, 24% 38%, 50% 34%, 50% 36%, 74% 30%, 100% 22%, 100% 0);
  --img-y: 0%; --img-h: 40%; --info-y: 3%; --boton-y: 24%;
}
.movil .panel:nth-of-type(2) {
  clip-path: polygon(0 40%, 0 68%, 24% 64%, 24% 66%, 50% 60%, 50% 62%, 74% 67%, 100% 76%,
                     100% 22%, 74% 30%, 50% 36%, 50% 34%, 24% 38%, 24% 36%);
  --img-y: 22%; --img-h: 54%; --info-y: 41%; --boton-y: 54%;
}
.movil .panel:nth-of-type(3) {
  clip-path: polygon(0 68%, 0 100%, 100% 100%, 100% 76%, 74% 67%, 50% 62%, 50% 60%, 24% 66%, 24% 64%);
  --img-y: 60%; --img-h: 40%; --info-y: 79%; --boton-y: 90%;
}
.movil .panel-img { top: var(--img-y); height: var(--img-h); left: 0; width: 100%; }
.movil .panel-info { top: var(--info-y); left: 16px; max-width: calc(100% - 32px); }
.movil .panel-titulo { margin-top: 6px; }
.movil .panel-boton { top: var(--boton-y); left: 16px; transform: none; padding: 11px 20px; }
.movil .separadores { display: none; }
.movil .separadores-movil { display: block; }

/* ---------- Página de un modelo ---------- */
body.pagina-modelo { min-height: 100vh; }
.fondo { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.fondo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.5) 40%, rgb(0 0 0 / 0.7) 100%);
}

/* Ocupa toda la altura de la ventana para que las tarjetas lleguen hasta abajo */
.modelo {
  max-width: 1320px; margin: 0 auto; display: flex; flex-direction: column;
  min-height: calc(100vh - 40px); min-height: calc(100dvh - 40px);
}
.modelo-layout { flex: 1; }
form.tarjeta { display: flex; flex-direction: column; }
/* Pie del formulario anclado abajo, alineado con el pie de la tarjeta de resultado */
.form-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--linea);
}
.form-pie .meta { margin: 0; }
.modelo-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.modelo-header h1 {
  margin: 0; padding: 0 64px; text-align: center;
  font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
}
.volver {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 48px; height: 48px;
  color: var(--blanco); border: 2px solid var(--blanco); background: transparent;
  font-size: 1.3rem; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.volver:hover, .volver:focus-visible { background: var(--blanco); color: var(--negro); }
p.sub { margin: 8px 0 20px; color: var(--muted); text-align: center; font-weight: 500; }
.modelo-layout {
  display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(300px, 1fr); gap: 24px; align-items: stretch;
}
@media (max-width: 900px) { .modelo-layout { grid-template-columns: minmax(0, 1fr); } }
.movil .modelo-layout { grid-template-columns: minmax(0, 1fr); }

.tarjeta { background: var(--card); border-top: 6px solid var(--acento); padding: 24px 28px; }

form { container-type: inline-size; }
fieldset { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; }
legend {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 0 0 8px; margin-bottom: 13px;
  border-bottom: 1px solid var(--linea); font-size: 0.75rem;
}
legend .num { color: var(--acento); font-weight: 800; letter-spacing: 0.04em; }

/* Retícula de campos: cada campo ocupa 3 filas (etiqueta, control, error) compartidas con
   subgrid, así etiquetas, controles y errores quedan alineados en toda la fila. */
/* --columnas lo fija cada modelo (4 por defecto); en anchos menores se reduce */
.grid { display: grid; grid-template-columns: repeat(var(--columnas, 4), minmax(0, 1fr)); column-gap: 20px; }
@container (max-width: 760px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (max-width: 540px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 340px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.campo {
  display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 6px;
  padding-bottom: 14px; color: var(--muted);
  /* Una columna fija: ni una etiqueta larga ni una opción larga ensanchan el campo */
  min-width: 0; grid-template-columns: minmax(0, 1fr);
}
.campo > span { align-self: end; font-size: 0.68rem; line-height: 1.4; overflow-wrap: break-word; }
.campo input, .campo select, .dropdown-boton {
  width: 100%; height: var(--alto-campo); margin: 0; padding: 0 12px;
  font: 500 0.95rem "Montserrat", system-ui, sans-serif; color: var(--text);
  background: var(--campo-bg); border: 1px solid var(--linea); border-radius: 0;
  appearance: none; -webkit-appearance: none;
}
/* Flecha propia para que los select midan y luzcan igual que los input */
.campo select {
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.campo select option { color: var(--negro); background: var(--blanco); }
.campo input[type=number] { -moz-appearance: textfield; }
.campo input::-webkit-inner-spin-button, .campo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.campo input:focus, .campo select:focus, .dropdown-boton:focus-visible,
.dropdown-boton[aria-expanded="true"] { outline: 2px solid var(--blanco); outline-offset: -2px; }
/* Campo deshabilitado: fondo rayado, borde punteado, texto atenuado y etiqueta tenue */
.campo input:disabled {
  color: var(--muted); border-style: dashed; cursor: not-allowed;
  background: repeating-linear-gradient(135deg, var(--stripe) 0 2px, var(--disabled-bg) 2px 8px);
}
.campo:has(input:disabled) > span { opacity: 0.55; }
.campo [aria-invalid="true"] { border-color: var(--err); }
.campo-error { color: var(--err); font-size: 0.75rem; font-weight: 600; }

form button[type=submit], .boton-recalcular {
  display: inline-flex; align-items: center; gap: 14px; padding: 15px 28px;
  font-family: inherit; font-size: 0.78rem; color: var(--blanco); background: var(--acento);
  border: 0; border-radius: 0; cursor: pointer; transition: background 0.2s, color 0.2s;
}
form button[type=submit]::after { content: "→"; font-size: 1rem; letter-spacing: 0; }
form button[type=submit]:hover, form button[type=submit]:focus-visible,
.boton-recalcular:hover, .boton-recalcular:focus-visible { background: var(--blanco); color: var(--negro); }
form button[type=submit]:disabled { opacity: 0.6; cursor: wait; }
/* Botón de una vista previa: deshabilitado de forma permanente */
form:not([data-endpoint]) button[type=submit]:disabled { opacity: 0.4; cursor: not-allowed; }

/* Vista previa de un modelo sin campos todavía */
.vista-previa { flex: 1; margin-bottom: 16px; border: 1px dashed var(--linea); }

.resultado { display: flex; flex-direction: column; transition: border-color 0.2s; }
.resultado h2 { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); font-size: 0.75rem; }
.resultado.ok { border-top-color: var(--ok); }
.resultado.err { border-top-color: var(--err); }
.resultado.err #result-body { color: var(--err); }
.resultado.err strong { font-weight: 700; }
.resultado ul { margin: 8px 0 0; padding-left: 18px; }
.resultado p { margin: 0; }
.valor {
  margin: 4px 0 14px; font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; white-space: nowrap;
}
.unidad { margin-left: 8px; font-size: 0.4em; font-weight: 600; letter-spacing: 0.08em; color: var(--muted); }
.meta { color: var(--muted); font-size: 0.8rem; font-weight: 500; overflow-wrap: anywhere; }
.meta + .meta { margin-top: 4px; }

/* Información del modelo, al pie de la tarjeta de resultado */
.modelo-info { margin-top: auto; padding-top: 24px; }
.modelo-info h3 {
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linea);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
}
.modelo-info dl { margin: 0; }
.modelo-info dt { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }
.modelo-info dd { margin: 2px 0 0; font-size: 1.15rem; font-weight: 700; }

/* ---------- Resultado como pantalla aparte en móvil (predict.js) ---------- */
.resumen, .boton-recalcular { display: none; }
/* Formulario: el resultado se ve en su propia pantalla, no debajo del formulario */
.movil .modelo:not(.viendo-resultado) .resultado { display: none; }
.movil .viendo-resultado form,
.movil .viendo-resultado p.sub { display: none; }
.movil .viendo-resultado .modelo-header { margin-bottom: 20px; }
.movil .viendo-resultado .resumen { display: block; }
.movil .viendo-resultado .boton-recalcular { display: flex; justify-content: center; margin-top: 20px; }
.movil .boton-recalcular::after { content: "↺"; font-size: 1rem; letter-spacing: 0; }
/* Tarjeta cerrada con los datos ingresados; se abre al tocar el encabezado */
.resumen { margin-top: 24px; border: 1px solid var(--linea); }
.resumen summary {
  display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  font-size: 0.72rem; cursor: pointer; list-style: none;
}
.resumen summary::-webkit-details-marker { display: none; }
.resumen summary::after { content: "+"; font-size: 1.1rem; font-weight: 600; letter-spacing: 0; }
.resumen[open] summary::after { content: "−"; }
.resumen summary:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }
#resumen-datos { padding: 0 16px 8px; border-top: 1px solid var(--linea); }
#resumen-datos h3 {
  margin: 14px 0 6px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--acento);
}
#resumen-datos dl { margin: 0; }
#resumen-datos dl > div {
  display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}
#resumen-datos dt { color: var(--muted); font-size: 0.8rem; }
#resumen-datos dd { margin: 0; font-size: 0.85rem; font-weight: 700; text-align: right; }

/* ---------- Pestañas de secciones en móvil (pestanas.js) ---------- */
.pestanas { display: none; }
.movil .pestanas {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: -4px 0 18px; border-bottom: 1px solid var(--linea);
}
.movil .pestanas [role="tab"] {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 6px 10px; margin-bottom: -1px; text-align: left; cursor: pointer;
  font: 700 0.62rem/1.3 "Montserrat", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); background: none; border: 0; border-bottom: 3px solid transparent; border-radius: 0;
}
.movil .pestanas .num { color: var(--acento); font-weight: 800; letter-spacing: 0.04em; }
.movil .pestanas [aria-selected="true"] { color: var(--text); border-bottom-color: var(--acento); }
.movil .pestanas [role="tab"]:focus-visible { outline: 2px solid var(--blanco); outline-offset: -2px; }
/* Punto rojo en una pestaña con campos inválidos */
.movil .pestanas [data-error]::after {
  content: ""; position: absolute; top: 8px; right: 6px; width: 7px; height: 7px; background: var(--err);
}
/* Solo la sección activa; la leyenda la reemplaza la pestaña */
.movil form.con-pestanas fieldset:not(.activa) { display: none; }
.movil form.con-pestanas legend {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Lista desplegable propia (dropdown.js) ---------- */
.dropdown { position: relative; }
.dropdown-boton {
  display: flex; align-items: center; text-align: left; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* min-width: 0 permite que el texto se recorte con "…" en lugar de ensanchar el botón */
.dropdown-boton > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-boton[aria-expanded="true"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 7l5-5 5 5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
}
.dropdown-lista {
  position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 0; list-style: none; max-height: 240px; overflow-y: auto;
  background: var(--negro); border: 1px solid var(--blanco);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
}
/* Se abre hacia arriba cuando no cabe debajo del botón (dropdown.js) */
.dropdown-lista.arriba { top: auto; bottom: calc(100% + 4px); box-shadow: 0 -12px 32px rgb(0 0 0 / 0.5); }
.dropdown-lista:focus { outline: none; }
.dropdown-lista [role="option"] {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px; font-size: 0.95rem; font-weight: 500; cursor: pointer;
  border-left: 3px solid transparent;
}
.dropdown-lista [role="option"] + [role="option"] { border-top: 1px solid rgb(255 255 255 / 0.08); }
.dropdown-lista .activa { background: var(--blanco); color: var(--negro); }
.dropdown-lista [aria-selected="true"] { font-weight: 700; border-left-color: var(--acento); }
.dropdown-lista [aria-selected="true"]::after {
  content: ""; width: 8px; height: 8px; background: var(--acento); flex: none;
}