/* ==========================================================================
   panel.css · El panel interno (lo que usan Jaume y el comercial)
   --------------------------------------------------------------------------
   Menú negro con su logo, como la cabecera de su web. El contenido va en
   claro porque es una herramienta de trabajo: se lee mejor durante horas.

   1. Estructura: menú lateral + contenido
   2. Cabecera de cada página y cajas
   3. Para hoy (avisos)
   4. Tablero por estados
   5. Listado con filtros
   6. Ficha del coche
   7. Formulario de alta
   8. Login y errores
   9. Móvil
   ========================================================================== */


/* 1. ESTRUCTURA ------------------------------------------------------------ */

/* Cada página trae en el HTML datos de ejemplo (los de la maqueta) que panel.js cambia por los reales.
   Para que no se vea el cambio, las piezas del contenido (no el fondo de la cabecera), el usuario del menú y el contador esperan ocultos hasta
   que panel.js pone .listo en <html>, y entonces aparecen con un fundido. Si el JavaScript no llega a
   ejecutarse (por ejemplo, al abrir la maqueta como fichero), se enseñan igual a los 1,5 s.
   El contenido entra por partes, en cascada: panel.js marca cada bloque con .entra y su turno (--i).
   El usuario del menú no espera si panel.js ya lo recuerda (.usuario-conocido): así no parpadea al cambiar de página. */
.menu__usuario,
.menu__enlaces .contador { transition: opacity .35s ease; }
html:not(.listo) .contenido > :not(header),
html:not(.listo) .contenido > header > *,
html:not(.listo):not(.usuario-conocido) .menu__usuario,
html:not(.listo) .menu__enlaces .contador { opacity: 0; animation: mostrar-sin-js 0s 1.5s forwards; }
/* Con el JavaScript ya en marcha (.cargando), lo de la maqueta no sale nunca: se espera a los datos de
   verdad, aunque la red del patio tarde más de 1,5 s. Arriba, una raya que avanza dice que está cargando. */
html.cargando:not(.listo) .contenido > :not(header),
html.cargando:not(.listo) .contenido > header > *,
html.cargando:not(.listo):not(.usuario-conocido) .menu__usuario,
html.cargando:not(.listo) .menu__enlaces .contador { animation: none; opacity: 0; }
html.cargando:not(.listo) body::before {
  content: ''; position: fixed; inset: 0 0 auto; z-index: 50; height: 3px;
  background: linear-gradient(90deg, transparent, var(--rojo-boton), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: cargando-raya 1.1s ease-in-out infinite;
}
@keyframes cargando-raya { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { html.cargando:not(.listo) body::before { animation: none; background: var(--rojo-boton); opacity: .5; } }
@keyframes mostrar-sin-js { to { opacity: 1; } }

/* Cada pieza entra 45 ms después de la anterior; las filas de una caja, ya dentro de ella, solo se funden */
.entra { animation: entrar .4s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } }
.entra--sin-mover { animation-name: aparecer; }
@keyframes aparecer { from { opacity: 0; } }
/* Lo fijo abajo (la barra de guardar del alta) sube desde fuera de la pantalla, al final de la cascada */
.entra-abajo { animation: entrar-abajo .5s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes entrar-abajo { from { transform: translateY(100%); } }
/* Con menos movimiento: sin desplazamiento ni cascada, solo un fundido corto de todo a la vez */
@media (prefers-reduced-motion: reduce) {
  .entra, .entra-abajo { animation: aparecer .2s ease both; animation-delay: 0s; }
}

/* Paso de una página a otra. El fondo negro de la cabecera no espera a los datos (arriba solo se
   ocultan sus piezas): así no hay un fogonazo claro antes de que aparezca. Además el navegador
   mantiene la página vieja hasta que la nueva pinta y funde una en otra; el menú no se funde,
   se queda quieto. Sin soporte de View Transitions, se cambia de página como siempre. */
@view-transition { navigation: auto; }
.menu { view-transition-name: menu; }
::view-transition-group(menu),
::view-transition-new(menu) { animation: none; }
::view-transition-old(menu) { display: none; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

.app {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  min-height: 100dvh; /* en el móvil, la altura que se ve de verdad (sin la barra del navegador) */
}

.menu {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-l);
  padding: var(--espacio-l) var(--espacio-m);
  background: var(--negro);
  color: var(--blanco);
}

.menu__marca { display: block; padding: 0 var(--espacio-s); }
.menu__marca .logo { height: 44px; }

/* Buscador por matrícula: lo que más se usa en un día normal */
.menu__buscar input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--negro-3);
  border-radius: var(--radio-pequeno);
  background: var(--negro-2);
  color: var(--blanco);
  font-size: .875rem;
}
.menu__buscar input::placeholder { color: #8b9097; }
/* Sobre el negro del menú, el borde gris solo no se distinguía: un anillo claro dice dónde está el foco */
.menu__buscar input:focus { outline: none; border-color: var(--gris-marca); box-shadow: 0 0 0 3px rgb(255 255 255 / .28); }

.menu__enlaces { display: flex; flex-direction: column; gap: 2px; }

.menu__enlaces a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radio-pequeno);
  color: #b9bec4;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) { .menu__enlaces a:hover { background: var(--negro-2); color: var(--blanco); } }

/* Icono de cada enlace: una máscara SVG pintada con el color del texto, así sigue al gris,
   al blanco del hover y al de la página actual. Se elige por el href del enlace. */
.menu__icono {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
}
.menu__enlaces .contador { margin-left: auto; }
.menu__enlaces a[href="index.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E"); } /* Tablero */
.menu__enlaces a[href="coches.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E"); } /* Coches */
.menu__enlaces a[href="coche-nuevo.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E"); } /* Alta de vehículo */
.menu__enlaces a[href="contactos.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E"); } /* Contactos */
.menu__enlaces a[href="informes.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v16a2 2 0 0 0 2 2h16'/%3E%3Cpath d='M18 17V9M13 17V5M8 17v-3'/%3E%3C/svg%3E"); } /* Informes */
.menu__enlaces a[href="usuarios.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); } /* Usuarios */

/* La página en la que estás. En el HTML: aria-current="page".
   La marca es la barra inclinada del logo, en rojo. */
.menu__enlaces a[aria-current="page"] { background: var(--negro-2); color: var(--blanco); }
.menu__enlaces a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  width: 10px;
  height: 18px;
  margin-top: -9px;
  background: var(--rojo);
  transform: skewX(-20deg);
}

/* Enlaces de administración (Usuarios), separados del trabajo diario */
/* Resalte que se desliza entre enlaces al pasar el ratón (lo pone panel.js; sin él, el hover de siempre) */
.menu__enlaces--resalte { position: relative; }
.menu__resalte {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-radius: var(--radio-pequeno);
  background: var(--negro-2);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), height .25s cubic-bezier(.2, .8, .2, 1), opacity .15s;
}
/* De vuelta a la página actual al sacar el ratón: más lento y suave */
.menu__resalte--volviendo { transition: transform .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1), opacity .15s; }
.menu__enlaces--resalte a { z-index: 1; transition: color .15s, padding-left .2s ease-out; }
.menu__enlaces--resalte a[aria-current="page"] { background: transparent; }
@media (hover: hover) and (pointer: fine) { .menu__enlaces--resalte a:hover { background: transparent; } }
@media (hover: hover) and (pointer: fine) { .menu__enlaces--resalte a:hover { padding-left: 16px; } }

/* Menú según el rol (fijarRol en panel.js): lo de gerencia no sale hasta saber que lo es. Para el comercial,
   la raya del bloque de dinero pasa a Incentivos, que es lo único que le queda de él. */
html:not([data-rol="gerencia"]) .menu__enlaces a:is([href="informes.html"], [href="usuarios.html"], [href="proveedores.html"],
  [href="gastos.html"], [href="facturas.html"], [href="libros.html"]) { display: none; }
.menu__enlaces a.menu__separado,
html:not([data-rol="gerencia"]) .menu__enlaces a[href="incentivos.html"] { margin-top: 12px; }
html:not([data-rol="gerencia"]) .menu__enlaces a[href="incentivos.html"]::after,
.menu__enlaces a.menu__separado::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 12px;
  right: 12px;
  border-top: 1px solid var(--negro-3);
}

/* Numerito al lado de un enlace (contactos sin atender) */
.contador {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: var(--radio-boton);
  background: var(--rojo-boton);
  color: var(--blanco);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
}

.menu__usuario {
  margin-top: auto;
  padding: var(--espacio-m) var(--espacio-s) 0;
  border-top: 1px solid var(--negro-3);
  font-size: .8125rem;
  color: #8b9097;
}
.menu__usuario strong { display: block; color: var(--blanco); font-size: .875rem; }
/* Mientras panel.js no pone el texto, el nombre y el rol que recuerda js/menu.js (sin parpadeo al cambiar de página) */
.menu__usuario [data-usuario-nombre]:empty::before { content: var(--usuario-nombre, ""); }
.menu__usuario [data-usuario-rol]:empty::before { content: var(--usuario-rol, ""); }

/* El botón «Menú» solo existe en el móvil */
.menu__movil { display: none; }

.contenido {
  min-width: 0; /* sin esto, el tablero ancho empuja la página hacia fuera */
  width: 100%; /* sin ancho máximo: en pantallas anchas ocupa todo y no deja una franja vacía a la derecha */
  padding: 32px 40px 48px;
}


/* 2. CABECERA DE PÁGINA Y CAJAS -------------------------------------------- */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--espacio-m);
  margin-bottom: var(--espacio-l);
}

.cabecera h1 { margin-bottom: 4px; }
.cabecera .nota { margin: 0; }

.cabecera__acciones { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--espacio-s); }

/* Portada negra del tablero (diseño de Hafsa). Sale del margen del contenido
   para ocupar todo el ancho, y los estados se montan encima de su borde. */
.portada {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 20px;
  margin: -32px -40px 0;
  padding: 56px 40px 104px;
  background:
    radial-gradient(90% 140% at 85% 120%, rgb(255 255 255 / .09), transparent 60%),
    linear-gradient(180deg, var(--negro), var(--negro-2));
  color: var(--blanco);
}
.portada__antetitulo { margin: 0; color: var(--gris-marca); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.portada__titular { display: flex; align-items: baseline; gap: 16px; margin: 0; font-size: 3.5rem; font-weight: 400; letter-spacing: -.02em; line-height: 1; }
.portada__titular .cifra { font-size: 2.6em; font-weight: 800; letter-spacing: -.04em; }
.portada__datos { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; color: rgb(255 255 255 / .66); font-size: .875rem; }
.portada__datos strong { margin-right: 6px; color: var(--blanco); font-weight: 600; }
.portada__alerta,
.portada__alerta strong { color: #f08a8a; }

/* Dos lados: el stock a la izquierda y las cifras del mes a la derecha */
.portada { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 40px; }
.portada__principal { display: grid; justify-items: start; gap: 20px; }
.portada__fecha { margin-left: 10px; padding-left: 12px; border-left: 1px solid rgb(255 255 255 / .2); color: rgb(255 255 255 / .55); letter-spacing: .08em; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.portada__mes {
  min-width: 340px;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / .1);
  border-radius: var(--radio);
  background: rgb(255 255 255 / .04);
  backdrop-filter: blur(4px);
}
.portada__mes-titulo { margin: 0 0 14px; color: var(--gris-marca); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.portada__cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0; }
.portada__cifras div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; } /* cifras arriba y alineadas aunque una etiqueta lleve dos líneas */
.portada__cifras dt { color: rgb(255 255 255 / .6); font-size: .8125rem; }
.portada__cifras dd { margin: 0; color: var(--blanco); font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.portada__cifras small { display: block; margin-top: 2px; color: rgb(255 255 255 / .45); font-size: .75rem; }
.portada__cifras .sube { color: #7fd6a4; }
.portada__cifras .baja { color: #f08a8a; }

.boton--claro { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .boton--claro:hover { background: var(--rojo-boton); border-color: var(--rojo-boton); color: var(--blanco); } }

/* Cabecera de las demás páginas en la misma banda negra: título a la izquierda,
   botones a la derecha. Se usa con class="cabecera cabecera--portada". */
.cabecera--portada {
  margin: -32px -40px var(--espacio-l);
  padding: 40px 40px 36px;
  background:
    radial-gradient(90% 140% at 85% 120%, rgb(255 255 255 / .09), transparent 60%),
    linear-gradient(180deg, var(--negro), var(--negro-2));
  color: var(--blanco);
}
.cabecera--portada > div:first-child { display: flex; flex-direction: column; gap: 10px; }
.cabecera--portada h1 { margin: 0; color: var(--blanco); font-size: 2.25rem; letter-spacing: -.02em; }
.cabecera--portada .nota { max-width: 70ch; color: rgb(255 255 255 / .7); }
.cabecera--portada .ficha-cabecera__linea { margin-bottom: 2px; }

/* Sobre negro: el enlace de volver, los botones secundarios y los campos */
.cabecera--portada .volver,
.ficha-cabecera .volver { margin: 0; color: rgb(255 255 255 / .6); }
@media (hover: hover) and (pointer: fine) { .cabecera--portada .volver:hover, .ficha-cabecera .volver:hover { color: var(--blanco); } }
.cabecera--portada .boton--secundario,
.portada .boton--secundario,
.ficha-cabecera .boton--secundario { background: transparent; border-color: rgb(255 255 255 / .35); color: var(--blanco); }
@media (hover: hover) and (pointer: fine) { .cabecera--portada .boton--secundario:hover, .portada .boton--secundario:hover, .ficha-cabecera .boton--secundario:hover { background: rgb(255 255 255 / .08); border-color: var(--blanco); } }
.cabecera--portada .campo__nombre { color: #d0d4d8; }
.cabecera--portada .campo select { border-color: transparent; }

/* Opciones pequeñas para los filtros de los listados */
.opciones--pequenas legend { margin-bottom: 4px; }
.opciones--pequenas { gap: 6px; }
.opciones--pequenas span { min-height: 34px; padding: 0 12px; font-size: .8125rem; }

/* Los 10 estados en fila, montados sobre la portada */
.estados {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  margin: -56px 0 28px;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 12px 32px rgb(0 0 0 / .08);
}
.estados__paso {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  padding: 16px 14px 20px;
  border-right: 1px solid var(--linea);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color var(--hover);
}
.estados__paso:last-child { border-right: 0; }
@media (hover: hover) and (pointer: fine) { .estados__paso:hover { background: var(--fondo); } }
.estados__orden { color: var(--gris-marca); font-size: .6875rem; font-weight: 500; }
.estados__n { font-size: 1.875rem; font-weight: 700; line-height: 1; }
.estados__paso--vacio .estados__n { color: var(--tinta-3); }
.estados__nombre { color: var(--tinta-3); font-size: .75rem; line-height: 1.25; }
/* Raya de abajo: gris entera y, encima, la parte del stock que está en este estado */
.estados__paso::before,
.estados__paso::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; }
.estados__paso::before { right: 0; background: var(--linea); }
.estados__paso::after { width: calc(var(--p, 0) * 100%); background: var(--color-fase); }
.estados__paso--llegada { --color-fase: var(--llegada); }
.estados__paso--preparacion { --color-fase: var(--preparacion); }
.estados__paso--venta { --color-fase: var(--venta); }
.estados__paso--reservado { --color-fase: var(--reservado); }
.estados__paso--vendido { --color-fase: var(--vendido); }

.volver { display: inline-block; margin-bottom: var(--espacio-m); color: var(--tinta-3); font-size: .875rem; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .volver:hover { color: var(--tinta); } }

/* Bloque blanco genérico */
.caja {
  padding: var(--espacio-l);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}

.caja__titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--espacio-m);
  margin-bottom: var(--espacio-m);
}


/* 3. PARA HOY --------------------------------------------------------------
   Lista corta de lo que hay que hacer hoy. Rojo = hoy. Ámbar = esta semana. */

.para-hoy { margin-bottom: 28px; padding: 0; overflow: hidden; }

.para-hoy h2 { padding: 16px 20px 12px; font-size: 1rem; }

.para-hoy ul { margin: 0; padding: 0; list-style: none; }

.para-hoy li a {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--linea);
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .para-hoy li a:hover { background: var(--fondo-hover); } }

.para-hoy__cifra {
  display: grid;
  place-items: center;
  height: 28px;
  border-radius: var(--radio-pequeno);
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-weight: 700;
  font-size: .875rem;
}
.para-hoy__cifra--hoy { background: var(--peligro-fondo); color: var(--peligro); }

.para-hoy__ir { color: var(--tinta-3); font-size: .875rem; }


/* 4. TABLERO POR ESTADOS ---------------------------------------------------
   Una columna por estado, de ancho fijo. Si no caben, el tablero se mueve de lado:
   arrastrando el fondo con el ratón, con las flechas de la cabecera o con la barra.
   La raya de arriba de cada columna lleva el color de su fase. */

.tablero-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px 24px;
  margin-bottom: 14px;
}
.tablero-cabecera h2 { margin: 0; }
.tablero-cabecera__pista { margin: 4px 0 0; color: var(--tinta-3); font-size: .8125rem; }
.tablero-cabecera__mandos { display: flex; align-items: center; gap: 12px; }

