/* =====================================================================
   Estilo de la web del servicio técnico. Sin librerías.
   Pensado para usarse durante una llamada: lo importante grande y arriba,
   lo secundario en gris y pequeño, y todo con el mismo espaciado.

   Índice:
     1. Variables (colores, espacios, letras) y modo oscuro
     2. Base (texto, enlaces, títulos)
     3. Barra superior y caja de búsqueda
     4. Componentes comunes (tarjetas, botones, campos, etiquetas, tablas)
     5. Buscador y resultados
     6. Fichas (cabecera, panel de llamada, conexiones)
     7. Ficha de vehículo: formulario e historial de intervenciones
     8. Ficha de cliente
     9. Adjuntos
    10. Intervenciones abiertas (buscador)
    11. Ayuda de atajos, accesibilidad y móvil
   ===================================================================== */

/* ---------- 1. Variables ---------- */
/* Modo claro por defecto; el oscuro se activa con data-bs-theme="dark" en <html>
   (lo pone el botón de la barra; es la misma preferencia que usa el panel de administración). */
:root {
  /* Colores */
  --barra:#1f2933; --fondo:#f2f4f7; --tarjeta:#fff; --texto:#1f2933; --suave:#52606d; --borde:#d9e2ec;
  --campo-borde:#9aa5b1; --primario:#1f5f99; --primario-hover:#174a78; --gris:#7b8794; --error:#b42318; --ok:#1a7f37;
  --aviso:#9a4a00; --aviso-fondo:#fff4e0; --aviso-borde:#f0b35b;
  --sobre-primario:#fff; --etiqueta:#e3f0fb; --etiqueta-gris:#eef0f2; --notas:#f8fafc; --error-fondo:#fde8e7; --ok-fondo:#e6f4ea;
  --resaltado:#fff1a8; --fila-hover:#f5f9fd;
  /* Espacios (múltiplos de 4 px) */
  --e1:.25rem; --e2:.5rem; --e3:.75rem; --e4:1rem; --e5:1.5rem; --e6:2rem;
  /* Letras */
  --t-peque:.8125rem; --t-normal:.9375rem; --t-medio:1.0625rem; --t-grande:1.25rem; --t-titulo:1.5rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Formas */
  --radio:8px; --radio-peque:6px; --sombra:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --alto-barra:56px;
  color-scheme:light;
}
:root[data-bs-theme="dark"] {
  --barra:#0b0f14; --fondo:#12171d; --tarjeta:#1c232b; --texto:#e4e7eb; --suave:#a3adb8; --borde:#323d49;
  --campo-borde:#5c6977; --primario:#6cb4f5; --primario-hover:#9ccbf8; --gris:#7b8794; --error:#ff8a80; --ok:#5fd17a;
  --aviso:#f7c46c; --aviso-fondo:#3a2a10; --aviso-borde:#7a5418;
  --sobre-primario:#0b0f14; --etiqueta:#1e3a55; --etiqueta-gris:#2c343d; --notas:#232b34; --error-fondo:#4a1f1c; --ok-fondo:#1d3b26;
  --resaltado:#5c4d00; --fila-hover:#222b35;
  --sombra:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { scroll-padding-top:calc(var(--alto-barra) + var(--e3)); } /* que la barra fija no tape lo que se enlaza con # */
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size:var(--t-normal);
  background:var(--fondo); color:var(--texto); line-height:1.5; }
a { color:var(--primario); text-underline-offset:2px; }
a:hover { color:var(--primario-hover); }
h1 { font-size:var(--t-titulo); line-height:1.25; margin:var(--e2) 0 var(--e1); }
h2 { font-size:var(--t-medio); margin:0 0 var(--e3); }
h3 { font-size:var(--t-normal); }
h4 { margin:0 0 var(--e2); font-size:var(--t-medio); }
h5 { margin:var(--e3) 0 var(--e1); color:var(--suave); font-size:var(--t-peque); text-transform:uppercase; letter-spacing:.04em; }
code, kbd { font-family:var(--mono); }
kbd { display:inline-block; font-size:.75rem; line-height:1.4; padding:0 .35rem; border:1px solid var(--campo-borde);
  border-bottom-width:2px; border-radius:4px; background:var(--tarjeta); color:var(--texto); }
