/* App de gestión. Encima de comun/css/base.css (colores, letra, foco, estados).
   Mismo lenguaje que el panel de SecondTech: superficies con borde fino en vez
   de tarjetas con sombra, color solo para estados y acciones. */

p { margin: 0; }

/* ---------- Controles comunes ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-s);
  font-weight: 550;
  white-space: nowrap;
  transition: background-color var(--rapido), border-color var(--rapido), color var(--rapido);
}
.boton:hover { background: var(--superficie-2); border-color: var(--texto-suave); }
.boton:active { transform: translateY(1px); }
.boton:disabled { opacity: 0.6; cursor: not-allowed; }
.boton-primario { border-color: var(--acento); background: var(--acento); color: #fff; }
.boton-primario:hover { border-color: var(--acento-hover); background: var(--acento-hover); }
.boton-secundario { background: var(--superficie); }
.boton-ancho { width: 100%; }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--acento);
  font-size: var(--t-s);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace:hover { color: var(--acento-hover); }
.enlace-oscuro { color: var(--texto-suave); }
.enlace-oscuro:hover { color: var(--texto); }
.enlace-centrado { display: block; margin: 0.875rem auto 0; text-align: center; }

.campo { display: flex; flex-direction: column; gap: 0.3rem; margin: 1rem 0; text-align: left; }
.campo > span { font-size: var(--t-s); font-weight: 550; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"],
input[type="date"], input[type="datetime-local"], input[type="number"], select, textarea {
  min-height: 2.375rem;
  padding: 0.45rem 0.625rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color var(--rapido), box-shadow var(--rapido);
}
input:hover, select:hover, textarea:hover { border-color: var(--texto-suave); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--acento); }
.campo input, .campo select, .campo textarea { width: 100%; }
textarea { resize: vertical; }
input[type="color"] { width: 2.375rem; height: 2.375rem; padding: 0.2rem; border: 1px solid var(--borde-fuerte); border-radius: var(--radio); background: var(--superficie); }

.mensaje-error { padding: 0.5rem 0.75rem; border-radius: var(--radio); background: var(--peligro-fondo); color: var(--peligro); font-size: var(--t-s); }
.mensaje-ok { padding: 0.5rem 0.75rem; border-radius: var(--radio); background: var(--ok-fondo); color: var(--ok); font-size: var(--t-s); }
.subtitulo { color: var(--texto-suave); font-size: var(--t-s); }
.ayuda { max-width: 70ch; margin: -0.375rem 0 1rem; color: var(--texto-suave); font-size: var(--t-s); }
.ayuda-corta { margin: 0 0 0.5rem; font-size: var(--t-xs); }
.mensaje-vacio { padding: 2.5rem 1rem; color: var(--texto-suave); text-align: center; }

/* ---------- Acceso ---------- */

.pantalla-login { display: grid; min-height: 100vh; place-items: center; padding: 1.5rem 1rem; background: var(--fondo); }

.tarjeta-login {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 22rem;
}
.tarjeta-login .campo { margin: 0 0 1rem; }
.tarjeta-login h1 { margin-bottom: 0.25rem; font-size: var(--t-xl); }
.tarjeta-login .subtitulo { margin-bottom: 1.25rem; }
.tarjeta-login .mensaje-error, .tarjeta-login .mensaje-ok { margin-bottom: 1rem; }
.logo-login { width: 2.5rem; height: 2.5rem; margin-bottom: 1rem; border-radius: var(--radio); }

.campo-codigo { font-family: var(--letra-mono); font-size: var(--t-l); letter-spacing: 0.2em; font-variant-numeric: tabular-nums; }

/* ---------- Estructura ---------- */

.app-layout { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }

.barra-lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 1.25rem 0.75rem;
  background: var(--lateral);
  color: var(--lateral-texto);
}