/* Pestañas pequeñas para filtrar (Todos, Patio del taller, Parking) */
.pestanas { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #e6e8ea; }
.pestanas a {
  padding: 5px 12px;
  border-radius: 6px;
  color: var(--tinta-2);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .pestanas a:hover { color: var(--tinta); } }
.pestanas a[aria-current="page"] { background: var(--blanco); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px rgba(23, 25, 28, .08); }

/* Flechas para saltar columnas */
.tablero-flechas { display: flex; gap: 6px; }
.tablero-flecha {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0 0 2px;
  border: 1px solid var(--linea-fuerte);
  border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  font: 600 1.25rem/1 var(--letra);
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
@media (hover: hover) and (pointer: fine) { .tablero-flecha:hover:not(:disabled) { border-color: var(--tinta); } }
.tablero-flecha:disabled { opacity: .35; cursor: default; }

/* El marco lleva el degradado de los bordes: avisa de que hay más columnas por ese lado */
.tablero-marco { position: relative; }
.tablero-marco::before,
.tablero-marco::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: var(--espacio-m);
  width: 56px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.tablero-marco::before { left: 0; background: linear-gradient(90deg, var(--fondo), rgb(244 245 246 / 0)); }
.tablero-marco::after { right: 0; background: linear-gradient(270deg, var(--fondo), rgb(244 245 246 / 0)); }
.tablero-marco--hay-izq::before,
.tablero-marco--hay-der::after { opacity: 1; }

.tablero {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 272px;
  align-items: start; /* cada columna mide lo que lleva: sin huecos grises hasta la más larga */
  gap: 14px;
  min-height: 320px;
  overflow-x: auto;
  padding-bottom: var(--espacio-m);
  scrollbar-width: thin;
  scrollbar-color: var(--linea-fuerte) transparent;
  cursor: grab;
  outline: 0;
}
.tablero:focus-visible { box-shadow: 0 0 0 2px var(--tinta); border-radius: var(--radio); }
.tablero--moviendo { cursor: grabbing; user-select: none; }
.tablero--moviendo .ficha-mini { pointer-events: none; }

.columna {
  --color-fase: var(--llegada);
  display: flex;
  flex-direction: column;
  gap: var(--espacio-s);
  min-height: 140px;
  padding: 12px 10px 10px;
  background: #ebedef;
  border-top: 3px solid var(--color-fase);
  border-radius: 4px 4px var(--radio) var(--radio);
  transition: background .15s, box-shadow .15s;
}
.columna--preparacion { --color-fase: #e0a23a; }
.columna--venta { --color-fase: var(--venta); }
.columna--reservado { --color-fase: var(--reservado); }
.columna--vendido { --color-fase: var(--vendido); }

.columna__titulo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 0 4px 4px;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.columna__titulo .cifra {
  min-width: 24px;
  padding: 1px 8px;
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--tinta-2);
  font-size: .75rem;
  font-weight: 600;
  text-align: center;
}

/* Tarjeta de un coche en el tablero: foto a la izquierda, datos a la derecha */
.ficha-mini {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  padding: 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 8px;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) { .ficha-mini:hover { border-color: var(--linea-fuerte); box-shadow: 0 4px 14px rgba(23, 25, 28, .08); transform: translateY(-1px); } }
/* Las tarjetas de la maqueta no llevan foto: ocupan todo el ancho */
.ficha-mini:not(:has(.ficha-mini__foto)) { grid-template-columns: 1fr; }

.ficha-mini__foto {
  width: 72px;
  height: 54px;
  border-radius: 6px;
  background: var(--fondo);
  object-fit: cover;
  -webkit-user-drag: none;
}
.ficha-mini__cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Arrastrar una tarjeta a otra columna (cambia el estado) */
.ficha-mini[draggable="true"] { cursor: grab; }
.ficha-mini--arrastrando { opacity: .4; transform: none; box-shadow: none; }
.columna--encima { background: #dfe3e7; box-shadow: inset 0 0 0 2px var(--color-fase); }

.ficha-mini .matricula { align-self: flex-start; }

.ficha-mini__coche {
  display: -webkit-box;
  overflow: hidden;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ficha-mini__datos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 8px;
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: 1px solid var(--linea);
  font-size: .75rem;
  color: var(--tinta-3);
}
.ficha-mini__precio { color: var(--tinta); font-weight: 600; }

/* Días en ese estado. Se marca cuando son muchos. */
.dias { font-weight: 500; }
.dias--aviso { padding: 0 6px; border-radius: 4px; background: var(--aviso-fondo); color: var(--aviso); font-weight: 600; }
.dias--peligro { padding: 0 6px; border-radius: 4px; background: var(--peligro-fondo); color: var(--peligro); font-weight: 600; }

/* Columna con muchos coches: se ven los primeros y el resto tras «Ver N más» */
.columna:not(.columna--abierta) .ficha-mini--oculta { display: none; }
.columna__mas {
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--tinta-2);
  font: 600 .8125rem/1.2 var(--letra);
  cursor: pointer;
  transition: background .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) { .columna__mas:hover { background: rgb(255 255 255 / .7); color: var(--tinta); } }

.columna__vacia {
  margin: 0;
  padding: 20px 8px;
  border: 1px dashed var(--linea-fuerte);
  border-radius: 8px;
  font-size: .8125rem;
  color: var(--tinta-3);
  text-align: center;
}


/* 5. LISTADO CON FILTROS --------------------------------------------------- */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: var(--espacio-m);
}

.filtros .campo { min-width: 170px; }
.filtros .campo--ancho { flex: 1; min-width: 240px; }

.coche-celda { display: flex; flex-direction: column; gap: 2px; }
.coche-celda a { font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .coche-celda a:hover { text-decoration: underline; } }
.coche-celda .nota { font-size: .8125rem; }

/* Miniatura de la foto principal en el listado */
.miniatura { width: 72px; height: 48px; border-radius: var(--radio-pequeno); object-fit: cover; background: var(--fondo); }


/* Fila de algo desactivado: se ve, pero apagada */
.fila-apagada td { color: var(--tinta-3); }
.fila-apagada strong { font-weight: 500; }


/* 5a. LISTADO DE COCHES ---------------------------------------------------- */

/* Filtros en una fila: buscador, estado y los dos selectores segmentados */
.filtros--coches { align-items: center; }
.buscador { position: relative; flex: 1; min-width: 220px; }
.buscador::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 14px;
  width: 12px;
  height: 12px;
  margin-top: -8px;
  border: 2px solid var(--tinta-3);
  border-radius: 50%;
  pointer-events: none;
}
.buscador::after { content: ""; position: absolute; top: 50%; left: 26px; width: 6px; height: 2px; margin-top: 4px; background: var(--tinta-3); transform: rotate(45deg); pointer-events: none; }
.buscador input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px 0 40px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  font: inherit;
  font-size: .875rem;
}
.buscador input:focus { outline: none; border-color: var(--tinta-3); box-shadow: 0 0 0 3px rgb(23 25 28 / .06); }
.campo--compacto select { min-height: 40px; border-radius: var(--radio-boton); font-size: .875rem; }

/* Debajo de los filtros: cuántos salen y quitar filtros */
.lista-pie { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; color: var(--tinta-3); font-size: .8125rem; }
.enlace { padding: 0; border: 0; background: none; color: var(--tinta-2); font: inherit; text-decoration: underline; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .enlace:hover { color: var(--rojo-boton); } }

/* Cabeceras que ordenan, con flecha en la que manda */
.ordenar { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ordenar:hover { color: var(--tinta); } }
.ordenar::after { content: "↕"; margin-left: 4px; opacity: .35; }
[aria-sort="ascending"] > .ordenar::after { content: "↑"; opacity: 1; }
[aria-sort="descending"] > .ordenar::after { content: "↓"; opacity: 1; }
[aria-sort] > .ordenar { color: var(--tinta); }

/* Una fila por coche; toda la fila abre la ficha */
.fila-coche { cursor: pointer; transition: background-color var(--hover); }
@media (hover: hover) and (pointer: fine) { .fila-coche:hover { background: var(--fondo-hover); } }
.fila-coche .miniatura { display: block; width: 84px; height: 56px; }
.fila-coche__titulo { color: var(--tinta); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .fila-coche:hover .fila-coche__titulo { text-decoration: underline; } }
.fila-coche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.fila-coche__meta .nota { font-size: .8125rem; }
.fila-coche--entregado { opacity: .6; }
.tabla--coches .c-donde { font-size: .8125rem; }

/* En el móvil, cada coche es una tarjeta: foto a la izquierda, datos a la derecha */
@media (max-width: 760px) {
  .tabla--coches thead { display: none; }
  .tabla--coches tbody tr {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) auto;
    grid-template-areas: "foto coche coche" "foto estado precio" "foto estado dias";
    gap: 6px 12px;
    padding: 12px;
    border-bottom: 1px solid var(--linea);
  }
  .tabla--coches td { padding: 0; border: 0; }
  .tabla--coches .c-foto { grid-area: foto; }
  .tabla--coches .c-coche { grid-area: coche; }
  .tabla--coches .c-estado { grid-area: estado; align-self: center; }
  .tabla--coches .c-precio { grid-area: precio; font-weight: 600; }
  .tabla--coches .c-dias { grid-area: dias; font-size: .8125rem; }
  .tabla--coches .c-dias::after { content: " días"; color: var(--tinta-3); }
  .tabla--coches .c-km,
  .tabla--coches .c-donde { display: none; }
  .segmentos { flex-wrap: wrap; }
}


/* 5b. CONTACTOS DE LA WEB ------------------------------------------------- */

/* Resumen en la cabecera negra: cuántos esperan y cuántos llevan más de un día */
.contactos-resumen { margin: 0; color: rgb(255 255 255 / .7); font-size: 1rem; }
.contactos-resumen strong { margin-right: 4px; color: var(--blanco); font-size: 1.5rem; font-weight: 800; }

/* Filtros en una fila: estado a la izquierda (selector segmentado), tipo a la derecha */
.filtros--contactos { justify-content: space-between; align-items: center; }
.segmentos { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 0; border-radius: var(--radio-boton); background: var(--linea); }
.segmentos label { position: relative; cursor: pointer; }
.segmentos input { position: absolute; opacity: 0; pointer-events: none; }
.segmentos span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; border-radius: var(--radio-boton); color: var(--tinta-2); font-size: .8125rem; font-weight: 600; transition: background .15s, color .15s, box-shadow .15s; }
@media (hover: hover) and (pointer: fine) { .segmentos label:hover span { color: var(--tinta); } }
.segmentos input:checked + span { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(23, 25, 28, .12); }
.segmentos input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 2px; }
.tipos-contacto span { gap: 7px; min-height: 32px; }

/* Un color por tipo de petición: el punto del filtro, la etiqueta y las iniciales */
.punto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.punto--informacion, .tipo--informacion { color: var(--llegada); }
.punto--prueba, .tipo--prueba { color: var(--venta); }
.punto--financiacion, .tipo--financiacion { color: var(--reservado); }
.punto--tasacion, .tipo--tasacion { color: var(--aviso); }
.tipo--informacion { background: var(--llegada-fondo); }
.tipo--prueba { background: var(--venta-fondo); }
.tipo--financiacion { background: var(--reservado-fondo); }
.tipo--tasacion { background: var(--aviso-fondo); }

/* Lista de tarjetas */
.contactos { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contacto {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 220px auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color .15s, box-shadow .15s;
}
@media (hover: hover) and (pointer: fine) { .contacto:hover { border-color: var(--linea-fuerte); box-shadow: 0 2px 10px rgba(23, 25, 28, .05); } }
/* El que se abre desde un aviso del tablero (contactos.html?id=) */
.contacto--destacado { border-color: var(--negro); box-shadow: 0 0 0 1px var(--negro); }
/* Más de un día sin atender: una barra roja a la izquierda */
.contacto--urgente::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: -1px; width: 3px; border-radius: 0 3px 3px 0; background: var(--peligro); }

.contacto__inicial {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.contacto__inicial--informacion { background: var(--llegada-fondo); color: var(--llegada); }
.contacto__inicial--prueba { background: var(--venta-fondo); color: var(--venta); }
.contacto__inicial--financiacion { background: var(--reservado-fondo); color: var(--reservado); }
.contacto__inicial--tasacion { background: var(--aviso-fondo); color: var(--aviso); }

.contacto__cuerpo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contacto__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.contacto__linea strong { font-size: .9375rem; }
.contacto__linea .dias,
.contacto__linea .nota { font-size: .8125rem; }
.contacto__mensaje { margin: 0; color: var(--tinta-2); font-size: .875rem; line-height: 1.45; }
.contacto__mensaje--vacio { color: var(--tinta-3); font-style: italic; }
.contacto__tasacion { display: grid; gap: 6px; margin: 2px 0; font-size: .8125rem; }
.contacto__tasacion p { margin: 0; }
.contacto__fotos { display: flex; flex-wrap: wrap; gap: 6px; }
.contacto__fotos img { display: block; width: 72px; height: 54px; border-radius: 6px; object-fit: cover; background: var(--fondo); }
.contacto__datos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .8125rem; }
.contacto__datos a { color: var(--tinta-3); text-decoration: none; }
@media (max-width: 760px) { .contacto__datos a[href^="tel:"] { padding: 8px 0; } } /* el teléfono, pulsable con el dedo */
@media (hover: hover) and (pointer: fine) { .contacto__datos a:hover { color: var(--tinta); text-decoration: underline; } }

