/* ===================================================================
   IVEST AUTO — Compra guiada (/compra/): recorrido del comprador y panel
   ESTADO: EN PRUEBAS Y APAGADA. Nada de la web pública enlaza aquí.
   - Se carga SOLO en compra/*.html, encima de styles.css (congelado, no se toca).
   - No depende de ui.css: así un cambio de versión de ui.css no obliga a tocar estas páginas.
   - La CSP de /compra/ (compra/.htaccess) no admite estilos en línea ni Google Fonts:
     todo el estilo está aquí y los titulares usan la pila de fuentes del sistema.
   =================================================================== */

:root {
  color-scheme: dark;
  --red-txt: #FF4458;   /* rojo para TEXTO sobre fondo oscuro: 5,9:1 sobre --bg (ui.css usa el mismo) */
  --ok-txt: #4ade80;
  --aviso-txt: #fbbf24;
  --borde-campo: #6C6E76; /* 3,6:1 sobre --bg-2: borde de los campos visible (WCAG 1.4.11) */
  --cx-barra: 76px;
}

/* La barra inferior fija del móvil no debe tapar el elemento con el foco (WCAG 2.4.11) */
html { scroll-padding-bottom: calc(var(--cx-barra) + 24px); }

.cx { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.cx h1, .cx h2, .cx h3, .cx legend, .cx .btn, .cx .eyebrow, .cx .cx-etapas, .cx .cx-cifra-valor {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* styles.css pone Bebas Neue (no se carga aquí): titulares legibles con la fuente del sistema */
.cx h1, .cx h2 { font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.cx h1 { font-size: clamp(1.7rem, 5.2vw, 2.4rem); }
.cx h2 { font-size: clamp(1.2rem, 3.6vw, 1.45rem); }
.cx h3 { font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
.cx p { max-width: 68ch; }
.cx a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.cx strong { font-weight: 600; color: #fff; }

/* hidden debe ganar a los display de styles.css (.field es flex) */
.cx [hidden] { display: none !important; }

.cx-oculto {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Cabecera y pie (versión corta de la web: sin menú, con ayuda) ---------- */
.cx-cabecera { background: rgba(10,10,12,.94); border-bottom: 1px solid var(--line); }
.cx-cabecera .header-inner { height: 68px; gap: 12px; }
.cx-cabecera .brand-logo { height: 44px; }
.cx-ayuda-tel {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  color: var(--text); font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: .95rem;
  text-decoration: none !important; white-space: nowrap;
}
.cx-ayuda-tel span { color: var(--muted); font-weight: 500; }
.cx-pie { padding-top: 28px; margin-top: 24px; }
.cx-pie-inner { display: grid; gap: 12px; padding-bottom: 28px; color: var(--muted); font-size: .88rem; }
.cx-pie-inner p { max-width: none; }
.cx-pie-inner a { color: var(--text); }
.cx-pie .legal-nav a, .cx-pie .legal-nav { color: var(--muted); font-size: .88rem; }
.cx .legal-nav { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.cx .legal-nav a { display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- Estructura ---------- */
.cx-main { padding: 20px 0 40px; min-height: 60vh; }
.cx-contenedor { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
.cx-rejilla { display: grid; gap: 28px; margin-top: 20px; }
.cx-flujo { min-width: 0; }
.cx-lateral { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (min-width: 1024px) {
  .cx-contenedor { padding-inline: 24px; }
  .cx-rejilla { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
  .cx-lateral { position: sticky; top: 88px; }
}
.cx-estrecho { max-width: 640px; }

.cx-cargando { color: var(--muted); padding: 24px 0; }
.cx-cargando::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
  border: 2px solid var(--line-2); border-top-color: var(--red); border-radius: 50%; animation: cx-giro .9s linear infinite;
}
@keyframes cx-giro { to { transform: rotate(360deg); } }

/* ---------- Etapas (4) ---------- */
.cx-etapas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cx-etapas li {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 12px;
  color: var(--muted); font-size: .8rem; font-weight: 500; line-height: 1.25;
}
.cx-etapas li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 4px; background: var(--line-2); }
.cx-etapas li.hecha::before { background: #8a1224; }
.cx-etapas li[aria-current="step"]::before { background: var(--red); }
.cx-etapas li[aria-current="step"] { color: #fff; font-weight: 700; }
.cx-etapa-n { display: inline-flex; align-items: center; gap: 6px; }
.cx-etapa-marca { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-2); font-size: .72rem; flex: none; }
.cx-etapas li.hecha .cx-etapa-marca { background: #8a1224; border-color: #8a1224; color: #fff; }
.cx-etapas li[aria-current="step"] .cx-etapa-marca { background: var(--red); border-color: var(--red); color: #fff; }
.cx-etapa-estado { font-size: .72rem; font-weight: 500; color: var(--muted); }
.cx-etapas li[aria-current="step"] .cx-etapa-estado { color: #fff; }
@media (min-width: 600px) { .cx-etapas li { font-size: .9rem; } .cx-etapa-estado { font-size: .78rem; } }

/* ---------- Pantalla ---------- */
.cx-pantalla { display: grid; gap: 20px; }
.cx-pantalla > * { min-width: 0; }
.cx-cab { display: grid; gap: 8px; }
.cx-cab .eyebrow { margin-bottom: 0; color: var(--muted); }
.cx-titulo { outline: none; }
.cx-titulo:focus-visible { outline: 2px solid var(--red-txt); outline-offset: 4px; border-radius: 4px; }
.cx-entradilla { color: #cfd0d6; font-size: 1.02rem; }
.cx-nota { color: var(--muted); font-size: .92rem; }
.cx-nota a { color: var(--text); }

.cx-tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; display: grid; gap: 14px; align-content: start; }
@media (min-width: 600px) { .cx-tarjeta { padding: 22px 24px; } }
.cx-tarjeta > h2, .cx-tarjeta > h3 { margin: 0; }
.cx-tarjeta-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }

.cx-lista { display: grid; gap: 8px; padding: 0; margin: 0; }
.cx-lista li { position: relative; padding-left: 18px; color: #cfd0d6; }
.cx-lista li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.cx-pasos { display: grid; gap: 14px; padding: 0; margin: 0; list-style: none; counter-reset: cxpaso; }
/* Bloque con el número a la izquierda (no rejilla: el texto de cada paso puede llevar enlaces y etiquetas en línea) */
.cx-pasos li { position: relative; padding: 5px 0 0 46px; min-height: 34px; counter-increment: cxpaso; color: #cfd0d6; }
.cx-pasos li::before {
  content: counter(cxpaso); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--line-2); color: #fff; font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700;
}
.cx-pasos .cx-estado { margin-left: 4px; vertical-align: middle; }

/* ---------- Datos en pares (dl) ---------- */
.cx-datos { display: grid; gap: 0; margin: 0; }
.cx-datos > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.cx-datos > div:first-child { border-top: 0; padding-top: 0; }
.cx-datos dt { color: var(--muted); font-size: .88rem; }
.cx-datos dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) { .cx-datos > div { grid-template-columns: 1fr; } }

/* ---------- Cifras (total, pagado, pendiente) ---------- */
/* Móvil: una fila por cifra (etiqueta a la izquierda, importe a la derecha); desde 600 px, tres columnas */
.cx-cifras { display: grid; gap: 8px; margin: 0; }
.cx-cifras > div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px;
}
.cx-cifras dt { color: var(--muted); font-size: .88rem; grid-column: 1; grid-row: 1; }
.cx-cifras dd { margin: 0; }
.cx-cifra-valor { grid-column: 2; grid-row: 1; font-size: 1.3rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.cx-cifras .cx-destacada { border-color: rgba(200,16,46,.55); background: rgba(200,16,46,.08); }
.cx-cifra-nota { grid-column: 1 / -1; color: var(--muted); font-size: .8rem; }
@media (min-width: 600px) {
  .cx-flujo .cx-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cx-flujo .cx-cifras > div { display: block; }
  .cx-flujo .cx-cifra-valor { display: block; text-align: left; font-size: 1.45rem; margin-top: 4px; }
  .cx-flujo .cx-cifra-nota { margin-top: 2px; }
}

/* ---------- Desglose ---------- */
.cx-tabla-envoltura { overflow-x: auto; }
.cx-tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cx-tabla caption { text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: 8px; }
.cx-tabla th, .cx-tabla td { padding: 10px 0; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.cx-tabla th[scope="col"] { color: var(--muted); font-weight: 500; font-size: .82rem; border-top: 0; padding-top: 0; }
.cx-tabla .cx-importe { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; }
.cx-tabla .cx-iva { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; }
.cx-tabla tfoot th, .cx-tabla tfoot td { font-weight: 700; color: #fff; border-top: 2px solid var(--line-2); }

/* ---------- Formularios ---------- */
.cx form { display: grid; gap: 18px; }
.cx fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; min-width: 0; }
.cx legend { font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; padding: 0; }
.cx .field { margin-bottom: 0; }
.cx .field label, .cx .cx-etiqueta { font-size: .92rem; font-weight: 500; color: var(--text); }
.cx .field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .cx .field select, .cx .field textarea {
  font-size: 16px; min-height: 48px; border-color: var(--borde-campo); background: var(--bg-2); width: 100%;
}
.cx .field input[type="file"] { font-size: 16px; min-height: 44px; color: var(--muted); width: 100%; max-width: 100%; }
.cx .field textarea { min-height: 110px; }
.cx .field input[aria-invalid="true"], .cx .field select[aria-invalid="true"], .cx .field textarea[aria-invalid="true"] {
  border-color: var(--red-txt); box-shadow: 0 0 0 1px var(--red-txt);
}
.cx .cx-ayuda { color: var(--muted); font-size: .85rem; margin: 0; }
.cx .error { color: var(--red-txt); font-size: .88rem; min-height: 0; margin: 0; }
.cx .error:empty { display: none; }
.cx .error:not(:empty)::before { content: "Error: "; font-weight: 600; }
.cx-fila { display: grid; gap: 14px; }
@media (min-width: 600px) {
  .cx-fila-2 { grid-template-columns: 1fr 1fr; }
  .cx-fila-3 { grid-template-columns: 2fr 1fr 1fr; }
  .cx-fila-cp { grid-template-columns: 10em 1fr; }
}
.cx input:focus-visible, .cx select:focus-visible, .cx textarea:focus-visible, .cx summary:focus-visible {
  outline: 2px solid var(--red-txt); outline-offset: 2px;
}
.cx .cx-campo-corto input { max-width: 12em; }
.cx .cx-codigo input { max-width: 11em; font-size: 1.35rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; }

/* Opciones grandes (radio o casilla dentro de su etiqueta) */
.cx-opciones { display: grid; gap: 10px; }
@media (min-width: 600px) { .cx-opciones-2 { grid-template-columns: 1fr 1fr; } }
.cx-opcion {
  display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; cursor: pointer;
  border: 1px solid var(--borde-campo); border-radius: var(--radius-sm); padding: 14px; min-height: 56px; background: var(--bg-2);
}
.cx-opcion input { width: 24px; height: 24px; margin: 0; accent-color: var(--red); }
.cx-opcion-t { font-weight: 600; }
.cx-opcion-d { grid-column: 2; color: var(--muted); font-size: .88rem; }
.cx-opcion:has(input:checked) { border-color: var(--red); background: rgba(200,16,46,.10); box-shadow: 0 0 0 1px var(--red); }
.cx-opcion:has(input:disabled) { opacity: .6; cursor: not-allowed; }

.cx-casilla { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.cx-casilla input { width: 24px; height: 24px; margin: 0; accent-color: var(--red); }
.cx-casilla label { font-size: .95rem; color: #dcdde2; cursor: pointer; }
.cx-casilla .error { grid-column: 2; }
.cx-casillas { display: grid; gap: 14px; }

.cx-radios-linea { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-radios-linea label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--borde-campo); border-radius: 999px; font-size: .92rem;
}
.cx-radios-linea input { width: 24px; height: 24px; accent-color: var(--red); margin: 0; }
.cx-radios-linea label:has(input:checked) { border-color: var(--red); background: rgba(200,16,46,.10); }

/* Resumen de errores al enviar */
.cx-errores { border: 1px solid var(--red-txt); background: rgba(225,29,54,.08); border-radius: var(--radius-sm); padding: 14px 16px; }
.cx-errores:focus { outline: 2px solid var(--red-txt); outline-offset: 2px; }
.cx-errores h2 { font-size: 1rem; margin-bottom: 6px; }
.cx-errores ul { display: grid; gap: 4px; padding-left: 18px; list-style: disc; }
.cx-errores a { color: #fff; display: inline-block; padding: 3px 0; }

/* ---------- Botones ---------- */
.cx .btn { min-height: 48px; text-align: center; line-height: 1.25; }
.cx .btn-outline { border-color: var(--borde-campo); }
.cx .btn-sm { min-height: 44px; padding: 9px 16px; font-size: .88rem; }
.cx .btn[disabled], .cx .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.cx .btn-red[disabled]:hover { background: var(--red); }
.cx-btn-enlace {
  background: none; border: 0; padding: 10px 0; min-height: 44px; color: var(--text); cursor: pointer;
  font: inherit; font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.cx-btn-enlace:hover { color: #fff; }
.cx-acciones-sec { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
/* Enlaces sueltos (no dentro de una frase): zona táctil de 44 px (WCAG 2.5.8) */
.cx-acciones-sec > a:not(.btn), .cx-enlace-suelto { display: inline-flex; align-items: center; min-height: 44px; }
.cx .btn.cx-ocupado { cursor: progress; }
.cx .btn.cx-ocupado::after {
  content: ""; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%;
  animation: cx-giro .9s linear infinite;
}

/* Acción principal: barra fija abajo en el móvil, con el importe que toca */
.cx-accion { display: grid; gap: 10px; }
.cx-accion-importe { color: var(--muted); font-size: .88rem; display: flex; justify-content: space-between; gap: 10px; }
.cx-accion-importe strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.cx-accion-motivo { color: var(--aviso-txt); font-size: .88rem; margin: 0; }
@media (max-width: 767px) {
  .cx-accion.cx-fija {
    position: sticky; bottom: 0; z-index: 40; margin-inline: -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg); border-top: 1px solid var(--line-2); box-shadow: 0 -12px 30px -18px rgba(0,0,0,.9);
  }
}
@media (min-width: 768px) { .cx-accion .btn { justify-self: start; min-width: 280px; } }

/* ---------- Avisos ---------- */
.cx-aviso { border: 1px solid var(--line-2); border-left: 4px solid var(--muted); background: var(--bg-2); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 6px; }
.cx-aviso > p { margin: 0; }
.cx-aviso-t { font-weight: 700; color: #fff; }
.cx-aviso-ok { border-left-color: var(--ok-txt); }
.cx-aviso-ok .cx-aviso-t { color: var(--ok-txt); }
.cx-aviso-mal { border-left-color: var(--red-txt); background: rgba(225,29,54,.07); }
.cx-aviso-mal .cx-aviso-t { color: #ffb3bb; }
.cx-aviso-atencion { border-left-color: var(--aviso-txt); }
.cx-aviso-atencion .cx-aviso-t { color: var(--aviso-txt); }
.cx-aviso:focus { outline: 2px solid var(--line-2); outline-offset: 2px; }

.cx-antifraude { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; border: 1px solid rgba(200,16,46,.45); background: rgba(200,16,46,.06); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .9rem; color: #dcdde2; }
.cx-antifraude svg { width: 24px; height: 24px; color: var(--red-txt); }
.cx-antifraude p { margin: 0; }

/* Estado de un pago o de un trámite: etiqueta con texto (no solo color) */
.cx-estado { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); color: #dcdde2; }
.cx-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.cx-estado-ok { color: var(--ok-txt); border-color: rgba(74,222,128,.45); }
.cx-estado-ok::before { background: var(--ok-txt); }
.cx-estado-espera { color: var(--aviso-txt); border-color: rgba(251,191,36,.45); }
.cx-estado-espera::before { background: var(--aviso-txt); }
.cx-estado-mal { color: #ffb3bb; border-color: rgba(255,68,88,.5); }
.cx-estado-mal::before { background: var(--red-txt); }

/* ---------- Pagos ---------- */
.cx-pagos { display: grid; gap: 10px; margin: 0; padding: 0; }
.cx-pagos li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.cx-pagos li:first-child { border-top: 0; padding-top: 0; }
.cx-pago-importe { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; }

/* ---------- Datos de la transferencia ---------- */
.cx-transferencia > div { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; }
.cx-transferencia dt { grid-column: 1; grid-row: 1; }
.cx-transferencia dd { grid-column: 1; grid-row: 2; font-size: 1.05rem; color: #fff; overflow-wrap: anywhere; }
.cx-transferencia .cx-copiable { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }
.cx-transferencia .btn { grid-column: 2; grid-row: 1 / span 2; }
/* Pantallas estrechas: el dato ocupa todo el ancho y el botón de copiar va debajo */
@media (max-width: 480px) {
  .cx-transferencia > div { grid-template-columns: minmax(0, 1fr); }
  .cx-transferencia .btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 6px; }
  .cx-transferencia dd { font-size: 1rem; }
}

/* ---------- Documentos ---------- */
.cx-docs { display: grid; gap: 0; margin: 0; padding: 0; }
.cx-docs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.cx-docs li:first-child { border-top: 0; padding-top: 0; }
.cx-doc-nombre { font-weight: 500; overflow-wrap: anywhere; }
.cx-doc-meta { display: block; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.cx-docs .btn { grid-row: span 2; }

/* ---------- Plazos ---------- */
.cx-plazos { display: grid; gap: 8px; margin: 0; }
.cx-plazos > div { display: grid; gap: 2px; padding-left: 14px; border-left: 2px solid var(--line-2); }
.cx-plazos dt { color: var(--muted); font-size: .84rem; }
.cx-plazos dd { margin: 0; font-weight: 600; }

/* ---------- Lateral ---------- */
.cx-lateral .cx-tarjeta { gap: 10px; }
/* En el lateral (340 px) cada dato va debajo de su etiqueta */
.cx-lateral .cx-datos > div { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
.cx-lateral h2 { font-size: 1.05rem; }
.cx-coche-t { font-weight: 600; font-size: 1.05rem; color: #fff; }
.cx-ref { font-family: "Space Grotesk", system-ui, sans-serif; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cx-ayuda-lista { display: grid; gap: 8px; }
.cx-ayuda-lista .btn { width: 100%; }

/* ---------- Bloques del contrato ---------- */
.cx-bloques { display: grid; gap: 14px; }
.cx-bloque-pie { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.cx-revisado { color: var(--ok-txt); font-size: .9rem; font-weight: 600; }

/* ---------- Detalles plegables ---------- */
.cx details { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.cx details > summary { cursor: pointer; padding: 14px 16px; min-height: 48px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cx details > summary::-webkit-details-marker { display: none; }
.cx details > summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--muted); }
.cx details[open] > summary::after { content: "−"; }
.cx details > .cx-plegable { padding: 0 16px 16px; display: grid; gap: 14px; }
/* Sin esto, un desplegable con opciones largas (las 12 comprobaciones de la ficha del coche, panel) fija el ancho mínimo de la
   rejilla y la ficha se sale de la pantalla en el móvil (03/10/2026) */
.cx details > .cx-plegable > * { min-width: 0; }
.cx .field select { max-width: 100%; }
.cx-gestiones { display: grid; gap: 10px; margin-top: 32px; }

/* ---------- Panel de gestión ---------- */
.cx-panel .cx-contenedor { max-width: 1280px; }
.cx-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; }
.cx-pestanas button { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--borde-campo); background: transparent; color: var(--text); cursor: pointer; font: inherit; font-size: .92rem; }
.cx-pestanas button[aria-current="page"] { background: var(--red); border-color: var(--red); color: #fff; font-weight: 600; }
.cx-tabla-panel { width: 100%; border-collapse: collapse; font-size: .9rem; }
.cx-tabla-panel th, .cx-tabla-panel td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.cx-tabla-panel thead th { color: var(--muted); font-weight: 500; border-top: 0; }
.cx-tabla-panel td .btn { white-space: nowrap; }
.cx-panel-rejilla { display: grid; gap: 16px; }
@media (min-width: 1024px) { .cx-panel-rejilla { grid-template-columns: 1fr 1fr; } }
.cx-linea-oferta { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (min-width: 900px) { .cx-linea-oferta { grid-template-columns: 1fr 2fr 1fr 1.5fr auto; align-items: end; } }
.cx-historial { display: grid; gap: 6px; font-size: .85rem; color: var(--muted); max-height: 320px; overflow: auto; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  .cx-cargando::before, .cx .btn.cx-ocupado::after { animation: none; }
  .cx .btn:hover { transform: none; }
}

@media print {
  .cx-cabecera, .cx-pie, .cx-accion, .cx-lateral .cx-ayuda-lista { display: none !important; }
  .cx { background: #fff; color: #000; }
}