:root { --azul: #0E2A47; --azul-osc: #0a1f36; --naranja: #FF6B2C; --naranja-osc: #e85d1f; --tinta: #1a1f29; --gris: #f4f5f7; --linea: #e3e6ea; --verde: #137333; --ambar: #9a6700; --rojo: #b3261e; /* Texto atenuado (etiquetas, notas al pie…): #5b6675 sobre blanco da ratio ~5.8:1 (AA). El antiguo #8595a8, disperso por el CSS, solo daba ~3:1 → se unificó aquí (auditoría P2). */ --texto-suave: #5b6675; /* Tintes/veos de marca DERIVADOS de --azul/--naranja con `color-mix()`: se recalculan solos al cambiar de tema (el skin Sobrio solo redefine --azul/--naranja, arriba) en vez de duplicar cada rgba(...) a mano. El sufijo es el % de alpha. */ --azul-a07: color-mix(in srgb, var(--azul) 7%, transparent); --azul-a12: color-mix(in srgb, var(--azul) 12%, transparent); --azul-a14: color-mix(in srgb, var(--azul) 14%, transparent); --azul-a45: color-mix(in srgb, var(--azul) 45%, transparent); --azul-a90: color-mix(in srgb, var(--azul) 90%, transparent); --naranja-a10: color-mix(in srgb, var(--naranja) 10%, transparent); --naranja-a15: color-mix(in srgb, var(--naranja) 15%, transparent); --naranja-a50: color-mix(in srgb, var(--naranja) 50%, transparent); } /* Skin "Sobrio" (variante CLARA, mismo layout): solo cambian los tokens de color de marca (azul/naranja) — TODOS los tintes/veos de arriba se derivan de estos dos con `color-mix()`, así que recolorean solos, sin duplicar reglas. Tinta/gris/línea y los semánticos verde/ámbar/rojo se mantienen. Se activa con la clase `tema-sobrio` en el (preferencia `taller.tema_visual`). El portal del cliente es white-label: NUNCA hereda este tema (usa su propia paleta `--p-*`). */ .tema-sobrio { --azul: #2f3e4f; --azul-osc: #243140; --naranja: #c2613a; --naranja-osc: #a8512e; } /* Foco visible global (accesibilidad, WCAG 2.4.7): outline consistente con el naranja de marca para CUALQUIER elemento interactivo (enlaces, botones, campos, y elementos custom con tabindex/role="button", p. ej. los pins de la inspección). Solo se pinta con teclado (:focus-visible), nunca al hacer clic con ratón. Los focos ya diseñados a medida (inputs con anillo `box-shadow`, pestañas) tienen mayor especificidad y ganan donde ya existían. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--naranja); outline-offset: 2px; border-radius: 4px; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--gris); } a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; } /* Layout: barra lateral + (topbar + contenido) */ .app { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { /* Con logo de marca OSCURO, la barra ENTERA se pinta de ese color (`--menu-fondo`) para que el logo se funda con el menú, igual que la ventana de login. Sin logo (o con uno claro, que dejaría los textos ilegibles) se mantiene el degradado azul de Cocopit. */ background: var(--menu-fondo, linear-gradient(180deg, var(--azul), var(--azul-osc))); color: #cdd9e8; display: flex; flex-direction: column; padding: .9rem .7rem; } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.1rem; color: #fff; padding: .45rem .5rem 1rem; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--azul), #3b82f6); color: #fff; font-size: .78rem; font-weight: 800; } /* Marca Cocopit en el sidebar (backend) */ .brand-ico { width: 30px; height: 30px; flex: 0 0 auto; } /* El arco del isotipo sigue el token de marca (CSS gana al atributo `stroke` del SVG): así el skin Sobrio recolorea también el logo, sin un segundo SVG. */ .brand-ico-arc { stroke: var(--naranja); } .brand-txt { font-weight: 800; letter-spacing: -.02em; color: #fff; font-size: 1.18rem; } .brand-pit { color: var(--naranja); } /* Logo del TALLER en la cabecera del menú: ocupa el ancho disponible con alto libre (`contain`), nunca una caja fija que lo deforme. SIN fondo propio: la cabecera ya viene teñida del color de fondo del logo (ver `color_marca.py`), así el logo se funde con ella en vez de verse como un recorte pegado encima. */ .brand-logo-taller { width: 100%; max-height: 64px; height: auto; object-fit: contain; display: block; } .ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: 0 0 auto; } .sidebar nav { display: flex; flex-direction: column; gap: .12rem; } /* Textos del menú en BLANCO (petición del dueño 13-08-2026): el menú puede ir teñido con el color del taller, y el celeste/gris de antes se leía flojo sobre cualquier azul. Los encabezados van en blanco atenuado para conservar la jerarquía sin perder contraste. */ .nav-grupo { padding: .9rem .6rem .3rem; font-size: .67rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.72); } .nav-item { display: flex; align-items: center; gap: .65rem; color: #fff; padding: .52rem .6rem; border-radius: 9px; font-size: .92rem; position: relative; } .nav-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; } .nav-item .ico { width: 19px; height: 19px; opacity: .95; } /* Sección activa: fondo y barra con el color de ACENTO del logo del taller (el amarillo del coche en el piloto); sin logo, el naranja de Cocopit de siempre. */ .nav-item.activo { background: var(--acento-suave, var(--naranja-a15)); color: #fff; font-weight: 600; } .nav-item.activo .ico { opacity: 1; color: var(--acento, #ff9b6b); } .nav-item.activo::before { content: ""; position: absolute; left: -.7rem; top: 18%; bottom: 18%; width: 3px; border-radius: 0 3px 3px 0; background: var(--acento, var(--naranja)); } /* Subgrupos colapsables de Configuración (Taller/Maestros/Datos/Sistema): mismo lenguaje visual que `.nav-grupo` pero clicable (`
`, sin JS obligatorio; nativo del navegador, funciona igual dentro del drawer móvil). Colapsado por defecto; el que contiene la ruta activa se abre server-side con el atributo `open` (ver base.html). */ .nav-sub { margin: 0; } .nav-sub-titulo { display: flex; align-items: center; gap: .65rem; cursor: pointer; list-style: none; padding: .52rem .6rem; border-radius: 9px; color: rgba(255,255,255,.82); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; -webkit-user-select: none; user-select: none; } .nav-sub-titulo::-webkit-details-marker { display: none; } .nav-sub-titulo:hover { background: rgba(255,255,255,.07); color: #fff; } .nav-sub-titulo .ico { width: 18px; height: 18px; opacity: .8; flex: 0 0 auto; } /* Flecha propia (no dependemos del marcador nativo, distinto por navegador): rota al abrir. */ .nav-sub-titulo::after { content: ""; margin-left: auto; width: 7px; height: 7px; flex: 0 0 auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; opacity: .7; } .nav-sub[open] > .nav-sub-titulo::after { transform: rotate(45deg); } .nav-sub-items { display: flex; flex-direction: column; gap: .12rem; margin: .1rem 0 .3rem .95rem; padding-left: .5rem; border-left: 2px solid rgba(255,255,255,.08); } .sidebar-pie { margin-top: auto; padding-top: .5rem; } /* Indicador de sincronización (solo escritorio): estado del servidor + cola offline-first */ .sync-box { margin: .4rem .15rem .2rem; padding: .5rem .6rem; border-radius: 8px; background: rgba(255,255,255,.06); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .8rem; color: #cfe0f0; } .sync-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: #93a7bd; } .sync-ok .sync-dot { background: #34d399; } /* verde: en línea */ .sync-off .sync-dot { background: #f59e0b; } /* ámbar: sin conexión */ .sync-local .sync-dot { background: #93a7bd; } /* gris: solo local */ .sync-txt { font-weight: 600; } .sync-cola { width: 100%; color: #ffd9a8; font-size: .78rem; } /* cambios en cola */ .sync-cola-ok { color: #93a7bd; } .sync-btn { background: rgba(255,255,255,.12); color: #fff; border: 0; padding: .2rem .55rem; border-radius: 6px; font-size: .78rem; cursor: pointer; } .sync-btn:hover { background: rgba(255,255,255,.22); text-decoration: none; } .sync-btn[disabled] { opacity: .5; cursor: default; } /* Mini-form para pegar el token de dispositivo (M2) cuando el servidor lo exige. */ .sync-token-form { width: 100%; display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .2rem; } .sync-token-aviso { width: 100%; margin: 0 0 .15rem; color: #ffd9a8; font-size: .76rem; } .sync-token-input { flex: 1 1 8rem; min-width: 0; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; padding: .2rem .4rem; font-size: .76rem; } /* Resultado de "Guardar código" (`sync_token_guardar`): fondo propio, se ve tanto dentro de la topbar oscura como en la página clara de Conexión (escritorio VIRGEN, sin `.sync-box` alrededor). */ .sync-token-mensaje { margin: .3rem .15rem; padding: .3rem .55rem; border-radius: 6px; background: var(--azul-a07); color: var(--azul); font-size: .8rem; font-weight: 600; } /* main = topbar pegajosa + contenido */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: .6rem 1.4rem; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linea); } .content { padding: 1.6rem 2rem; max-width: 1560px; width: 100%; } /* Búsqueda global (topbar) */ .buscador-global { position: relative; display: flex; align-items: center; gap: .5rem; flex: 1; max-width: 560px; background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 0 .7rem; } .buscador-global:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-a12); } .buscador-global .ico-buscar { width: 18px; height: 18px; color: var(--texto-suave); } .buscador-global input { flex: 1; min-width: 0; border: 0; outline: 0; padding: .55rem 0; font-size: .95rem; background: transparent; color: var(--tinta); } .buscar-resultados:empty { display: none; } .buscar-resultados { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; background: #fff; border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 12px 30px rgba(16,32,56,.16); max-height: 70vh; overflow: hidden auto; z-index: 40; } .res-grupo { padding: .5rem .8rem .25rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); background: #fafbfc; } .res-item { display: flex; align-items: center; gap: .7rem; padding: .55rem .8rem; border-top: 1px solid #f0f2f5; color: var(--tinta); } .res-item:hover { background: #f3f8ff; text-decoration: none; } .res-item .ico { width: 18px; height: 18px; color: var(--texto-suave); } .res-titulo { font-weight: 600; } .res-sub { color: #6b7891; font-size: .85rem; } .res-vacio { padding: .9rem; color: #6b7891; font-size: .9rem; } /* Glóbulo de notificaciones del portal (topbar, A5) */ .globulo-portal { display: inline-flex; align-items: center; position: relative; padding: .25rem .3rem; border-radius: 8px; color: var(--texto-suave); text-decoration: none; } .globulo-portal:hover { background: #f0f2f5; text-decoration: none; } .globulo-con-badge .ico { color: var(--azul); } .globulo-sin-badge .ico { color: var(--texto-suave); } .globulo-badge { position: absolute; top: -.1rem; right: -.25rem; background: var(--rojo); color: #fff; font-size: .68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; padding: 0 .3rem; line-height: 1; } /* Mensajes cliente↔taller (pestaña Mensajes de la ficha de cliente) */ /* El bloque entero se acota a ancho de "chat": en pantallas grandes el hilo a página completa dejaba la burbuja del taller perdida en el borde derecho. */ #mensajes-cliente { max-width: 760px; } .mensajes-hilo { display: flex; flex-direction: column; gap: .6rem; padding: .6rem 0 1rem; max-height: 480px; overflow-y: auto; } .mensaje-burbuja { max-width: 75%; padding: .5rem .85rem; border-radius: 12px; font-size: .93rem; } .mensaje-taller { align-self: flex-end; background: var(--azul); color: #fff; border-bottom-right-radius: 4px; } .mensaje-cliente { align-self: flex-start; background: #f0f2f5; color: var(--tinta); border-bottom-left-radius: 4px; } .mensaje-meta { font-size: .76rem; margin-top: .3rem; opacity: .75; } .mensaje-taller .mensaje-meta { color: rgba(255, 255, 255, .88); opacity: 1; } .mensajes-form { border-top: 1px solid var(--linea); padding-top: .8rem; display: flex; flex-direction: column; gap: .5rem; } .mensajes-label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); } .mensajes-form textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: .95rem; padding: .55rem .7rem; border: 1px solid var(--linea); border-radius: 10px; resize: vertical; background: #fff; } .mensajes-form textarea:focus { border-color: var(--azul); outline: 1px solid var(--azul); } .mensajes-acciones { display: flex; justify-content: flex-end; } .topbar-taller { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--texto-suave); white-space: nowrap; margin-left: auto; } .punto-taller { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); } h1 { margin: 0 0 1rem; font-size: 1.5rem; color: var(--tinta); } h2 { margin: 1.6rem 0 .6rem; font-size: 1.15rem; } .cabecera { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* KPIs (web del TALLER) — escritorio (≥900px): una sola fila que se reparte el ancho SIEMPRE (flex:1 por tarjeta, sin `wrap` real gracias a `min-width:0`); vale igual con 8 tarjetas o con 7 (KPI "Bandeja" gateado sin el módulo portal, ver `modulos_activos`). Móvil (≤899px): rejilla FIJA de 4 columnas (4+4, decisión del dueño; con 7 tarjetas la última fila queda 4+3). El portal del CLIENTE usa sus propias tarjetas (`.portal-tarjetas`, portal.css), NO esto. */ .kpis { display: flex; gap: 1rem; flex-wrap: wrap; } .kpi { background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 1rem .6rem; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; flex: 1 1 0; } @media (max-width: 899px) { .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .kpi { padding: .7rem .3rem; } /* El número se ADAPTA al ancho real: con un importe largo ("54.354,97 €") un tamaño fijo se salía de la tarjeta y se pisaba con la de al lado (visto en vivo en un móvil, 13-08-2026). */ .kpi .num { font-size: clamp(.95rem, 4.2vw, 1.5rem); overflow-wrap: anywhere; } .kpi .lbl { font-size: .75rem; overflow-wrap: anywhere; } .kpi-destacado .num { font-size: clamp(1.3rem, 6vw, 2.4rem); } /* Los KPI de informes llevan IMPORTES: en móvil, 2 columnas (4 no caben legibles). */ .informe-kpi-fila-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } } .kpi .kpi-ico { font-size: 1.6rem; line-height: 1; margin-bottom: .3rem; } .kpi .num { font-size: 2rem; font-weight: 700; color: var(--azul); line-height: 1; } .kpi .lbl { color: var(--texto-suave); font-size: .9rem; margin-top: .3rem; } /* KPI clicable (enlace a su apartado) */ a.kpi { transition: border-color .15s, box-shadow .15s, transform .15s; } a.kpi:hover { text-decoration: none; border-color: var(--azul); box-shadow: 0 2px 10px var(--azul-a12); transform: translateY(-1px); } /* === KPIs del panel — Opción A (métrica analítica): tarjetas chip·número·etiqueta === Estilo `kpis_dashboard="a"`. MISMA mecánica que `.kpis` clásico: escritorio (≥900px) FLEX de una sola fila que se reparte el ancho SIEMPRE (flex:1, sin wrap real); vale igual con 8 tarjetas o con 7 (KPI "Bandeja" gateado sin el módulo portal). Móvil (≤899px): rejilla FIJA de 4 columnas (4+4; con 7 tarjetas la última fila queda 4+3). Estructura vertical de cada tarjeta: chip ARRIBA · número en el CENTRO · etiqueta ABAJO. */ .kA-grid { display: flex; flex-wrap: wrap; gap: .8rem; } .kA { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--linea); border-radius: 14px; padding: .9rem .6rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .4rem; color: var(--tinta); transition: border-color .15s, box-shadow .15s, transform .15s; } @media (max-width: 899px) { .kA-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; } .kA { padding: .7rem .3rem; } } a.kA:hover { text-decoration: none; border-color: #d4dae3; box-shadow: 0 6px 18px rgba(16,32,56,.1); transform: translateY(-2px); } .kA-chip { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #e7f0fb; color: var(--azul); flex: 0 0 auto; } .kA-chip svg { width: 17px; height: 17px; } .kA-num { font-size: 1.95rem; font-weight: 700; line-height: 1; color: var(--azul); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kA-lbl { font-weight: 700; font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: #6b7891; } /* Acento (naranja de marca) para el KPI más relevante; alerta (rojo) cuando hay pendientes. */ .kA.acento .kA-chip { background: #ffe9dd; color: var(--naranja-osc); } .kA.acento .kA-num { color: var(--naranja-osc); } .kA.alerta .kA-chip { background: #fde8e6; color: var(--rojo); } .kA.alerta .kA-num { color: var(--rojo); } /* === KPIs del panel — Opción B: un KPI destacado + barra segmentada === Estilo `kpis_dashboard="b"`. */ .kB-wrap { display: grid; grid-template-columns: 280px 1fr; gap: .9rem; } @media (max-width: 900px) { .kB-wrap { grid-template-columns: 1fr; } } .kB-feat { background: linear-gradient(135deg, var(--azul), var(--azul-osc)); color: #fff; border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; min-height: 152px; transition: box-shadow .15s, transform .15s; } a.kB-feat:hover { text-decoration: none; box-shadow: 0 10px 26px rgba(16,32,56,.22); transform: translateY(-2px); } /* El "glow" usa --naranja-a50 (color-mix): se recolorea solo con el tema, sin duplicar regla. */ .kB-feat .glow { position: absolute; width: 170px; height: 170px; right: -44px; bottom: -54px; background: radial-gradient(circle, var(--naranja-a50), transparent 70%); } .kB-feat .lbl { font-weight: 700; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: #9fb6d4; position: relative; } .kB-feat .num { font-size: 2.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; position: relative; margin-top: .4rem; } .kB-feat .foot { display: flex; align-items: center; gap: .5rem; position: relative; font-size: .8rem; color: #c4d4e6; } /* 7 celdas (agenda·presupuestos·avisos·bandeja·pedidos·clientes·vehículos; 6 sin el módulo portal, ver `modulos_activos`): FLEX de una sola fila (como `.kpis`/`.kA-grid`) en vez de una rejilla de columnas fijas — 6 y 7 no son múltiplo de 4, así que una rejilla fija dejaba la última fila con hueco; el FLEX reparte el ancho exacto SIEMPRE, sea cual sea el nº de celdas. */ .kB-seg { background: #fff; border: 1px solid var(--linea); border-radius: 16px; display: flex; overflow: hidden; } .kB-cell { flex: 1 1 0; min-width: 0; padding: .9rem 1rem; border-left: 1px solid var(--linea); display: flex; flex-direction: column; gap: .5rem; color: var(--tinta); } .kB-cell:first-child { border-left: 0; } a.kB-cell:hover { text-decoration: none; background: #f8fafc; } .kB-bar { height: 3px; width: 26px; border-radius: 3px; background: var(--azul); } .kB-cell.amb .kB-bar { background: var(--ambar); } .kB-cell.nar .kB-bar { background: var(--naranja); } .kB-cell.rojo .kB-bar { background: var(--rojo); } .kB-cell.verde .kB-bar { background: var(--verde); } .kB-r { display: flex; align-items: center; justify-content: space-between; } .kB-num { font-size: 1.65rem; font-weight: 700; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kB-cell.rojo .kB-num { color: var(--rojo); } .kB-ico { width: 17px; height: 17px; color: #6b7891; } .kB-lbl { font-size: .8rem; color: var(--texto-suave); font-weight: 500; } @media (max-width: 560px) { .kB-seg { display: grid; grid-template-columns: repeat(2, 1fr); } .kB-cell:nth-child(odd) { border-left: 0; } } /* Tablas */ .tabla { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); border-radius: 10px; overflow: hidden; margin-top: .6rem; } .tabla th, .tabla td { text-align: left; padding: .55rem .8rem; border-bottom: 1px solid var(--linea); } .tabla thead th { background: #fafbfc; font-size: .85rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .02em; } .tabla tbody tr:hover { background: #f8fafc; } .tabla .num { text-align: right; font-variant-numeric: tabular-nums; } .tabla tfoot th { background: #fafbfc; } .tabla tfoot .total-final th { font-size: 1.05rem; color: var(--azul); } /* Estados */ .estado { padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef1f5; color: var(--texto-suave); } .estado-abierta, .estado-en_curso { background: #e7f0fb; color: var(--azul); } .estado-terminada, .estado-entregada { background: #e6f4ea; color: var(--verde); } .estado-facturada { background: #fff4e5; color: var(--ambar); } .estado-anulada { background: #fde8e6; color: var(--rojo); } /* Estados de cita (agenda) */ .estado-pendiente { background: #fff4e5; color: var(--ambar); } .estado-propuesta { background: #fff0d6; color: #b36b00; } .estado-confirmada { background: #e7f0fb; color: var(--azul); } .estado-cumplida { background: #e6f4ea; color: var(--verde); } .estado-cancelada { background: #eef1f5; color: var(--texto-suave); } /* Mini-form «Proponer otra fecha» en la bandeja */ .cita-proponer-form { padding: .6rem .2rem; } .proponer-campos { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; } .form-label-mini { display: flex; flex-direction: column; font-size: .9rem; gap: .2rem; } .input-mini { font-size: .9rem; padding: .3rem .5rem; border: 1px solid var(--linea); border-radius: 6px; } .proponer-acciones { display: flex; gap: .5rem; align-items: center; } /* Logo / monograma de marca de vehículo (assets en static/adm_ui/marcas/) */ .marca-logo, .marca-mono { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; vertical-align: middle; border-radius: 8px; overflow: hidden; } .marca-logo { background: #fff; border: 1px solid var(--linea); } .marca-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; } .marca-mono { color: #fff; font-weight: 700; line-height: 1; } .marca-logo-sm, .marca-mono.marca-logo-sm { width: 24px; height: 24px; font-size: .8rem; border-radius: 6px; } .marca-logo-md, .marca-mono.marca-logo-md { width: 36px; height: 36px; font-size: 1rem; } .marca-logo-lg, .marca-mono.marca-logo-lg { width: 56px; height: 56px; font-size: 1.5rem; border-radius: 12px; } .titulo-marca { display: flex; align-items: center; gap: .7rem; } .titulo-marca h1 { margin: 0; } .titulo-marca .nota { margin: .1rem 0 0; } .celda-marca { display: inline-flex; align-items: center; gap: .5rem; } /* Ficha de marca: cabecera (editar + logo) */ .marca-cabecera { margin-bottom: 1.6rem; } /* Tarjeta única al ancho del contenido, con dos columnas (datos | logo). */ .marca-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1rem; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 1.2rem 1.4rem; } .marca-editor-col { display: flex; flex-direction: column; gap: .7rem; min-width: 0; } .marca-editor .panel-titulo { margin: 0; font-size: 1rem; color: var(--tinta); } .marca-editor form { margin: 0; } .marca-editor .marca-campo { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--texto-suave); margin-bottom: .7rem; } .marca-editor .marca-campo input { width: 100%; box-sizing: border-box; padding: .5rem .7rem; border: 1px solid var(--linea); border-radius: 8px; font-size: 1rem; color: var(--tinta); } .marca-editor .marca-campo input:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-a12); } .marca-editor .acciones { margin-top: 1rem; } .marca-editor .check-inline { margin-bottom: .2rem; } .marca-logo-quitar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem; } /* Zona de arrastrar y soltar (logo): label clicable + drag&drop. */ .dropzone { display: flex; flex-direction: row; align-items: center; gap: .9rem; text-align: left; border: 2px dashed var(--linea); border-radius: 10px; background: #fafbfc; padding: .8rem 1rem; cursor: pointer; transition: border-color .15s, background .15s; } .dropzone:hover, .dropzone:focus-within { border-color: var(--azul); background: #f3f8ff; } .dropzone.dragover { border-color: var(--azul); border-style: solid; background: #eaf2fd; } .dropzone-preview { pointer-events: none; flex: 0 0 auto; } .dropzone-txt { display: flex; flex-direction: column; gap: .12rem; min-width: 0; } .dropzone-texto { margin: 0; font-size: .9rem; font-weight: 600; color: var(--tinta); } .dropzone-nota { margin: 0; font-size: .8rem; color: var(--texto-suave); } .check-inline, .form label.check-inline { display: flex; flex-direction: row; align-items: center; gap: .4rem; white-space: nowrap; } .check-inline input { width: auto; } .en-produccion { color: var(--verde); font-style: italic; } @media (max-width: 720px) { .marca-editor { grid-template-columns: 1fr; } } /* Combustibles del modelo: abreviaturas (vista) + checklist (edición) */ .combustibles-abrev { display: inline-flex; gap: .25rem; flex-wrap: wrap; } .combustible-chip { display: inline-block; min-width: 1.5rem; padding: .1rem .3rem; border-radius: 5px; font-size: .72rem; font-weight: 600; text-align: center; letter-spacing: .02em; background: #eef1f5; color: #aab4c0; border: 1px solid transparent; } .combustible-chip.on { background: var(--azul); color: #fff; } .combustibles-check { display: flex; gap: .3rem; flex-wrap: wrap; } .combustible-opcion { display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .35rem; cursor: pointer; border: 1px solid #cdddf1; border-radius: 5px; background: #fff; font-size: .72rem; font-weight: 600; white-space: nowrap; user-select: none; } /* No estirar los checkboxes con la regla genérica de `.fila-edicion input` */ .combustibles-check input[type="checkbox"] { width: auto; margin: 0; padding: 0; } .combustible-opcion:has(input:checked) { background: var(--azul); color: #fff; border-color: var(--azul); } /* Alta de línea (presupuesto / OR): bloque ENCIMA de la tabla, cada campo ETIQUETADO y alineado. */ .linea-nueva { margin: 0 0 1rem; padding: 1rem 1.2rem; background: #f7faff; border: 1px solid var(--linea); border-radius: 12px; } .linea-nueva-titulo { margin: 0 0 .8rem; font-size: 1rem; color: var(--tinta); } .linea-nueva-campos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem .9rem; } .linea-nueva label { display: flex; flex-direction: column; gap: .25rem; font-size: .78rem; font-weight: 600; color: var(--texto-suave); } .linea-nueva input, .linea-nueva select { padding: .45rem .6rem; border: 1px solid var(--linea); border-radius: 8px; font-size: .95rem; color: var(--tinta); background: #fff; } .linea-nueva input:focus, .linea-nueva select:focus { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-a12); } .linea-nueva .campo-desc { flex: 1 1 260px; position: relative; } .linea-nueva .campo-desc input { width: 100%; } .linea-nueva .campo-num input { width: 5.5rem; text-align: right; } .linea-nueva button[type=submit] { margin-left: auto; } @media (max-width: 720px) { .linea-nueva .campo-desc { flex-basis: 100%; } .linea-nueva button[type=submit] { margin-left: 0; } } /* Stepper de cantidad: input + botones −/+ (alta de línea y edición inline). */ .stepper { display: inline-flex; align-items: stretch; } .stepper > button { flex: 0 0 auto; width: 1.9rem; padding: 0; border: 1px solid var(--linea); background: #fff; color: var(--tinta); font-size: 1.05rem; line-height: 1; cursor: pointer; } .stepper > button:first-child { border-radius: 8px 0 0 8px; } .stepper > button:last-child { border-radius: 0 8px 8px 0; } .stepper > button:hover { background: #eef3fb; border-color: var(--azul); color: var(--azul); } .stepper > input { width: 3rem !important; text-align: center; border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; } .fila-edicion .stepper > button { padding: .25rem 0; } .fila-edicion .stepper > input { width: 2.6rem !important; } /* Sugerencias de artículo en el campo Descripción de "Añadir línea" (lineas.js). */ .articulo-sugerencias { position: absolute; top: calc(100% + .25rem); left: 0; right: 0; z-index: 60; margin: 0; padding: .25rem; list-style: none; background: #fff; border: 1px solid var(--linea); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,32,56,.16); max-height: 260px; overflow: auto; } .articulo-sugerencia { display: flex; align-items: baseline; gap: .55rem; padding: .4rem .55rem; border-radius: 7px; cursor: pointer; font-size: .9rem; font-weight: 400; } .articulo-sugerencia:hover { background: #f3f8ff; } .articulo-sugerencia .art-desc { flex: 1 1 auto; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .articulo-sugerencia .art-ref { flex: 0 0 auto; color: var(--texto-suave); font-size: .8rem; } .articulo-sugerencia .art-pvp { flex: 0 0 auto; color: var(--azul); font-weight: 600; } /* Prioridad de la OR (cola de trabajo: baja / normal / alta / urgente) */ .prioridad { padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef1f5; color: var(--texto-suave); } .prioridad-baja { background: #eef1f5; color: var(--texto-suave); } .prioridad-normal { background: #e7f0fb; color: var(--azul); } .prioridad-alta { background: #fff4e5; color: var(--ambar); } .prioridad-urgente { background: #fde8e6; color: var(--rojo); } /* Tipo de orden (categoría predefinida: mantenimiento / avería / pre-ITV…) */ .chip-tipo { padding: .1rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #ede9fe; color: #6d28d9; } .filtro-tipo { margin: .4rem 0 .2rem; } /* La clase vale tanto en el contenedor (uso antiguo) como en el propio