/* El coche por el que pregunta: foto, modelo y matrícula */
.contacto__coche { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px; border-radius: var(--radio-pequeno); color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { a.contacto__coche:hover { background: var(--fondo); } }
.contacto__coche img { flex: none; width: 64px; height: 48px; object-fit: cover; border-radius: 6px; background: #2a2b2f; }
.contacto__coche > span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.contacto__coche b { overflow: hidden; max-width: 100%; font-size: .8125rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.contacto__coche--sin { color: var(--tinta-3); font-size: .8125rem; }

.contacto__acciones { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 150px; }
.contacto__acciones .nota { font-size: .75rem; text-align: center; }

/* Ya atendido: más apagado, sin dejar de leerse */
.contacto--atendido { background: transparent; }
.contacto--atendido .contacto__inicial { filter: grayscale(1); opacity: .6; }
.contacto--atendido .contacto__linea strong,
.contacto--atendido .contacto__mensaje { color: var(--tinta-3); }

@media (max-width: 1150px) {
  .contacto { grid-template-columns: 44px minmax(0, 1fr); }
  .contacto__coche,
  .contacto__acciones { grid-column: 2; }
  .contacto__acciones { flex-direction: row; flex-wrap: wrap; min-width: 0; }
}



/* 5c. USUARIOS ------------------------------------------------------------- */

/* Usa las tarjetas de contactos (.contacto) sin la columna del coche. Color por rol:
   gerencia en negro, como el menú; comercial en azul. */
.segmentos__n { margin-left: 6px; color: var(--tinta-3); font-size: .75rem; font-weight: 600; }
.segmentos input:checked + span .segmentos__n { color: var(--rojo-boton); }

.usuario { grid-template-columns: 44px minmax(220px, 1fr) minmax(0, auto); }
.usuario__inicial--gerencia { background: var(--negro); color: var(--blanco); }
.usuario__inicial--comercial { background: var(--reservado-fondo); color: var(--reservado); }
.rol--gerencia { background: var(--fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.rol--comercial { background: var(--reservado-fondo); color: var(--reservado); }
.usuario__tu { padding: 1px 8px; border-radius: var(--radio-boton); background: var(--rojo-suave); color: var(--rojo-oscuro); font-size: .75rem; font-weight: 700; }
.usuario .contacto__datos span { color: var(--tinta-3); }

.usuario__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 320px; }

/* Cambiar la contraseña sin salir de la tarjeta */
.usuario__clave {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--linea);
}
.usuario__clave .campo { flex: 1 1 260px; max-width: 360px; }
.usuario__clave .error--lista { flex-basis: 100%; margin: 0; }
.usuario__hecho { grid-column: 2 / -1; margin: 0; color: var(--venta); font-size: .8125rem; font-weight: 500; }

/* Desactivado: más apagado, sin dejar de leerse */
.usuario--apagado { background: transparent; }
.usuario--apagado .contacto__inicial { filter: grayscale(1); opacity: .5; }
.usuario--apagado .contacto__linea strong { color: var(--tinta-3); }

/* Rol al añadir: dos tarjetas con lo que ve cada uno */
.roles { margin: 0; padding: 0; border: 0; }
.roles legend { margin-bottom: 6px; padding: 0; }
.rol-opcion {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pequeno);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.rol-opcion + .rol-opcion { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .rol-opcion:hover { border-color: var(--linea-fuerte); } }
.rol-opcion:has(input:checked) { border-color: var(--tinta); background: var(--fondo); }
.rol-opcion input { flex: none; width: auto; margin: 3px 0 0; accent-color: var(--rojo-boton); }
.rol-opcion span { display: flex; flex-direction: column; gap: 2px; color: var(--tinta-2); font-size: .8125rem; line-height: 1.4; }
.rol-opcion b { color: var(--tinta); font-size: .875rem; }

@media (max-width: 1150px) {
  .usuario { grid-template-columns: 44px minmax(0, 1fr); }
  .usuario__acciones { grid-column: 2; justify-content: flex-start; }
}

/* 6. FICHA DEL COCHE ------------------------------------------------------- */

/* Cabecera: foto, nombre, matrícula, estado y acciones */
.ficha-cabecera {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 20px var(--espacio-l);
  align-items: center;
  margin: -32px -40px var(--espacio-l);
  padding: 28px 40px 36px;
  background:
    radial-gradient(90% 140% at 85% 120%, rgb(255 255 255 / .09), transparent 60%),
    linear-gradient(180deg, var(--negro), var(--negro-2));
  color: var(--blanco);
}
.ficha-cabecera .volver { grid-column: 1 / -1; }
.ficha-cabecera h1 { color: var(--blanco); }
.ficha-cabecera .nota,
.ficha-cabecera .enlace-pequeno { color: rgb(255 255 255 / .65); }
@media (hover: hover) and (pointer: fine) { .ficha-cabecera .enlace-pequeno:hover { color: var(--blanco); } }
.ficha-cabecera .rotulo { color: #a7adb3; }
.ficha-cabecera .boton--oscuro { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { .ficha-cabecera .boton--oscuro:hover { background: var(--rojo-boton); border-color: var(--rojo-boton); color: var(--blanco); } }

.ficha-cabecera__foto { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: 8px; background: var(--fondo); }

.ficha-cabecera__info { display: flex; flex-direction: column; gap: 10px; }
.ficha-cabecera__info h1 { font-size: 2rem; letter-spacing: -.02em; }
.ficha-cabecera__linea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ficha-cabecera__info .nota { margin: 0; }

.ficha-cabecera__precio { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }

.cambiar-estado { display: flex; flex-direction: column; gap: var(--espacio-s); min-width: 220px; }
.cambiar-estado__fila { display: flex; gap: var(--espacio-s); }
.enlace-pequeno { color: var(--tinta-3); font-size: .8125rem; text-align: center; }
@media (hover: hover) and (pointer: fine) { .enlace-pequeno:hover { color: var(--tinta); } }
.cambiar-estado select {
  flex: 1;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pequeno);
  background: var(--blanco);
  color: var(--tinta);
}

/* Recorrido: los 10 estados como una barra por tramos.
   Clase "hecho" en los que ya ha pasado y "actual" en el que está. */
.recorrido {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  margin: 0 0 var(--espacio-l);
  padding: 0;
  list-style: none;
}

.recorrido li {
  padding-top: 12px;
  border-top: 4px solid var(--linea);
  font-size: .75rem;
  line-height: 1.3;
  color: var(--tinta-3);
}

.recorrido .hecho { border-top-color: var(--tinta-2); color: var(--tinta-2); }
.recorrido .actual { border-top-color: var(--rojo-boton); color: var(--tinta); font-weight: 700; }

/* Dos columnas: datos a la izquierda, gestión a la derecha */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--espacio-l);
  align-items: start;
}

.ficha__principal,
.ficha__lateral { display: flex; flex-direction: column; gap: var(--espacio-m); }

/* Saltos rápidos a cada bloque de la ficha, como pestañas */
.saltos {
  display: flex;
  gap: 4px;
  margin-bottom: var(--espacio-m);
  border-bottom: 1px solid var(--linea);
  overflow-x: auto;
}
.saltos a {
  padding: 10px 14px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--tinta-3);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .saltos a:hover { color: var(--tinta); border-bottom-color: var(--linea-fuerte); } }

/* Lista de datos: nombre arriba, valor debajo, en rejilla */
.datos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 18px var(--espacio-l);
  margin: 0;
}
.datos dt { font-size: .8125rem; color: var(--tinta-3); }
.datos dd { margin: 2px 0 0; font-weight: 600; }

/* Extras marcados */
.extras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.extras li {
  padding: 4px 10px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pequeno);
  font-size: .8125rem;
}

/* Fotos en su orden fijo. Las que faltan salen con borde discontinuo. */
.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foto { display: flex; flex-direction: column; gap: 4px; font-size: .75rem; }

.foto img {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radio-pequeno);
  background: var(--fondo);
}

.foto__hueco {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-pequeno);
  color: var(--tinta-3);
  font-weight: 600;
}

.foto__nombre { display: flex; justify-content: space-between; gap: 4px; color: var(--tinta-2); }
.foto__marca { color: var(--peligro); font-weight: 700; }

/* Bloque de dinero: solo lo ve gerencia. En negro, como su web. */
.dinero { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.dinero .caja__titulo .rotulo { color: #8b9097; }

.cuentas { margin: 0; }
.cuentas + .cuentas { margin-top: var(--espacio-m); padding-top: var(--espacio-m); border-top: 1px solid var(--negro-3); }
.cuentas div { display: flex; justify-content: space-between; padding: 5px 0; font-size: .875rem; }
.cuentas dt { color: #a7adb3; }
.cuentas dd { margin: 0; font-variant-numeric: tabular-nums; }
.cuentas .total dt,
.cuentas .total dd { color: var(--blanco); font-weight: 700; }

.margen {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: var(--espacio-m);
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--negro-2);
}
.margen span { color: #a7adb3; font-size: .875rem; }
.margen strong { font-size: 1.75rem; line-height: 1; letter-spacing: -.02em; color: #5fd08e; }
.margen { flex-wrap: wrap; }
.margen__detalle { flex-basis: 100%; margin-top: 8px; color: #a7adb3; font-size: .75rem; }

/* Reserva activa: los datos en filas */
.reserva-activa { margin: 0 0 var(--espacio-m); }
.reserva-activa div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--linea); font-size: .875rem; }
.reserva-activa dt { color: var(--tinta-3); }
.reserva-activa dd { margin: 0; font-weight: 600; text-align: right; }

/* Canales donde está publicado */
.canales { margin: 0; padding: 0; list-style: none; }
.canales li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--linea);
  font-size: .875rem;
}
.canales li:last-child { border-bottom: 0; padding-bottom: 0; }

/* Historial de cambios de estado */
.historial { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.historial__hecho { margin-top: 6px; }
.historial--tarde time { color: var(--peligro); }
.historial li { position: relative; padding: 0 0 14px 18px; }
.historial li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--linea-fuerte);
}
.historial li:first-child::before { background: var(--rojo); }
.historial time { display: block; color: var(--tinta-3); font-size: .8125rem; }

.pila { display: flex; flex-direction: column; gap: 14px; }
.pila .nota { margin: 0; }


/* Subida de fotos --------------------------------------------------------- */