mark { background:var(--resaltado); color:inherit; border-radius:2px; padding:0 1px; }
main { max-width:1280px; margin:0 auto; padding:var(--e4); }
.ayuda { color:var(--suave); font-size:var(--t-peque); }
.vacio { color:var(--suave); font-size:var(--t-peque); font-style:italic; margin:var(--e1) 0; }
.historico, .inactivo { color:var(--gris); }
.sin-saltos { white-space:nowrap; }
.en-linea { display:inline; margin:0; }
.estrecha { max-width:420px; margin:var(--e6) auto; }

/* ---------- 3. Barra superior ---------- */
/* Fija arriba: la caja de búsqueda está siempre a mano (tecla "/"). */
.barra { position:sticky; top:0; z-index:20; display:flex; gap:var(--e2) var(--e4); align-items:center;
  min-height:var(--alto-barra); padding:var(--e2) var(--e4); background:var(--barra); box-shadow:0 1px 0 rgba(255,255,255,.06); }
.barra a, .barra .enlace { color:#fff; text-decoration:none; }
.barra a:hover, .barra .enlace:hover { text-decoration:underline; color:#fff; }
.barra nav { display:flex; gap:var(--e3); align-items:center; margin-left:auto; white-space:nowrap; }
.marca { font-weight:700; display:flex; align-items:center; gap:var(--e3); flex:none; }
.marca img { height:34px; width:auto; display:block; }
.busqueda-barra { position:relative; flex:1 1 auto; max-width:620px; margin:0; }
.busqueda-barra input { margin:0; padding:.55rem 2.2rem .55rem .8rem; border:1px solid #3e4c59; background:#2b3640; color:#fff; font-size:var(--t-normal); }
.busqueda-barra input::placeholder { color:#b6c0ca; }
.busqueda-barra input:focus { background:#fff; color:#1f2933; border-color:#fff; outline:3px solid #6cb4f5; outline-offset:0; }
.busqueda-barra .tecla-atajo { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:transparent; color:#b6c0ca; border-color:#52606d; pointer-events:none; }
.busqueda-barra input:focus + .tecla-atajo { display:none; }
.boton-barra { background:none; border:1px solid #52606d; color:#fff; border-radius:var(--radio-peque); min-height:34px; min-width:34px;
  padding:0 .5rem; font-size:1rem; line-height:1; }
.boton-barra:hover { border-color:#fff; background:rgba(255,255,255,.06); }

/* ---------- 4. Componentes comunes ---------- */
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e4);
  margin-bottom:var(--e4); box-shadow:var(--sombra); overflow-x:auto; }
.cabecera { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--e2); }
.cabecera h2 { margin-bottom:var(--e2); }

/* Campos */
label { display:block; font-size:var(--t-peque); color:var(--suave); font-weight:600; margin-bottom:var(--e2); }
input, select, textarea { display:block; width:100%; min-height:38px; padding:.45rem .6rem; border:1px solid var(--campo-borde); background:var(--tarjeta);
  border-radius:var(--radio-peque); font-size:var(--t-normal); color:var(--texto); margin-top:var(--e1); font-family:inherit; font-weight:400; }
textarea { resize:vertical; min-height:6rem; line-height:1.45; overflow-y:hidden; } /* crece con el texto (app.js) */
input:focus, select:focus, textarea:focus { outline:3px solid color-mix(in srgb, var(--primario) 35%, transparent); border-color:var(--primario); outline-offset:0; }
input[type="file"] { min-height:0; }

/* Botones: primario (relleno), secundario (borde) y pequeños */
button, .boton { display:inline-flex; align-items:center; justify-content:center; gap:var(--e1); min-height:38px; padding:.4rem 1rem;
  background:var(--primario); color:var(--sobre-primario); border:1px solid var(--primario); border-radius:var(--radio-peque);
  font-family:inherit; font-size:var(--t-normal); font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none; }
button:hover, .boton:hover { background:var(--primario-hover); border-color:var(--primario-hover); color:var(--sobre-primario); }
button:disabled { opacity:.6; cursor:progress; }
button.secundario, .boton.secundario { background:var(--tarjeta); color:var(--primario); border-color:var(--primario); }
button.secundario:hover, .boton.secundario:hover { background:var(--etiqueta); color:var(--primario); }
button.pequeno { min-height:32px; font-size:var(--t-peque); padding:.2rem .75rem; }
button.enlace { background:none; border:0; padding:0; min-height:0; font:inherit; color:inherit; }
.enlace-boton { display:inline-flex; align-items:center; min-height:30px; background:none; border:1px solid var(--borde); color:var(--primario);
  font-size:var(--t-peque); font-weight:600; padding:.1rem .6rem; border-radius:var(--radio-peque); }
.enlace-boton:hover { background:var(--etiqueta); border-color:var(--primario); color:var(--primario); }

/* Botón Copiar: igual en toda la web */
button.copiar { min-height:28px; font-size:.75rem; font-weight:600; padding:.1rem .55rem; background:var(--etiqueta); color:var(--primario);
  border:1px solid transparent; vertical-align:middle; }
button.copiar:hover { border-color:var(--primario); background:var(--etiqueta); color:var(--primario); }
button.copiar.copiado { background:var(--ok); border-color:var(--ok); color:var(--tarjeta); }

/* Etiquetas y contadores */
.etiqueta { display:inline-block; font-size:.75rem; font-weight:600; background:var(--etiqueta); color:var(--primario); border-radius:4px; padding:0 .4rem; vertical-align:middle; }
.etiqueta.gris { background:var(--etiqueta-gris); color:var(--suave); }
.contador { display:inline-block; min-width:1.6rem; text-align:center; font-size:var(--t-peque); background:var(--etiqueta); color:var(--primario);
  border-radius:999px; padding:0 .45rem; vertical-align:middle; }
.matricula { display:inline-block; font:600 .8em var(--mono); letter-spacing:.04em; border:1px solid var(--campo-borde); border-radius:4px;
  padding:0 .35rem; background:var(--notas); color:var(--texto); vertical-align:middle; }
.telefono { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }

/* Tablas */
.tabla { width:100%; border-collapse:collapse; font-size:var(--t-normal); }
.tabla th, .tabla td { text-align:left; padding:var(--e2) var(--e3); border-bottom:1px solid var(--borde); vertical-align:top; }
.tabla th { color:var(--suave); font-size:var(--t-peque); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.tabla tbody tr:hover { background:var(--fila-hover); }
.tabla tbody tr:last-child td { border-bottom:0; }
.tabla tr:focus-within { background:var(--fila-hover); }
.tabla a, .bloque a, .datos-vehiculo a, .vehiculo h4 a, .relacion a { text-decoration:none; } /* menos ruido: subrayado solo al pasar */
.tabla a:hover, .bloque a:hover, .datos-vehiculo a:hover, .vehiculo h4 a:hover, .relacion a:hover { text-decoration:underline; }

/* Datos clave/valor */
.datos { display:grid; grid-template-columns:max-content 1fr; gap:var(--e1) var(--e4); margin:0; }
.datos dt { color:var(--suave); }
.datos dd { margin:0; }
.notas { background:var(--notas); border-left:3px solid var(--borde); padding:var(--e2) var(--e3); }

/* Mensajes */
.mensaje { padding:var(--e3) var(--e4); border-radius:var(--radio-peque); background:var(--etiqueta); }
.mensaje.error { background:var(--error-fondo); color:var(--error); }
.mensaje.success { background:var(--ok-fondo); color:var(--ok); }
.error-campo { color:var(--error); font-size:var(--t-peque); margin:var(--e1) 0 var(--e2); }
.error-campo:empty { display:none; }
.aviso-ok { color:var(--ok); font-weight:600; }
details { margin-top:var(--e2); }
summary { cursor:pointer; color:var(--suave); font-size:var(--t-peque); font-weight:600; }
summary:hover { color:var(--primario); }
.qr svg { width:220px; height:220px; display:block; margin:0 auto; background:#fff; }

/* ---------- 5. Buscador y resultados ---------- */
.buscador-movil { display:none; }
.avanzada { margin:0 0 var(--e4); }
.avanzada > summary { display:list-item; padding:var(--e1) 0; width:max-content; }
.avanzada[open] > summary { margin-bottom:var(--e2); }
.buscador { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:0 var(--e4); background:var(--tarjeta);
  border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e4); }
.buscador .acciones { display:flex; gap:var(--e4); align-items:center; align-self:end; margin-bottom:var(--e2); }
.pista { max-width:70ch; margin:0 0 var(--e4); }
.resumen-busqueda { margin:0 0 var(--e3); font-size:var(--t-medio); }
.resultados .tabla a.principal { font-size:var(--t-medio); }
.resultados .tabla a.principal:focus { outline:3px solid var(--primario); outline-offset:2px; border-radius:2px; }

/* ---------- 6. Fichas ---------- */
.migas { font-size:var(--t-peque); color:var(--suave); margin:0; display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; }
.migas a { font-weight:600; }
.migas .volver { padding-right:var(--e2); margin-right:var(--e1); border-right:1px solid var(--borde); }
.cabecera-ficha { align-items:flex-start; margin-bottom:var(--e4); }
.subtitulo { display:flex; flex-wrap:wrap; gap:var(--e1) var(--e4); margin:0; color:var(--suave); }
.subtitulo > span + span::before, .subtitulo > a + span::before { content:"·"; margin-right:var(--e4); color:var(--campo-borde); }
.aviso-notas { background:var(--aviso-fondo); border:1px solid var(--aviso-borde); border-left-width:4px; border-radius:var(--radio-peque);
  padding:var(--e2) var(--e4); margin-bottom:var(--e4); }
.aviso-notas strong { display:block; color:var(--aviso); font-size:var(--t-peque); text-transform:uppercase; letter-spacing:.03em; }
.aviso-notas p { margin:var(--e1) 0 0; }

/* Panel de llamada: bloques en rejilla, lo que se pide por teléfono */
.panel-llamada { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:var(--e3); margin-bottom:var(--e4); }
.bloque { background:var(--tarjeta); border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e3) var(--e4); box-shadow:var(--sombra); min-width:0; }
.bloque h2 { font-size:var(--t-peque); text-transform:uppercase; letter-spacing:.04em; color:var(--suave); margin:0 0 var(--e2);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); }
.bloque .persona, .bloque .equipo, .bloque .conexion { padding:var(--e2) 0; border-top:1px solid var(--borde); }
.bloque h2 + .persona, .bloque h2 + .equipo, .bloque h2 + .conexion { border-top:0; padding-top:0; }
.bloque .telefono { font-size:var(--t-medio); }
.dato-copiable { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e1) var(--e2); margin-top:var(--e1); min-width:0; }
.dato-copiable code { overflow-wrap:anywhere; }
.software { display:flex; flex-wrap:wrap; gap:var(--e1); margin-top:var(--e2); }
.programa { font-size:var(--t-peque); background:var(--notas); border:1px solid var(--borde); border-radius:4px; padding:0 .4rem; }
.bloque-abiertas { border-top:3px solid var(--ok); }
.lista-abiertas { list-style:none; margin:0; padding:0; }
.lista-abiertas li { padding:var(--e1) 0; border-top:1px solid var(--borde); font-size:var(--t-normal); }
.lista-abiertas li:first-child { border-top:0; }
.lista-abiertas a { text-decoration:none; }
.lista-abiertas a:hover { text-decoration:underline; }

/* Conexiones remotas: el ID grande, para leerlo por teléfono sin equivocarse */
.conexion { display:flex; flex-direction:column; gap:var(--e1); }
.conexion code.grande { font-size:var(--t-grande); font-weight:700; letter-spacing:.03em; }
.conexion .nota { color:var(--suave); font-size:var(--t-peque); }

/* ---------- 7. Ficha de vehículo ---------- */
/* Debajo del panel: dos columnas en pantalla ancha (intervenciones | adjuntos), una en el móvil */
.ficha-vehiculo { display:grid; grid-template-columns:minmax(0, 2fr) minmax(0, 1fr); gap:var(--e4); align-items:start; }
@media (max-width:1000px) { .ficha-vehiculo { grid-template-columns:minmax(0, 1fr); } }
.lateral h2 { margin-top:0; }

/* Formulario rápido */
.formulario-intervencion { border-left:4px solid var(--primario); }
.formulario-intervencion.editando { border-left-color:#d97706; }
.formulario-intervencion h2 { margin:0 0 var(--e2); }
.formulario-intervencion label { margin-bottom:var(--e1); }
.tipos { border:0; padding:0; margin:0 0 var(--e3); display:flex; flex-wrap:wrap; gap:var(--e2); }
.tipos legend { font-size:var(--t-peque); font-weight:600; color:var(--suave); margin-bottom:var(--e1); padding:0; }
.tipos .error-campo { flex-basis:100%; }
.chip { position:relative; display:inline-flex; margin:0; cursor:pointer; }
.chip input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
.chip span { display:inline-flex; align-items:center; min-height:34px; padding:.2rem .85rem; border:1px solid var(--campo-borde); border-radius:999px;
  color:var(--texto); font-size:var(--t-normal); font-weight:500; background:var(--tarjeta); }
.chip:hover span { border-color:var(--primario); }
.chip input:checked + span { background:var(--primario); border-color:var(--primario); color:var(--sobre-primario); font-weight:600; }
.chip input[type="checkbox"]:checked + span::before { content:"✓"; margin-right:.35rem; } /* se pueden marcar varios */
.tipos-intervencion { display:inline-flex; flex-wrap:wrap; gap:var(--e1); }
.tipos legend .ayuda { font-weight:400; }
.chip input:focus-visible + span { outline:3px solid var(--primario); outline-offset:2px; }
/* Botón «+» para añadir un tipo nuevo, y su caja */
.chip-mas { min-height:34px; min-width:34px; padding:0 .6rem; border-radius:999px; background:var(--tarjeta); color:var(--primario);
  border:1px dashed var(--primario); font-size:1.1rem; line-height:1; }
.chip-mas:hover { background:var(--etiqueta); color:var(--primario); border-style:solid; }
.nuevo-tipo { display:inline-flex; flex-wrap:wrap; gap:var(--e2); align-items:center; }
.nuevo-tipo input { width:16rem; max-width:100%; margin:0; min-height:34px; }
.campos-intervencion { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:0 var(--e3); margin-top:var(--e2); }
.acciones-form { display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:center; margin-top:var(--e2); }
.acciones-form .atajo { margin-left:auto; }
.cerrar-al-guardar { margin:var(--e1) 0 var(--e2); }

/* Historial */
.filtros-historial { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--e2); margin-bottom:var(--e3); }
.filtros-historial input { grid-column:1 / -1; }
.filtros-historial input, .filtros-historial select { margin-top:0; }
.intervencion { display:flex; gap:var(--e3); padding:var(--e4) 0; border-top:1px solid var(--borde); }
.intervencion:first-child { border-top:0; padding-top:var(--e2); }
.intervencion .cuerpo { flex:1; min-width:0; }
.intervencion header { display:flex; flex-wrap:wrap; gap:var(--e1) var(--e2); align-items:center; }
.intervencion .autor { font-size:var(--t-normal); }
.intervencion time { color:var(--suave); font-size:var(--t-peque); }
.intervencion .editar-intervencion { margin-left:auto; }
.intervencion .descripcion { margin:var(--e2) 0; overflow-wrap:anywhere; font-size:var(--t-medio); }
.intervencion footer { display:flex; flex-wrap:wrap; gap:var(--e1) var(--e4); font-size:.75rem; margin-top:var(--e2); }
.intervencion.recien { animation:recien 2.5s ease-out; }
@keyframes recien { from { background:var(--etiqueta); } to { background:transparent; } }
.intervencion.oculta { display:none; }
.intervencion.es-abierta { border-left:3px solid var(--ok); padding-left:var(--e3); }
.intervencion.es-cerrada .descripcion { color:var(--suave); font-size:var(--t-normal); }
.intervencion:target { background:var(--fila-hover); outline:2px solid var(--primario); outline-offset:-2px; border-radius:var(--radio-peque); }
.avatar { flex:none; width:2.2rem; height:2.2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; }
.avatar.c0 { background:#1f5f99; } .avatar.c1 { background:#1a7f37; } .avatar.c2 { background:#b54708; }
.avatar.c3 { background:#7a3fb3; } .avatar.c4 { background:#0e7490; } .avatar.c5 { background:#b42318; }

/* Colores por tipo de intervención (iguales en toda la web) */
.etiqueta.tipo-reparacion { background:#fde8e7; color:#b42318; } .etiqueta.tipo-instalacion { background:#e6f4ea; color:#1a7f37; }
.etiqueta.tipo-software { background:#efe6fa; color:#6b2fa3; } .etiqueta.tipo-cambio { background:#fef0d9; color:#9a4a00; }
:root[data-bs-theme="dark"] .etiqueta.tipo-reparacion { background:#4a1f1c; color:#ffb4ab; }
:root[data-bs-theme="dark"] .etiqueta.tipo-instalacion { background:#1d3b26; color:#8ee09f; }
:root[data-bs-theme="dark"] .etiqueta.tipo-software { background:#35244a; color:#d6b8f5; }
:root[data-bs-theme="dark"] .etiqueta.tipo-cambio { background:#45300f; color:#f7c46c; }

/* Estado: abierta (verde) / cerrada (gris) */
.estado { display:inline-block; font-size:.75rem; font-weight:700; border-radius:999px; padding:.05rem .55rem; white-space:nowrap; }
.estado.abierta { background:var(--ok-fondo); color:var(--ok); border:1px solid var(--ok); }
.estado.cerrada { background:var(--etiqueta-gris); color:var(--suave); border:1px solid transparent; }
a.estado { text-decoration:none; }
.resumen-abiertas { font-weight:600; text-transform:none; letter-spacing:0; font-size:var(--t-peque); }
.resumen-abiertas.hay { color:var(--ok); }

/* Cronología de notas */
.cronologia { list-style:none; margin:var(--e2) 0 var(--e3); padding:0 0 0 .9rem; border-left:2px solid var(--borde); }
.cronologia li { position:relative; display:flex; gap:var(--e3); padding:.2rem 0 .35rem; font-size:var(--t-normal); }
.cronologia li::before { content:""; position:absolute; left:calc(-.9rem - 6px); top:.55rem; width:10px; height:10px; border-radius:50%;
  background:var(--tarjeta); border:2px solid var(--campo-borde); }
.cronologia li.nota::before { border-color:var(--primario); background:var(--primario); }
.cronologia li.cierre::before { border-color:var(--ok); background:var(--ok); }
.cronologia time { flex:none; width:5.6rem; color:var(--suave); font-variant-numeric:tabular-nums; }
.cronologia .hito { color:var(--suave); font-size:var(--t-peque); }
.cronologia .texto-nota { overflow-wrap:anywhere; }

/* Acciones de cada intervención: "Añadir nota" y "Cerrar" del mismo tamaño */
.acciones-intervencion { display:flex; flex-wrap:wrap; gap:var(--e2) var(--e3); align-items:flex-start; margin:var(--e2) 0 0; }
.anadir-nota { flex:1 1 auto; margin:0; }
.anadir-nota > summary { display:inline-flex; align-items:center; min-height:32px; padding:.2rem .75rem; border:1px solid var(--primario);
  border-radius:var(--radio-peque); color:var(--primario); font-size:var(--t-peque); list-style:none; }
.anadir-nota > summary::-webkit-details-marker { display:none; }
.anadir-nota > summary:hover { background:var(--etiqueta); }
.anadir-nota[open] > summary { margin-bottom:var(--e2); background:var(--etiqueta); }
.form-nota { border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e3); background:var(--notas); }
.fila-nota { display:flex; gap:var(--e3); }
.fila-nota label { margin:0 0 var(--e2); }
.fila-nota input { width:auto; }
.form-estado { margin:0 0 0 auto; }

/* ---------- 8. Ficha de cliente ---------- */
.seccion-vehiculos > .cabecera { margin-bottom:var(--e2); }
.filtro-vehiculos { max-width:340px; margin:0; }
.ciudad { margin:var(--e5) 0 var(--e3); border-bottom:2px solid var(--borde); padding-bottom:var(--e1); }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:var(--e4); align-items:start; }
.seccion-vehiculos { margin-bottom:var(--e5); }
.vehiculo { margin-bottom:0; }
.vehiculo p { margin:var(--e1) 0; }
.vehiculo.con-abiertas { border-top:3px solid var(--ok); }
.relacion { display:flex; flex-wrap:wrap; gap:var(--e1) var(--e3); margin:0 0 var(--e2); font-size:var(--t-peque); align-items:center; }
.datos-vehiculo { display:grid; grid-template-columns:4.5rem 1fr; gap:var(--e2) var(--e3); margin:0; font-size:var(--t-normal); }
.datos-vehiculo dt { color:var(--suave); font-size:var(--t-peque); font-weight:600; padding-top:.1rem; }
.datos-vehiculo dd { margin:0; min-width:0; }
.datos-vehiculo .conexion { padding:var(--e1) 0; }
.datos-vehiculo .conexion code.grande { font-size:var(--t-medio); }

/* ---------- 9. Adjuntos ---------- */
.zona-archivos { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--e1);
  border:2px dashed var(--campo-borde); border-radius:var(--radio); padding:var(--e4); text-align:center; cursor:pointer; color:var(--texto);
  margin:0 0 var(--e2); font-weight:400; font-size:var(--t-normal); }
.zona-archivos.pequena { padding:var(--e2); font-size:var(--t-peque); }
.zona-archivos:hover, .zona-archivos.arrastrando { border-color:var(--primario); background:var(--etiqueta); }
.zona-archivos.con-archivos { border-style:solid; border-color:var(--primario); }
.zona-archivos input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; margin:0; }
.zona-archivos .lista-elegidos { font-family:var(--mono); overflow-wrap:anywhere; }
.form-adjuntos { margin-bottom:var(--e3); }
.form-adjuntos input[type="text"] { margin:0 0 var(--e2); }
.fila-subir { display:flex; flex-wrap:wrap; gap:var(--e2) var(--e4); align-items:center; justify-content:space-between; }
label.casilla { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin:0; color:var(--texto); font-size:var(--t-normal); font-weight:400; }
label.casilla input { display:inline-block; width:auto; min-height:0; margin:0; accent-color:var(--primario); }
.adjuntar-en-form { margin:var(--e1) 0 var(--e2); }
.filtros-adjuntos { display:flex; flex-wrap:wrap; gap:var(--e2); align-items:center; margin:var(--e2) 0 var(--e3); }
.filtro-origen { min-height:30px; background:var(--tarjeta); color:var(--texto); border:1px solid var(--campo-borde); border-radius:999px;
  font-size:var(--t-peque); font-weight:500; padding:.15rem .7rem; }
.filtro-origen:hover { background:var(--etiqueta); color:var(--texto); border-color:var(--primario); }
.filtro-origen.activo { background:var(--primario); border-color:var(--primario); color:var(--sobre-primario); }
.filtro-nombre { flex:1 1 180px; margin:0; min-height:32px; padding:.3rem .5rem; font-size:var(--t-peque); }
.lista-adjuntos { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--e2); }
.adjunto { display:flex; gap:var(--e2); border:1px solid var(--borde); border-radius:var(--radio); padding:var(--e2); background:var(--tarjeta); min-width:0; }
.adjunto.restringido { border-left:4px solid #d97706; }
.adjunto .miniatura { flex:none; width:72px; height:72px; border-radius:var(--radio-peque); overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:var(--notas); border:1px solid var(--borde); text-decoration:none; }
.adjunto .miniatura img { width:100%; height:100%; object-fit:cover; display:block; }
.extension { font:700 .8rem var(--mono); color:var(--primario); letter-spacing:.02em; }
.adjunto .info { min-width:0; flex:1; display:flex; flex-direction:column; gap:.15rem; }
.nombre-archivo { font-size:var(--t-peque); font-weight:700; overflow-wrap:anywhere; color:var(--texto); }
.descripcion-adjunto { font-size:var(--t-peque); }
.adjunto .meta { font-size:.75rem; }
.acciones-adjunto { display:flex; flex-wrap:wrap; gap:var(--e1); align-items:center; margin-top:.1rem; }
.acciones-adjunto .enlace-boton { text-decoration:none; }
.origen-chip { display:inline-block; font-size:.75rem; border-radius:4px; padding:.05rem .45rem; text-decoration:none; font-weight:600; }
.o-cliente { background:#e8eefc; color:#2c4fa3; } .o-vehiculo { background:#e6f4ea; color:#1a7f37; } .o-intervencion { background:#fef0d9; color:#9a4a00; }
:root[data-bs-theme="dark"] .o-cliente { background:#22305a; color:#b4c6ff; }
:root[data-bs-theme="dark"] .o-vehiculo { background:#1d3b26; color:#8ee09f; }
:root[data-bs-theme="dark"] .o-intervencion { background:#45300f; color:#f7c46c; }
.etiqueta.candado { background:#fef0d9; color:#9a4a00; }
:root[data-bs-theme="dark"] .etiqueta.candado { background:#45300f; color:#f7c46c; }
/* Adjuntos dentro de una intervención */
.adjuntos-intervencion { display:flex; flex-wrap:wrap; gap:var(--e2); margin:var(--e1) 0 var(--e2); align-items:center; }
.adjunto-mini { display:inline-flex; align-items:center; gap:var(--e2); border:1px solid var(--borde); border-radius:var(--radio-peque); padding:.2rem .5rem .2rem .2rem;
  text-decoration:none; color:var(--texto); max-width:100%; background:var(--tarjeta); }
.adjunto-mini:hover { border-color:var(--primario); }
.adjunto-mini.restringido { border-left:3px solid #d97706; }
.adjunto-mini img, .adjunto-mini .extension { width:36px; height:36px; border-radius:4px; object-fit:cover; display:flex; align-items:center; justify-content:center; background:var(--notas); font-size:.65rem; flex:none; }
.adjunto-mini code { font-size:.75rem; overflow-wrap:anywhere; }
.adjuntar-intervencion { flex-basis:100%; margin-top:.2rem; }
.adjuntar-intervencion .form-adjuntos { margin-top:var(--e2); }

/* ---------- 10. Intervenciones abiertas en el buscador ---------- */
.abiertas-buscador { border-left:4px solid var(--ok); }
.abiertas-buscador h2 { display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2); margin:0 0 var(--e1); }
.abiertas-buscador .ayuda { margin-top:0; }
.tabla-abiertas { overflow-x:auto; }
.tabla-abiertas td { min-width:9rem; }

/* ---------- 11. Atajos, accesibilidad y móvil ---------- */
.atajos { border:1px solid var(--borde); border-radius:var(--radio); background:var(--tarjeta); color:var(--texto); padding:var(--e5); max-width:460px; width:calc(100% - 2rem); }
.atajos::backdrop { background:rgba(0,0,0,.45); }
.atajos dl { display:grid; grid-template-columns:max-content 1fr; gap:var(--e2) var(--e4); margin:0 0 var(--e4); }
.atajos dt { white-space:nowrap; }
.atajos dd { margin:0; }
.atajos form { text-align:right; margin:0; }
/* Solo para lectores de pantalla */
.oculto { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0; }
/* Enlace "Saltar al contenido": aparece solo al llegar con el tabulador */
.saltar { position:absolute; left:var(--e2); top:-3rem; z-index:30; background:var(--tarjeta); color:var(--primario); padding:var(--e2) var(--e3); border-radius:var(--radio-peque); }
.saltar:focus { top:var(--e2); }
/* Foco siempre visible con teclado */
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--primario); outline-offset:2px; border-radius:2px; }
.barra a:focus-visible, .barra button:focus-visible { outline-color:#6cb4f5; }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Pantalla mediana: la barra se reparte en dos filas si hace falta */
@media (max-width:900px) {
  .barra { flex-wrap:wrap; }
  .barra .usuario { display:none; }
}
/* Móvil */
@media (max-width:640px) {
  :root { --alto-barra:48px; }
  main { padding:var(--e3); }
  .marca span { display:none; } .marca img { height:28px; }
  .busqueda-barra { display:none; }            /* en el móvil la caja va en la propia página */
  .buscador-movil { display:flex; gap:var(--e2); margin-bottom:var(--e3); }
  .buscador-movil input { margin:0; min-height:44px; font-size:1rem; }
  .buscador-movil button { min-height:44px; }
  button, .boton { min-height:44px; }
  button.copiar { min-height:32px; }
  input, select, textarea { min-height:44px; font-size:1rem; } /* 16 px: el iPhone no hace zoom al escribir */
  .tabla { font-size:var(--t-peque); }
  .tabla th, .tabla td { padding:var(--e2); }
  .panel-llamada { grid-template-columns:1fr; }
  .filtros-historial { grid-template-columns:1fr 1fr; }
  .acciones-form .atajo { display:none; }
  .acciones-form button { flex:1; }
  .cronologia time { width:5rem; font-size:var(--t-peque); }
  .datos-vehiculo { grid-template-columns:1fr; gap:0 var(--e3); }
  .datos-vehiculo dt { margin-top:var(--e2); }
  .filtro-vehiculos { max-width:none; }
  .tecla-atajo, #ver-atajos { display:none; }
  /* Resultados del buscador e intervenciones abiertas como tarjetas, sin desplazarse de lado */
  .resultados .tabla thead, .tabla-abiertas thead { display:none; }
  .resultados .tabla, .resultados .tabla tbody, .resultados .tabla tr, .resultados .tabla td,
  .tabla-abiertas table, .tabla-abiertas tbody, .tabla-abiertas tr, .tabla-abiertas td { display:block; width:100%; }
  .resultados .tabla tr, .tabla-abiertas tr { border-bottom:1px solid var(--borde); padding:var(--e2) 0; }
  .resultados .tabla td, .tabla-abiertas td { border:0; padding:.15rem 0; min-width:0; }
  .resultados .tabla td:empty { display:none; }
  .tabla-abiertas td.sin-saltos { white-space:normal; }
  .tabla-abiertas td.sin-saltos br { display:none; }
  .tabla-abiertas td.sin-saltos > * { margin-right:var(--e2); }
}