/* =========================================================================== RemotPress Taller — Panel del taller (2026-08) Hoja NUEVA e independiente: no toca style.css, que sigue sirviendo a index.php y a empresa.php sin cambios. TEMA: claro y oscuro. Por defecto sigue al sistema (prefers-color-scheme); el botón de la cabecera pone data-theme en y eso manda sobre todo. =========================================================================== */ /* ---------- Tema claro (base) ---------- */ :root{ color-scheme:light; --rp-blue:#1d4ed8; /* azul corporativo */ --rp-blue-600:#1e40af; --rp-blue-400:#3b82f6; --rp-blue-50:#e0e7ff; /* azul claro */ --rp-cyan:#06b6d4; --rp-bg:#f8fafc; /* gris suave */ --rp-bg-2:#eef2f9; --rp-card:#ffffff; --rp-card-2:#f8fafc; --rp-ink:#0f172a; /* títulos */ --rp-text:#1e293b; /* cuerpo */ --rp-muted:#64748b; /* secundario */ --rp-line:#e2e8f0; --rp-line-2:#eef2f7; --rp-side:linear-gradient(180deg,#0f2547 0%,#0b1c37 100%); --rp-side-txt:rgba(255,255,255,.76); --rp-side-lbl:rgba(255,255,255,.40); --rp-side-hov:rgba(255,255,255,.09); --rp-side-line:rgba(255,255,255,.10); --rp-green:#12a150; --rp-green-bg:#e7f8ef; --rp-green-tx:#0b6b36; --rp-amber:#d97706; --rp-amber-bg:#fff4e2; --rp-amber-tx:#9a5300; --rp-red:#dc2626; --rp-red-bg:#fdecec; --rp-red-tx:#b01c1c; --rp-purple:#7c3aed; --rp-purple-bg:#f1eaff; --rp-purple-tx:#5b21b6; --rp-blue-bg:#e6edfd; --rp-blue-tx:#1d4ed8; --rp-nu-bg:#eef1f6; --rp-nu-tx:#4b5a70; --rp-r:16px; --rp-shadow:0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06); --rp-shadow-h:0 6px 12px rgba(15,23,42,.07), 0 18px 40px rgba(15,23,42,.11); --rp-shadow-lg:0 12px 40px rgba(15,23,42,.16); --rp-ring:rgba(29,78,216,.13); } /* ---------- Tema oscuro ---------- */ @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ color-scheme:dark; --rp-blue:#60a5fa; --rp-blue-600:#3b82f6; --rp-blue-400:#93c5fd; --rp-blue-50:#1c2e4f; --rp-bg:#0a1018; --rp-bg-2:#0f1725; --rp-card:#141d2b; --rp-card-2:#1a2434; --rp-ink:#f1f5fc; --rp-text:#dbe4f2; --rp-muted:#93a3b8; --rp-line:#253145; --rp-line-2:#1e2939; --rp-side:linear-gradient(180deg,#0d1626 0%,#080f1c 100%); --rp-side-txt:rgba(255,255,255,.72); --rp-side-lbl:rgba(255,255,255,.34); --rp-side-hov:rgba(255,255,255,.07); --rp-side-line:rgba(255,255,255,.08); --rp-green:#4ade80; --rp-green-bg:#0e2e1d; --rp-green-tx:#6ee7a0; --rp-amber:#fbbf24; --rp-amber-bg:#33240a; --rp-amber-tx:#fcd34d; --rp-red:#f87171; --rp-red-bg:#3a1414; --rp-red-tx:#fca5a5; --rp-purple:#c084fc;--rp-purple-bg:#2a1b45;--rp-purple-tx:#d8b4fe; --rp-blue-bg:#16294a; --rp-blue-tx:#93c5fd; --rp-nu-bg:#1e293b; --rp-nu-tx:#a8b6cb; --rp-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --rp-shadow-h:0 6px 14px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5); --rp-shadow-lg:0 14px 44px rgba(0,0,0,.6); --rp-ring:rgba(96,165,250,.22); } } :root[data-theme="dark"]{ color-scheme:dark; --rp-blue:#60a5fa; --rp-blue-600:#3b82f6; --rp-blue-400:#93c5fd; --rp-blue-50:#1c2e4f; --rp-bg:#0a1018; --rp-bg-2:#0f1725; --rp-card:#141d2b; --rp-card-2:#1a2434; --rp-ink:#f1f5fc; --rp-text:#dbe4f2; --rp-muted:#93a3b8; --rp-line:#253145; --rp-line-2:#1e2939; --rp-side:linear-gradient(180deg,#0d1626 0%,#080f1c 100%); --rp-side-txt:rgba(255,255,255,.72); --rp-side-lbl:rgba(255,255,255,.34); --rp-side-hov:rgba(255,255,255,.07); --rp-side-line:rgba(255,255,255,.08); --rp-green:#4ade80; --rp-green-bg:#0e2e1d; --rp-green-tx:#6ee7a0; --rp-amber:#fbbf24; --rp-amber-bg:#33240a; --rp-amber-tx:#fcd34d; --rp-red:#f87171; --rp-red-bg:#3a1414; --rp-red-tx:#fca5a5; --rp-purple:#c084fc;--rp-purple-bg:#2a1b45;--rp-purple-tx:#d8b4fe; --rp-blue-bg:#16294a; --rp-blue-tx:#93c5fd; --rp-nu-bg:#1e293b; --rp-nu-tx:#a8b6cb; --rp-shadow:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35); --rp-shadow-h:0 6px 14px rgba(0,0,0,.45), 0 20px 44px rgba(0,0,0,.5); --rp-shadow-lg:0 14px 44px rgba(0,0,0,.6); --rp-ring:rgba(96,165,250,.22); } :root[data-theme="light"]{color-scheme:light} *{box-sizing:border-box} html,body{margin:0;padding:0} body.rp-panel{ font-family:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; background:var(--rp-bg); color:var(--rp-text); font-size:14.5px; line-height:1.55; letter-spacing:-.005em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; transition:background .25s ease,color .25s ease; } a{color:inherit;text-decoration:none} ::selection{background:var(--rp-blue);color:#fff} /* Barras de scroll acordes al tema (si no, en oscuro quedan blancas). */ *{scrollbar-width:thin;scrollbar-color:var(--rp-line) transparent} *::-webkit-scrollbar{width:10px;height:10px} *::-webkit-scrollbar-thumb{background:var(--rp-line);border-radius:99px;border:3px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--rp-muted);background-clip:content-box} *::-webkit-scrollbar-track{background:transparent} /* ---------- Animaciones ---------- */ @keyframes rp-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes rp-pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} @keyframes rp-draw{from{stroke-dashoffset:var(--rp-len)}to{stroke-dashoffset:0}} @keyframes rp-spin{to{transform:rotate(360deg)}} @keyframes rp-ping{0%{transform:scale(1);opacity:.65}70%,100%{transform:scale(2.1);opacity:0}} .rp-anim{animation:rp-in .45s cubic-bezier(.22,1,.36,1) both} .rp-anim-1{animation-delay:.04s}.rp-anim-2{animation-delay:.09s} .rp-anim-3{animation-delay:.14s}.rp-anim-4{animation-delay:.19s} .rp-anim-5{animation-delay:.24s}.rp-anim-6{animation-delay:.30s} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important} } /* ---------- Estructura ---------- */ .rp-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh} /* El velo del menú móvil DEBE estar fuera del flujo desde el principio. Si no, en escritorio cuenta como una celda más del grid: se comía la primera columna, dejaba la barra lateral gigante y mandaba el contenido a una segunda fila angosta. */ .rp-scrim{position:fixed;inset:0;background:rgba(8,15,28,.55);backdrop-filter:blur(2px);z-index:55;display:none} /* ---------- Barra lateral ---------- */ .rp-side{ background:var(--rp-side);color:#fff;display:flex;flex-direction:column; position:sticky;top:0;height:100vh;border-right:1px solid var(--rp-side-line); } .rp-brand{display:flex;align-items:center;gap:12px;padding:20px 18px 18px} .rp-brand-mark{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px; background:linear-gradient(135deg,#2563eb,#06b6d4); box-shadow:0 8px 22px rgba(37,99,235,.42);color:#fff; } .rp-brand-mark svg{width:22px;height:22px} .rp-brand-text b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.3px;line-height:1.15;color:#fff} .rp-brand-text span{display:block;font-size:11.5px;color:var(--rp-side-lbl);font-weight:700;letter-spacing:.3px} .rp-nav{padding:6px 11px;flex:1;overflow-y:auto} .rp-nav-label{ padding:15px 10px 7px;font-size:10.5px;font-weight:800;letter-spacing:.9px; text-transform:uppercase;color:var(--rp-side-lbl); } .rp-nav a{ position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px; color:var(--rp-side-txt);font-weight:600;font-size:14px;margin-bottom:3px; transition:background .18s ease,color .18s ease,transform .18s ease; } .rp-nav a:hover{background:var(--rp-side-hov);color:#fff;transform:translateX(2px)} .rp-nav a.on{ background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-weight:700; box-shadow:0 8px 20px rgba(37,99,235,.38); } .rp-nav a.on::before{ content:"";position:absolute;left:-11px;top:50%;transform:translateY(-50%); width:3px;height:20px;border-radius:0 3px 3px 0;background:#fff; } .rp-nav a svg{width:18px;height:18px;flex:0 0 18px;opacity:.92} .rp-nav a .rp-pill{ margin-left:auto;background:var(--rp-red);color:#fff;border-radius:999px; padding:1px 8px;font-size:11px;font-weight:800;box-shadow:0 2px 8px rgba(220,38,38,.4); } .rp-nav a.on .rp-pill{background:rgba(255,255,255,.3);box-shadow:none} .rp-side-foot{padding:13px;border-top:1px solid var(--rp-side-line)} .rp-plan{ border-radius:14px;padding:13px;background:rgba(255,255,255,.07); border:1px solid var(--rp-side-line); } .rp-plan b{display:block;font-size:13px;margin-bottom:4px;color:#fff} .rp-plan span{font-size:11.5px;color:var(--rp-side-lbl);line-height:1.45;display:block} /* ---------- Encabezado ---------- */ /* overflow-x:clip y NO hidden: 'hidden' convertiría a .rp-main en contenedor de scroll y la cabecera pegajosa dejaría de pegarse. 'clip' recorta sin crear scroll. Esto es la red de seguridad; la causa real se arregla en cada bloque. */ .rp-main{min-width:0;display:flex;flex-direction:column;overflow-x:clip} .rp-top{ position:sticky;top:0;z-index:15; background:color-mix(in srgb,var(--rp-bg) 82%,transparent); backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--rp-line); padding:0 26px;min-height:68px;display:flex;align-items:center;gap:16px; } .rp-top h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--rp-ink);line-height:1.2} .rp-top h1 small{display:block;font-size:12.5px;font-weight:600;color:var(--rp-muted);letter-spacing:0} /* La cabecera junta varios botones y fue creciendo —tema, campana, marcar leídas, configuración, usuario, salir—. Sin encoger el título, en el celular la fila se pasaba de ancho, la PÁGINA entera se volvía más ancha que la pantalla, y el botón flotante de "Nueva orden", que se ancla al borde derecho del visor, quedaba fuera. */ .rp-top-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0} .rp-top h1{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-top h1 small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rp-search{position:relative;min-width:min(330px,36vw)} .rp-search input{ width:100%;border:1px solid var(--rp-line);background:var(--rp-card);border-radius:12px; padding:10px 13px 10px 38px;font-size:14px;color:var(--rp-text);outline:none;font-family:inherit; transition:border-color .18s ease,box-shadow .18s ease; } .rp-search input::placeholder{color:var(--rp-muted)} .rp-search input:focus{border-color:var(--rp-blue);box-shadow:0 0 0 4px var(--rp-ring)} .rp-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--rp-muted);pointer-events:none} .rp-icon-btn{ position:relative;width:40px;height:40px;border-radius:12px;border:1px solid var(--rp-line); background:var(--rp-card);display:grid;place-items:center;cursor:pointer;color:var(--rp-text); transition:background .18s ease,border-color .18s ease,transform .18s ease;font-family:inherit; } .rp-icon-btn:hover{background:var(--rp-blue-bg);border-color:var(--rp-blue);color:var(--rp-blue-tx);transform:translateY(-1px)} /* El engranaje marcado cuando ya estás en Configuración. */ .rp-icon-btn.on{background:var(--rp-blue-bg);border-color:var(--rp-blue);color:var(--rp-blue-tx)} .rp-icon-btn svg{width:18px;height:18px} .rp-icon-btn .rp-dot{ position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:999px; background:var(--rp-red);color:#fff;font-size:11px;font-weight:800; display:grid;place-items:center;padding:0 5px;border:2px solid var(--rp-bg); } .rp-icon-btn .rp-dot::after{ content:"";position:absolute;inset:-2px;border-radius:999px;background:var(--rp-red); animation:rp-ping 2s cubic-bezier(0,0,.2,1) infinite;z-index:-1; } .rp-user{ display:flex;align-items:center;gap:10px;padding:5px 13px 5px 6px;border-radius:999px; border:1px solid var(--rp-line);background:var(--rp-card); } .rp-avatar{ width:31px;height:31px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,#2563eb,#06b6d4);color:#fff;font-weight:800;font-size:13px; } /* Con foto se quita el degradado: si la imagen tarda o falla, un fondo azul intenso detrás de un hueco redondo se ve peor que un gris neutro. */ .rp-avatar.con-foto{background:var(--rp-line);overflow:hidden;padding:0} .rp-avatar img{ width:100%;height:100%;border-radius:50%;display:block; /* cover y no contain: la foto llena el círculo aunque no sea cuadrada, que es lo habitual cuando alguien sube una selfie vertical desde el celular. */ object-fit:cover; } .rp-user b{font-size:13px;font-weight:700;line-height:1.2;display:block;color:var(--rp-ink)} .rp-user span{font-size:11.5px;color:var(--rp-muted);display:block;line-height:1.2} /* Interruptor de tema */ .rp-theme svg{transition:transform .4s cubic-bezier(.22,1,.36,1)} .rp-theme:hover svg{transform:rotate(35deg)} .rp-theme .rp-sun{display:none} .rp-theme .rp-moon{display:block} :root[data-theme="dark"] .rp-theme .rp-sun{display:block} :root[data-theme="dark"] .rp-theme .rp-moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .rp-theme .rp-sun{display:block} :root:not([data-theme="light"]) .rp-theme .rp-moon{display:none} } /* ---------- Contenido ---------- */ /* El hueco de abajo deja pasar al botón flotante de "Nueva orden", que es fijo y se pinta encima de todo: con los 44px de antes, la última fila de cualquier lista le quedaba debajo y sus botones no se podían tocar. */ .rp-body{padding:24px 26px 104px;flex:1} .rp-grid{display:grid;gap:17px} .rp-kpis{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))} .rp-cols{grid-template-columns:1.55fr 1fr;align-items:start} @media(max-width:1140px){.rp-cols{grid-template-columns:1fr}} .rp-card{ background:var(--rp-card);border:1px solid var(--rp-line);border-radius:var(--rp-r); box-shadow:var(--rp-shadow);overflow:hidden; transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease; } .rp-card:hover{box-shadow:var(--rp-shadow-h)} .rp-card-h{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--rp-line-2)} .rp-card-h h2{margin:0;font-size:15px;font-weight:800;letter-spacing:-.3px;color:var(--rp-ink)} .rp-card-h .rp-h-sub{font-size:12px;color:var(--rp-muted);font-weight:600} .rp-card-h .rp-h-act{margin-left:auto;font-size:13px;font-weight:700;color:var(--rp-blue);transition:gap .2s} .rp-card-h .rp-h-act:hover{text-decoration:underline} .rp-card-b{padding:18px} .rp-card-b.tight{padding:0} /* ---------- Tarjetas KPI ---------- */ .rp-kpi{position:relative;padding:18px;overflow:hidden} .rp-kpi::after{ content:"";position:absolute;right:-32px;top:-32px;width:120px;height:120px;border-radius:50%; opacity:.07;transition:transform .4s cubic-bezier(.22,1,.36,1),opacity .3s ease; } .rp-kpi:hover{transform:translateY(-3px)} .rp-kpi:hover::after{transform:scale(1.35);opacity:.12} .rp-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px} .rp-kpi.b::before{background:linear-gradient(180deg,#3b82f6,#1d4ed8)} .rp-kpi.b::after{background:#1d4ed8} .rp-kpi.g::before{background:linear-gradient(180deg,#34d399,#12a150)} .rp-kpi.g::after{background:#12a150} .rp-kpi.a::before{background:linear-gradient(180deg,#fbbf24,#d97706)} .rp-kpi.a::after{background:#d97706} .rp-kpi.p::before{background:linear-gradient(180deg,#a78bfa,#7c3aed)} .rp-kpi.p::after{background:#7c3aed} .rp-kpi-top{display:flex;align-items:flex-start;gap:13px;position:relative;z-index:1} .rp-kpi-ico{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:0 0 44px} .rp-kpi-ico svg{width:20px;height:20px} .rp-kpi.b .rp-kpi-ico{background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-kpi.g .rp-kpi-ico{background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-kpi.a .rp-kpi-ico{background:var(--rp-amber-bg);color:var(--rp-amber-tx)} .rp-kpi.p .rp-kpi-ico{background:var(--rp-purple-bg);color:var(--rp-purple-tx)} .rp-kpi-txt{min-width:0;flex:1} /* display:block es OBLIGATORIO: sin esto la etiqueta y el número quedan en la misma línea y se lee "Órdenes569" pegado. */ .rp-kpi-lbl{ display:block;font-size:12.5px;font-weight:700;color:var(--rp-muted); margin-bottom:3px;letter-spacing:.1px; } .rp-kpi-val{ display:block;font-size:30px;font-weight:800;letter-spacing:-1.2px;color:var(--rp-ink); line-height:1.08;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; } .rp-kpi-foot{ margin-top:11px;padding-top:11px;border-top:1px solid var(--rp-line-2); font-size:12px;color:var(--rp-muted);font-weight:600;position:relative;z-index:1; } .rp-kpi-foot b{color:var(--rp-text);font-weight:800} /* ---------- Etiquetas de estado ---------- */ .rp-tag{ display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px; font-size:12px;font-weight:800;white-space:nowrap;line-height:1.5;border:1px solid transparent; } .rp-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 6px} .rp-tag.ok{background:var(--rp-green-bg);color:var(--rp-green-tx);border-color:color-mix(in srgb,var(--rp-green) 22%,transparent)} .rp-tag.go{background:var(--rp-blue-bg);color:var(--rp-blue-tx);border-color:color-mix(in srgb,var(--rp-blue) 22%,transparent)} .rp-tag.wa{background:var(--rp-amber-bg);color:var(--rp-amber-tx);border-color:color-mix(in srgb,var(--rp-amber) 24%,transparent)} .rp-tag.no{background:var(--rp-red-bg);color:var(--rp-red-tx);border-color:color-mix(in srgb,var(--rp-red) 24%,transparent)} .rp-tag.nu{background:var(--rp-nu-bg);color:var(--rp-nu-tx)} /* ---------- Tablas ---------- */ .rp-tablewrap{overflow-x:auto} table.rp-t{width:100%;border-collapse:collapse} table.rp-t th{ text-align:left;padding:11px 18px;font-size:11px;font-weight:800;letter-spacing:.6px; text-transform:uppercase;color:var(--rp-muted);background:var(--rp-card-2); border-bottom:1px solid var(--rp-line);white-space:nowrap;position:sticky;top:0; } table.rp-t td{padding:13px 18px;border-bottom:1px solid var(--rp-line-2);font-size:13.5px;vertical-align:middle;color:var(--rp-text)} table.rp-t tbody tr:last-child td{border-bottom:0} table.rp-t tbody tr{transition:background .15s ease} table.rp-t tbody tr:hover{background:var(--rp-card-2)} .rp-t .num{font-variant-numeric:tabular-nums;font-weight:700;color:var(--rp-ink)} .rp-t .ord{font-weight:800;color:var(--rp-blue);letter-spacing:-.2px} .rp-t .sub{display:block;font-size:12px;color:var(--rp-muted);font-weight:600;margin-top:2px} /* ---------- Gráficos ---------- */ .rp-donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap} .rp-donut svg{flex:0 0 146px;animation:rp-pop .55s cubic-bezier(.22,1,.36,1) both} .rp-donut circle[data-seg]{animation:rp-draw 1s cubic-bezier(.22,1,.36,1) both;animation-delay:.15s} .rp-legend{flex:1;min-width:158px;display:grid;gap:10px} .rp-legend div{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--rp-text)} .rp-legend i{width:10px;height:10px;border-radius:3px;flex:0 0 10px} .rp-legend b{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:var(--rp-ink)} .rp-area{width:100%;height:130px;display:block;overflow:visible} .rp-area polyline{animation:rp-draw 1.2s cubic-bezier(.22,1,.36,1) both;animation-delay:.2s} .rp-area polygon{animation:rp-in .8s ease both;animation-delay:.5s} .rp-area circle{animation:rp-pop .4s cubic-bezier(.22,1,.36,1) both} .rp-xaxis{display:flex;justify-content:space-between;margin-top:9px;font-size:11px;color:var(--rp-muted);font-weight:700} /* ---------- Accesos rápidos ---------- */ .rp-quick{display:grid;grid-template-columns:1fr 1fr;gap:11px} .rp-quick a{ display:flex;align-items:center;gap:11px;padding:13px;border-radius:14px; border:1px solid var(--rp-line);background:var(--rp-card-2);font-weight:700;font-size:13px; color:var(--rp-text);transition:.2s cubic-bezier(.22,1,.36,1); } .rp-quick a:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx);transform:translateY(-2px);box-shadow:var(--rp-shadow)} .rp-quick i{ width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex:0 0 34px; background:var(--rp-blue-bg);color:var(--rp-blue-tx);transition:.2s ease; } .rp-quick a:hover i{background:var(--rp-blue);color:#fff;transform:scale(1.06)} .rp-quick i svg{width:17px;height:17px} /* ---------- Avisos ---------- */ .rp-alert{ display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:14px; font-size:13.5px;font-weight:600;margin-bottom:16px;border:1px solid transparent; } .rp-alert svg{width:18px;height:18px;flex:0 0 18px;margin-top:1px} .rp-alert.ok{background:var(--rp-green-bg);color:var(--rp-green-tx);border-color:color-mix(in srgb,var(--rp-green) 26%,transparent)} .rp-alert.err{background:var(--rp-red-bg);color:var(--rp-red-tx);border-color:color-mix(in srgb,var(--rp-red) 26%,transparent)} .rp-empty{padding:38px 20px;text-align:center;color:var(--rp-muted);font-size:13px;line-height:1.6} .rp-empty svg{width:40px;height:40px;opacity:.32;margin-bottom:10px} .rp-empty b{display:block;color:var(--rp-text);font-size:14.5px;margin-bottom:4px} /* ---------- Botones ---------- */ .rp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer; border-radius:12px;padding:10px 16px;font-size:13.5px;font-weight:700;font-family:inherit; transition:.2s cubic-bezier(.22,1,.36,1);white-space:nowrap; } .rp-btn svg{width:16px;height:16px} .rp-btn-p{background:var(--rp-blue);color:#fff;box-shadow:0 6px 18px var(--rp-ring)} .rp-btn-p:hover{background:var(--rp-blue-600);transform:translateY(-1px)} .rp-btn-l{background:var(--rp-card);color:var(--rp-text);border:1px solid var(--rp-line)} .rp-btn-l:hover{background:var(--rp-blue-bg);border-color:var(--rp-blue);color:var(--rp-blue-tx);transform:translateY(-1px)} /* ---------- Responsive ---------- */ .rp-burger{display:none} @media(max-width:900px){ .rp-shell{grid-template-columns:1fr} .rp-side{ position:fixed;left:0;top:0;bottom:0;width:252px;z-index:60; transform:translateX(-100%);transition:transform .26s cubic-bezier(.22,1,.36,1); box-shadow:var(--rp-shadow-lg); } .rp-shell.open .rp-side{transform:none} .rp-shell.open .rp-scrim{display:block} .rp-burger{display:grid} .rp-search{min-width:0;flex:1} .rp-body{padding:17px 15px 36px} .rp-top{padding:0 15px;min-height:62px} .rp-kpi-val{font-size:26px} } @media(max-width:600px){ .rp-quick{grid-template-columns:1fr} .rp-user b,.rp-user span{display:none} .rp-user{padding:5px} .rp-top h1 small{display:none} /* Botones más chicos y más juntos: son seis y tienen que entrar sin empujar la página. */ .rp-top-actions{gap:6px} .rp-icon-btn{width:36px;height:36px;border-radius:10px} .rp-icon-btn svg{width:17px;height:17px} .rp-top h1{font-size:17px} .rp-kpis{grid-template-columns:1fr 1fr;gap:11px} .rp-kpi{padding:14px} .rp-kpi-ico{width:36px;height:36px;flex:0 0 36px;border-radius:11px} .rp-kpi-val{font-size:22px} table.rp-t th,table.rp-t td{padding:10px 12px} } @media(max-width:420px){.rp-kpis{grid-template-columns:1fr}} /* =========================================================================== Pantalla de acceso (panel.php sin sesión) =========================================================================== */ .rp-login{ min-height:100vh;display:grid;place-items:center;padding:24px; background: radial-gradient(circle at 15% 10%,rgba(37,99,235,.28),transparent 42%), radial-gradient(circle at 85% 88%,rgba(6,182,212,.22),transparent 42%), linear-gradient(135deg,#0f2547 0%,#0b1c37 55%,#0a1526 100%); } .rp-login-card{ width:min(430px,100%);background:var(--rp-card);border:1px solid var(--rp-line); border-radius:24px;padding:34px 30px 26px;box-shadow:0 28px 70px rgba(4,12,28,.45); } .rp-login-head{text-align:center;margin-bottom:22px} .rp-login-head .rp-brand-mark{margin:0 auto 14px} .rp-login-head h1{margin:0;font-size:25px;font-weight:800;letter-spacing:-.7px;color:var(--rp-ink)} .rp-login-head h1 span{color:var(--rp-blue)} .rp-login-head p{margin:7px 0 0;color:var(--rp-muted);font-size:13.5px} .rp-login-form{display:grid;gap:15px} .rp-login-form label{display:block} .rp-login-form label span{ display:block;margin-bottom:6px;font-size:12.5px;font-weight:700;color:var(--rp-text); } .rp-login-form input{ width:100%;border:1px solid var(--rp-line);background:var(--rp-card-2);border-radius:12px; padding:12px 14px;font-size:14.5px;color:var(--rp-text);outline:none;font-family:inherit; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; } .rp-login-form input::placeholder{color:var(--rp-muted);opacity:.75} .rp-login-form input:focus{border-color:var(--rp-blue);background:var(--rp-card);box-shadow:0 0 0 4px var(--rp-ring)} .rp-login-btn{width:100%;padding:13px;font-size:14.5px;margin-top:3px} .rp-login-foot{ margin:20px 0 0;padding-top:17px;border-top:1px solid var(--rp-line-2); text-align:center;font-size:12.5px;color:var(--rp-muted); } .rp-login-foot a{color:var(--rp-blue);font-weight:700} .rp-login-foot a:hover{text-decoration:underline} /* Código del taller en la barra lateral */ .rp-slug{ margin-bottom:10px;padding:11px 13px;border-radius:13px; background:rgba(255,255,255,.06);border:1px solid var(--rp-side-line); } .rp-slug span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.5px; text-transform:uppercase;color:var(--rp-side-lbl);margin-bottom:3px} .rp-slug b{display:block;font-size:13px;font-weight:800;color:#fff; word-break:break-all;letter-spacing:-.1px} @media(max-width:420px){ .rp-login-card{padding:26px 20px 20px;border-radius:20px} .rp-login-head h1{font-size:22px} } /* =========================================================================== Botón permanente de "Nueva orden" + modal de alta por tarjetas =========================================================================== */ /* Botón flotante: siempre a la vista, sin importar dónde estés en la página. */ .rp-fab{ position:fixed;right:24px;bottom:24px;z-index:45; display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:inherit; padding:14px 20px;border-radius:999px;font-size:14.5px;font-weight:800;color:#fff; background:linear-gradient(135deg,#2563eb,#1d4ed8); box-shadow:0 10px 30px rgba(37,99,235,.45); transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s ease; } .rp-fab:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(37,99,235,.55)} .rp-fab:active{transform:translateY(-1px) scale(.99)} .rp-fab svg{width:19px;height:19px} @media(max-width:600px){ .rp-fab{right:16px;bottom:16px;padding:15px;border-radius:50%} .rp-fab span{display:none} } /* Modal */ .rp-modal{ position:fixed;inset:0;z-index:90;display:none; background:rgba(8,15,28,.62);backdrop-filter:blur(5px); padding:20px;overflow-y:auto; /* Nunca de lado. Si algo adentro se pasa de ancho, se recorta en vez de convertir el modal en algo que se arrastra a la izquierda y a la derecha mientras se intenta desplazar hacia abajo con el dedo. */ overflow-x:hidden;overscroll-behavior:contain; } .rp-modal.abierto{display:grid;place-items:start center;padding-top:min(6vh,60px)} /* Sin overflow acá: cualquier recorte en la tarjeta convertiría al pie en un elemento normal y dejaría de quedarse pegado abajo mientras se desplaza el formulario. El ancho ya lo controla el modal. */ .rp-modal-card{ width:min(720px,100%);max-width:100%; background:var(--rp-card);border:1px solid var(--rp-line); border-radius:22px;box-shadow:0 30px 80px rgba(4,12,28,.5); animation:rp-pop .28s cubic-bezier(.22,1,.36,1) both;margin-bottom:40px; } @media(max-width:560px){.rp-modal{padding:12px}} .rp-modal-head{ display:flex;align-items:center;gap:13px;padding:20px 22px; border-bottom:1px solid var(--rp-line-2); } .rp-modal-head .rp-kpi-ico{width:42px;height:42px;flex:0 0 42px;background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-modal-head h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--rp-ink)} .rp-modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--rp-muted)} .rp-modal-x{ margin-left:auto;width:36px;height:36px;border-radius:11px;border:1px solid var(--rp-line); background:var(--rp-card);color:var(--rp-muted);cursor:pointer;display:grid;place-items:center; font-size:19px;line-height:1;font-family:inherit;transition:.18s ease; } .rp-modal-x:hover{background:var(--rp-red-bg);color:var(--rp-red-tx);border-color:var(--rp-red)} .rp-modal-body{padding:20px 22px;display:grid;gap:15px} /* Los hijos de una cuadrícula miden por defecto lo que mida su contenido más largo, no lo que hay disponible. Un placeholder largo o una fila de botones ensanchaba la tarjeta por dentro y el modal entero se podía arrastrar para los lados en el celular. */ .rp-modal-body>*{min-width:0} .rp-modal-foot{ display:flex;gap:10px;justify-content:flex-end;padding:16px 22px; border-top:1px solid var(--rp-line-2);background:var(--rp-card-2); border-radius:0 0 22px 22px;position:sticky;bottom:0; /* Los botones bajan de renglón en vez de salirse: .rp-btn no parte el texto, así que tres botones en una pantalla angosta desbordaban a lo ancho. */ flex-wrap:wrap; } @media(max-width:560px){ /* En el teléfono, cada botón a lo ancho: se aciertan con el pulgar y no queda ninguno colgando fuera de la tarjeta. */ .rp-modal-foot{padding:14px 16px} .rp-modal-foot .rp-btn{flex:1 1 100%;justify-content:center} .rp-modal-body{padding:16px} .rp-modal-head{padding:16px} } /* Tarjetas del formulario: cada bloque es una tarjeta, para que registrar sea simple */ .rp-fcard{ border:1px solid var(--rp-line);border-radius:15px;background:var(--rp-card-2); padding:15px 16px; } .rp-fcard-h{ display:flex;align-items:center;gap:9px;margin-bottom:13px; font-size:12.5px;font-weight:800;color:var(--rp-ink);letter-spacing:-.1px; } .rp-fcard-h i{ width:27px;height:27px;border-radius:9px;display:grid;place-items:center;flex:0 0 27px; background:var(--rp-blue-bg);color:var(--rp-blue-tx); } .rp-fcard-h i svg{width:14px;height:14px} .rp-fcard-h small{margin-left:auto;font-weight:600;color:var(--rp-muted);font-size:11.5px} .rp-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rp-fgrid .ancho{grid-column:1/-1} @media(max-width:560px){.rp-fgrid{grid-template-columns:1fr}} .rp-f label{display:block} .rp-f label>span{ display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:var(--rp-text); } .rp-f label>span em{color:var(--rp-red);font-style:normal} .rp-f input,.rp-f select,.rp-f textarea{ width:100%;border:1px solid var(--rp-line);background:var(--rp-card);border-radius:11px; padding:10px 12px;font-size:14px;color:var(--rp-text);outline:none;font-family:inherit; transition:border-color .18s ease,box-shadow .18s ease; } .rp-f textarea{min-height:74px;resize:vertical} .rp-f input::placeholder,.rp-f textarea::placeholder{color:var(--rp-muted);opacity:.7} .rp-f input:focus,.rp-f select:focus,.rp-f textarea:focus{ border-color:var(--rp-blue);box-shadow:0 0 0 4px var(--rp-ring) } .rp-f-hint{font-size:11.5px;color:var(--rp-muted);margin:6px 0 0;line-height:1.45} /* =========================================================================== Chat en vivo — burbujas estilo mensajería Usa los MISMOS endpoints que el panel clásico (company_chat_rooms_live, company_order_conversation_live, send_staff_reply_live). No hay una segunda implementación del chat: sólo otra cara para el mismo motor. =========================================================================== */ .rp-chat{display:flex;flex-direction:column;height:460px;background:var(--rp-bg);overflow:hidden} .rp-chat-head{ display:flex;align-items:center;gap:11px;padding:13px 16px; background:var(--rp-card);border-bottom:1px solid var(--rp-line);flex:0 0 auto; } .rp-chat-head .rp-avatar{width:36px;height:36px;font-size:13px;flex:0 0 36px} .rp-chat-who{min-width:0;flex:1} .rp-chat-who b{display:block;font-size:13.5px;font-weight:700;color:var(--rp-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rp-chat-who span{display:block;font-size:11.5px;color:var(--rp-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rp-chat-live{ display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800; color:var(--rp-green-tx);white-space:nowrap; } .rp-chat-live i{width:8px;height:8px;border-radius:50%;background:var(--rp-green); box-shadow:0 0 0 3px color-mix(in srgb,var(--rp-green) 22%,transparent)} /* Lista de salas (cuando no hay ninguna abierta) */ .rp-rooms{flex:1;overflow-y:auto;padding:8px} .rp-room{ display:flex;align-items:center;gap:11px;width:100%;text-align:left; padding:11px 12px;border-radius:13px;border:1px solid transparent;background:transparent; cursor:pointer;font-family:inherit;transition:.16s ease;margin-bottom:2px; } .rp-room:hover{background:var(--rp-card);border-color:var(--rp-line)} .rp-room.nuevo{background:var(--rp-blue-bg);border-color:color-mix(in srgb,var(--rp-blue) 26%,transparent)} .rp-room .rp-avatar{width:38px;height:38px;flex:0 0 38px;font-size:13px} .rp-room-txt{min-width:0;flex:1} .rp-room-txt b{display:block;font-size:13px;font-weight:700;color:var(--rp-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rp-room-txt span{display:block;font-size:12px;color:var(--rp-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .rp-room-end{text-align:right;flex:0 0 auto} .rp-room-end small{display:block;font-size:10.5px;color:var(--rp-muted);font-weight:600} .rp-room-end em{ display:inline-block;margin-top:3px;background:var(--rp-red);color:#fff;font-style:normal; border-radius:999px;padding:1px 7px;font-size:10.5px;font-weight:800; } /* Hilo de mensajes */ .rp-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px} .rp-b{ max-width:82%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.5; animation:rp-in .28s cubic-bezier(.22,1,.36,1) both;word-wrap:break-word;overflow-wrap:anywhere; } .rp-b.cli{ background:var(--rp-card);border:1px solid var(--rp-line);color:var(--rp-text); align-self:flex-start;border-bottom-left-radius:5px; } .rp-b.tal{ background:var(--rp-blue);color:#fff;align-self:flex-end;border-bottom-right-radius:5px; box-shadow:0 4px 12px var(--rp-ring); } .rp-b-who{ display:block;font-size:10.5px;font-weight:800;opacity:.72;margin-bottom:3px; letter-spacing:.2px; } .rp-b-hora{display:block;font-size:10px;opacity:.65;margin-top:5px;font-weight:600} .rp-b a.rp-b-att{ display:inline-block;margin-top:6px;font-size:12px;font-weight:700; text-decoration:underline;color:inherit; } .rp-b.tal .rp-b-del{color:rgba(255,255,255,.75)} .rp-b-del{ display:inline-block;margin-top:6px;margin-left:8px;background:none;border:0;padding:0; font-family:inherit;font-size:10.5px;font-weight:700;color:var(--rp-muted); cursor:pointer;text-decoration:underline;opacity:.8; } .rp-b-del:hover{opacity:1;color:var(--rp-red-tx)} .rp-b.tal .rp-b-del:hover{color:#fff} /* Barra de escritura */ .rp-chat-bar{ display:flex;gap:9px;align-items:center;padding:12px; background:var(--rp-card);border-top:1px solid var(--rp-line);flex:0 0 auto; } .rp-chat-bar input[type=text]{ flex:1;min-width:0;border:1px solid var(--rp-line);background:var(--rp-bg); border-radius:999px;padding:11px 16px;font-size:13.5px;color:var(--rp-text); outline:none;font-family:inherit;transition:.18s ease; } .rp-chat-bar input[type=text]:focus{border-color:var(--rp-blue);background:var(--rp-card);box-shadow:0 0 0 4px var(--rp-ring)} .rp-send{ width:42px;height:42px;flex:0 0 42px;border-radius:50%;border:0;cursor:pointer; background:var(--rp-blue);color:#fff;display:grid;place-items:center; box-shadow:0 5px 14px var(--rp-ring);transition:.18s cubic-bezier(.22,1,.36,1); } .rp-send:hover{background:var(--rp-blue-600);transform:scale(1.06)} .rp-send:active{transform:scale(.95)} .rp-send:disabled{opacity:.55;cursor:default;transform:none} .rp-send svg{width:18px;height:18px} .rp-chat-volver{ background:none;border:0;padding:0;cursor:pointer;font-family:inherit; color:var(--rp-blue);font-size:12.5px;font-weight:700;flex:0 0 auto; } .rp-chat-volver:hover{text-decoration:underline} @media(max-width:600px){ .rp-chat{height:420px} .rp-b{max-width:88%} } /* =========================================================================== Módulo de Órdenes =========================================================================== */ .rp-filtros{ display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px; background:var(--rp-card);border:1px solid var(--rp-line);border-radius:var(--rp-r); padding:13px 15px;box-shadow:var(--rp-shadow); } .rp-filtro-busca{flex:1 1 260px;min-width:200px} .rp-filtros select{ border:1px solid var(--rp-line);background:var(--rp-card);border-radius:11px; padding:9px 12px;font-size:13.5px;color:var(--rp-text);font-family:inherit; outline:none;cursor:pointer;max-width:100%; } .rp-filtros select:focus{border-color:var(--rp-blue);box-shadow:0 0 0 4px var(--rp-ring)} .rp-resultado{margin:0 0 13px;font-size:13px;color:var(--rp-muted);font-weight:600} .rp-resultado b{color:var(--rp-ink);font-weight:800} .rp-resultado span{opacity:.8} /* Filas de orden */ .rp-ordenes{display:grid;gap:9px} .rp-orden{ display:grid;grid-template-columns:130px 1fr auto auto 22px;gap:14px;align-items:center; background:var(--rp-card);border:1px solid var(--rp-line);border-radius:14px; padding:13px 15px;box-shadow:var(--rp-shadow); transition:transform .2s cubic-bezier(.22,1,.36,1),border-color .2s ease,box-shadow .2s ease; } .rp-orden:hover{ border-color:var(--rp-blue);transform:translateX(3px);box-shadow:var(--rp-shadow-h); } .rp-orden.activa{border-color:var(--rp-blue);background:var(--rp-blue-bg)} .rp-orden-num{display:block;font-size:13.5px;font-weight:800;color:var(--rp-blue);letter-spacing:-.2px} .rp-orden-fecha{display:block;font-size:11.5px;color:var(--rp-muted);font-weight:600;margin-top:2px} .rp-orden-c{min-width:0} .rp-orden-c b{display:block;font-size:14px;font-weight:700;color:var(--rp-ink); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rp-orden-c span{display:block;font-size:12.5px;color:var(--rp-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px} .rp-orden-e{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .rp-orden-m{text-align:right;white-space:nowrap} .rp-orden-m b{display:block;font-size:14px;font-weight:800;color:var(--rp-ink);font-variant-numeric:tabular-nums} .rp-orden-m span{display:block;font-size:11.5px;color:var(--rp-muted);font-weight:600;margin-top:1px} .rp-orden-m span.deuda{color:var(--rp-amber-tx);font-weight:800} .rp-orden-ir{color:var(--rp-muted);display:grid;place-items:center;transition:transform .2s ease,color .2s ease} .rp-orden:hover .rp-orden-ir{color:var(--rp-blue);transform:translateX(3px)} @media(max-width:900px){ .rp-orden{grid-template-columns:1fr auto;grid-template-areas:"l m" "c c" "e e";gap:8px} .rp-orden-l{grid-area:l}.rp-orden-c{grid-area:c} .rp-orden-e{grid-area:e;justify-content:flex-start}.rp-orden-m{grid-area:m} .rp-orden-ir{display:none} } /* Paginado */ .rp-pag{display:flex;gap:7px;align-items:center;justify-content:center;margin-top:18px;flex-wrap:wrap} .rp-pag-n{ min-width:38px;height:38px;padding:0 11px;border-radius:11px;border:1px solid var(--rp-line); background:var(--rp-card);color:var(--rp-text);display:grid;place-items:center; font-size:13.5px;font-weight:700;transition:.16s ease; } .rp-pag-n:hover{border-color:var(--rp-blue);color:var(--rp-blue-tx);background:var(--rp-blue-bg)} .rp-pag-n.on{background:var(--rp-blue);color:#fff;border-color:var(--rp-blue); box-shadow:0 5px 14px var(--rp-ring)} /* Panel de detalle */ .rp-drawer-bg{position:fixed;inset:0;background:rgba(8,15,28,.55);backdrop-filter:blur(3px);z-index:70} .rp-drawer{ position:fixed;right:0;top:0;bottom:0;width:min(480px,100%);z-index:71; background:var(--rp-card);border-left:1px solid var(--rp-line); box-shadow:-20px 0 60px rgba(4,12,28,.35); display:flex;flex-direction:column; animation:rp-drawer-in .3s cubic-bezier(.22,1,.36,1) both; } @keyframes rp-drawer-in{from{transform:translateX(100%)}to{transform:none}} .rp-drawer-h{ display:flex;align-items:flex-start;gap:12px;padding:19px 20px; border-bottom:1px solid var(--rp-line);flex:0 0 auto; } .rp-drawer-num{font-size:12px;font-weight:800;color:var(--rp-blue);letter-spacing:.2px} .rp-drawer-h h2{margin:2px 0 0;font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--rp-ink)} .rp-drawer-h .rp-modal-x{margin-left:auto;text-decoration:none;line-height:32px} /* Mismo cuidado que en los modales: nada puede empujar el ancho hacia afuera, o el panel se arrastra de lado en el celular mientras se intenta bajar con el dedo. */ .rp-drawer-b{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain; padding:18px 20px;display:grid;gap:14px;align-content:start} .rp-drawer-b>*{min-width:0} @media(max-width:560px){.rp-drawer-b{padding:15px 14px}} .rp-drawer-tags{display:flex;gap:7px;flex-wrap:wrap} .rp-drawer-f{ display:flex;gap:9px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid var(--rp-line); background:var(--rp-card-2);flex:0 0 auto; } .rp-drawer-f form{margin:0} .rp-btn-del{background:var(--rp-red-bg);color:var(--rp-red-tx); border:1px solid color-mix(in srgb,var(--rp-red) 30%,transparent)} .rp-btn-del:hover{background:var(--rp-red);color:#fff} /* Montos del detalle */ .rp-montos{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .rp-montos div{ background:var(--rp-card-2);border:1px solid var(--rp-line);border-radius:13px; padding:12px;text-align:center; } .rp-montos span{display:block;font-size:11px;font-weight:700;color:var(--rp-muted); text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px} .rp-montos b{display:block;font-size:17px;font-weight:800;color:var(--rp-ink);font-variant-numeric:tabular-nums} .rp-montos b.ok{color:var(--rp-green-tx)} .rp-montos b.deuda{color:var(--rp-amber-tx)} /* Fichas de datos */ .rp-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:13.5px} .rp-dl dt{color:var(--rp-muted);font-weight:700;font-size:12.5px} .rp-dl dd{margin:0;color:var(--rp-text);font-weight:600;word-break:break-word} .rp-nota{ margin:0 0 9px;padding:11px 13px;border-radius:12px;background:var(--rp-card); border:1px solid var(--rp-line);font-size:13px;line-height:1.55;color:var(--rp-text); } .rp-nota:last-child{margin-bottom:0} .rp-nota span{ display:block;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--rp-muted);margin-bottom:5px; } .rp-nota.publica{border-color:color-mix(in srgb,var(--rp-blue) 30%,transparent);background:var(--rp-blue-bg)} .rp-nota.publica span{color:var(--rp-blue-tx)} /* Fotos */ .rp-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px} .rp-fotos a{position:relative;display:block;border-radius:11px;overflow:hidden; border:1px solid var(--rp-line);aspect-ratio:1;transition:.2s ease} .rp-fotos a:hover{border-color:var(--rp-blue);transform:scale(1.04)} .rp-fotos img{width:100%;height:100%;object-fit:cover;display:block} .rp-fotos em{ position:absolute;left:4px;bottom:4px;background:rgba(8,15,28,.78);color:#fff; font-style:normal;font-size:9.5px;font-weight:800;padding:2px 6px;border-radius:6px; } /* Borrar una foto. La miniatura ERA el enlace, así que no había dónde poner el botón: un
dentro de un no es HTML válido. Ahora cada foto va en un contenedor y el botón es hermano del enlace. Se deja SIEMPRE visible y no sólo al pasar el mouse porque el panel se usa mucho desde el celular, donde no existe el "pasar por encima". */ .rp-foto{position:relative} .rp-foto-del{position:absolute;top:4px;right:4px;z-index:2;margin:0;line-height:0} .rp-foto-del button{ display:grid;place-items:center;width:25px;height:25px;padding:0; border:0;border-radius:8px;cursor:pointer;color:#fff; background:rgba(8,15,28,.66); transition:background .18s ease,transform .18s ease; } .rp-foto-del button:hover{background:var(--rp-red);transform:scale(1.1)} .rp-foto-del button:focus-visible{outline:2px solid #fff;outline-offset:1px} /* El tamaño se baja por CSS y no con atributos en el : rp_ico() ya escribe width/height, y ante atributos repetidos el navegador se queda con el PRIMERO. */ .rp-foto-del svg,.rp-firma-del svg{width:14px;height:14px} .rp-firma-del{margin-top:9px} .rp-firma-del button{ display:inline-flex;align-items:center;gap:6px;cursor:pointer; background:var(--rp-red-bg);color:var(--rp-red-tx); border:1px solid color-mix(in srgb,var(--rp-red) 30%,transparent); border-radius:9px;padding:6px 12px;font-size:12px;font-weight:700; transition:.18s ease; } .rp-firma-del button:hover{background:var(--rp-red);color:#fff;border-color:var(--rp-red)} /* Línea de tiempo */ .rp-timeline{list-style:none;margin:0;padding:0 0 0 18px;position:relative} .rp-timeline::before{content:"";position:absolute;left:4px;top:5px;bottom:5px;width:2px; background:var(--rp-line);border-radius:2px} .rp-timeline li{position:relative;padding-bottom:14px} .rp-timeline li:last-child{padding-bottom:0} .rp-timeline li::before{ content:"";position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%; background:var(--rp-blue);box-shadow:0 0 0 3px var(--rp-blue-bg); } .rp-timeline b{display:block;font-size:13px;font-weight:700;color:var(--rp-ink)} .rp-timeline p{margin:3px 0 0;font-size:12.5px;color:var(--rp-text);line-height:1.5} .rp-timeline small{display:block;margin-top:3px;font-size:11px;color:var(--rp-muted);font-weight:600} @media(max-width:560px){ .rp-drawer{width:100%} .rp-montos{grid-template-columns:1fr} } /* =========================================================================== Texto dentro de la dona Estaba con fill="#0f1b2d" fijo en el SVG: en tema oscuro ese casi-negro quedaba invisible sobre la tarjeta oscura. Ahora sigue las variables del tema. =========================================================================== */ .rp-donut-n{fill:var(--rp-ink)} .rp-donut-t{fill:var(--rp-muted)} /* =========================================================================== Acciones dentro del detalle de una orden =========================================================================== */ .rp-acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px} .rp-acciones .ancho{grid-column:1/-1} .rp-acc{ display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:12px; border:1px solid var(--rp-line);background:var(--rp-card-2);color:var(--rp-text); font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;text-align:left; transition:.18s cubic-bezier(.22,1,.36,1);width:100%; } .rp-acc:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx);transform:translateY(-1px)} .rp-acc i{ width:29px;height:29px;border-radius:9px;display:grid;place-items:center;flex:0 0 29px; background:var(--rp-blue-bg);color:var(--rp-blue-tx);transition:.18s ease; } .rp-acc:hover i{background:var(--rp-blue);color:#fff} .rp-acc i svg{width:15px;height:15px} .rp-acc.wa i{background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.wa:hover{border-color:var(--rp-green);background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.wa:hover i{background:var(--rp-green);color:#fff} /* Cambio rápido de estado */ .rp-estados{display:flex;gap:6px;flex-wrap:wrap} .rp-estados button{ border:1px solid var(--rp-line);background:var(--rp-card-2);color:var(--rp-text); border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;font-family:inherit; cursor:pointer;transition:.16s ease; } .rp-estados button:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-estados button.on{background:var(--rp-blue);color:#fff;border-color:var(--rp-blue); box-shadow:0 4px 12px var(--rp-ring)} .rp-estados form{display:contents} /* =========================================================================== Impresión de la orden: sólo la hoja, sin menú ni botones =========================================================================== */ @media print{ .rp-side,.rp-top,.rp-fab,.rp-modal,.rp-drawer-bg,.rp-filtros,.rp-pag, .rp-resultado,.rp-ordenes,.rp-drawer-f,.rp-acciones,.rp-estados,.rp-scrim{display:none !important} .rp-shell{display:block} .rp-body{padding:0} .rp-drawer{ position:static;width:100%;box-shadow:none;border:0;animation:none; display:block;height:auto; } .rp-drawer-b{overflow:visible;padding:0} .rp-card,.rp-fcard{box-shadow:none;border-color:#ccc;break-inside:avoid} body.rp-panel{background:#fff;color:#000;font-size:12px} .rp-drawer-h{border-bottom:2px solid #000;padding-left:0;padding-right:0} .rp-modal-x{display:none !important} a[href]:after{content:""} } /* =========================================================================== Subida de fotos desde el detalle de la orden =========================================================================== */ .rp-subir{display:flex;gap:9px;align-items:center;flex-wrap:wrap} /* El input real se oculta pero sigue siendo accesible por teclado y lectores de pantalla: display:none lo sacaría del foco. */ .rp-subir input[type=file]{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } .rp-subir label.rp-acc{flex:1 1 auto;width:auto;min-width:170px;cursor:pointer} .rp-subir input[type=file]:focus + label.rp-acc{ border-color:var(--rp-blue);box-shadow:0 0 0 4px var(--rp-ring) } .rp-check{ display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600; color:var(--rp-muted);cursor:pointer;white-space:nowrap; } .rp-check input{width:16px;height:16px;accent-color:var(--rp-blue);cursor:pointer} .rp-enlace{ margin-top:11px;padding:12px 13px;border-radius:13px; background:var(--rp-green-bg);border:1px solid color-mix(in srgb,var(--rp-green) 30%,transparent); } .rp-enlace span{ display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px; color:var(--rp-green-tx);margin-bottom:6px; } .rp-enlace code{ display:block;font-size:11.5px;color:var(--rp-text);background:var(--rp-card); border:1px solid var(--rp-line);border-radius:9px;padding:8px 10px; word-break:break-all;font-family:ui-monospace,Consolas,monospace;line-height:1.45; } .rp-enlace-btns{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap} .rp-enlace-btns .rp-btn{flex:1 1 auto;min-width:110px} /* =========================================================================== Acciones y estados con color propio Cada botón lleva su color: se reconocen de un vistazo sin leerlos, que es lo que importa cuando se usa el panel con el cliente enfrente. =========================================================================== */ .rp-acciones{display:grid;grid-template-columns:1fr 1fr;gap:9px} .rp-acciones .ancho{grid-column:1/-1} @media(max-width:420px){.rp-acciones{grid-template-columns:1fr}} .rp-acc{ display:flex;align-items:center;gap:10px;padding:12px;border-radius:13px; border:1px solid var(--rp-line);background:var(--rp-card-2);color:var(--rp-text); font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;text-align:left; transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s ease,background .18s ease,box-shadow .18s ease; width:100%;line-height:1.35; } .rp-acc:hover{transform:translateY(-2px);box-shadow:var(--rp-shadow)} .rp-acc i{ width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex:0 0 32px; transition:background .18s ease,color .18s ease,transform .18s ease; } .rp-acc:hover i{transform:scale(1.07)} .rp-acc i svg{width:16px;height:16px} /* Variantes por color. El fondo del ícono anticipa qué hace el botón. */ .rp-acc.azul i{background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-acc.azul:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-acc.azul:hover i{background:var(--rp-blue);color:#fff} .rp-acc.verde i{background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.verde:hover{border-color:var(--rp-green);background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.verde:hover i{background:var(--rp-green);color:#fff} .rp-acc.ambar i{background:var(--rp-amber-bg);color:var(--rp-amber-tx)} .rp-acc.ambar:hover{border-color:var(--rp-amber);background:var(--rp-amber-bg);color:var(--rp-amber-tx)} .rp-acc.ambar:hover i{background:var(--rp-amber);color:#fff} .rp-acc.morado i{background:var(--rp-purple-bg);color:var(--rp-purple-tx)} .rp-acc.morado:hover{border-color:var(--rp-purple);background:var(--rp-purple-bg);color:var(--rp-purple-tx)} .rp-acc.morado:hover i{background:var(--rp-purple);color:#fff} .rp-acc.gris i{background:var(--rp-nu-bg);color:var(--rp-nu-tx)} .rp-acc.gris:hover{border-color:var(--rp-muted);background:var(--rp-nu-bg);color:var(--rp-text)} .rp-acc.gris:hover i{background:var(--rp-muted);color:#fff} /* ---------- Estados ---------- */ .rp-estados{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));gap:8px} .rp-estados form{display:contents} .rp-estados button{ display:flex;align-items:center;gap:8px;width:100%; border:1px solid var(--rp-line);background:var(--rp-card-2);color:var(--rp-text); border-radius:12px;padding:10px 11px;font-size:12.5px;font-weight:700;font-family:inherit; cursor:pointer;transition:transform .16s ease,border-color .16s ease,background .16s ease; text-align:left;line-height:1.3; } .rp-estados button:hover:not(:disabled){transform:translateY(-2px)} .rp-estados button b{ width:9px;height:9px;border-radius:50%;flex:0 0 9px;display:block; background:currentColor;opacity:.9; } /* El estado actual queda marcado y apagado: no tiene sentido "cambiar" al mismo. */ .rp-estados button:disabled{cursor:default;opacity:1;font-weight:800} .rp-estados button:disabled::after{ content:"actual";margin-left:auto;font-size:10px;font-weight:800;opacity:.7; text-transform:uppercase;letter-spacing:.4px; } .rp-estados button.e-espera{color:var(--rp-amber-tx)} .rp-estados button.e-espera:hover:not(:disabled), .rp-estados button.e-espera:disabled{background:var(--rp-amber-bg);border-color:var(--rp-amber)} .rp-estados button.e-proceso{color:var(--rp-blue-tx)} .rp-estados button.e-proceso:hover:not(:disabled), .rp-estados button.e-proceso:disabled{background:var(--rp-blue-bg);border-color:var(--rp-blue)} .rp-estados button.e-final{color:var(--rp-green-tx)} .rp-estados button.e-final:hover:not(:disabled), .rp-estados button.e-final:disabled{background:var(--rp-green-bg);border-color:var(--rp-green)} .rp-estados button.e-entregado{color:var(--rp-purple-tx)} .rp-estados button.e-entregado:hover:not(:disabled), .rp-estados button.e-entregado:disabled{background:var(--rp-purple-bg);border-color:var(--rp-purple)} .rp-estados button.e-cancel{color:var(--rp-red-tx)} .rp-estados button.e-cancel:hover:not(:disabled), .rp-estados button.e-cancel:disabled{background:var(--rp-red-bg);border-color:var(--rp-red)} /* ---------- Firma del cliente ---------- */ .rp-firma{ border:1px solid var(--rp-line);border-radius:13px;background:#fff; padding:10px;text-align:center; } .rp-firma img{max-width:100%;height:auto;display:block;margin:0 auto} .rp-firma small{ display:block;margin-top:7px;font-size:11px;color:#64748b;font-weight:600; } /* =========================================================================== Acciones v2 — tarjetas grandes, en cuadrícula, con color propio Se pasó de botones en línea a tarjetas: el ícono arriba y el texto abajo se reconocen mucho más rápido cuando se usa el panel con el cliente enfrente. =========================================================================== */ .rp-acciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px} .rp-acciones .ancho{grid-column:1/-1} .rp-acciones form{display:contents} .rp-acc{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px; padding:15px 10px;border-radius:15px;border:1.5px solid var(--rp-line); background:var(--rp-card-2);color:var(--rp-text); font-weight:700;font-size:12.5px;font-family:inherit;cursor:pointer;text-align:center; transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .18s ease, background .18s ease,box-shadow .18s ease; width:100%;line-height:1.3;min-height:92px; } .rp-acc:hover{transform:translateY(-3px);box-shadow:var(--rp-shadow-h)} .rp-acc:active{transform:translateY(-1px)} .rp-acc i{ width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:0 0 42px; transition:background .18s ease,color .18s ease,transform .18s ease; } .rp-acc:hover i{transform:scale(1.1)} .rp-acc i svg{width:20px;height:20px} /* Variante ancha: ícono al costado, para las acciones que ocupan toda la fila. */ .rp-acc.ancho{flex-direction:row;justify-content:flex-start;gap:12px;min-height:0; padding:13px 15px;text-align:left;font-size:13px} .rp-acc.ancho i{width:36px;height:36px;flex:0 0 36px;border-radius:11px} .rp-acc.ancho i svg{width:17px;height:17px} .rp-acc.azul i{background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-acc.azul:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-acc.azul:hover i{background:var(--rp-blue);color:#fff} .rp-acc.verde i{background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.verde:hover{border-color:var(--rp-green);background:var(--rp-green-bg);color:var(--rp-green-tx)} .rp-acc.verde:hover i{background:var(--rp-green);color:#fff} .rp-acc.ambar i{background:var(--rp-amber-bg);color:var(--rp-amber-tx)} .rp-acc.ambar:hover{border-color:var(--rp-amber);background:var(--rp-amber-bg);color:var(--rp-amber-tx)} .rp-acc.ambar:hover i{background:var(--rp-amber);color:#fff} .rp-acc.morado i{background:var(--rp-purple-bg);color:var(--rp-purple-tx)} .rp-acc.morado:hover{border-color:var(--rp-purple);background:var(--rp-purple-bg);color:var(--rp-purple-tx)} .rp-acc.morado:hover i{background:var(--rp-purple);color:#fff} .rp-acc.gris i{background:var(--rp-nu-bg);color:var(--rp-nu-tx)} .rp-acc.gris:hover{border-color:var(--rp-muted);background:var(--rp-nu-bg);color:var(--rp-text)} .rp-acc.gris:hover i{background:var(--rp-muted);color:#fff} /* =========================================================================== Estados v2 — cada uno con su color, tocables y claros =========================================================================== */ .rp-estados{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:8px} .rp-estados form{display:contents} .rp-estados button{ display:flex;align-items:center;gap:9px;width:100%; border:1.5px solid var(--rp-line);background:var(--rp-card-2);color:var(--rp-text); border-radius:12px;padding:11px 12px;font-size:12.5px;font-weight:700;font-family:inherit; cursor:pointer;text-align:left;line-height:1.3; transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease; } .rp-estados button:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--rp-shadow)} .rp-estados button b{ width:10px;height:10px;border-radius:50%;flex:0 0 10px;display:block; background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent); } /* El estado actual se marca y se apaga: no tiene sentido "cambiar" al mismo. */ .rp-estados button:disabled{cursor:default;opacity:1;font-weight:800} .rp-estados button:disabled::after{ content:"\2713";margin-left:auto;font-size:13px;font-weight:900; } .rp-estados button.e-espera{color:var(--rp-amber-tx)} .rp-estados button.e-espera:hover:not(:disabled), .rp-estados button.e-espera:disabled{background:var(--rp-amber-bg);border-color:var(--rp-amber)} .rp-estados button.e-proceso{color:var(--rp-blue-tx)} .rp-estados button.e-proceso:hover:not(:disabled), .rp-estados button.e-proceso:disabled{background:var(--rp-blue-bg);border-color:var(--rp-blue)} .rp-estados button.e-final{color:var(--rp-green-tx)} .rp-estados button.e-final:hover:not(:disabled), .rp-estados button.e-final:disabled{background:var(--rp-green-bg);border-color:var(--rp-green)} .rp-estados button.e-entregado{color:var(--rp-purple-tx)} .rp-estados button.e-entregado:hover:not(:disabled), .rp-estados button.e-entregado:disabled{background:var(--rp-purple-bg);border-color:var(--rp-purple)} .rp-estados button.e-cancel{color:var(--rp-red-tx)} .rp-estados button.e-cancel:hover:not(:disabled), .rp-estados button.e-cancel:disabled{background:var(--rp-red-bg);border-color:var(--rp-red)} /* =========================================================================== Acciones rápidas en la LISTA de órdenes (imprimir y cambiar estado sin abrir) =========================================================================== */ .rp-orden{grid-template-columns:126px 1fr auto auto auto 22px} .rp-orden-x{display:flex;gap:5px;align-items:center} .rp-mini{ width:32px;height:32px;border-radius:10px;border:1px solid var(--rp-line); background:var(--rp-card);color:var(--rp-muted);display:grid;place-items:center; cursor:pointer;font-family:inherit;transition:.16s ease;flex:0 0 32px;padding:0; } .rp-mini:hover{border-color:var(--rp-blue);background:var(--rp-blue-bg);color:var(--rp-blue-tx)} .rp-mini svg{width:15px;height:15px} /* Menú de estado que se abre desde la fila */ .rp-menu{position:relative} .rp-menu-pop{ position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:172px; background:var(--rp-card);border:1px solid var(--rp-line);border-radius:13px; box-shadow:var(--rp-shadow-lg);padding:6px;display:none; } .rp-menu.abierto .rp-menu-pop{display:block;animation:rp-pop .16s ease both} .rp-menu-pop button{ display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent; padding:9px 10px;border-radius:9px;font-size:12.5px;font-weight:700;font-family:inherit; cursor:pointer;text-align:left;color:var(--rp-text);transition:background .14s ease; } .rp-menu-pop button:hover:not(:disabled){background:var(--rp-card-2)} .rp-menu-pop button:disabled{opacity:.45;cursor:default} .rp-menu-pop button b{width:9px;height:9px;border-radius:50%;flex:0 0 9px;background:currentColor} .rp-menu-pop button.e-espera{color:var(--rp-amber-tx)} .rp-menu-pop button.e-proceso{color:var(--rp-blue-tx)} .rp-menu-pop button.e-final{color:var(--rp-green-tx)} .rp-menu-pop button.e-entregado{color:var(--rp-purple-tx)} .rp-menu-pop button.e-cancel{color:var(--rp-red-tx)} @media(max-width:900px){ .rp-orden{grid-template-columns:1fr auto;grid-template-areas:"l m" "c c" "e x";gap:8px} .rp-orden-x{grid-area:x;justify-content:flex-end} } @media print{ .rp-orden-x,.rp-menu{display:none !important} } /* La fila de orden pasó de a
para poder llevar botones adentro: un