.marca { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.5rem 1.125rem; color: #fff; font-size: var(--t-s); font-weight: 650; line-height: 1.3; }
.marca img { width: 1.75rem; height: 1.75rem; border-radius: 5px; }

.nav-principal { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-height: 0; overflow-y: auto; }

.nav-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: inherit;
  font-size: var(--t-s);
  text-align: left;
  transition: background-color var(--rapido), color var(--rapido);
}
.nav-item:hover { background: var(--lateral-activo); color: #fff; }
.nav-item.activo { background: var(--lateral-activo); color: #fff; font-weight: 600; }
.nav-item-final { margin-top: auto; }

.badge-contador {
  margin-left: auto;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: var(--t-xs);
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.usuario-actual {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
  padding: 0.875rem 0.625rem 0;
  border-top: 1px solid var(--lateral-activo);
  font-size: var(--t-s);
}
.usuario-actual #nombre-usuario { color: #fff; }
.usuario-actual .enlace { color: var(--lateral-texto); }
.usuario-actual .enlace:hover { color: #fff; }
.pie-version { font-size: var(--t-xs); opacity: 0.7; }

.contenido { min-width: 0; padding: 1.75rem 2rem 3rem; }
.vista { max-width: 76rem; }

.vista-cabecera { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.vista-cabecera h1 { font-size: var(--t-xl); }
.vista-cabecera-secundaria { margin-top: 2.25rem; }
.vista-cabecera-secundaria h1 { font-size: var(--t-l); }
.controles-lista { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

#buscador, .campo-buscar { width: 18rem; max-width: 100%; }
.campo-matricula { text-transform: uppercase; font-weight: 650; letter-spacing: 0.04em; }

/* ---------- Buscador global (en la barra lateral) ---------- */

.buscador-global { position: relative; margin-bottom: 0.875rem; }
.buscador-global input {
  width: 100%;
  border-color: var(--lateral-activo);
  background: var(--lateral-activo);
  color: #fff;
  font-size: var(--t-s);
}
.buscador-global input::placeholder { color: var(--lateral-texto); opacity: 0.8; }
.buscador-global input:hover { border-color: #3a4250; }
.buscador-global input:focus-visible { border-color: var(--acento); }

.resultados-globales {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: 22rem;
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.375rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  box-shadow: var(--sombra-flotante);
  color: var(--texto);
}
.resultado-global { display: flex; flex-direction: column; gap: 0.125rem; width: 100%; padding: 0.5rem 0.75rem; border: 0; border-radius: var(--radio); background: none; text-align: left; }
.resultado-global strong { display: flex; align-items: center; gap: 0.4rem; }
.resultado-global strong .icono { color: var(--texto-suave); }
.resultado-global:hover, .resultado-global:focus-visible { background: var(--superficie-2); }
.resultado-global span { color: var(--texto-suave); font-size: var(--t-s); }
.resultado-vacio { padding: 0.75rem; color: var(--texto-suave); font-size: var(--t-s); }

/* ---------- Avisos ---------- */

.banner-alerta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1.25rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--atencion-fondo);
  color: var(--atencion);
  font-size: var(--t-s);
  font-weight: 550;
  animation: entrar 200ms ease-out;
}
.banner-alerta .enlace { color: inherit; }
.btn-cerrar-banner { display: inline-flex; margin-left: auto; padding: 0.25rem; border: 0; border-radius: var(--radio); background: none; color: inherit; }
.btn-cerrar-banner:hover { background: rgb(0 0 0 / 6%); }

.avisos-sistema:empty { display: none; }
.avisos-sistema { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }
.aviso-sistema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--acento-suave);
  color: var(--acento);
  font-size: var(--t-s);
}
.aviso-sistema strong { font-weight: 650; }
.aviso-sistema.importante { background: var(--atencion-fondo); color: var(--atencion); }
.aviso-sistema.bloqueo { background: var(--peligro-fondo); color: var(--peligro); }
.aviso-sistema.soporte { border-color: var(--peligro); background: var(--peligro); color: #fff; }
.aviso-sistema .enlace { color: inherit; }

/* ---------- Listas de filas (órdenes, vehículos, clientes) ---------- */

.tabla-partes {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.tabla-partes:empty { display: none; }

.fila-parte {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 10rem 8.5rem 6rem;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--texto);
  font-size: var(--t-s);
  text-align: left;
  transition: background-color var(--rapido);
}
.fila-parte:last-child { border-bottom: 0; }
.fila-parte:hover { background: var(--superficie-2); }
.fila-parte.fila-simple { grid-template-columns: 11rem minmax(0, 1fr) auto; }

.fila-matricula { display: flex; align-items: center; gap: 0.4rem; font-size: var(--t-m); font-weight: 700; letter-spacing: 0.02em; }
/* Orden aún sin atender: un punto, no una franja de color. */
.fila-parte.es-nuevo .fila-matricula::before { width: 0.4rem; height: 0.4rem; flex: none; border-radius: 50%; background: var(--acento); content: ""; }
.fila-codigo { color: var(--texto-suave); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.fila-info { min-width: 0; }
.fila-descripcion { overflow: hidden; color: var(--texto-suave); white-space: nowrap; text-overflow: ellipsis; }
.fila-categorias { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.fila-fecha { color: var(--texto-suave); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.chip-categoria { padding: 0.0625rem 0.5rem; border-radius: 999px; color: #fff; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; }

/* ---------- Etiquetas de estado ---------- */

.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--neutro-fondo);
  color: var(--neutro);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
}
.badge + .badge { margin-left: 0.25rem; }
.badge-servidor { background: var(--neutro-fondo); color: var(--neutro); font-variant-numeric: tabular-nums; }
.badge-urgente { background: var(--peligro-fondo); color: var(--peligro); }

.badge-recibido { background: var(--acento-suave); color: var(--acento); }
.badge-presupuestado { background: var(--atencion-fondo); color: var(--atencion); }
.badge-aprobado { background: var(--proceso-fondo); color: var(--proceso); }
.badge-en_reparacion { background: var(--proceso-fondo); color: var(--proceso); }
.badge-listo { background: var(--ok-fondo); color: var(--ok); }
.badge-entregado { background: var(--neutro-fondo); color: var(--texto-suave); }
.badge-cancelado { background: var(--peligro-fondo); color: var(--peligro); }

/* Estados antiguos (órdenes que vienen de la app de partes) */
.badge-enviado { background: var(--atencion-fondo); color: var(--atencion); }
.badge-clasificado, .badge-en_proceso { background: var(--proceso-fondo); color: var(--proceso); }
.badge-finalizado { background: var(--ok-fondo); color: var(--ok); }
.badge-archivado { background: var(--neutro-fondo); color: var(--texto-suave); }

/* ---------- Listas sencillas (etiquetas, equipo, ajustes) ---------- */

.form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.form-inline input[type="text"], .form-inline input[type="password"] { flex: 1 1 12rem; }
.form-inline input.campo-pin[type="text"] { flex: none; width: 7rem; letter-spacing: 0.2em; }
.form-inline input.campo-codigo[type="text"] { flex: none; width: 10rem; }
.form-inline input.campo-corto { flex: none; width: 7.5rem; }

.lista-categorias { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.lista-categorias:empty { display: none; }
.fila-categoria { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 1rem; border-bottom: 1px solid var(--borde); font-size: var(--t-s); }
.fila-categoria:last-child { border-bottom: 0; }
.punto-color { width: 0.75rem; height: 0.75rem; flex: none; border-radius: 50%; }

.fila-equipo-info { display: flex; flex: 1; flex-direction: column; gap: 0.125rem; min-width: 0; }
.fila-equipo.inactiva { color: var(--texto-suave); }
.fila-equipo .boton { min-height: 1.875rem; padding: 0 0.625rem; font-size: var(--t-xs); }

/* ---------- Bloques (Mi cuenta, ajustes, formularios) ---------- */

.panel {
  max-width: 45rem;
  margin-bottom: 1.25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.panel h2 { margin-bottom: 0.625rem; font-size: var(--t-m); }
.panel .ayuda { margin: 0 0 0.875rem; }
.panel .form-inline { margin-bottom: 0; }
.panel .lista-categorias { margin-bottom: 0.875rem; }
.panel code { padding: 0.0625rem 0.375rem; border-radius: 4px; background: var(--neutro-fondo); font-size: var(--t-s); white-space: nowrap; }

.form-vertical { max-width: 24rem; }
.form-vertical .campo { margin: 0 0 0.875rem; }
.form-vertical .mensaje-error, .form-vertical .mensaje-ok { margin-bottom: 0.875rem; }

.form-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.125rem; }
.form-rejilla .campo { margin: 0 0 0.875rem; }
.form-rejilla .campo-ancho, .form-rejilla-acciones { grid-column: 1 / -1; }
.form-rejilla-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 0.875rem; }
.form-rejilla-acciones .mensaje-error { flex: 1; margin: 0; }
.panel.form-rejilla { max-width: 45rem; }

.campo-casilla { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.875rem; font-size: var(--t-s); }
.campo-casilla input { width: 1rem; height: 1rem; accent-color: var(--acento); }
.campo-casilla-linea { margin-bottom: 0; white-space: nowrap; }
.subtitulo-form { margin: 0.25rem 0 0.625rem; padding-top: 0.875rem; border-top: 1px solid var(--borde); font-size: var(--t-s); font-weight: 600; }
.subtitulo-form small { color: var(--texto-suave); font-weight: 400; }
.form-coche { margin: 0.625rem 0 0; }
.form-coche .campo-matricula { flex: 0 1 9rem; }

.pasos { margin: 0 0 0.875rem; padding-left: 1.25rem; font-size: var(--t-s); line-height: 1.7; }
.clave-secreta { display: inline-block; padding: 0.125rem 0.5rem; border: 1px solid var(--borde); border-radius: 4px; background: var(--superficie-2); letter-spacing: 0.08em; user-select: all; }

/* 2FA obligatorio sin configurar: solo existe «Mi cuenta». */
body.solo-cuenta .nav-item:not([data-vista="cuenta"]) { display: none; }

/* ---------- Ventanas (orden, ficha de vehículo o cliente) ---------- */

.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal.modal-encima { z-index: 150; }
.modal-fondo { position: absolute; inset: 0; background: rgb(15 18 23 / 55%); }
.modal-panel {
  position: relative;
  width: min(61rem, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: var(--fondo);
  box-shadow: var(--sombra-flotante);
  animation: entrar 180ms ease-out;
}
.modal-panel.modal-panel-estrecho { max-width: 47.5rem; }

.btn-cerrar-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto-suave);
}
.btn-cerrar-modal:hover { color: var(--texto); border-color: var(--borde-fuerte); }

.modal-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding-right: 2.75rem; }
.modal-cabecera h2 { font-size: var(--t-xl); letter-spacing: 0.02em; }
.modal-enlaces { display: flex; flex-wrap: wrap; gap: 1.125rem; margin-top: 0.375rem; }

/* ---------- Ficha de la orden ---------- */

.modal-panel-orden { width: min(66rem, 100%); padding: 0; }
.modal-panel-orden .btn-cerrar-modal { top: 1rem; right: 1rem; }

/* Cabecera: quién, qué coche y cuánto va. */
.orden-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.25rem 4rem 1.125rem 1.75rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.orden-identidad { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.orden-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; }
.orden-titulo h2 { font-size: 1.75rem; letter-spacing: 0.04em; }
.orden-titulo .badge + .badge { margin-left: 0; }
.orden-identidad .subtitulo { margin: 0; }
.orden-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 0.375rem; font-size: var(--t-s); }
.orden-cliente-nombre { padding: 0; border: 0; background: none; color: var(--texto); font-size: var(--t-m); font-weight: 650; text-decoration: underline; text-decoration-color: var(--borde-fuerte); text-underline-offset: 3px; cursor: pointer; }
.orden-cliente-nombre:hover { text-decoration-color: currentColor; }
.orden-cliente-telefono { color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.orden-sin-cliente { color: var(--texto-suave); }
.orden-resumen { display: flex; flex-direction: column; align-items: flex-end; gap: 0.625rem; flex: 0 0 auto; }
.orden-total { display: flex; flex-direction: column; align-items: flex-end; }
.orden-total-cifra { font-size: 1.625rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.orden-total-pie { color: var(--texto-suave); font-size: var(--t-xs); }
.orden-documentos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

/* Estado: la barra de pasos y lo que toca ahora. */
.orden-estado { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.125rem 1.75rem; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.pasos-orden { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.paso-orden { position: relative; }
.paso-orden:not(:last-child)::after { content: ""; position: absolute; top: 0.8125rem; left: calc(50% + 0.875rem); right: calc(-50% + 0.875rem); height: 2px; background: var(--borde); }
.paso-orden.hecho:not(:last-child)::after { background: var(--ok); }
.paso-orden button { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; width: 100%; padding: 0; border: 0; background: none; color: var(--texto-suave); font-size: var(--t-xs); font-weight: 550; cursor: pointer; }
.paso-orden button:hover { color: var(--texto); }
.paso-orden-punto { display: flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border: 2px solid var(--borde-fuerte); border-radius: 50%; background: var(--superficie); }
.paso-orden-punto .icono { width: 0.875rem; height: 0.875rem; }
.paso-orden.hecho button { color: var(--texto); }
.paso-orden.hecho .paso-orden-punto { border-color: var(--ok); background: var(--ok); color: var(--superficie); }
.paso-orden.actual button { color: var(--acento); font-weight: 700; }
.paso-orden.actual .paso-orden-punto { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.pasos-orden.cancelada { opacity: 0.45; }
.orden-estado-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.orden-estado-texto { margin: 0; font-size: var(--t-m); font-weight: 600; }
.orden-estado-texto.cancelada { color: var(--peligro); }
.orden-estado-botones { display: flex; align-items: center; gap: 1rem; }
.orden-estado .aviso-listo { margin: 0; }

.modal-panel-orden .modal-cuerpo { margin: 0; padding: 1.25rem 1.75rem 1.75rem; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }

/* Pestañas: Recepción, Piezas y horas, Historial. */
.pestanas { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--borde); }
.pestana { margin-bottom: -1px; padding: 0.5rem 0.875rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--texto-suave); font-size: var(--t-s); font-weight: 600; cursor: pointer; }
.pestana:hover { color: var(--texto); }
.pestana.activa { border-bottom-color: var(--acento); color: var(--acento); }
.panel-pestana > h3:first-child { margin-top: 0; }

/* Cómo entró el coche: tres casillas y los daños. */
.datos-entrada { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.625rem; margin-bottom: 0.75rem; }
.dato-entrada { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem 0.75rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.dato-entrada-titulo { color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; }
.dato-entrada strong { font-size: var(--t-m); font-variant-numeric: tabular-nums; }
.dato-entrada strong.suave { color: var(--texto-suave); font-size: var(--t-s); font-weight: 500; }
.dato-entrada-pie { color: var(--texto-suave); font-size: var(--t-xs); }
.medidor-combustible { display: flex; gap: 3px; }
.medidor-combustible span { width: 1.25rem; height: 0.5rem; border: 1px solid var(--acento); border-radius: 2px; }
.medidor-combustible span.lleno { background: var(--acento); }
.recepcion-orden { font-size: var(--t-s); }
.firma-mini { width: 100%; max-width: 10rem; height: 3rem; padding: 0.125rem 0.25rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; object-fit: contain; object-position: left; cursor: zoom-in; }
.lightbox img.es-firma { width: min(40rem, 100%); padding: 1.5rem; background: #fff; }
.lista-danos-orden { display: flex; flex-direction: column; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.lista-danos-orden li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; }
.lista-danos-orden li span:last-child { color: var(--texto-suave); }
.punto-dano { flex: 0 0 auto; width: 0.75rem; height: 0.75rem; border-radius: 3px; align-self: center; }
.punto-dano.dano-aranazo { border: 2px solid var(--atencion); background: var(--atencion-fondo); }
.punto-dano.dano-golpe { background: var(--atencion); }
.punto-dano.dano-rotura { background: var(--peligro); }
.panel-pestana .modal-galeria { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); }
/* Las fotos llevan la zona y la hora impresas en las esquinas: en 4:3 no se recortan. */
.panel-pestana .modal-galeria img { aspect-ratio: 4 / 3; }

/* Lo que se pliega: añadir líneas, reservar en la agenda. */
.plegable { margin-top: 1rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.plegable > summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; color: var(--acento); font-size: var(--t-s); font-weight: 600; cursor: pointer; list-style: none; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary .icono { width: 1rem; height: 1rem; }
.plegable[open] > summary { border-bottom: 1px solid var(--borde); }
.plegable > :not(summary) { margin-left: 0.875rem; margin-right: 0.875rem; }
.plegable > :last-child { margin-bottom: 0.875rem; }
.plegable > .ayuda { margin-top: 0.75rem; }

.modal-cuerpo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.75rem; margin-top: 1rem; }
.modal-columna h3, #ficha-contenido h3 { margin: 1.25rem 0 0.5rem; font-size: var(--t-s); font-weight: 650; }
.modal-columna > h3:first-child { margin-top: 0; }

.modal-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: 0.5rem; }
.modal-galeria .mensaje-vacio { grid-column: 1 / -1; padding: 0.75rem 0.875rem; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); font-size: var(--t-s); text-align: left; }
.modal-galeria img { width: 100%; aspect-ratio: 1; border-radius: var(--radio); object-fit: cover; cursor: zoom-in; }
.foto-con-pie { margin: 0; }
.foto-con-pie figcaption { margin-top: 0.25rem; color: var(--texto-suave); font-size: var(--t-xs); }

.detalle-descripcion, .bloque-recepcion {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--t-s);
}
.detalle-descripcion { white-space: pre-wrap; }
.dato-recepcion { margin: 0 0 0.5rem; }
.dato-recepcion:last-child { margin-bottom: 0; }
.dato-recepcion.suave { color: var(--texto-suave); }
.lista-danos { margin: 0 0 0.625rem; padding-left: 1.25rem; line-height: 1.7; }
.firma-cliente { margin: 0.375rem 0 0; }
.firma-cliente img { display: block; max-width: 16rem; max-height: 7rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.firma-cliente figcaption { margin-top: 0.25rem; color: var(--texto-suave); font-size: var(--t-xs); }

/* Piezas y mano de obra de la orden */
.bloque-lineas { padding: 0.75rem 0.875rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); font-size: var(--t-s); }
.tabla-lineas { width: 100%; border-collapse: collapse; }
.tabla-lineas th { padding: 0 0.375rem 0.375rem; border-bottom: 1px solid var(--borde); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; text-align: left; }
.tabla-lineas td { padding: 0.4375rem 0.375rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-lineas th:first-child, .tabla-lineas td:first-child { padding-left: 0; }
.tabla-lineas th:last-child, .tabla-lineas td:last-child { width: 2rem; padding-right: 0; }
.tabla-lineas .num, .lineas-totales dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.linea-descripcion { display: flex; flex-direction: column; }
.linea-descripcion span { color: var(--texto-suave); font-size: var(--t-xs); }
.btn-icono-pequeno { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: var(--radio); background: none; color: var(--texto-suave); }
.btn-icono-pequeno:hover { background: var(--peligro-fondo); color: var(--peligro); }
.btn-icono-pequeno:disabled { opacity: 0.4; }
.lineas-totales { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1.5rem; width: max-content; min-width: 16rem; margin: 0.75rem 0 0 auto; }
.lineas-totales dt { color: var(--texto-suave); }
.lineas-totales .total { padding-top: 0.375rem; border-top: 1px solid var(--borde); color: var(--texto); font-size: var(--t-m); font-weight: 650; }
.form-linea { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px dashed var(--borde-fuerte); }
.form-linea-fila { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form-linea-fila select { flex: 0 0 auto; }
.form-linea-fila input[name="descripcion"] { flex: 3 1 12rem; }
.form-linea-fila input[name="referencia"] { flex: 1 1 6rem; }
.form-linea-fila input[name="cantidad"], .form-linea-fila input[name="descuento"] { flex: 0 1 5.5rem; width: 5.5rem; }
.form-linea-fila input[name="precio"] { flex: 0 1 7rem; width: 7rem; }
.form-linea-fila .boton { margin-left: auto; }
.editor-plantilla { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px dashed var(--borde-fuerte); }
.editor-plantilla h3 { margin: 0; font-size: var(--t-m); }
.editor-plantilla-lineas { display: flex; flex-direction: column; gap: 0.5rem; }
.editor-plantilla-linea { align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--borde); }
.editor-plantilla [aria-invalid="true"] { border-color: var(--peligro); }
.precio-pendiente { color: var(--atencion); font-weight: 600; }
.lineas-sin-precio { margin: 0.625rem 0 0; padding: 0.5rem 0.75rem; border-radius: var(--radio); background: var(--atencion-fondo); color: var(--atencion); }

.timeline, .lista-comentarios {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  list-style: none;
}
.timeline li, .lista-comentarios li { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--borde); font-size: var(--t-s); }
.timeline li:last-child, .lista-comentarios li:last-child { border-bottom: 0; }
.timeline .cuando { color: var(--texto-suave); font-size: var(--t-xs); }
.lista-comentarios { max-height: 14rem; margin-bottom: 0.625rem; overflow-y: auto; }
.lista-comentarios .quien { display: block; margin-bottom: 0.125rem; color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; }

.select-grande { width: 100%; }

.segmentado { display: inline-flex; padding: 0.1875rem; border: 1px solid var(--borde); border-radius: calc(var(--radio) + 2px); background: var(--superficie-2); }
.segmento {
  flex: 1;
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: var(--radio);
  background: none;
  color: var(--texto-suave);
  font-size: var(--t-s);
  white-space: nowrap;
  transition: background-color var(--rapido), color var(--rapido);
}
.segmento:hover { color: var(--texto); }
.segmento.activo { background: var(--superficie); box-shadow: var(--sombra); color: var(--texto); font-weight: 600; }
.segmento-urgente.activo { background: var(--peligro-fondo); color: var(--peligro); }
.modal-columna-acciones .segmentado { display: flex; }

.chips-categorias { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.chip-seleccionable {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-suave);
  font-size: var(--t-s);
  font-weight: 550;
}
.chip-seleccionable:hover { color: var(--texto); }
.chip-seleccionable.activa { border-color: transparent; color: #fff; }

.campo-compacto { margin: 0 0 0.625rem; }

.ficha-titulo { font-size: var(--t-xl); letter-spacing: 0.02em; }
#ficha-contenido .campo-buscar { width: 100%; margin-bottom: 0.625rem; }

.lista-historial { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.fila-historial {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 0.875rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--texto);
  font-size: var(--t-s);
  text-align: left;
}
.fila-historial:last-child { border-bottom: 0; }
.fila-historial:hover { background: var(--superficie-2); }
.fila-historial-fecha { color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }

.fila-seleccionable { width: 100%; border: 0; color: var(--texto); text-align: left; cursor: pointer; }
.fila-seleccionable:hover { background: var(--superficie-2); }

.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 2rem; background: rgb(0 0 0 / 85%); cursor: zoom-out; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--radio); }

/* ---------- Inicio ---------- */

.inicio-franja {
  margin-bottom: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
}
.inicio-franja-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.inicio-franja-resumen { color: var(--texto-suave); font-size: var(--t-s); }
.inicio-franja-cabecera .enlace { font-weight: 550; text-decoration: none; }
.inicio-franja-cabecera .enlace:hover { text-decoration: underline; }
.inicio-estados { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.inicio-estado {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: none;
  color: var(--texto);
  text-align: left;
  transition: border-color var(--rapido), background-color var(--rapido);
}
.inicio-estado:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.inicio-estado-numero { font-size: var(--t-xl); font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }

.inicio-rejilla { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.inicio-columna { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.inicio-bloque { max-width: none; margin-bottom: 0; }
.inicio-bloque-cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.75rem; }
.inicio-bloque-cabecera h2 { margin: 0; }
.inicio-vacio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; color: var(--texto-suave); font-size: var(--t-s); }

.inicio-carga { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.875rem; color: var(--texto-suave); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }
.inicio-carga .ag-barra { height: 0.4rem; }

.inicio-lista { display: flex; flex-direction: column; margin: 0 -1.25rem -1.125rem; border-top: 1px solid var(--borde); }
.inicio-fila {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  padding: 0.625rem 1.25rem;
  border: 0;
  border-bottom: 1px solid var(--borde);
  background: none;
  color: var(--texto);
  font-size: var(--t-s);
  text-align: left;
}
.inicio-fila:last-child { border-bottom: 0; border-radius: 0 0 var(--radio) var(--radio); }
button.inicio-fila:hover, .enlace-fila:hover { background: var(--superficie-2); }
.inicio-fila.apagada { color: var(--texto-suave); }
.inicio-fila.apagada strong { text-decoration: line-through; }
.inicio-fila-doble { padding: 0 1.25rem 0 0; }
.enlace-fila { padding: 0.625rem 0 0.625rem 1.25rem; border: 0; background: none; color: inherit; text-align: left; }
.inicio-fila-texto { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.inicio-fila-texto strong { letter-spacing: 0.02em; }
.inicio-fila-texto span { overflow: hidden; color: var(--texto-suave); font-size: var(--t-xs); white-space: nowrap; text-overflow: ellipsis; }
.inicio-hora { min-width: 3rem; color: var(--acento); font-weight: 650; font-variant-numeric: tabular-nums; }
.inicio-fila.apagada .inicio-hora { color: var(--texto-suave); }
.boton-pequeno { min-height: 1.875rem; padding: 0 0.625rem; font-size: var(--t-xs); text-decoration: none; }

/* ---------- Recordatorios (F6) ---------- */

.lista-avisos { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.lista-avisos:empty { display: none; }
.lista-avisos > .mensaje-vacio { padding: 1.5rem 1rem; }
.aviso-fila {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1.4fr) 7rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-s);
}
.aviso-fila:last-child { border-bottom: 0; }
.aviso-fila > .badge { justify-self: start; }
.aviso-datos { display: flex; flex-direction: column; min-width: 0; }
.aviso-datos span { overflow: hidden; color: var(--texto-suave); font-size: var(--t-xs); white-space: nowrap; text-overflow: ellipsis; }
.enlace-matricula { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--texto); font-size: var(--t-m); font-weight: 700; letter-spacing: 0.02em; }
.enlace-matricula:hover { color: var(--acento); text-decoration: underline; }
.aviso-plazo { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.aviso-plazo span { color: var(--texto-suave); font-size: var(--t-xs); }
.aviso-plazo.vencido, .aviso-plazo.vencido span { color: var(--peligro); }
.aviso-estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.aviso-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.375rem; }
.enlace-badge { border: 0; cursor: pointer; }
.enlace-badge:hover { text-decoration: underline; }
.boton-texto-suave { border-color: transparent; background: none; color: var(--texto-suave); }
.boton-texto-suave:hover { border-color: transparent; background: var(--superficie-2); color: var(--texto); }

.rec-ajustes { max-width: none; margin-top: 1.5rem; }
.rec-ajustes summary { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; list-style: none; }
.rec-ajustes summary::-webkit-details-marker { display: none; }
.rec-ajustes summary::before { width: 0.4rem; height: 0.4rem; border-right: 2px solid var(--texto-suave); border-bottom: 2px solid var(--texto-suave); transform: rotate(-45deg); transition: transform var(--rapido); content: ""; }
.rec-ajustes[open] summary::before { transform: rotate(45deg); }
.rec-ajustes summary h2 { margin: 0; }
.form-rec-ajustes { margin-top: 1rem; }
.form-rec-ajustes textarea { font-size: var(--t-s); }
.campo-en-linea { margin: 0; }

@media (max-width: 64rem) {
  .aviso-fila { grid-template-columns: 5rem minmax(0, 1fr) 6rem; }
  .aviso-estado, .aviso-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Agenda ---------- */

.ag-controles .boton[aria-label] { width: 2.25rem; padding: 0; }

.ag-carga { margin-bottom: 0.75rem; }
.ag-carga-linea {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie);
  font-size: var(--t-s);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.ag-carga-linea .ag-barra { flex: 1; height: 0.5rem; }
.ag-carga-linea.sobrecarga { color: var(--peligro); }
.ag-barra { height: 0.3rem; overflow: hidden; border-radius: 999px; background: var(--neutro-fondo); }
.ag-barra-relleno { height: 100%; border-radius: 999px; background: var(--ok); }
.ag-barra-relleno.alta { background: var(--atencion); }
.ag-barra-relleno.sobrecarga { background: var(--peligro); }

.ag-en-taller { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: var(--t-s); }
.ag-coche {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--borde);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto);
  font-size: var(--t-s);
}
.ag-coche:hover { border-color: var(--borde-fuerte); }
.ag-coche .icono { color: var(--texto-suave); }

.ag-lienzo { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }

/* Rejilla horaria (día y semana) */
.ag-rejilla { display: flex; min-width: 40rem; }
.ag-horas { flex: 0 0 3.5rem; border-right: 1px solid var(--borde); }
.ag-hora { padding: 0.125rem 0.5rem 0 0; color: var(--texto-suave); font-size: var(--t-xs); text-align: right; font-variant-numeric: tabular-nums; }
.ag-columna { flex: 1 1 0; min-width: 6rem; border-right: 1px solid var(--borde); }
.ag-columna:last-child { border-right: 0; }
.ag-columna-cabecera {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
  height: 3.375rem;
  padding: 0.5rem;
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
  font-size: var(--t-s);
  text-align: center;
}
.ag-columna-cabecera.pulsable { cursor: pointer; }
.ag-columna-cabecera.pulsable:hover { background: var(--superficie-2); }
.ag-columna.hoy .ag-columna-cabecera { background: var(--acento-suave); color: var(--acento); font-weight: 600; }

.ag-cuerpo {
  position: relative;
  /* Una raya por hora; su separación la fija background-size desde el JS. */
  background-image: linear-gradient(to bottom, var(--borde) 1px, transparent 1px);
  cursor: cell;
}
.ag-cerrado {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0.25rem 0.375rem;
  overflow: hidden;
  background: repeating-linear-gradient(135deg, var(--superficie-2) 0 8px, var(--neutro-fondo) 8px 16px);
  color: var(--texto-suave);
  font-size: var(--t-xs);
  pointer-events: none;
}
.ag-cerrado.con-motivo { background: var(--peligro-fondo); color: var(--peligro); font-weight: 600; }
.ag-ahora { position: absolute; left: 0; right: 0; z-index: 3; height: 2px; background: var(--peligro); pointer-events: none; }

.ag-cita {
  position: absolute;
  z-index: 2;
  padding: 0.1875rem 0.375rem 0.5rem;
  overflow: hidden;
  border: 1px solid rgb(31 79 209 / 30%);
  border-radius: var(--radio);
  background: var(--acento-suave);
  color: var(--acento);
  font-size: var(--t-xs);
  line-height: 1.25;
  cursor: pointer;
  user-select: none;
  touch-action: none;
}
.ag-cita.movible { cursor: grab; }
.ag-cita.arrastrando { z-index: 10; opacity: 0.9; box-shadow: var(--sombra-flotante); cursor: grabbing; }
.ag-cita-hora { font-size: 0.6875rem; font-weight: 600; opacity: 0.85; font-variant-numeric: tabular-nums; }
.ag-cita-titulo { overflow: hidden; font-size: var(--t-s); font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ag-cita-detalle { overflow: hidden; opacity: 0.9; white-space: nowrap; text-overflow: ellipsis; }
.ag-cita-asa { position: absolute; left: 0; right: 0; bottom: 0; height: 0.5rem; cursor: ns-resize; }
.ag-cita-asa::after { position: absolute; left: 50%; bottom: 2px; width: 1.375rem; height: 3px; margin-left: -0.6875rem; border-radius: 2px; background: currentColor; opacity: 0.35; content: ""; }

.ag-cita.estado-pendiente_confirmar { border-style: dashed; border-color: var(--atencion); background: var(--atencion-fondo); color: var(--atencion); }
.ag-cita.estado-recibida { border-color: rgb(23 102 58 / 30%); background: var(--ok-fondo); color: var(--ok); }
.ag-cita.estado-cancelada, .ag-cita.estado-no_presentado { z-index: 1; border-color: var(--borde); background: var(--superficie-2); color: var(--texto-suave); text-decoration: line-through; opacity: 0.75; }

/* Vista de mes */
.ag-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ag-mes-dia-semana { padding: 0.5rem; border-bottom: 1px solid var(--borde); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; text-align: center; }
.ag-mes-celda {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
  min-width: 0;
  min-height: 6.75rem;
  padding: 0.375rem 0.5rem;
  border: 0;
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  background: var(--superficie);
  color: var(--texto);
  text-align: left;
}
.ag-mes-celda:nth-child(7n) { border-right: 0; }
.ag-mes-celda:hover { background: var(--superficie-2); }
.ag-mes-celda.otro-mes { background: var(--superficie-2); color: var(--texto-suave); }
.ag-mes-celda.cerrado { background: repeating-linear-gradient(135deg, var(--superficie) 0 8px, var(--superficie-2) 8px 16px); }
.ag-mes-numero { width: 1.625rem; height: 1.625rem; border-radius: 50%; font-size: var(--t-s); font-weight: 650; line-height: 1.625rem; text-align: center; font-variant-numeric: tabular-nums; }
.ag-mes-celda.hoy .ag-mes-numero { background: var(--acento); color: #fff; }
.ag-mes-cita { overflow: hidden; padding: 0.0625rem 0.3125rem; border-radius: 4px; background: var(--acento-suave); color: var(--acento); font-size: 0.6875rem; white-space: nowrap; text-overflow: ellipsis; }
.ag-mes-cita.estado-pendiente_confirmar { background: var(--atencion-fondo); color: var(--atencion); }
.ag-mes-cita.estado-recibida { background: var(--ok-fondo); color: var(--ok); }
.ag-mes-mas { color: var(--texto-suave); font-size: 0.6875rem; }

/* Ventana de una cita */
.ag-aviso-cliente { grid-column: 1 / -1; margin: 0 0 0.875rem; padding: 0.625rem 0.875rem; border-radius: var(--radio); background: var(--atencion-fondo); color: var(--atencion); font-size: var(--t-s); font-weight: 550; }
.ag-acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-cita-confirmada { background: var(--acento-suave); color: var(--acento); }
.badge-cita-pendiente_confirmar { background: var(--atencion-fondo); color: var(--atencion); }
.badge-cita-recibida { background: var(--ok-fondo); color: var(--ok); }
.badge-cita-cancelada, .badge-cita-no_presentado { background: var(--neutro-fondo); color: var(--texto-suave); }

/* ---------- Ajustes de agenda ---------- */

.form-ajuste { margin-top: 0.875rem; }
.lista-horario { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.875rem; }
.fila-horario { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: 0.75rem; font-size: var(--t-s); font-weight: 550; }
#ical-resultado { margin-top: 0.75rem; }
#ical-url { flex: 1; background: var(--superficie-2); font-family: var(--letra-mono); font-size: var(--t-xs); }

/* ---------- Aviso de coche listo (ficha de la orden) ---------- */

.aviso-listo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; margin: 0.75rem 0 0.25rem; padding: 0.75rem 0.875rem; border-radius: var(--radio); background: var(--ok-fondo); }
.aviso-listo .ayuda-corta { margin: 0; color: var(--texto); }
.aviso-listo-hecho { display: flex; align-items: center; gap: 0.375rem; margin: 0; color: var(--ok); font-size: var(--t-s); font-weight: 600; }
.aviso-listo-hecho .icono { width: 1rem; height: 1rem; }
#aviso-listo-ajustes textarea { width: 100%; font-family: inherit; }

/* ---------- Cita online (Ajustes) ---------- */

.co-enlaces { display: flex; flex-direction: column; gap: 1rem; margin: 1rem 0 0.5rem; }
.co-copiable { display: flex; flex-direction: column; gap: 0.3rem; }
.co-copiable .form-inline { margin-bottom: 0; }
.co-copiable input { flex: 1 1 14rem; background: var(--superficie-2); font-family: var(--letra-mono); font-size: var(--t-xs); }
.co-copiable .ayuda-corta { margin: 0; }
.co-etiqueta { font-size: var(--t-s); font-weight: 550; }
.co-titulo { margin: 1.5rem 0 0.625rem; font-size: var(--t-s); font-weight: 650; }
.co-plazos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-plazos .form-rejilla-acciones { justify-content: flex-start; }
.co-plan { margin: 0; }

/* ---------- Importar calendario ---------- */

.imp-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin: 1rem 0; }
.imp-paso { padding: 0.75rem 0.875rem; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.imp-paso h3 { margin-bottom: 0.375rem; font-size: var(--t-s); }
.imp-paso ol { margin: 0; padding-left: 1.125rem; color: var(--texto-suave); font-size: var(--t-xs); line-height: 1.5; }
.imp-subir { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.875rem; border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); font-size: var(--t-s); font-weight: 550; }
.imp-subir input { flex: 1 1 14rem; font-weight: 400; }
.imp-resultado { margin-top: 1rem; }
.imp-resumen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.75rem; padding: 0.75rem 0.875rem; border-radius: var(--radio); background: var(--acento-suave); font-size: var(--t-s); }
.imp-resumen p { flex: 1 1 18rem; margin: 0; }
.imp-tabla-caja { max-height: 22rem; overflow: auto; border: 1px solid var(--borde); border-radius: var(--radio); }
.imp-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.imp-tabla th { position: sticky; top: 0; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--borde); background: var(--superficie); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; text-align: left; }
.imp-tabla td { padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
.imp-tabla tr:last-child td { border-bottom: 0; }
.imp-tabla td strong { display: block; font-weight: 550; }
.imp-cuando { white-space: nowrap; font-variant-numeric: tabular-nums; }
.imp-matricula { color: var(--texto-suave); font-size: var(--t-xs); letter-spacing: 0.04em; }
.imp-no-entra td { color: var(--texto-suave); }
.imp-motivo { font-size: var(--t-xs); }

/* ---------- Informe de ahorro ---------- */

.ahorro { display: flex; flex-direction: column; gap: 1rem; max-width: 56rem; }
.ahorro .panel { margin: 0; }
.ah-portada { display: flex; flex-direction: column; gap: 0.5rem; }
.ah-portada p { margin: 0; }
.ah-periodo { color: var(--texto-suave); font-size: var(--t-s); }
.ah-cifra { display: flex; align-items: baseline; gap: 0.625rem; color: var(--acento); }
.ah-cifra .icono { width: 1.75rem; height: 1.75rem; align-self: center; }
.ah-cifra span { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ah-cifra small { color: var(--texto-suave); font-size: var(--t-m); }
.ah-frase { max-width: 40rem; font-size: var(--t-m); line-height: 1.5; }
.ah-grafica { display: block; width: 100%; height: auto; }
.ah-eje { stroke: var(--borde-fuerte); stroke-width: 1; }
.ah-barra { fill: var(--acento); }
.ah-etiqueta { fill: var(--texto-suave); font-size: 11px; text-anchor: middle; }
.ah-indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.ah-indicador { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 0.875rem; border: 1px solid var(--borde); border-radius: var(--radio); }
.ah-indicador strong { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.ah-indicador span { color: var(--texto-suave); font-size: var(--t-xs); }
.ah-tabla-caja { overflow-x: auto; }
.ah-tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.ah-tabla th { padding: 0 0.5rem 0.5rem; border-bottom: 1px solid var(--borde); color: var(--texto-suave); font-size: var(--t-xs); font-weight: 600; text-align: left; }
.ah-tabla td { padding: 0.625rem 0.5rem; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.ah-tabla th:first-child, .ah-tabla td:first-child { padding-left: 0; }
.ah-tabla tfoot td { border-bottom: 0; font-weight: 650; }
.ah-tabla td strong { display: block; font-weight: 550; }
.ah-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ah-explicacion { color: var(--texto-suave); font-size: var(--t-xs); }
.ah-apagada td { color: var(--texto-suave); }
.ah-minutos { width: 4.5rem; text-align: right; }
.ah-suave { color: var(--texto-suave); }
.ah-form-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.875rem; }
.ah-form-pie .ayuda-corta { flex: 1 1 18rem; margin: 0; }

@media print {
  .barra-lateral, .no-imprimir, .toast, .avisos-sistema { display: none !important; }
  .app-layout { display: block; }
  .contenido { padding: 0; }
  .ahorro { max-width: none; }
  .ahorro .panel { break-inside: avoid; box-shadow: none; }
  .ah-minutos { border: 0; background: none; }
}

/* ---------- Avisos breves ---------- */

.toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 300;
  max-width: 24rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radio);
  background: var(--texto);
  box-shadow: var(--sombra-flotante);
  color: var(--superficie);
  font-size: var(--t-s);
  animation: entrar 180ms ease-out;
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 64rem) {
  .inicio-rejilla { grid-template-columns: 1fr; }
  .inicio-estados { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fila-parte { grid-template-columns: 7rem minmax(0, 1fr) auto; }
  .fila-parte .fila-categorias, .fila-parte .fila-fecha { display: none; }
}

@media (max-width: 56rem) {
  .app-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .barra-lateral { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; height: auto; padding: 0.625rem 1rem; }
  .marca { padding: 0; }
  .buscador-global { flex: 1 1 14rem; margin: 0; }
  .nav-principal { flex: 1 1 100%; flex-direction: row; order: 3; overflow-x: auto; }
  .nav-item { width: auto; white-space: nowrap; }
  .nav-item-final { margin-top: 0; }
  .usuario-actual { flex-direction: row; align-items: center; margin: 0 0 0 auto; padding: 0; border: 0; }
  .usuario-actual #nombre-usuario, .pie-version { display: none; }
  .contenido { padding: 1.25rem 1rem 2.5rem; }
  .modal { padding: 0.75rem; }
  .modal-panel { padding: 1.25rem 1rem; }
  .modal-cuerpo { grid-template-columns: 1fr; }
  .modal-panel-orden { padding: 0; }
  .modal-panel-orden .modal-cuerpo { grid-template-columns: 1fr; padding: 1rem; }
  .orden-cabecera { flex-direction: column; gap: 0.75rem; padding: 1rem; }
  .orden-titulo { padding-right: 2.75rem; }
  .orden-titulo h2 { font-size: 1.375rem; }
  .orden-cliente-nombre { flex-basis: 100%; text-align: left; }
  .datos-entrada > .dato-entrada:nth-child(3):last-child { grid-column: 1 / -1; }
  .orden-resumen { align-items: stretch; }
  .orden-total { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .orden-total-cifra { font-size: 1.375rem; }
  .orden-documentos { flex-wrap: nowrap; justify-content: flex-start; }
  .orden-documentos .boton { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  .orden-estado { padding: 1rem; }
  .paso-orden button { font-size: 0.6875rem; }
  .orden-estado-botones { flex: 1 1 100%; justify-content: space-between; }
  .form-rejilla, .co-plazos, .imp-pasos { grid-template-columns: 1fr; }
  .ah-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila-parte, .fila-parte.fila-simple { grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; }
  .fila-parte > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  #buscador, .campo-buscar { width: 100%; }
  .resultados-globales { width: min(22rem, calc(100vw - 2rem)); }
}