/* Progreso hacia las 15 fotos obligatorias */
.progreso {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: var(--espacio-m);
  padding: 16px 20px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.progreso__texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.progreso__texto strong { font-size: 1.125rem; }
.progreso__barra { height: 8px; border-radius: var(--radio-boton); background: var(--linea); overflow: hidden; }
.progreso__barra span { display: block; height: 100%; background: var(--rojo); border-radius: inherit; }

/* Zona para soltar o elegir las fotos */
.subida {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: var(--espacio-l);
  padding: 32px 20px;
  border: 2px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--blanco);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.subida:focus-within { border-color: var(--tinta); background: #fafbfb; }
@media (hover: hover) and (pointer: fine) { .subida:hover { border-color: var(--tinta); background: var(--fondo-hover); } }
.subida__titulo { font-weight: 700; }
/* Con fotos arrastradas encima */
.subida--encima { border-color: var(--rojo-boton); background: var(--rojo-suave); }
/* Con 25 fotos ya no se enseña (el display: flex de arriba taparía el hidden) */
.subida[hidden] { display: none; }
/* Mientras se guarda un cambio de fotos, la lista no acepta más clics */
.ocupado .fotos-orden,
.ocupado .subida { opacity: .6; pointer-events: none; }

/* Lista de fotos en su orden fijo */
.fotos-orden {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
}

.foto-fila {
  display: grid;
  grid-template-columns: 96px 1fr auto auto auto auto;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid var(--linea);
}
.foto-fila:first-child { border-top: 0; }

.foto-fila img,
.foto-fila__hueco { width: 96px; aspect-ratio: 4 / 3; border-radius: var(--radio-pequeno); object-fit: cover; }

.foto-fila__hueco {
  display: grid;
  place-items: center;
  border: 1px dashed var(--peligro);
  background: var(--peligro-fondo);
  color: var(--peligro);
  font-size: .8125rem;
  font-weight: 700;
}

.foto-fila__info { display: flex; flex-direction: column; min-width: 0; font-size: .875rem; }
.foto-fila__info .nota { font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.foto-fila--falta { background: #fffafa; }
.foto-fila--falta .foto-fila__info { grid-column: 2 / -1; }
.foto-fila--dano { background: #fcfcfd; }

/* Flechas para cambiar el orden */
.foto-fila__mover { display: flex; gap: 4px; }
.foto-fila__mover button,
.foto-fila__quitar {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pequeno);
  background: var(--blanco);
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .foto-fila__mover button:hover, .foto-fila__quitar:hover { border-color: var(--tinta-3); } }
.foto-fila__mover button:disabled { opacity: .35; cursor: default; }
.foto-fila__quitar { color: var(--peligro); font-size: .8125rem; font-weight: 600; }


/* Anuncio en portales ------------------------------------------------------ */

.portales {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--espacio-l);
  align-items: start;
}

.portal .nota { margin: 0 0 6px; }
.portal--retirar { border-color: #e0a23a; }

/* Un dato para copiar: el campo y su botón «Copiar» al lado */
.copiar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}
.copiar textarea { min-height: 220px; line-height: 1.55; }
.copiar input[readonly],
.copiar textarea[readonly] { background: #fafbfb; }

.portal__fotos {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio-pequeno);
}
.portal__miniaturas { display: flex; align-items: center; gap: 6px; }
.portal__miniaturas img { width: 56px; aspect-ratio: 4 / 3; border-radius: 4px; object-fit: cover; }

/* Pasos numerados: aquí el orden sí importa */
.pasos { margin: 0; padding-left: 20px; color: var(--tinta-2); font-size: .875rem; }
.pasos li { padding: 2px 0; }

/* anuncio.html conectado: los tres portales uno debajo de otro y, al lado, la web */
.portales__lista { min-width: 0; }
.portal__mas > summary { cursor: pointer; color: var(--tinta-2); font-size: .875rem; padding: 4px 0; }
.portal__mas[open] > summary { margin-bottom: 12px; }
.portal__avisos { margin: 0 0 8px; padding-left: 20px; font-size: .8125rem; color: var(--tinta-2); }
.portal__web .error { margin: 0 0 8px; }
.portal input[type="url"] { min-width: 0; }
/* En la ficha, el estado de cada portal con su botón al lado */
#publicacion .canales li { gap: 12px; }
#publicacion .canales li > span { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
@media (max-width: 600px) {
  /* En el móvil el enlace del anuncio y su botón, uno debajo de otro y a todo el ancho (se pulsa con el pulgar) */
  .portal form.copiar { grid-template-columns: minmax(0, 1fr); }
  .portal form.copiar .boton, .portal__fotos .boton { width: 100%; }
  .copiar textarea { min-height: 180px; }
}


/* Informes ----------------------------------------------------------------- */

.cifras {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: var(--espacio-l);
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.cifras__dato { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-left: 1px solid var(--linea); }
.cifras__dato:first-child { border-left: 0; }
.cifras__dato strong { font-size: 1.75rem; letter-spacing: -.02em; line-height: 1.2; }
.cifras__dato .nota { font-size: .8125rem; }

.coche-celda .matricula { align-self: flex-start; margin-top: 2px; }
.tabla-pie { margin: 12px 0 0; }

/* Tramos de antigüedad con barra proporcional */
.tramos { margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.tramos li { display: grid; grid-template-columns: 1fr 90px 28px; gap: 12px; align-items: center; padding: 8px 0; }
.tramos strong { text-align: right; }
.tramos__barra { height: 8px; border-radius: var(--radio-boton); background: var(--fondo); overflow: hidden; }
.tramos__barra span { display: block; height: 100%; background: var(--tinta-2); }
.tramos--aviso .tramos__barra span { background: #e0a23a; }
.tramos--peligro .tramos__barra span { background: var(--peligro); }


/* 7. FORMULARIO DE ALTA ----------------------------------------------------
   Portada corta, índice fijo a la izquierda y bloques numerados del 01 al 08.
   Todo funciona sin JavaScript: las opciones son radios y las etiquetas, casillas. */

/* Portada corta: la del tablero sin la fila de estados encima */
.portada--corta { padding-bottom: 40px; margin-bottom: var(--espacio-l); gap: 14px; }
.portada__titular--medio { font-size: 2.25rem; font-weight: 700; }
.portada__texto { max-width: 62ch; margin: 0; color: rgb(255 255 255 / .7); }
.portada__leyenda { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; color: rgb(255 255 255 / .6); font-size: .8125rem; }
.portada__leyenda li { display: flex; align-items: center; gap: 8px; }
.portada__leyenda em { color: #f26b6b; font-style: normal; font-weight: 700; } /* sobre negro: el rojo de marca no llega a 4,5:1 */

/* El punto que marca lo que hace falta para publicar */
.marca-publicar,
.campo--publicar > .campo__nombre::after {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aviso);
  vertical-align: 1px;
}
.campo--publicar > .campo__nombre::after { content: ""; margin-left: 6px; }

/* Índice + formulario */
.alta { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: var(--espacio-l); align-items: start; }

.indice-alta { position: sticky; top: var(--espacio-l); }
.indice-alta ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--linea); }
.indice-alta a {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: -1px;
  padding: 9px 12px;
  border-left: 2px solid transparent;
  color: var(--tinta-2);
  font-size: .875rem;
  text-decoration: none;
  transition: color var(--hover), border-color var(--hover);
}
@media (hover: hover) and (pointer: fine) { .indice-alta a:hover { border-left-color: var(--tinta); color: var(--tinta); } }
.indice-alta__n { color: var(--gris-marca); font-size: .6875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
/* Cuántos datos para publicar faltan en el bloque */
.indice-alta small {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radio-boton);
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: .6875rem;
  font-weight: 700;
  text-align: center;
}
/* Bloque completo: check verde al final */
.indice-alta__hecho::after {
  content: "";
  width: 12px;
  height: 7px;
  margin: 0 4px 3px auto;
  border: solid var(--ok);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

.formulario { display: flex; flex-direction: column; gap: var(--espacio-m); padding-bottom: 120px; min-width: 0; }

.bloque {
  display: grid;
  gap: 20px;
  min-width: 0;
  margin: 0;
  padding: 28px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  scroll-margin-top: var(--espacio-l);
}

/* Cabecera del bloque: número, título y una línea de ayuda */
.bloque__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
.bloque__n { color: var(--rojo-boton); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bloque--dinero .bloque__n { color: #f26b6b; } /* el bloque de dinero va en negro */
.bloque__cabeza h2 { margin: 0; font-size: 1.25rem; }
.bloque__cabeza .nota { flex-basis: 100%; margin: 0; padding-left: 32px; }

/* Rejilla de campos: tantos por fila como quepan */
.rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.rejilla .campo--ancho { grid-column: 1 / -1; }
.rejilla .campo--doble { grid-column: span 2; }

/* Matrícula con aspecto de placa: franja azul con la E (dibujada como imagen) */
.campo--matricula input {
  padding-left: 40px;
  background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Crect width='28' height='40' fill='%231f3fa6'/%3E%3Ctext x='14' y='32' fill='white' font-family='Arial,sans-serif' font-size='12' font-weight='700' text-anchor='middle'%3EE%3C/text%3E%3C/svg%3E") left center / 28px 100% no-repeat;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Unidad dentro del campo: km, CV, €… */
.con-unidad { position: relative; display: block; }
.con-unidad input { padding-right: 52px; }
.con-unidad::after {
  content: attr(data-unidad);
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  color: var(--tinta-3);
  font-size: .8125rem;
  pointer-events: none;
}

/* Precio de venta en grande */
.campo--precio input { font-size: 1.25rem; font-weight: 700; }

/* Opciones de un toque (radios con aspecto de botón) */
.opciones { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.opciones legend { float: left; width: 100%; margin-bottom: 6px; padding: 0; }
.opciones label { position: relative; cursor: pointer; }
.opciones input { position: absolute; opacity: 0; pointer-events: none; }
.opciones span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-boton);
  background: var(--blanco);
  color: var(--tinta-2);
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, border-color .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) { .opciones label:hover span { border-color: var(--tinta-3); color: var(--tinta); } }
.opciones input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.opciones input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 2px; }

/* Etiqueta DGT: un punto con el color de la pegatina */
.dgt::before { content: ""; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--linea-fuerte); }
.dgt--cero::before { background: #1f6fd1; }
.dgt--eco::before { background: linear-gradient(90deg, #1f6fd1 50%, #2fa24a 50%); }
.dgt--c::before { background: #2fa24a; }
.dgt--b::before { background: #e8b400; }

/* Equipamiento: etiquetas que se marcan con un toque */
.extras-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.grupo-extras {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "titulo n" "chips chips";
  align-items: baseline;
  align-content: start;
  gap: 10px;
  counter-reset: marcados;
}
.grupo-extras h3 { grid-area: titulo; margin: 0; color: var(--tinta-3); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip input:checked { counter-increment: marcados; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-boton);
  font-size: .8125rem;
  transition: background .15s, border-color .15s, color .15s;
}
.chip span::before { content: "+"; color: var(--tinta-3); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .chip:hover span { border-color: var(--tinta-3); } }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--blanco); }
.chip input:checked + span::before { content: "✓"; color: var(--blanco); }
.chip input:focus-visible + span { outline: 2px solid var(--rojo); outline-offset: 2px; }
/* Va después de las casillas para poder contar las marcadas; la rejilla lo sube arriba */
.grupo-extras__n { grid-area: n; color: var(--tinta-3); font-size: .75rem; }
.grupo-extras__n::before { content: counter(marcados) " marcados"; }

/* Bloque de dinero en negro */
.bloque--dinero { background: var(--negro); border-color: var(--negro); color: var(--blanco); }
.bloque--dinero .bloque__cabeza { border-bottom-color: var(--negro-3); }
.bloque--dinero .nota,
.bloque--dinero .campo__ayuda { color: #8b9097; }
.bloque--dinero .campo__nombre { color: #d0d4d8; }
.bloque--dinero .campo input,
.bloque--dinero .campo select { border-color: transparent; }
.bloque--dinero .opciones span { background: var(--negro-2); border-color: var(--negro-3); color: #d0d4d8; }
.bloque--dinero .opciones input:checked + span { background: var(--blanco); border-color: var(--blanco); color: var(--tinta); }

/* Nuestro: precio de compra. En depósito: datos del dueño */
.formulario:has(input[name="propiedad"][value="deposito"]:checked) .solo-propio,
.formulario:has(input[name="propiedad"][value="propio"]:checked) .solo-deposito { display: none; }

/* Coste total y margen bruto al pie del bloque de dinero */
.resumen-dinero {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--espacio-m) 48px;
  padding: 18px 20px;
  border-radius: 8px;
  background: var(--negro-2);
}
.resumen-dinero__dato { display: flex; flex-direction: column; gap: 4px; }
.resumen-dinero__dato span { color: #a7adb3; font-size: .8125rem; }
.resumen-dinero__dato output { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.resumen-dinero__dato--margen output { color: #5fd08e; }
.resumen-dinero__dato--negativo output { color: var(--rojo-boton); }
.resumen-dinero .nota { flex-basis: 100%; margin: 0; }

/* Barra con el botón de guardar, siempre visible abajo */
.barra-guardar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 248px;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 12px 40px;
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid var(--linea);
  backdrop-filter: blur(6px);
}
.barra-guardar__progreso { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.barra-guardar__linea { display: flex; align-items: center; gap: 10px; margin: 0; font-size: .875rem; }
.barra-guardar__linea strong { color: var(--rojo-boton); }
.barra-guardar__linea--suave { color: var(--tinta-3); font-size: .8125rem; }
/* La barrita: cuántos de los 24 datos para publicar están rellenos */
.barra-guardar__barra { position: relative; width: 120px; height: 6px; border-radius: var(--radio-boton); background: var(--linea); overflow: hidden; }
.barra-guardar__barra::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--aviso); transition: width .4s cubic-bezier(.2, .8, .2, 1); }


/* 8. LOGIN Y ERRORES ------------------------------------------------------- */

/* Dos mitades: la marca en negro a la izquierda y el formulario en claro a la derecha */
.login {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fondo);
}

.login__marca {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espacio-l);
  padding: 48px 56px;
  background:
    radial-gradient(90% 70% at 90% 110%, rgb(255 255 255 / .08), transparent 60%),
    linear-gradient(180deg, var(--negro), var(--negro-2));
  color: var(--blanco);
}
/* La barra inclinada roja del logo, en grande y casi transparente, de fondo */
.login__marca::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -10%;
  width: 46%;
  height: 130%;
  background: linear-gradient(0deg, rgb(255 255 255 / .05), transparent 85%);
  transform: skewX(-20deg);
  pointer-events: none;
}
.login__marca .logo { height: 60px; align-self: flex-start; }
.login__lema { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 18px; max-width: 36rem; }
.login__titular { max-width: 30rem; margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.login__direccion { margin: 0; color: rgb(255 255 255 / .45); font-size: .8125rem; }

/* El recorrido: puntos con el color de cada fase, unidos por una línea */
.login__recorrido { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 6px 0 0; padding: 0; list-style: none; }
.login__recorrido li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgb(255 255 255 / .75);
  font-size: .8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.login__recorrido li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-fase); box-shadow: 0 0 0 3px rgb(255 255 255 / .06); }
.login__recorrido li + li::after { order: -1; content: ""; width: 14px; height: 1px; margin-right: 2px; margin-left: 8px; background: rgb(255 255 255 / .2); }
/* Si no cabe en una línea, sin rayas: una al principio de la segunda línea quedaría suelta */
@media (max-width: 1240px) {
  .login__recorrido { gap: 10px 16px; }
  .login__recorrido li + li::after { display: none; }
}
.login__fase--llegada { --color-fase: #9aa0a6; }
.login__fase--preparacion { --color-fase: var(--preparacion); }
.login__fase--venta { --color-fase: var(--venta); }
.login__fase--reservado { --color-fase: var(--reservado); }
.login__fase--vendido { --color-fase: var(--blanco); }

.login__lado { display: grid; place-items: center; padding: 48px var(--espacio-m); }
.login__caja { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--espacio-m); }

.login__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 32px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 10px 30px rgba(23, 25, 28, .06);
}
.login__form h1 { margin: 0 0 4px; font-size: 1.625rem; letter-spacing: -.01em; }
.login__form .nota { margin: 0; }
.login__form .boton { width: 100%; min-height: 46px; margin-top: 4px; }
.login__form .boton[aria-busy="true"] { opacity: .75; cursor: progress; }
.login__form .error { margin: 0; }
/* Al fallar, el formulario hace un «no» corto con la cabeza */
.login__form--fallo { animation: no-con-la-cabeza .35s ease; }
@keyframes no-con-la-cabeza { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .login__form--fallo { animation: none; } }

/* Contraseña con el botón de verla dentro del campo */
.login__clave { position: relative; }
.login__clave input { padding-right: 64px; }
.login__ver {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  padding: 6px 10px;
  border: 0;
  border-radius: var(--radio-pequeno);
  background: transparent;
  color: var(--tinta-2);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .login__ver:hover { background: var(--fondo); color: var(--tinta); } }
.login__ver:focus-visible { outline: 2px solid var(--rojo); outline-offset: 1px; }
.login__mayus { color: var(--aviso); font-size: .8125rem; font-weight: 500; }

.login__pie { margin: 0; color: var(--tinta-3); font-size: .8125rem; text-align: center; }

/* Móvil: la marca pasa a ser una banda corta arriba, solo con el logo y el titular */
@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .login__marca { gap: 16px; padding: 24px 20px 28px; }
  .login__marca .logo { height: 40px; }
  .login__titular { font-size: 1.25rem; }
  .login__recorrido,
  .login__direccion,
  .login__lema .portada__antetitulo { display: none; }
  .login__lado { place-items: start center; padding: 24px 16px 40px; }
  .login__form { padding: 24px 20px; }
}

/* Nota de desarrollo con los usuarios de prueba (solo en npm run dev:pruebas) */
.nota-pruebas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border: 1px dashed var(--aviso);
  border-radius: var(--radio-pequeno);
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: .8125rem;
}
.nota-pruebas ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nota-pruebas li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nota-pruebas code { font-size: .8125rem; }
.nota-pruebas small { opacity: .8; }

.error {
  padding: 10px 14px;
  border-radius: var(--radio-pequeno);
  background: var(--peligro-fondo);
  color: var(--rojo-oscuro);
  font-size: .875rem;
}

/* Error con varios motivos (por ejemplo, lo que falta para publicar) */
.error--lista { margin-bottom: var(--espacio-l); border-left: 3px solid var(--peligro); }
.error--lista ul { margin: 4px 0 0; padding-left: 20px; }


/* 9. MÓVIL Y TABLET ---------------------------------------------------------
   Todo lo de aquí abajo solo se aplica en pantallas estrechas. */

@media (max-width: 1150px) {
  .ficha,
  .portales { grid-template-columns: minmax(0, 1fr); } /* minmax: una tabla ancha no estira la página */
  /* Ficha del coche en una columna: arriba el dinero, la reserva y la publicación; después datos y fotos */
  .ficha:has(#dinero) .ficha__lateral { order: -1; }
  .ficha-cabecera { grid-template-columns: 160px 1fr; }
  .cambiar-estado { grid-column: 1 / -1; }
  .recorrido { grid-template-columns: repeat(5, 1fr); row-gap: 14px; }
  .alta { grid-template-columns: 1fr; }
  .indice-alta { display: none; }
  .estados { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .portada { grid-template-columns: 1fr; }
  .portada__mes { min-width: 0; width: 100%; max-width: 520px; }
  .estados__paso:nth-child(5) { border-right: 0; }
  .estados__paso:nth-child(-n+5) { border-bottom: 1px solid var(--linea); }
}

@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } /* el menú, a su altura aunque la página sea corta */

  .menu {
    z-index: 10;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--espacio-s);
    padding: 10px var(--espacio-m);
  }
  .menu__marca .logo { height: 32px; }

  /* El botón «Menú»: un <details> que se abre y se cierra sin JavaScript */
  .menu__movil { display: block; }
  .menu__movil summary {
    list-style: none;
    padding: 6px 14px;
    border: 1px solid var(--negro-3);
    border-radius: var(--radio-boton);
    font-size: .875rem;
    cursor: pointer;
  }
  .menu__movil summary::-webkit-details-marker { display: none; }

  .menu__buscar,
  .menu__enlaces,
  .menu__usuario { display: none; }

  /* Al abrir el menú, se enseñan el buscador y los enlaces a lo ancho */
  .menu:has(.menu__movil[open]) .menu__buscar,
  .menu:has(.menu__movil[open]) .menu__enlaces { display: flex; flex-basis: 100%; }
  .menu:has(.menu__movil[open]) .menu__buscar { display: block; }

  .contenido { padding: 20px var(--espacio-m) 40px; }

  .cabecera--portada,
  .ficha-cabecera { margin: -20px calc(var(--espacio-m) * -1) var(--espacio-m); padding: 28px var(--espacio-m); }
  .cabecera--portada h1 { font-size: 1.625rem; }

  .portada { margin: -20px calc(var(--espacio-m) * -1) 0; padding: 36px var(--espacio-m) 80px; gap: 16px; }
  .portada__titular { font-size: 2rem; }
  .portada__fecha { display: none; }
  .portada__cifras dd { font-size: 1.375rem; }
  /* En el móvil los estados se deslizan de lado */
  .estados { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; overflow-x: auto; margin-top: -44px; scroll-snap-type: x mandatory; }
  .estados__paso { scroll-snap-align: start; border-bottom: 0 !important; border-right: 1px solid var(--linea) !important; }

  h1 { font-size: 1.5rem; }

  /* El tablero pasa a una columna debajo de otra */
  .tablero { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; min-height: 0; cursor: auto; }
  .tablero-marco::before,
  .tablero-marco::after,
  .tablero-flechas,
  .tablero-cabecera__pista { display: none; }
  .columna { min-height: 0; }

  .ficha-cabecera { grid-template-columns: 1fr; }
  .ficha-cabecera__foto { max-width: 100%; }

  .recorrido { grid-template-columns: repeat(2, 1fr); }
  .cifras { grid-template-columns: 1fr 1fr; }
  .cifras__dato:nth-child(3) { border-left: 0; }
  .cifras__dato:nth-child(n+3) { border-top: 1px solid var(--linea); }

  .barra-guardar { left: 0; padding: 10px var(--espacio-m); }

  .foto-fila { grid-template-columns: 80px 1fr; gap: 8px 12px; }
  .foto-fila img,
  .foto-fila__hueco { width: 80px; grid-row: span 2; }
  .foto-fila .casilla,
  .foto-fila__mover,
  .foto-fila__quitar { grid-column: 2; justify-self: start; }
  .barra-guardar__linea--suave { display: none; }
  .barra-guardar { flex-wrap: wrap; }
  .barra-guardar__progreso { flex-basis: 100%; }
  .barra-guardar .boton { flex: 1; }
  .rejilla .campo--doble { grid-column: auto; }
  .bloque { padding: 20px var(--espacio-m); }
  .bloque__cabeza .nota { padding-left: 0; }
  .portada__titular--medio { font-size: 1.625rem; }
}


/* ==========================================================================
   T07 · MAQUETAS DEL PANEL DE GESTIÓN (Hafsa)
   Clientes, proveedores, gastos, facturas, incentivos, CRM y agenda.
   Antes de inventar, se reutiliza lo de arriba: .contacto, .tabla, .cifras,
   .columna, .ficha-mini, .canales, .historial, .rejilla y .opciones.
   ========================================================================== */


/* T07 · menú (todas las páginas) -------------------------------------------- */

/* Con 13 enlaces, en un portátil bajo el menú ya no cabe: se desplaza por dentro y los enlaces se juntan un poco */
.menu { overflow-y: auto; scrollbar-width: none; }
@media (min-width: 801px) and (max-height: 860px) {
  .menu { gap: var(--espacio-m); }
  .menu__enlaces a { padding-top: 6px; padding-bottom: 6px; }
}
.menu__enlaces a[href="clientes.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } /* Clientes */
.menu__enlaces a[href="crm.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 3H2l8 9.46V19l4 2v-8.54L22 3z'/%3E%3C/svg%3E"); } /* CRM: el embudo */
.menu__enlaces a[href="agenda.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); } /* Agenda */
.menu__enlaces a[href="proveedores.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9'/%3E%3Cpath d='M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); } /* Proveedores */
.menu__enlaces a[href="gastos.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z'/%3E%3Cpath d='M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8M12 17.5v-11'/%3E%3C/svg%3E"); } /* Gastos */
.menu__enlaces a[href="facturas.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M16 13H8M16 17H8M10 9H8'/%3E%3C/svg%3E"); } /* Facturas */
.menu__enlaces a[href="libros.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E"); } /* Libros */
.menu__enlaces a[href="incentivos.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3Cpath d='M15.48 12.89 17 22l-5-3-5 3 1.52-9.11'/%3E%3C/svg%3E"); } /* Incentivos */


/* T07 · comunes a las siete páginas ------------------------------------------ */

/* Cifras de arriba con 2, 3 o 6 datos (la de informes lleva 4) */
.cifras--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cifras--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cifras--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cifras--5 { grid-template-columns: 1fr 1fr; } }
.cifras--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cifras__dato--alerta strong { color: var(--peligro); }
/* Una cifra que filtra la lista: se nota que se puede pulsar */
.cifras__dato--enlace { color: inherit; text-decoration: none; transition: background .15s; }
@media (hover: hover) and (pointer: fine) { .cifras__dato--enlace:hover { background: var(--fondo-hover); } }
.cifras--6 .rotulo { display: flex; align-items: center; gap: 6px; }
/* Con seis datos y céntimos, la cifra más pequeña y en una línea: el « €» no se queda solo abajo */
.cifras--6 .cifras__dato strong { font-size: 1.375rem; white-space: nowrap; }

/* La cabecera negra seguida de otra versión de la misma página (incentivos): sin margen negativo */
.cabecera--seguida { margin: 0 0 var(--espacio-l); padding: 32px; border-radius: var(--radio); }

/* Un formulario en caja con su pie de botones (nuevo cliente, nuevo proveedor) */
.obligatorio { color: var(--rojo-boton); font-style: normal; }

/* Tabla que en el móvil pasa a tarjetas, como la de coches. Cada celda lleva su nombre en
   data-rotulo y sale como «nombre … valor»; la celda .t-titulo va arriba, sin nombre. */
