/* Plan Retorno · tema «salpicadero de noche» (app del taller)
   Escena: el dueño del taller mira el ordenador del mostrador entre coche y coche, con la luz blanca del taller
   y prisa. Contenido claro y cálido (papel) para leer de un vistazo; el menú, oscuro y en verde petróleo como el
   cuadro de un coche, con los contadores encendidos como testigos. Color con mesura: el verde solo para acciones,
   selección y estados. Solo afecta a /taller (body.crm). Para volver al aspecto anterior basta con quitar este CSS. */

.crm {
  /* Neutros tintados hacia el verde petróleo (nunca blanco ni negro puros) */
  --fondo: oklch(96.6% 0.009 95);            /* papel cálido */
  --tarjeta: oklch(99.3% 0.004 95);
  --tinta: oklch(23% 0.022 215);
  --tinta-2: oklch(42% 0.02 215);
  --tinta-3: oklch(55% 0.018 215);
  --linea: oklch(90.5% 0.01 120);
  --linea-2: oklch(84% 0.012 120);
  --verde: oklch(51% 0.087 184);             /* #0f766e, el color del producto */
  --verde-oscuro: oklch(43% 0.075 186);
  --verde-claro: oklch(94.5% 0.03 178);
  /* El menú: segunda capa neutra, oscura */
  --menu-arriba: oklch(31% 0.045 192);
  --menu-abajo: oklch(20.5% 0.03 205);
  --menu-tinta: oklch(88% 0.02 180);
  --menu-tenue: oklch(70% 0.03 185);
  --testigo: oklch(78% 0.13 172);            /* contador encendido */
  --testigo-ambar: oklch(80% 0.15 72);
  --sombra: 0 1px 1px oklch(23% 0.02 215 / .04), 0 2px 6px -2px oklch(23% 0.02 215 / .08), 0 12px 28px -18px oklch(23% 0.02 215 / .22);
  --sombra-alta: 0 2px 4px oklch(23% 0.02 215 / .06), 0 24px 48px -24px oklch(23% 0.02 215 / .35);
  --radio: 14px;
  --rapida: 180ms cubic-bezier(.25, 1, .5, 1);   /* ease-out-quart */
  background:
    radial-gradient(1200px 520px at 100% -10%, oklch(93% 0.035 178 / .55), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  font-feature-settings: 'ss01', 'tnum' 0;
}

/* ---------- Títulos: Archivo ancha (solo títulos; etiquetas, botones y datos en Figtree) ---------- */
.crm h1, .crm .crm__cabeza h1, .crm .cliente__nombre h1 {
  font-family: var(--titulo); font-weight: 760; font-stretch: 116%; letter-spacing: -.02em; font-size: 30px; line-height: 1.1;
}
.crm .crm__cuantos { font-stretch: 100%; }
.crm .seccion__titulo { font-family: var(--titulo); font-stretch: 112%; font-weight: 700; letter-spacing: .08em; font-size: 12px; color: var(--tinta-3); }
.crm .tabla td, .crm .datos dd, .crm .cuando--toca, .crm .cuando--pronto, .crm .rec__datos, .crm .agenda__hora, .crm .mono { font-variant-numeric: tabular-nums; }

/* ---------- Menú lateral (escritorio) y barras (móvil): el cuadro de mandos ---------- */
.crm .barra {
  background:
    radial-gradient(240px 180px at 0% 0%, oklch(45% 0.07 180 / .45), transparent 70%),
    linear-gradient(180deg, var(--menu-arriba), var(--menu-abajo));
  color: var(--menu-tinta);
  border-color: oklch(30% 0.03 200);
}
.crm .barra__marca { border-bottom-color: oklch(36% 0.035 195); }
.crm .barra__marca b { color: oklch(97% 0.01 180); }
.crm .barra__marca span { color: var(--testigo); }
.crm .barra__logo { background: linear-gradient(145deg, oklch(62% 0.11 176), oklch(45% 0.085 188)); box-shadow: inset 0 1px 0 oklch(85% 0.08 170 / .45), 0 6px 16px -8px oklch(10% 0.02 200 / .8); }
.crm .plegar { background: oklch(28% 0.035 196); border-color: oklch(38% 0.035 195); }
.crm .plegar svg { stroke: var(--menu-tinta); }
.crm .plegar:hover { background: oklch(33% 0.04 194); }
.crm .pestanas a { color: var(--menu-tenue); transition: background-color var(--rapida), color var(--rapida); }
.crm .pestanas a:hover { background: oklch(30% 0.04 194); color: oklch(95% 0.015 180); }
.crm .pestanas a.activo { background: oklch(36% 0.055 186); color: oklch(98% 0.01 180); box-shadow: inset 0 0 0 1px oklch(48% 0.07 180 / .55); }
.crm .pestanas a.activo svg { stroke: var(--testigo); }
/* Testigos: el contador se enciende como una luz del cuadro */
.crm .pestanas .contador { background: var(--testigo); color: oklch(20% 0.04 190); font-weight: 800; box-shadow: 0 0 0 3px oklch(78% 0.13 172 / .14), 0 0 14px oklch(78% 0.13 172 / .55); }
.crm .pestanas .contador--aviso { background: var(--testigo-ambar); color: oklch(24% 0.05 60); box-shadow: 0 0 0 3px oklch(80% 0.15 72 / .15), 0 0 14px oklch(80% 0.15 72 / .55); }
.crm .canal { background: oklch(28% 0.035 196); color: var(--menu-tenue); }
.crm .canal--listo { background: oklch(32% 0.06 180); color: oklch(90% 0.06 172); }
.crm .canal--falta { background: oklch(32% 0.05 70); color: oklch(88% 0.09 75); }
.crm .boton-ajustes { background: transparent; border-color: oklch(36% 0.035 195); color: var(--menu-tenue); }
.crm .boton-ajustes svg { stroke: var(--menu-tenue); }
.crm .boton-ajustes:hover { background: oklch(30% 0.04 194); color: oklch(95% 0.015 180); }
@media (min-width: 861px) {
  .crm.menu-plegado .canal--listo { background: var(--testigo); box-shadow: 0 0 10px oklch(78% 0.13 172 / .7); }
  .crm.menu-plegado .canal--falta { background: var(--testigo-ambar); box-shadow: 0 0 10px oklch(80% 0.15 72 / .7); }
}
@media (max-width: 860px) {
  /* Móvil: barra de arriba y de abajo con el mismo cuadro oscuro */
  .crm .pestanas { background: linear-gradient(180deg, var(--menu-arriba), var(--menu-abajo)); border-top-color: oklch(30% 0.03 200); }
  .crm .pestanas a.activo { background: oklch(34% 0.05 186); }
  .crm .barra .boton-ajustes { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
}

/* ---------- Superficies ---------- */
.crm .caja, .crm .chat__lista, .crm .agenda__rejilla, .crm .agenda__pedidas {
  background: var(--tarjeta); border-color: var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
}
.crm .caja { position: relative; }
/* Un filo de luz arriba en las tarjetas (no una franja de color) */
.crm .caja::before { content: ''; position: absolute; inset: 0 0 auto; height: 1px; border-radius: var(--radio) var(--radio) 0 0; background: linear-gradient(90deg, transparent, oklch(99.5% 0.004 95 / .95), transparent); pointer-events: none; }
.crm .tabla th { color: var(--tinta-3); font-size: 12.5px; letter-spacing: .02em; }
.crm .tabla tbody tr { transition: background-color var(--rapida); }
.crm .tabla tbody tr:hover td { background: oklch(97% 0.015 175); }
.crm .buscar { background: var(--tarjeta); border-color: var(--linea-2); transition: border-color var(--rapida), box-shadow var(--rapida); }
.crm .buscar:focus { outline: none; border-color: var(--verde); box-shadow: 0 0 0 3px oklch(51% 0.087 184 / .16); }

/* ---------- Botones ---------- */
.crm .boton { background: var(--tarjeta); border-color: var(--linea-2); color: var(--tinta); transition: background-color var(--rapida), border-color var(--rapida), box-shadow var(--rapida), transform var(--rapida); }
.crm .boton:hover { border-color: var(--tinta-3); box-shadow: 0 2px 8px -4px oklch(23% 0.02 215 / .25); }
.crm .boton--verde {
  background: linear-gradient(180deg, oklch(55% 0.095 181), oklch(47% 0.082 186));
  border-color: oklch(44% 0.075 187); color: oklch(99% 0.005 180);
  box-shadow: inset 0 1px 0 oklch(80% 0.08 175 / .45), 0 6px 14px -8px oklch(40% 0.08 186 / .8);
}
.crm .boton--verde:hover { background: linear-gradient(180deg, oklch(58% 0.1 180), oklch(49% 0.086 185)); border-color: oklch(44% 0.075 187); box-shadow: inset 0 1px 0 oklch(82% 0.08 175 / .5), 0 10px 18px -10px oklch(40% 0.08 186 / .9); }
.crm .boton:focus-visible, .crm .enlace:focus-visible, .crm a:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.crm .icono-boton:not(.boton-ajustes) { background: var(--tarjeta); }

/* ---------- Avisos de arriba: tinte suave, sin franjas ---------- */
.crm .noti { background: linear-gradient(100deg, oklch(95% 0.03 250), oklch(97% 0.015 230)); border-color: oklch(86% 0.045 250); box-shadow: var(--sombra); }
.crm .noti__icono { background: linear-gradient(145deg, oklch(60% 0.15 255), oklch(50% 0.15 260)); }

/* ---------- Ficha del cliente ---------- */
.crm .cliente__avatar { background: linear-gradient(145deg, oklch(62% 0.11 176), oklch(45% 0.085 188)); color: oklch(98% 0.01 180); box-shadow: 0 8px 18px -10px oklch(40% 0.08 186 / .9); }
.crm .regla-itv { background: oklch(95.5% 0.028 178); color: oklch(38% 0.07 186); }
.crm .rec__siguiente { background: oklch(96% 0.022 178); color: oklch(38% 0.07 186); }
.crm .rec__siguiente--enviado { background: oklch(96% 0.03 145); color: oklch(40% 0.08 148); }
.crm .otro-coche { border-color: var(--linea-2); color: var(--tinta-2); }
.crm .otro-coche:hover { border-color: var(--verde); color: var(--verde-oscuro); background: oklch(97% 0.015 175); }
.crm .matricula { box-shadow: 0 1px 0 oklch(23% 0.02 215 / .08); }

/* ---------- Agenda ---------- */
.crm .agenda__dia { background: var(--tarjeta); }
.crm .agenda__dia--hoy { background: oklch(95% 0.03 178); color: var(--verde-oscuro); }
.crm .cita-ag { background: linear-gradient(180deg, oklch(55% 0.095 181), oklch(47% 0.082 186)); color: oklch(99% 0.005 180); box-shadow: inset 0 1px 0 oklch(80% 0.08 175 / .4); }
.crm .cita-ag--vino { background: oklch(90% 0.012 200); color: var(--tinta-2); box-shadow: none; }
.crm .tarjeta-cita { background: oklch(97% 0.02 178); border-color: oklch(70% 0.08 180); }

/* ---------- Panel lateral, velo y avisos flotantes ---------- */
.crm .ficha { background: var(--fondo); box-shadow: var(--sombra-alta); }
.crm .velo { background: oklch(20% 0.03 205 / .38); }
.crm .avisos .aviso { background: linear-gradient(180deg, var(--menu-arriba), var(--menu-abajo)); color: oklch(95% 0.015 180); box-shadow: var(--sombra-alta); }

/* ---------- Formularios ---------- */
.crm .campo input, .crm .campo select, .crm .chat__escribir input { background: var(--tarjeta); border-color: var(--linea-2); transition: border-color var(--rapida), box-shadow var(--rapida); }
.crm .campo input:focus, .crm .campo select:focus { border-color: var(--verde); box-shadow: 0 0 0 3px oklch(51% 0.087 184 / .16); }
.crm .bloque-form { background: var(--tarjeta); border-color: var(--linea); }
.crm .filtros button[aria-pressed="true"], .crm .letras button[aria-pressed="true"] { background: linear-gradient(180deg, oklch(55% 0.095 181), oklch(47% 0.082 186)); border-color: oklch(44% 0.075 187); }

@media (prefers-reduced-motion: reduce) {
  .crm *, .crm *::before, .crm *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* ---------- Varios coches: pestañas en la ficha y una línea por coche en la tabla ---------- */
.crm .coches-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: -2px -2px 0; scrollbar-width: thin; }
.crm .coche-tab {
  display: grid; grid-template-columns: auto; justify-items: start; gap: 4px; min-width: 168px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--linea-2); border-radius: 12px; background: var(--tarjeta); color: var(--tinta); cursor: pointer;
  transition: border-color var(--rapida), box-shadow var(--rapida), background-color var(--rapida);
}
.crm .coche-tab:hover { border-color: var(--tinta-3); }
.crm .coche-tab[aria-selected="true"] { border-color: var(--verde); background: oklch(97% 0.02 178); box-shadow: 0 0 0 3px oklch(51% 0.087 184 / .14); }
.crm .coche-tab__modelo { font-weight: 700; font-size: 14.5px; }
.crm .coche-tab__estado { font-size: 12.5px; color: var(--tinta-3); }
.crm .coche-tab__estado--toca { color: oklch(48% 0.12 60); font-weight: 700; }
.crm .coche-tab--nuevo { min-width: 0; align-content: center; justify-items: center; border-style: dashed; color: var(--tinta-2); font-weight: 700; background: transparent; }
.crm .coche-tab--nuevo:hover { border-color: var(--verde); color: var(--verde-oscuro); }
.crm .coche-caja__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.crm .coche-caja__cabeza .seccion__titulo { margin: 0; }
.crm .coche-caja__recs { margin: 22px 0 2px; padding-top: 18px; border-top: 1px solid var(--linea); }
.crm .datos--fila { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.crm .coche-fila--linea { display: flex; align-items: center; gap: 8px; }
.crm .coche-fila--linea .sub { display: inline; }
.crm .coche-fila--linea + .coche-fila--linea { margin-top: 5px; }