@media (max-width: 760px) {
  .tabla--tarjetas thead { display: none; }
  .tabla--tarjetas tr { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--linea); }
  .tabla--tarjetas tbody tr:last-child { border-bottom: 0; }
  .tabla--tarjetas tfoot tr { border-top: 1px solid var(--linea); border-bottom: 0; background: #fafbfb; }
  .tabla--tarjetas td { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0; border: 0; text-align: right; }
  .tabla--tarjetas td::before { content: attr(data-rotulo); color: var(--tinta-3); font-size: .8125rem; font-weight: 400; text-align: left; white-space: nowrap; }
  .tabla--tarjetas td:empty { display: none; }
  .tabla--tarjetas td.t-titulo { justify-content: flex-start; text-align: left; }
  .tabla--tarjetas td.t-titulo::before { content: none; }
  .tabla-caja:has(> .tabla--tarjetas) { overflow-x: visible; }
}

@media (max-width: 1150px) {
  .cifras--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifras--6 .cifras__dato:nth-child(4) { border-left: 0; }
  .cifras--6 .cifras__dato:nth-child(n+4) { border-top: 1px solid var(--linea); }
}
@media (max-width: 800px) {
  .cifras--3,
  .cifras--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cifras--6 .cifras__dato { border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
  .cifras--6 .cifras__dato:nth-child(-n+2) { border-top: 0; }
  .cifras--6 .cifras__dato:nth-child(odd) { border-left: 0; }
  .cifras--6 .cifras__dato,
  .cifras--3 .cifras__dato { padding: 14px 16px; }
  .cifras--6 .cifras__dato strong,
  .cifras--3 .cifras__dato strong { font-size: 1.25rem; }
  .cifras--3 .cifras__dato:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cabecera--seguida { margin-left: calc(var(--espacio-m) * -1); margin-right: calc(var(--espacio-m) * -1); padding: 28px var(--espacio-m); border-radius: 0; }
}


/* T07 · clientes.html (proveedores.html usa lo mismo) ------------------------- */

/* Tarjetas de .contacto, sin la columna del coche: iniciales, datos y un resumen a la derecha */
.tercero { grid-template-columns: 44px minmax(0, 1fr) auto; }
.tercero__nombre { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tercero__nombre:hover strong { text-decoration: underline; } }
/* Toda la tarjeta se puede pulsar: el enlace del nombre la cubre entera */
.tercero__nombre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.tercero .contacto__datos a { position: relative; z-index: 1; }
.tercero--abierto { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
@media (hover: hover) and (pointer: fine) { .tercero--abierto:hover { border-color: var(--tinta); } }

.tercero__resumen { margin: 0; color: var(--tinta-3); font-size: .8125rem; text-align: right; }
.tercero__resumen b { display: block; color: var(--tinta); font-size: .9375rem; }

/* Un color por tipo: iniciales y etiqueta */
.tercero__inicial--particular { background: var(--llegada-fondo); color: var(--llegada); }
.tercero__inicial--empresa { background: var(--negro); color: var(--blanco); }
.tercero__inicial--profesional { background: var(--reservado-fondo); color: var(--reservado); }
.tercero__inicial--subasta { background: var(--preparacion-fondo); color: var(--preparacion); }
.tercero__inicial--comisionista { background: var(--venta-fondo); color: var(--venta); }
.tipo-tercero--particular { background: var(--llegada-fondo); color: var(--llegada); }
.tipo-tercero--empresa { background: var(--fondo); color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.tipo-tercero--profesional { background: var(--reservado-fondo); color: var(--reservado); }
.tipo-tercero--subasta { background: var(--preparacion-fondo); color: var(--preparacion); }
.tipo-tercero--comisionista { background: var(--venta-fondo); color: var(--venta); }
.tipo-tercero--apagado { background: var(--fondo); color: var(--tinta-3); }

/* Desactivado: se ve, pero apagado */
.tercero--apagado { background: transparent; }
.tercero--apagado .contacto__inicial { filter: grayscale(1); opacity: .5; }
.tercero--apagado .contacto__linea strong,
.tercero--apagado .tercero__resumen b { color: var(--tinta-3); }

/* Ficha a la derecha: se queda a la vista al bajar por la lista */
.ficha-tercero { position: sticky; top: var(--espacio-l); }
.ficha-tercero__cabeza { display: flex; align-items: center; gap: 14px; margin-bottom: var(--espacio-m); }
.ficha-tercero__cabeza h2 { font-size: 1.25rem; }
.ficha-tercero__linea { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ficha-tercero .reserva-activa a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ficha-tercero .reserva-activa a:hover { text-decoration: underline; } }
.ficha-tercero__notas { margin: 0 0 var(--espacio-m); padding: 10px 12px; border-radius: var(--radio-pequeno); background: var(--fondo); }
.ficha-tercero__acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.ficha-tercero .canales li { gap: 12px; }
.ficha-tercero .canales li > span:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; white-space: nowrap; }
.ficha-tercero .historial li:last-child { padding-bottom: 0; }
.ficha-tercero .caja__titulo .rotulo { white-space: nowrap; }

/* Formulario de alta, debajo de la lista */
.form-tercero { margin-top: var(--espacio-l); scroll-margin-top: var(--espacio-l); }
.form-tercero__pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 4px; }

@media (max-width: 1150px) {
  .ficha-tercero { position: static; }
}
@media (max-width: 600px) {
  .tercero { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
  .tercero__resumen { grid-column: 2; text-align: left; }
  .tercero__resumen b { display: inline; margin-right: 6px; }
  .form-tercero__pie .boton { flex: 1; }
}


/* T07 · proveedores.html --------------------------------------------------- */

/* Los coches que nos ha vendido van en el bloque negro de dinero (solo gerencia) */
.canales--oscuro li { border-bottom-color: var(--negro-3); }
.canales--oscuro .coche-celda a { color: var(--blanco); }
.ficha-tercero .dinero .margen strong { color: var(--blanco); }


/* T07 · gastos.html -------------------------------------------------------- */

/* Un color por categoría: el punto, la etiqueta y la cifra de arriba */
.categoria--vehiculo { background: var(--reservado-fondo); color: var(--reservado); }
.categoria--personal { background: var(--llegada-fondo); color: var(--llegada); }
.categoria--proveedor { background: var(--preparacion-fondo); color: var(--preparacion); }
.categoria--comision { background: var(--venta-fondo); color: var(--venta); }
.categoria--otros { background: var(--vendido-fondo); color: var(--vendido); }
.punto.categoria--vehiculo,
.punto.categoria--personal,
.punto.categoria--proveedor,
.punto.categoria--comision,
.punto.categoria--otros { flex: none; background: currentColor; }

/* Formulario corto: la categoría en una fila y los datos debajo, tantos por fila como quepan */
.gasto-form { margin-bottom: var(--espacio-l); }
.gasto-form__campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; align-items: end; }
.gasto-form__categoria { grid-column: 1 / -1; }
.gasto-form__categoria span { gap: 7px; }
.gasto-form__concepto { grid-column: span 2; }
.gasto-form__pie { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 20px; padding-top: 14px; border-top: 1px solid var(--linea); }
.gasto-form__pie .casilla { margin-right: auto; }
.gasto-form__total { margin: 0; }
.gasto-form__total b { color: var(--tinta); }
/* El coche solo se pide si la categoría es «Coche». Sin JavaScript, con :has */
.gasto-form__campos:not(:has(input[name="categoria"][value="vehiculo"]:checked)) .solo-vehiculo { display: none; }

/* Filtros en una barra, como Facturas: mes, tipo (con cuántos hay), concepto y pago */
.filtros--gastos { align-items: center; }
.filtros--gastos .filtros-gastos__mes { min-width: 160px; }
.filtros--gastos .segmentos .punto { margin-right: 6px; }
/* El número va dentro del segmento: sin el alto ni el relleno de .segmentos span (en todos los filtros) */
.segmentos .segmentos__n { display: inline; min-height: 0; padding: 0; }
.segmentos__n:empty { display: none; }
.filtros--gastos .segmentos > label > span { padding-inline: 12px; } /* mes, tipo, concepto y pago caben en una fila */
@media (max-width: 760px) {
  /* Los tipos en una fila que se desliza, como pestañas: envueltos en tres líneas no se leían */
  .filtros--gastos .segmentos { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
  .filtros--gastos .segmentos span { white-space: nowrap; }
  .filtros--gastos .campo { flex: 1 1 100%; min-width: 0; }
}
#apuntar { margin-bottom: var(--espacio-l); }
.tabla--gastos .coche-celda .nota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tabla--gastos tfoot td { padding: 12px 16px; border-top: 1px solid var(--linea); background: #fafbfb; font-weight: 600; }
/* Sin pagar: raya ámbar a la izquierda */
.fila-pendiente td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }

@media (max-width: 760px) {
  .gasto-form__concepto { grid-column: 1 / -1; }
  .gasto-form__pie .boton { flex-basis: 100%; }
  .fila-pendiente { box-shadow: inset 3px 0 0 var(--aviso); }
  .fila-pendiente td:first-child { box-shadow: none; }
  .tabla--gastos tfoot td { padding: 0; border: 0; background: none; }
}


/* T07 · facturas.html ------------------------------------------------------ */

/* Cuatro estados de cobro: el punto del filtro y la etiqueta */
.cobro--pendiente { background: var(--aviso-fondo); color: var(--aviso); }
.cobro--parcial { background: var(--reservado-fondo); color: var(--reservado); }
.cobro--cobrada { background: var(--ok-fondo); color: var(--ok); }
.cobro--vencida { background: var(--peligro-fondo); color: var(--peligro); }
.cobro--borrador { background: var(--fondo); color: var(--tinta-2); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.cobro--anulada, .cobro--rectificativa { background: var(--fondo); color: var(--tinta-3); }

/* Facturas conectadas (panel.js): apuntar un cobro en la fila, el alta y los ajustes */
.acciones-factura { white-space: nowrap; }
.acciones-factura .boton + .boton, .acciones-factura .boton + a { margin-left: 4px; }
.fila-cobro td { background: var(--fondo); }
.cobro-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 4px 0; }
.cobro-form .campo { min-width: 150px; }
.cobro-form__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.cabecera__acciones-factura { margin: 14px 0 0; }
.ajustes-factura { margin-top: var(--espacio-l); }
.facturar-coche { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.contratos-coche { margin: 10px 0 0; padding: 0; list-style: none; font-size: .8125rem; }
.contratos-coche li { margin-top: 4px; }
.contratos-coche a { color: #e6e8eb; }
.tabla--libro small { display: block; margin-top: 2px; font-size: .75rem; }
.ajustes-factura summary { cursor: pointer; padding: 4px 0; }
.ajustes-factura form { margin-top: var(--espacio-m); }
.ajustes-factura form + form { padding-top: var(--espacio-m); border-top: 1px solid var(--linea); }
.punto.cobro--pendiente,
.punto.cobro--parcial,
.punto.cobro--cobrada,
.punto.cobro--vencida { flex: none; background: currentColor; }
.segmentos span .punto { margin-right: 7px; }

/* Las dos cifras en la cabecera negra, a la derecha (como las del mes en el tablero) */
.cabecera--cifras { align-items: center; }
.cabecera--cifras > div:first-child { flex: 1 1 360px; }
.cabecera--cifras .portada__mes { min-width: 380px; }
/* El número no se parte por el guion; el cliente, como el coche, sin subrayar */
.tabla--facturas .t-titulo { white-space: nowrap; }
.tabla--facturas td > a { font-weight: 500; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .tabla--facturas td > a:hover { text-decoration: underline; } }

/* Cobrado: la cifra y una barrita con la parte cobrada */
.cobrado { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.cobrado__barra { width: 84px; height: 5px; border-radius: var(--radio-boton); background: var(--linea); overflow: hidden; }
.cobrado__barra span { display: block; height: 100%; background: var(--reservado); }
.cobrado__barra--entera span { background: var(--ok); }
.factura__vence { display: block; margin-top: 4px; font-size: .75rem; white-space: nowrap; }
.factura__vence.dias { display: inline-block; }
.tabla--facturas td:has(.factura__vence.dias) .estado { margin-right: 6px; }
/* Vencida: raya roja a la izquierda */
.fila-vencida td:first-child { box-shadow: inset 3px 0 0 var(--peligro); }
/* El texto oculto de una cabecera (.oculto es absolute) se queda dentro de su celda: si no, escapa del
   recorte de .tabla-caja y la página entera se desplaza de lado */
.tabla--tarjetas th:has(.oculto) { position: relative; }
/* Portátil pequeño y tablet: sin la columna de la fecha y con menos aire, para que quepa sin moverse de lado */
@media (min-width: 761px) and (max-width: 1250px) {
  .tabla--facturas th:nth-child(2),
  .tabla--facturas td:nth-child(2) { display: none; }
  .tabla--facturas th,
  .tabla--facturas td { padding-left: 10px; padding-right: 10px; }
  .tabla--facturas .factura__vence { white-space: normal; }
  .tabla--facturas .cobrado__barra { width: 60px; }
  .tabla--facturas .boton--pequeno { padding: 0 10px; }
}

@media (max-width: 1150px) {
  .cabecera--cifras .portada__mes { min-width: 0; width: 100%; max-width: 520px; }
}
@media (max-width: 760px) {
  .cobrado { flex-direction: row; align-items: center; gap: 10px; }
  .cobrado__barra { width: 60px; }
  .tabla--facturas td[data-rotulo="Estado"] { flex-wrap: wrap; }
  .tabla--facturas td[data-rotulo="Estado"]::before { margin-right: auto; }
  .factura__vence { display: inline; margin: 0 0 0 6px; }
  .tabla--facturas td:last-child { justify-content: stretch; margin-top: 4px; }
  .tabla--facturas td:last-child .boton { flex: 1; }
  .fila-vencida { box-shadow: inset 3px 0 0 var(--peligro); }
  .fila-vencida td:first-child { box-shadow: none; }
}


/* T07 · incentivos.html ---------------------------------------------------- */

.incentivos { display: flex; flex-direction: column; gap: var(--espacio-m); }

/* Cabeza de cada comercial: quién y su regla, coches, importe y la acción */
.incentivo { padding: 0; overflow: hidden; }
.incentivo__cabeza { display: grid; grid-template-columns: 44px minmax(0, 1fr) 90px 150px 190px; align-items: center; gap: 18px; padding: 18px 20px; }
.incentivo__quien h2 { font-size: 1rem; }
.incentivo__quien .nota { margin: 2px 0 0; font-size: .8125rem; }
.incentivo__dato { display: flex; flex-direction: column; margin: 0; }
.incentivo__dato b { font-size: 1.25rem; letter-spacing: -.01em; }
.incentivo__accion { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.incentivo__accion .nota { font-size: .75rem; }
.incentivo .tabla-caja { border: 0; border-top: 1px solid var(--linea); border-radius: 0; }
.incentivo--liquidado .incentivo__cabeza { background: #fafbfb; }
/* Sin regla: una raya ámbar a la izquierda (falta algo por hacer), no el borde entero */
.incentivo--sin-regla { box-shadow: inset 4px 0 0 #e0a23a; }
.incentivo__dato .nota { margin-top: 2px; font-size: .75rem; white-space: nowrap; }
/* Sus coches: abiertos mientras falta liquidar; ya liquidado, plegados (no hay nada que revisar) */
.incentivo__coches { border-top: 1px solid var(--linea); }
.incentivo__coches > summary { padding: 10px 20px; color: var(--tinta-2); font-size: .8125rem; font-weight: 600; cursor: pointer; list-style-position: inside; }
@media (hover: hover) and (pointer: fine) { .incentivo__coches > summary:hover { color: var(--tinta); background: var(--fondo-hover); } }
.incentivo__coches[open] > summary { border-bottom: 1px solid var(--linea); }
.incentivo__coches .tabla-caja { border-top: 0; }
.incentivo tfoot td { padding: 12px 16px; border-top: 1px solid var(--linea-fuerte); background: #fafbfb; font-weight: 600; }
@media (max-width: 760px) { .incentivo tfoot td { padding: 0; border: 0; background: none; } }
.incentivo__regla { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding: 14px 20px; border-top: 1px solid var(--linea); background: #fafbfb; }
.incentivo__regla .campo { margin: 0; min-width: 160px; }
.incentivo__regla .error--lista { flex-basis: 100%; }
.incentivo__nada { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--linea); }
/* Botón que aún no se puede usar (liquidar sin regla, confirmar una prueba ya confirmada) */
.incentivo .boton:disabled,
.prueba .boton:disabled { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .incentivo .boton:disabled:hover { background: var(--rojo-boton); border-color: var(--rojo-boton); } }
@media (hover: hover) and (pointer: fine) { .prueba .boton--oscuro:disabled:hover { background: var(--negro); border-color: var(--negro); } }

/* Separador entre la versión de gerencia y la del comercial (solo en la maqueta) */
.version-separador { display: flex; align-items: center; gap: 14px; margin: 48px 0 var(--espacio-l); color: var(--tinta-3); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.version-separador::before,
.version-separador::after { content: ""; flex: 1; border-top: 2px dashed var(--linea-fuerte); }
.version-incentivos > * + *:not(.cabecera--portada) { margin-top: var(--espacio-l); } /* la banda negra sube hasta arriba aunque el JS meta algo delante */
.version-incentivos .cifras { margin-bottom: 0; }

@media (max-width: 1150px) {
  .incentivo__cabeza { grid-template-columns: 44px minmax(0, 1fr) auto auto; }
  .incentivo__accion { grid-column: 2 / -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
}
@media (max-width: 600px) {
  .incentivo__cabeza { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px 14px; padding: 16px; }
  .incentivo__dato:first-of-type { display: none; }
  .incentivo__accion .boton { flex: 1; }
}


/* T07 · crm.html ----------------------------------------------------------- */

/* Hoy: una fila por actividad (hora, tipo, con quién y qué, botón) */
.hoy { margin-bottom: 28px; padding: 0; overflow: hidden; }
.hoy .caja__titulo { margin: 0; padding: 16px 20px 12px; }
.hoy .caja__titulo h2 { font-size: 1rem; }
.hoy__lista { margin: 0; padding: 0; list-style: none; }
.actividad { display: grid; grid-template-columns: 52px 88px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--linea); }
.actividad__hora { font-weight: 700; }
.actividad .estado { justify-self: start; }
.actividad__texto { margin: 0; color: var(--tinta-2); font-size: .875rem; }
.actividad__texto a { margin-right: 8px; color: var(--tinta); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .actividad__texto a:hover { text-decoration: underline; } }
.actividad__texto .dias { margin-left: 4px; font-size: .75rem; white-space: nowrap; }
.actividad__hecha { color: var(--ok); font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.actividad__botones { display: flex; gap: 6px; }
.actividad__resultado { display: inline-block; width: 100%; margin-top: 2px; color: var(--tinta-3); font-size: .8125rem; text-decoration: none; }
.actividad__resultado::before { content: '→ '; }
.actividad--vacia { grid-template-columns: 1fr; color: var(--tinta-3); }
/* Cabecera de cada día en «Próximos 7 días» */
.actividad-dia { padding: 10px 20px 6px; border-top: 1px solid var(--linea); background: var(--fondo); color: var(--tinta-2); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.actividad--llamada { background: var(--reservado-fondo); color: var(--reservado); }
.actividad--visita { background: var(--venta-fondo); color: var(--venta); }
.actividad--tarea { background: var(--llegada-fondo); color: var(--llegada); }
.actividad--whatsapp { background: var(--ok-fondo); color: var(--ok); }
.actividad--email { background: var(--vendido-fondo); color: var(--vendido); }
.actividad--prueba { background: var(--preparacion-fondo); color: var(--preparacion); }
.actividad--nota { background: var(--fondo); color: var(--tinta-3); }
/* Ya pasó la hora y no está hecha: en rojo. Hecha: tachada y apagada. */
.actividad--tarde { background: #fffafa; }
.actividad--tarde .actividad__hora { color: var(--peligro); }
.actividad--hecha .actividad__hora,
.actividad--hecha .actividad__texto,
.actividad--hecha .actividad__texto a { color: var(--tinta-3); }
.actividad--hecha .actividad__texto { text-decoration: line-through; }
.actividad--hecha .estado { filter: grayscale(1); opacity: .6; }

/* La página en una columna: la agenda (hoy y próximos 7 días, en pestañas) arriba y el embudo debajo.
   La agenda tiene siempre el mismo alto en las dos pestañas; si hay más, se baja con su propia barra. */
.crm-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.crm-rejilla > .hoy { margin-bottom: 0; }
.hoy .hoy__lista { height: 340px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.hoy .actividad-dia { position: sticky; top: 0; z-index: 1; } /* el día se queda arriba al bajar */
@media (max-width: 760px) {
  /* En el móvil, sin barra propia: una lista con scroll dentro de la página escondía tareas de hoy */
  .hoy .hoy__lista { height: auto; overflow: visible; }
}
/* Las pestañas «Hoy» y «Próximos 7 días» hacen de título de la caja; el número es lo pendiente */
.hoy .caja__titulo { flex-wrap: wrap; row-gap: 8px; }
/* (los span de dentro no son pestañas: sin el alto ni el relleno de .segmentos span) */
.hoy__pestanas { flex-wrap: nowrap; }
.hoy__buscador { flex: 1 1 100%; }
.hoy__pestanas > label > span { white-space: nowrap; }
.hoy__pestanas span span { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font-size: inherit; }
.hoy__pestanas .hoy__cuenta { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--rojo-boton); color: var(--blanco); font-size: .6875rem; font-weight: 700; line-height: 1; }
.hoy__pestanas .hoy__cuenta:empty { display: none; }
.hoy__pestanas input:not(:checked) + span .hoy__cuenta { background: var(--tinta-3); }
@media (max-width: 760px) {
  .hoy__pestanas > label > span { padding: 0 10px; }
}
/* Si la caja queda estrecha, cada actividad en dos líneas: hora, tipo y botones arriba; el texto debajo.
   En el móvil manda su propia regla (más abajo), por eso solo desde 761 px. */
.hoy { container-type: inline-size; }
@media (min-width: 761px) { @container (max-width: 620px) {
  .actividad { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: 'hora tipo . fin' 'texto texto texto texto'; row-gap: 6px; }
  .actividad__hora { grid-area: hora; }
  .actividad .estado { grid-area: tipo; }
  .actividad__texto { grid-area: texto; }
  .actividad > :last-child:not(.actividad__texto) { grid-area: fin; }
  .actividad--vacia { grid-template-areas: 'texto'; grid-template-columns: 1fr; }
} }
/* El embudo en su caja blanca, con el título y la pista en la misma cabecera */
.crm-embudo .caja__titulo { flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.crm-embudo .caja__titulo h2 { margin: 0; font-size: 1rem; }
.crm-embudo .tablero-cabecera__pista { margin: 0; }
.crm-embudo { padding: 18px; }
.crm-embudo .embudo-crm .columna--tramo { padding-inline: calc(var(--lado) + 6px); }
.crm-embudo .embudo-crm .ficha-mini { flex-basis: 190px; }
.crm-embudo .embudo-crm .ficha-mini .nota { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crm-embudo .embudo-crm .columna--fuera { width: 60%; }
@media (max-width: 760px) {
  .crm-embudo { padding: 14px; }
  .crm-embudo .embudo-crm .columna--tramo { padding-inline: 12px; }
  .crm-embudo .embudo-crm .ficha-mini { flex-basis: 100%; }
  .crm-embudo .embudo-crm .columna--fuera { width: 100%; }
}

/* Cifras del embudo en la banda negra: una fila de cajas de cristal, la primera más ancha y con la
   barra de fases (cada trozo del color de su tramo del embudo) */
.crm-cifras { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: 12px; flex-basis: 100%; margin: 14px 0 0; }
.crm-cifra { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--radio); background: rgb(255 255 255 / .04); }
.crm-cifra dt { order: -1; color: rgb(255 255 255 / .6); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.crm-cifra dd { margin: 0; }
.crm-cifra .cifra { color: var(--blanco); font-size: 2.25rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.crm-cifra--grande .cifra { font-size: 3rem; }
.crm-cifra__nota { color: rgb(255 255 255 / .45); font-size: .75rem; }
.crm-cifra--alerta { border-color: rgb(240 138 138 / .35); background: rgb(240 138 138 / .07); }
.crm-cifra--alerta .cifra { color: #f08a8a; }
.crm-barra { display: flex; gap: 3px; height: 6px; margin-top: 12px !important; }
.crm-barra span { min-width: 6px; border-radius: 3px; background: var(--tono); }
.crm-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px !important; color: rgb(255 255 255 / .55); font-size: .75rem; }
.crm-leyenda span::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--tono); }
.crm-leyenda strong { margin-left: 4px; color: var(--blanco); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Sin los colores del embudo: grises de la banda, más claros cuanto más cerca de cerrar, y el rojo de
   la marca para «Negociando» */
.crm-fase--nuevo { --tono: rgb(255 255 255 / .22); }
.crm-fase--interesado { --tono: rgb(255 255 255 / .42); }
.crm-fase--pienso { --tono: rgb(255 255 255 / .7); }
.crm-fase--negociando { --tono: var(--rojo); }
@media (max-width: 1100px) {
  .crm-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-cifra--grande { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .crm-cifra { padding: 12px 14px; }
  .crm-cifra .cifra { font-size: 1.75rem; }
  .crm-cifra--grande .cifra { font-size: 2.25rem; }
}

/* Selector «Lo mío / De todos» sobre la banda negra */
.segmentos--oscuro { background: var(--negro-3); }
.segmentos--oscuro span { color: #b9bec4; }
@media (hover: hover) and (pointer: fine) { .segmentos--oscuro label:hover span { color: var(--blanco); } }
.segmentos--oscuro label input:checked + span { color: var(--tinta); } /* la elegida, oscura también con el ratón encima */

/* Embudo: las columnas del tablero, sin arrastrar el fondo. Las seis en fila desde unos 1.300 px de
   ancho; por debajo, dos filas de tres (sin columnas escondidas por un lado); en el móvil, una debajo de otra. */
.tablero--crm { grid-auto-columns: minmax(160px, 1fr); gap: 10px; min-height: 0; cursor: auto; }
@media (min-width: 801px) and (max-width: 1300px) {
  .tablero--crm { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
}
.tablero--crm .ficha-mini .nota { font-size: .8125rem; line-height: 1.35; }
.columna--nuevo { --color-fase: var(--llegada); }
.columna--interesado { --color-fase: var(--reservado); }
.columna--pienso { --color-fase: #e0a23a; }
.columna--negociando { --color-fase: var(--negro); }
.columna--ganado { --color-fase: var(--venta); }
.columna--perdido { --color-fase: var(--peligro); }
.ficha-mini--perdido { opacity: .7; }

/* El embudo (crm.html): cada estado es un tramo en trapecio, más estrecho que el anterior, con sus
   clientes dentro. El ancho y el recorte los pone panel.js; --lado es lo que entra cada borde. */
.embudo-crm { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.embudo-crm .columna { min-height: 0; border-radius: 0; }
.embudo-crm .columna--tramo {
  flex-direction: row; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 8px;
  padding: 12px calc(var(--lado) + 12px) 16px;
  background: color-mix(in srgb, var(--color-fase) 13%, #f6f7f8); border-top: 0;
}
.embudo-crm .columna__titulo { flex-basis: 100%; justify-content: center; gap: 8px; margin: 0 0 2px; }
.embudo-crm .ficha-mini { flex: 0 1 220px; min-width: 0; }
.embudo-crm .columna--tramo .ficha-mini { border-top: 3px solid var(--color-fase); }
.embudo-crm .columna--fuera { width: 42%; margin-top: 14px; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; border-radius: var(--radio); }
.embudo-crm .columna--encima { box-shadow: none; filter: brightness(.94); }
.embudo-crm .columna:empty::after, .embudo-crm .columna--tramo:not(:has(.ficha-mini))::after {
  content: 'Arrastra aquí'; color: var(--tinta-3); font-size: .75rem;
}
@media (max-width: 760px) {
  /* En el móvil, sin trapecio: los tramos de abajo se quedaban sin sitio para las tarjetas */
  .embudo-crm .columna--tramo { width: 100% !important; clip-path: none !important; padding-inline: 12px; border-radius: var(--radio); }
  .embudo-crm .ficha-mini { flex-basis: 100%; }
  .embudo-crm .columna--fuera { width: 100%; }
}

.embudo-crm .ficha-mini__tarde { color: var(--peligro); font-weight: 600; }
.embudo-crm .ficha-mini__nada { color: var(--tinta-3); }

/* La etiqueta de embudo en la ficha del cliente (clientes.html), con los colores de su columna en crm.html */
/* En la ficha es un desplegable con aspecto de etiqueta: se cambia el estado sin ir al CRM */
.estado-crm { position: relative; display: inline-flex; border-radius: 4px; }
.estado-crm select { appearance: none; margin: 0; padding: 2px 24px 2px 10px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1.6; cursor: pointer; }
.estado-crm::after { content: ''; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -4px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.estado-crm select:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.estado-crm option { color: var(--tinta); background: var(--blanco); }
.crm--nuevo { background: var(--llegada-fondo); color: var(--llegada); }
.crm--interesado { background: var(--reservado-fondo); color: var(--reservado); }
.crm--me_lo_pienso { background: #fbf0dc; color: #8a5a0f; }
.crm--negociando { background: var(--negro); color: var(--blanco); }
.crm--ganado { background: var(--venta-fondo); color: var(--venta); }
.crm--perdido { background: var(--peligro-fondo, #fdecec); color: var(--peligro); }

@media (max-width: 760px) {
  .actividad { grid-template-columns: 52px minmax(0, 1fr); gap: 6px 12px; padding: 12px 16px; }
  .actividad .estado { grid-column: 2; grid-row: 1; }
  .actividad__texto { grid-column: 2; }
  .actividad .boton,
  .actividad__botones,
  .actividad__hecha { grid-column: 2; justify-self: start; }
  .actividad-dia { padding-inline: 16px; }
}


/* T07 · agenda.html -------------------------------------------------------- */

/* Leyenda de los estados */
.leyenda-pruebas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 0 0 var(--espacio-m); padding: 0; list-style: none; font-size: .8125rem; font-weight: 500; }
.leyenda-pruebas li { display: flex; align-items: center; gap: 7px; }
.leyenda-pruebas .nota { margin-left: auto; font-size: .8125rem; font-weight: 400; }

/* Cuatro estados: el punto de la leyenda, la etiqueta y el borde de la prueba */
.estado-prueba--pedida { background: var(--aviso-fondo); color: var(--aviso); }
.estado-prueba--confirmada { background: var(--reservado-fondo); color: var(--reservado); }
.estado-prueba--hecha { background: var(--ok-fondo); color: var(--ok); }
.estado-prueba--no-vino { background: var(--peligro-fondo); color: var(--peligro); }
.punto.estado-prueba--pedida,
.punto.estado-prueba--confirmada,
.punto.estado-prueba--hecha,
.punto.estado-prueba--no-vino { flex: none; background: currentColor; }

/* La semana: seis columnas, de lunes a sábado */
.semana { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.dia { display: flex; flex-direction: column; gap: 8px; min-height: 220px; padding: 10px; border-top: 3px solid var(--linea-fuerte); border-radius: 4px 4px var(--radio) var(--radio); background: #ebedef; }
.dia__titulo { display: flex; align-items: baseline; gap: 6px; padding: 2px 4px 4px; font-size: .8125rem; font-weight: 600; letter-spacing: 0; }
.dia__titulo .cifra { color: var(--tinta-3); }
.dia__hoy { margin-left: auto; padding: 0 8px; border-radius: var(--radio-boton); background: var(--rojo-boton); color: var(--blanco); font-size: .6875rem; font-weight: 700; }
.dia--hoy { border-top-color: var(--rojo-boton); background: #e4e7ea; }
.dia--pasado { opacity: .75; }

/* Una prueba: hora y estado, coche, cliente y botones */
.prueba { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--linea); border-left: 3px solid var(--color-prueba, var(--linea-fuerte)); border-radius: 8px; background: var(--blanco); font-size: .8125rem; }
.prueba p { margin: 0; }
.prueba--pedida { --color-prueba: #e0a23a; }
.prueba--confirmada { --color-prueba: var(--reservado); }
.prueba--hecha { --color-prueba: var(--ok); }
.prueba--no-vino { --color-prueba: var(--peligro); }
.prueba--no-vino .prueba__coche b,
.prueba--no-vino .prueba__cliente { color: var(--tinta-3); }
.prueba__linea { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px; }
.prueba__hora { font-size: .9375rem; font-weight: 700; }
.prueba__linea .estado { padding: 1px 8px; font-size: .75rem; }
.prueba__coche { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.prueba__coche .matricula { font-size: .75rem; }
.prueba__cliente { color: var(--tinta-2); }
.prueba__cliente a { color: var(--tinta-3); text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .prueba__cliente a:hover { color: var(--tinta); text-decoration: underline; } }
.prueba__acciones { display: flex; flex-direction: column; gap: 6px; padding-top: 6px; border-top: 1px solid var(--linea); }

@media (max-width: 1150px) {
  .semana { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prueba__acciones { flex-direction: row; flex-wrap: wrap; }
  .prueba__acciones .boton { flex: 1; }
}
@media (max-width: 800px) {
  .semana { grid-template-columns: minmax(0, 1fr); }
  .dia { min-height: 0; }
  .leyenda-pruebas .nota { flex-basis: 100%; margin-left: 0; }
}


/* ==========================================================================
   T08 · FOTOS CON EL FONDO DEL PHOTOCALL Y VÍDEO (Hafsa)
   Estados de cada foto en fotos.html y el hueco del vídeo. Las piezas nuevas
   de la fila no se ven hasta que la fila lleva un estado: sin estado, la
   fila es la de siempre.
   ========================================================================== */


/* T08 · fotos.html: estados de cada foto ------------------------------------ */

.foto-fila__girando,
.foto-fila__estado,
.foto-fila__photocall,
.foto-fila__reintentar { display: none; }

/* Con estado, la fila gana una columna para el interruptor (y «Reintentar») */
.foto-fila--procesando,
.foto-fila--lista,
.foto-fila--fallo { grid-template-columns: 96px minmax(0, 1fr) auto auto auto auto auto; }
.foto-fila--procesando .foto-fila__photocall,
.foto-fila--lista .foto-fila__photocall,
.foto-fila--fallo .foto-fila__photocall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foto-fila--procesando .foto-fila__estado--procesando,
.foto-fila--lista .foto-fila__estado--lista,
.foto-fila--fallo .foto-fila__estado--fallo { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: .75rem; font-weight: 600; }

/* La miniatura y la rueda comparten la misma celda */
.foto-fila--procesando > img,
.foto-fila--procesando .foto-fila__girando { grid-column: 1; grid-row: 1; }

/* Procesando: miniatura apagada, rueda que gira encima y texto en gris */
.foto-fila--procesando > img { opacity: .45; filter: grayscale(.5); }
.foto-fila--procesando .foto-fila__girando {
  display: block;
  place-self: center;
  width: 26px;
  height: 26px;
  border: 3px solid rgb(23 25 28 / .15);
  border-top-color: var(--tinta);
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.foto-fila__estado--procesando { color: var(--tinta-3); }

/* Lista: la foto con el fondo, normal; solo una marca verde */
.foto-fila__estado--lista { color: var(--ok); }
.foto-fila__estado--lista::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* Falló: la original, un aviso rojo pequeño y «Reintentar» */
.foto-fila--fallo { background: #fffafa; box-shadow: inset 3px 0 0 var(--peligro); }
.foto-fila__estado--fallo { color: var(--peligro); }
.foto-fila__estado--fallo::before { content: "!"; display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--peligro); color: var(--blanco); font-size: .625rem; font-weight: 800; }
.foto-fila--fallo .foto-fila__reintentar { display: inline-flex; }

/* Interruptor «Usar la original»: una casilla con forma de interruptor */
.interruptor { display: inline-flex; align-items: center; gap: 8px; color: var(--tinta-2); font-size: .8125rem; font-weight: 500; white-space: nowrap; cursor: pointer; }
.interruptor input {
  position: relative;
  flex: none;
  width: 34px;
  height: 20px;
  margin: 0;
  border-radius: var(--radio-boton);
  background: var(--linea-fuerte);
  appearance: none;
  cursor: pointer;
  transition: background .15s;
}
.interruptor input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--blanco); box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s; }
.interruptor input:checked { background: var(--tinta); }
.interruptor input:checked::before { transform: translateX(14px); }
.interruptor input:focus-visible { outline: 2px solid var(--rojo); outline-offset: 2px; }
.interruptor:has(input:disabled) { cursor: default; opacity: .6; }
.interruptor input:disabled { cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .foto-fila--procesando .foto-fila__girando { animation: none; border-top-color: rgb(23 25 28 / .15); border-style: dotted; }
}

@media (max-width: 800px) {
  .foto-fila--procesando,
  .foto-fila--lista,
  .foto-fila--fallo { grid-template-columns: 80px minmax(0, 1fr); }
  .foto-fila--procesando > img,
  .foto-fila--procesando .foto-fila__girando { grid-row: 1 / span 2; }
  .foto-fila__photocall { grid-column: 2; justify-self: start; }
}

/* La maqueta de los tres estados, debajo del vídeo */
.maqueta-photocall { margin-top: var(--espacio-l); }
.maqueta-photocall__cabeza { margin-bottom: 12px; }
/* En la maqueta, lo de siempre (casillas, flechas, «Quitar») va desactivado y se nota */
.maqueta-photocall .foto-fila__quitar:disabled { opacity: .35; cursor: default; }

/* Photocall en marcha: revisar antes de aceptar, y ver la original al lado */
.foto-fila--revisar,
.foto-fila--original { grid-template-columns: 96px minmax(0, 1fr) auto auto auto auto auto; }
.foto-fila--revisar .foto-fila__photocall,
.foto-fila--original .foto-fila__photocall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.foto-fila--revisar { box-shadow: inset 3px 0 0 var(--aviso); }
.foto-fila--revisar .foto-fila__estado--revisar { display: flex; margin-top: 4px; color: var(--tinta-2); font-size: .8125rem; }
.foto-fila__aceptar { display: none; }
.foto-fila--revisar .foto-fila__aceptar { display: inline-flex; }
.foto-fila__comparar { display: none; gap: 10px; margin-top: 4px; font-size: .8125rem; }
.foto-fila--revisar .foto-fila__comparar,
.foto-fila--lista .foto-fila__comparar,
.foto-fila--original .foto-fila__comparar { display: flex; }
/* Del exterior pero sin pasar por la cola (traída de la web): solo «Ponerle el fondo» */
.foto-fila--sin-photocall { grid-template-columns: 96px minmax(0, 1fr) auto auto auto auto auto; }
.foto-fila--sin-photocall .foto-fila__photocall { display: flex; align-items: center; }
.foto-fila--sin-photocall .interruptor { display: none; }
.foto-fila__pasar { display: none; }
.foto-fila--sin-photocall .foto-fila__pasar { display: inline-flex; }
/* En el móvil, como las demás filas con photocall (va aquí: estas reglas son posteriores a las de arriba) */
@media (max-width: 800px) {
  .foto-fila--revisar,
  .foto-fila--original,
  .foto-fila--sin-photocall { grid-template-columns: 80px minmax(0, 1fr); }
}
.photocall-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 12px; border-radius: 6px; background: var(--aviso-fondo); font-size: .875rem; }
.maqueta-photocall__cabeza h2,
.video-coche__cabeza h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.maqueta-photocall__cabeza .nota { margin: 4px 0 0; }
.maqueta-etiqueta { padding: 1px 8px; border-radius: var(--radio-boton); background: var(--aviso-fondo); color: var(--aviso); font-size: .6875rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }


/* T08 · fotos.html: el vídeo del coche --------------------------------------- */

.video-coche { margin-top: var(--espacio-l); padding: 20px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); }
.video-coche__cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; margin-bottom: 16px; }
.video-coche__cabeza .nota { margin: 4px 0 0; }

/* Vertical por defecto (9:16); con «Horizontal», 16:9 a lo ancho */
.video-coche__marco {
  display: grid;
  place-items: center;
  width: min(100%, 220px);
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border: 2px dashed var(--linea-fuerte);
  border-radius: var(--radio);
  background: var(--fondo);
  transition: width .25s cubic-bezier(.2, .8, .2, 1);
}
.video-coche:has(input[name="formato-video"][value="horizontal"]:checked) .video-coche__marco { width: min(100%, 640px); aspect-ratio: 16 / 9; }
.video-coche__vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 16px; color: var(--tinta-3); font-size: .8125rem; text-align: center; }
.video-coche__vacio b { color: var(--tinta-2); font-size: .9375rem; }
.video-coche__formato::before { content: "Vertical · 9:16"; }
.video-coche:has(input[name="formato-video"][value="horizontal"]:checked) .video-coche__formato::before { content: "Horizontal · 16:9"; }

@media (max-width: 800px) {
  .video-coche { padding: 16px; }
}


/* T07b · menú: icono de Avisos (una campana) ----------------------------- */
.menu__enlaces a[href="avisos.html"] .menu__icono { --icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); } /* Avisos */


/* T07b · gastos.html: tipos de Pymecar ------------------------------------ */

/* Un color por tipo: el punto, la etiqueta y la cifra de arriba */
.gasto--general { background: var(--llegada-fondo); color: var(--llegada); }
.gasto--irpf { background: var(--preparacion-fondo); color: var(--preparacion); }
.gasto--comision { background: var(--venta-fondo); color: var(--venta); }
.gasto--rebu { background: var(--vendido-fondo); color: var(--vendido); }
.gasto--vehiculo { background: var(--reservado-fondo); color: var(--reservado); }
.punto.gasto--general,
.punto.gasto--irpf,
.punto.gasto--comision,
.punto.gasto--rebu,
.punto.gasto--vehiculo { flex: none; background: currentColor; }

.gasto-form .caja__titulo .nota b { color: var(--tinta); }
.gasto-form__quien,
.gasto-form__tercero { grid-column: span 2; }

/* Lo que depende del tipo, sin JavaScript (con :has):
   el coche, con «Gasto vehículo» y «Factura con REBU»; la retención, solo con «Gasto con IRPF» */
.gasto-form__campos--tipo:not(:has(input[name="tipo"][value="vehiculo"]:checked, input[name="tipo"][value="rebu"]:checked)) .solo-coche { display: none; }
.gasto-form__campos--tipo:not(:has(input[name="tipo"][value="irpf"]:checked)) .solo-irpf { display: none; }
.solo-irpf .campo__nombre { color: var(--preparacion); }
/* «Sin pagar» y «Pagado» son botones: la primera pulsación pregunta, la segunda cambia el pago */
.gasto-pago { border: 0; font: inherit; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .gasto-pago:hover { filter: brightness(.95); } }
.gasto-pago--pregunta { background: var(--negro); color: var(--blanco); }
@media (max-width: 760px) { .gasto-pago { min-height: 40px; padding-inline: 14px; } }
/* El recién apuntado, marcado un momento */
.fila-nueva td { animation: fila-nueva 2.4s ease-out; }
@keyframes fila-nueva { from { background: var(--aviso-fondo); } }
/* A quién: el desplegable de proveedores o el de clientes */
.gasto-form__campos:has(input[name="quien"][value="cliente"]:checked) .gasto-form__proveedor,
.gasto-form__campos:not(:has(input[name="quien"][value="cliente"]:checked)) .gasto-form__cliente { display: none; }

/* Filtro por concepto, junto a los segmentos */
.filtros--gastos .filtros-gastos__concepto { min-width: 0; }

/* En la lista: el nº de registro en gris, y el tipo con el concepto debajo, como en el libro */
.gasto-registro { color: var(--tinta-3); }
.gasto-tipo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.gasto-concepto { color: var(--tinta-3); font-size: .8125rem; }

@media (max-width: 760px) {
  .gasto-form__quien,
  .gasto-form__tercero { grid-column: 1 / -1; }
  .gasto-tipo { align-items: flex-end; }
}


/* T07b · avisos.html ------------------------------------------------------ */

.filtros--avisos { margin-bottom: var(--espacio-l); }

.avisos-grupo { margin-bottom: var(--espacio-l); }
.avisos-grupo__titulo { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; font-size: 1rem; }
.avisos-grupo__n { color: var(--tinta-3); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.avisos { margin: 0; padding: 0; list-style: none; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }

/* Un aviso: el texto y, debajo, el tipo y la fecha; a la derecha, el botón */
.aviso { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 20px; padding: 14px 20px; border-top: 1px solid var(--linea); }
.aviso:first-child { border-top: 0; }
@media (hover: hover) and (pointer: fine) { .aviso:hover { background: var(--fondo-hover); } }
.aviso__texto { margin: 0; color: var(--tinta); font-weight: 600; overflow-wrap: anywhere; }
.aviso__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; color: var(--tinta-3); font-size: .8125rem; }
.aviso__tipo { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta-2); font-weight: 500; }
.aviso__accion { white-space: nowrap; }

/* Gravedad: solo una raya a la izquierda. Alta en rojo, media en ámbar. El resto de la fila, neutro. */
.aviso::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--aviso); }
.aviso--alta::before { background: var(--peligro); }

/* El punto de cada tipo, con los colores de los estados (sin rojo: ese es de la gravedad) */
.aviso-tipo--tarea { color: var(--reservado); }
.aviso-tipo--contacto { color: var(--aviso); } /* el verde es «bien» en el resto del panel */
.aviso-tipo--parado { color: var(--preparacion); }
.aviso-tipo--vendido { color: var(--vendido); }
.aviso-tipo--itv { color: var(--llegada); }
.aviso-tipo--cobro { color: var(--peligro); }

/* Sin avisos: el .vacio de siempre, con el botón al tablero */
.avisos-vacio .boton { margin-top: 4px; }

@media (max-width: 600px) {
  .aviso { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 14px 18px; }
  .aviso__accion { justify-self: start; }
}


/* Informes · gráficas (graficaMeses y graficaDispersion en panel.js). Énfasis: el mes elegido en rojo de marca, el
   resto en gris (#878f98, 3:1 sobre blanco). La línea de referencia (gastos) en tinta, a trazos. Texto siempre en
   tinta, nunca del color del dato. Cada gráfica lleva encima su frase de resumen (.grafica__titular). */
.graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: var(--espacio-l); }
.grafica--ancha { grid-column: 1 / -1; }
@media (max-width: 1000px) { .graficas { grid-template-columns: minmax(0, 1fr); } }
.grafica .caja__titulo h2 { font-size: 1rem; }
.grafica__titular { margin: -4px 0 12px; color: var(--tinta-2); font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.grafica__titular b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafica__titular .en-rojo { color: var(--peligro); }
.grafica__leyenda { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; color: var(--tinta-2); font-size: .8125rem; }
.grafica__leyenda span { display: inline-flex; align-items: center; gap: 7px; }
.grafica__muestra { flex: none; width: 12px; height: 12px; border-radius: 3px; background: #878f98; }
.grafica__muestra--linea { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--tinta); background: none; }
.grafica__muestra--punto { width: 10px; height: 10px; border-radius: 50%; }
.grafica__muestra--elegida { background: var(--rojo-boton); }
.grafica__lienzo { position: relative; }
.grafica__svg { display: block; overflow: visible; }
.grafica__rejilla { stroke: var(--linea); stroke-width: 1; }
.grafica__rejilla--cero { stroke: var(--linea-fuerte); }
.grafica__eje, .grafica__mes { fill: var(--tinta-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafica__mes--elegido { fill: var(--tinta); font-weight: 700; }
.grafica__valor { fill: var(--tinta); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Columnas: gris; la del mes elegido, roja; la que tiene el ratón, un punto más oscura */
.grafica__columna { fill: #878f98; transition: fill var(--hover); }
.grafica__barra--elegida .grafica__columna { fill: var(--rojo-boton); }
.grafica__barra--encima:not(.grafica__barra--elegida) .grafica__columna { fill: #5f666d; }
/* Líneas: 2 px; la de referencia (gastos), a trazos y en escalón (un valor por mes) */
.grafica__linea { fill: none; stroke: var(--tinta-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafica__linea--referencia { stroke: var(--tinta); stroke-dasharray: 5 4; }
.grafica__marca { fill: var(--tinta-2); stroke: var(--blanco); stroke-width: 2; }
.grafica__marca--elegida { fill: var(--rojo-boton); }
.grafica__marca--encima:not(.grafica__marca--elegida) { fill: var(--tinta); }
/* Dispersión: puntos de 10 px con un anillo blanco de 2 px para que se distingan los que se tocan */
.grafica__circulo { fill: #878f98; stroke: var(--blanco); stroke-width: 2; transition: fill var(--hover); }
.grafica__dato--elegido .grafica__circulo { fill: var(--rojo-boton); }
.grafica__dato { cursor: pointer; }
.grafica__dato.grafica__punto--activo .grafica__circulo { fill: var(--tinta); }
.grafica__dato--elegido.grafica__punto--activo .grafica__circulo { fill: var(--rojo-oscuro); }
.grafica__guia { stroke-width: 1; stroke-dasharray: 2 3; }
.grafica__guia--aviso { stroke: var(--aviso); }
.grafica__guia--peligro { stroke: var(--peligro); }
.grafica__guia-texto { fill: var(--tinta-3); font-size: 11px; }
/* La zona del mes (o del punto) que tiene el ratón o el foco */
.grafica__diana { fill: transparent; }
.grafica__punto { cursor: default; outline: none; fill: transparent; }
rect.grafica__punto.grafica__punto--activo { fill: rgb(23 25 28 / .04); }
.grafica__punto:focus-visible { outline: none; }
rect.grafica__punto:focus-visible, .grafica__dato:focus-visible .grafica__diana { stroke: var(--azul-matricula); stroke-width: 2; }
.grafica__tip { position: absolute; top: 0; z-index: 3; display: grid; gap: 2px; min-width: 150px; padding: 8px 10px; border: 1px solid var(--linea); border-radius: 6px; background: var(--blanco); box-shadow: 0 6px 18px rgb(23 25 28 / .12); font-size: .75rem; color: var(--tinta-2); pointer-events: none; }
.grafica__tip strong { margin-bottom: 2px; color: var(--tinta); font-weight: 600; }
.grafica__tip b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.grafica__tip em { margin-top: 2px; color: var(--tinta-3); font-style: normal; }
.grafica__tabla { margin-top: 8px; font-size: .8125rem; }
.grafica__tabla summary { cursor: pointer; color: var(--tinta-3); }
.grafica__tabla .tabla { margin-top: 8px; }
.ficha__principal .grafica { margin-bottom: var(--espacio-l); }

/* Informes · dinero en el stock por antigüedad: el nombre del tramo con sus coches, el dinero y la barra debajo */
.stock-dinero__total { display: grid; gap: 2px; margin: 0 0 14px; }
.stock-dinero__total .cifra { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; }
.tramos--dinero li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre dinero" "barra barra"; gap: 6px 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.tramos--dinero .tramos__nombre { grid-area: nombre; display: grid; }
.tramos--dinero .tramos__nombre small { color: var(--tinta-3); font-size: .75rem; }
.tramos--dinero strong { grid-area: dinero; align-self: start; }
.tramos--dinero .tramos__barra { grid-area: barra; height: 6px; }
.tramos--dinero .tramos__barra span { border-radius: inherit; }
.stock-dinero__pie { margin: 10px 0 0; font-size: .8125rem; }

/* Nueva factura: lo que saldrá en ella, en vivo */
.factura-previa { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); font-size: .875rem; }
.factura-previa__titulo { margin: 0 0 2px; color: var(--tinta-2); font-weight: 600; }
.factura-previa div { display: flex; justify-content: space-between; gap: 12px; }
.factura-previa div span:first-child { color: var(--tinta-2); }

#nueva-factura { margin-bottom: var(--espacio-l); }

/* Facturas: la columna del cliente con sitio para una razón social (antes, ocho líneas en una columna estrecha) */
.celda-cliente { min-width: 120px; max-width: 220px; }
.tabla--gastos .coche-celda .nota.dos-lineas { display: -webkit-box; }

@media (max-width: 760px) {
  /* Menú del móvil: los enlaces se funden en 120 ms al abrirlo (se abre a menudo: casi imperceptible) */
  .menu:has(.menu__movil[open]) .menu__buscar,
  .menu:has(.menu__movil[open]) .menu__enlaces { transition: opacity 120ms var(--ease-out); }
  @starting-style {
    .menu:has(.menu__movil[open]) .menu__buscar,
    .menu:has(.menu__movil[open]) .menu__enlaces { opacity: 0; }
  }
}

/* Hovers que cambiaban de golpe: el mismo cambio corto que el resto (var --hover). Con :where() esta regla no
   pesa nada, así que donde ya había una transición propia, manda la propia. */
:where(.tabla tbody tr, .para-hoy li a, .aviso, .volver, .pestanas a, .enlace, .ordenar, .enlace-pequeno,
  .contacto__datos a, .saltos a, .login__ver, .tercero, .menu__enlaces a, .cabecera--portada .volver,
  .ficha-cabecera .volver, .ficha-cabecera .enlace-pequeno, .segmentos label span, a.contacto__coche,
  .foto-fila__mover button, .foto-fila__quitar, .gasto-pago, .cifras__dato--enlace) {
  transition: color var(--hover), background-color var(--hover), border-color var(--hover), filter var(--hover);
}

/* En el móvil no hay hover: filas y tarjetas responden al tocarlas (al apoyar el dedo, no al soltarlo) */
@media (hover: none) {
  .tabla tbody tr:active, .fila-coche:active, .para-hoy li a:active, .aviso:active, .cifras__dato--enlace:active { background-color: var(--fondo-pulsado); }
  .ficha-mini:active, .contacto:active { transform: scale(0.98); transition: transform 100ms var(--ease-out); }
}

/* Agenda conectada (bloque 10) */
.aviso-tipo--cita { color: var(--reservado); }
.dia__vacio { margin: 4px 0 0; font-size: .8125rem; }
.prueba__notas { margin: 0; font-size: .8125rem; }
.prueba__mover { display: grid; gap: 8px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--linea); }
.prueba__mover .campo { margin: 0; }
.prueba__coche a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .prueba__coche a:hover b { text-decoration: underline; } }

/* ===== Agenda de pruebas como agenda de verdad (bloque 10) =====================================
   Rejilla: filas = horas del horario, columnas = de lunes a sábado. Un hueco libre se pincha para apuntar;
   una prueba, para abrir su ficha (ventana). En el móvil, una lista por día. */

/* Paso de semana compacto sobre la banda negra: ‹ Hoy › */
/* Buscador de la agenda: lo encontrado, una línea por prueba, encima de la semana */
.agenda-buscar { margin-bottom: var(--espacio-s); }
.agenda-encontradas { margin: 0 0 var(--espacio-m); padding: 0; list-style: none; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.agenda-encontradas li + li { border-top: 1px solid var(--linea); }
.agenda-encontradas button { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; width: 100%; padding: 10px 16px; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.agenda-encontradas button:hover { background: var(--fondo); }
.agenda-encontradas .nota { margin: 0; }
.agenda-encontradas__nada { padding: 10px 16px; }
.agenda-paso { display: inline-flex; align-items: center; border: 1px solid #4a4f55; border-radius: var(--radio-boton); overflow: hidden; }
.agenda-paso a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; color: var(--blanco); text-decoration: none; font-weight: 600; transition: background-color var(--hover); }
.agenda-paso__flecha { font-size: 1.25rem; line-height: 1; padding: 0 12px; }
.agenda-paso__hoy { border-inline: 1px solid #4a4f55; }
.agenda-paso__hoy[aria-current] { background: rgb(255 255 255 / .1); }
@media (hover: hover) and (pointer: fine) { .agenda-paso a:hover { background: rgb(255 255 255 / .12); } }

.leyenda-pruebas .nota { margin-left: auto; }

/* La rejilla */
.agenda--rejilla { display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.agenda__fila { display: contents; }
.agenda__fila > * { border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.agenda__fila > :first-child { border-left: 0; }
.agenda__fila--cabeza > * { border-top: 0; }
/* Entre la mañana y la tarde, un respiro: la comida */
.agenda__fila--tarde > * { border-top: 6px solid var(--fondo); }
.agenda__dia { display: flex; align-items: center; gap: 8px; padding: 12px 10px; font-size: .8125rem; font-weight: 700; color: var(--tinta-2); background: var(--fondo); }
.agenda__dia--hoy { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--rojo-boton); }
.agenda__dia--pasado { color: var(--tinta-3); font-weight: 600; }
.agenda__hora { display: flex; align-items: flex-start; justify-content: flex-end; padding: 8px 8px 0 0; font-size: .75rem; color: var(--tinta-3); background: var(--fondo); }
.agenda__celda { position: relative; min-height: 52px; }
.agenda__celda--cerrada { background: repeating-linear-gradient(135deg, transparent 0 6px, rgb(23 25 28 / .035) 6px 7px); }
.agenda__celda--pasada { background: #f8f9fa; }

/* Hueco libre: toda la celda es el botón; el texto («Apuntar 10:30») sale al pasar el ratón o al tabular */
.agenda__hueco { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; border: 0; background: none; color: var(--tinta-3); font: inherit; font-size: .75rem; font-weight: 600; cursor: pointer; transition: background-color var(--hover), color var(--hover); }
.agenda__hueco span { opacity: 0; transition: opacity var(--hover); }
.agenda__hueco:focus-visible { outline-offset: -3px; }
.agenda__hueco:focus-visible span { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .agenda__hueco:hover { background: var(--fondo-hover); color: var(--tinta); }
  .agenda__hueco:hover span { opacity: 1; }
}

/* Una prueba: la raya y el fondo dicen su estado; coche y persona, y «Sin confirmar» si toca llamar */
.cita { --c: var(--reservado); --f: var(--reservado-fondo);
  position: absolute; inset: 3px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px;
  min-width: 0; padding: 4px 8px 4px 10px; border: 0; border-left: 3px solid var(--c); border-radius: 5px; background: var(--f);
  color: var(--tinta); font: inherit; text-align: left; cursor: pointer; transition: filter var(--hover), transform 100ms var(--ease-out); }
.cita--pedida { --c: #e0a23a; --f: var(--aviso-fondo); }
.cita--hecha { --c: var(--ok); --f: var(--ok-fondo); }
.cita--no-vino { --c: var(--peligro); --f: var(--peligro-fondo); }
.cita--no-vino .cita__coche, .cita--hecha .cita__coche { color: var(--tinta-2); }
.cita__coche, .cita__quien { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cita__coche { font-size: .8125rem; font-weight: 700; }
.cita__quien { font-size: .75rem; color: var(--tinta-2); }
.cita__marca { margin-top: 1px; font-size: .6875rem; font-weight: 700; color: var(--aviso); }
/* En la rejilla no cabe una tercera línea: el ámbar (y la leyenda) ya dicen «sin confirmar» */
.agenda--rejilla .cita__marca { display: none; }
.cita:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .cita:hover { filter: brightness(.97); } }

/* Modo mover: los huecos libres se ven todos, con su «Llevar aquí»; las pruebas se apagan */
.agenda-mover { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--radio); background: var(--negro); color: var(--blanco); font-size: .875rem; }
.agenda-mover p { margin: 0; }
.agenda-mover .boton--secundario { background: transparent; color: var(--blanco); border-color: #4a4f55; }
.agenda--moviendo .agenda__hueco { color: var(--reservado); }
.agenda--moviendo .agenda__hueco::before { content: ''; position: absolute; inset: 5px; border: 1px dashed rgb(29 86 184 / .35); border-radius: 5px; }
@media (hover: hover) and (pointer: fine) { .agenda--moviendo .agenda__hueco:hover { background: var(--reservado-fondo); } }
.agenda--moviendo .cita { opacity: .45; }

/* Móvil: un día debajo de otro */
.agenda--lista { display: grid; gap: 12px; }
.agenda-dia { padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.agenda-dia--hoy { border-color: var(--rojo-boton); }
.agenda-dia--pasado { opacity: .8; }
.agenda-dia__titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .9375rem; }
.agenda-dia__fila { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: stretch; gap: 10px; margin-bottom: 6px; }
.agenda-dia__fila time { padding-top: 10px; font-size: .8125rem; font-weight: 700; }
.agenda-dia__fila .cita { position: static; min-height: 52px; }
.agenda-dia__anadir { width: 100%; margin-top: 4px; }

/* Ventanas (<dialog>): ficha de una prueba y nueva prueba. Centradas (como un modal), entran desde
   scale(.97) con fundido; el fondo se oscurece. Se cierran con Esc, la × o pinchando fuera. */
.ventana { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 22px 24px; border: 0; border-radius: 12px; background: var(--blanco); color: var(--tinta); box-shadow: 0 24px 60px rgb(0 0 0 / .25);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.ventana::backdrop { background: rgb(21 21 21 / .45); }
@starting-style { .ventana[open] { opacity: 0; transform: scale(.97); } }
.ventana__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.ventana__cabeza h2 { margin: 2px 0 0; font-size: 1.125rem; }
.ventana__ante { margin: 0; color: var(--tinta-3); font-size: .8125rem; }
.ventana__cerrar { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--fondo); color: var(--tinta-2); font-size: 1.25rem; line-height: 1; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ventana__cerrar:hover { background: var(--linea); color: var(--tinta); } }
.ventana__datos { display: grid; gap: 10px; margin: 0 0 18px; }
.ventana__datos div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 12px; }
.ventana__datos dt { color: var(--tinta-3); font-size: .8125rem; }
.ventana__datos dd { margin: 0; overflow-wrap: anywhere; }
.ventana__datos a { color: inherit; }
.ventana__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 14px; border-top: 1px solid var(--linea); }
.ventana__peligro { color: var(--peligro); }
.ventana__form .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; }
.ventana__form .campo--ancho { grid-column: 1 / -1; }
.ventana__pista { margin: 0 0 14px; font-size: .8125rem; }

/* Horario de pruebas (agenda, solo gerencia): un bloque por día con sus franjas desde-hasta */
.ventana--horario { width: min(640px, calc(100vw - 32px)); }
.horario { display: grid; gap: 10px; margin-bottom: 14px; }
.horario__dia { margin: 0; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio); }
.horario__dia legend { padding: 0 4px; font-weight: 600; font-size: .875rem; }
.horario__franjas { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.horario__franjas:empty { display: none; }
.horario__franja { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
@media (max-width: 560px) {
  .ventana { padding: 18px; }
  .ventana__form .rejilla { grid-template-columns: minmax(0, 1fr); }
  .ventana__acciones .boton { flex: 1; }
}

/* Pantallas táctiles: todo lo que se pulsa, 44 px como mínimo (Apple HIG; antes 32-40 px) */
@media (pointer: coarse), (max-width: 760px) {
  /* html :is(…) para ganar a las reglas de 40 px de .campo, .boton--pequeno y compañía */
  html :is(.boton, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, summary,
    .segmentos > label > span, .foto-fila__mover button, .foto-fila__quitar, .agenda-paso a, .columna__mas,
    .gasto-pago, .saltar) { min-height: 44px; }
  html summary { padding-block: 12px; } /* sigue siendo list-item: no pierde el triángulo */
  html .menu__marca { display: flex; align-items: center; min-height: 44px; }
  html .volver { --relleno-volver: 12px; }
  .foto-fila__mover button, .agenda-paso__flecha { min-width: 44px; }
}

/* Enlaces de texto pequeños: zona de clic de 24 px como mínimo (WCAG 2.2) sin cambiar cómo se ven.
   En línea, el relleno amplía la zona sin mover el texto de alrededor. */
.menu__usuario a, .tercero__nombre, .fila-coche__titulo, .enlace-pequeno, .enlace, .grafica__tabla summary { padding-block: 4px; margin-block: -4px; } /* el margen negativo devuelve el sitio en los que no van en línea */
.ordenar { padding-block: 2px; margin-block: -2px; }
/* «Volver»: el mismo relleno, sin perder el espacio que deja debajo */
.volver { --relleno-volver: 4px; padding-block: var(--relleno-volver); margin-top: calc(-1 * var(--relleno-volver)); margin-bottom: calc(var(--espacio-m) - var(--relleno-volver)); }
.ficha-cabecera .volver { margin-block: calc(-1 * var(--relleno-volver)); }

/* Si no llegan los datos, solo el error (y su «Volver a cargar»): el resto es la maqueta, con datos de mentira */
html.sin-datos main.contenido > :not(.error--lista) { display: none; }
html.sin-datos main.contenido > .error--lista { margin-top: var(--espacio-l); }

/* Ficha · precio antes de la oferta, tachado junto al de venta */
.ficha-cabecera__antes { margin-right: 10px; color: rgb(255 255 255 / .55); font-size: 1.125rem; }

/* Ficha · revisión (como la pestaña de Pymecar). Plegada: se abre al recibir el coche y antes de entregarlo */
.revision > summary { cursor: pointer; list-style: none; }
.revision > summary::-webkit-details-marker { display: none; }
.revision > summary h2::before { content: "▸"; display: inline-block; width: 1em; color: var(--tinta-3); transition: transform var(--hover); }
.revision[open] > summary h2::before { transform: rotate(90deg); }
.revision__hecha { color: var(--venta); font-weight: 600; }
.revision__form { display: grid; gap: var(--espacio-m); margin-top: var(--espacio-m); }
.revision__grupo { margin: 0; padding: 0; border: 0; }
.revision__grupo legend { margin-bottom: 8px; padding: 0; color: var(--tinta-2); font-size: .8125rem; font-weight: 600; }
.revision__casillas { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.revision__componentes { display: grid; gap: 6px; }
.revision__componente { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(160px, 1.4fr); align-items: center; gap: 8px 12px; padding: 6px 0; border-top: 1px solid var(--linea); }
.revision__nombre { font-weight: 600; font-size: .875rem; }
.revision__componente .segmentos span { padding-inline: 10px; }
.revision__nota { min-height: 36px; font-size: .875rem; }
@media (max-width: 900px) {
  .revision__componente { grid-template-columns: minmax(0, 1fr); }
  .revision__componente .segmentos { justify-self: start; max-width: 100%; overflow-x: auto; }
}

/* Libros: libro, trimestre y año en una barra; los totales del periodo al pie de la tabla */
.filtros--libros { align-items: center; }
.filtros--libros .filtros-libros__anio { min-width: 110px; }
.tabla--libro tfoot td { padding: 12px 16px; border-top: 1px solid var(--linea-fuerte); background: #fafbfb; font-weight: 600; }
.libro__factura { color: var(--tinta); font-weight: 700; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .libro__factura:hover { text-decoration: underline; } }
@media (max-width: 760px) {
  .filtros--libros .segmentos { flex-wrap: nowrap; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filtros--libros .segmentos span { white-space: nowrap; }
  .tabla--libro tfoot td { padding: 0; border: 0; background: none; }
}

/* Contraseña propia, en un diálogo desde el pie del menú */
.dialogo-clave { border: 0; border-radius: 10px; padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.dialogo-clave::backdrop { background: rgba(0, 0, 0, .45); }
.dialogo-clave h2 { margin: 0 0 14px; font-size: 1.125rem; }
.dialogo-clave label { display: block; margin-bottom: 12px; font-size: .875rem; }
.dialogo-clave input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #d5d5d2; border-radius: 6px; font: inherit; }
.dialogo-clave__botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }