:root { /* Le dice al navegador qué tema usar para lo que él mismo dibuja (el desplegable de un , etc. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fb; --bg-soft: #ffffff; --panel: rgba(6, 20, 35, 0.045); /* Más marcado que antes (0.12 → 0.22) — Danny pidió que los recuadros (los grupos de parque en Panel, tarjetas, tablas...) se distingan mejor en modo claro; esta variable la usan casi todos, así que subir su contraste aquí ya se refleja en toda la página. */ --panel-border: rgba(6, 20, 35, 0.22); --text: #0b1220; --text-dim: #55647a; /* Los mismos matices de marca, pero un poco más oscuros: los originales (pensados para resaltar sobre un fondo casi negro) no se leen bien como texto sobre blanco — como fondo de botón o brillo decorativo seguían funcionando bien, pero como texto no. */ --teal: #0e9187; --teal-dim: #0b6c65; --green: #2f8f3a; --orange: #cc5f12; --danger: #c2372f; } /* Tintes "blanco sobre oscuro" que se vuelven invisibles en un fondo claro — su versión clara es el mismo tinte, pero de negro. */ :root[data-theme="light"] .navbar { background: rgba(255, 255, 255, 0.78); } :root[data-theme="light"] .gantt-row:hover, :root[data-theme="light"] .prog-table tbody tr:hover, :root[data-theme="light"] .prog-table td[contenteditable="true"]:focus { background: rgba(6, 20, 35, 0.035); } :root[data-theme="light"] .col-toggle__option:hover { background: rgba(6, 20, 35, 0.05); } :root[data-theme="light"] .prog-tab-cnt { background: rgba(6, 20, 35, 0.08); } :root[data-theme="light"] .prog-tab.active .prog-tab-cnt { background: rgba(255, 255, 255, 0.28); } :root[data-theme="light"] .tipo-pill.otros, :root[data-theme="light"] .prog-table .badge-interna { background: rgba(6, 20, 35, 0.06); } :root[data-theme="light"] .agent-head { background: rgba(6, 20, 35, 0.035); } /* Controles nativos del navegador (el desplegable de un ) que se habían forzado a verse oscuros — en modo claro deben volver a su apariencia normal. */ :root[data-theme="light"] .prog-cell-select, :root[data-theme="light"] .prog-cell-date { color-scheme: light; } /* La flechita de los desplegables es un ícono dibujado a mano (no un ícono de fuente), con su color fijo dentro del propio dibujo — hace falta una segunda versión, con un color oscuro en vez de claro. */ :root[data-theme="light"] .field select, :root[data-theme="light"] .multiselect__toggle { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2355647a' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Colores de texto que, igual que --teal/--green/--orange más arriba, eran demasiado claros para leerse sobre un fondo blanco. */ :root[data-theme="light"] .tipo-pill.soldadura, :root[data-theme="light"] .tipo-pill.vehiculo { color: #8a5a00; } :root[data-theme="light"] .tipo-pill.arbol { color: #4552c9; } /* Los recuadros de cada grupo de parque en Panel (ACUAPARQUE DE LA CAÑA, PARQUE LOURDES...) son de los bordes que más se usan a simple vista — en modo claro se marcan un poco más gruesos, no solo más oscuros. */ :root[data-theme="light"] .panel-group-header { border-width: 1.5px; } /* ---------- botón de modo claro/oscuro (theme.js lo agrega solo) ---------- */ .topbar__left { display: flex; align-items: center; gap: 14px; } .theme-toggle-btn { background: none; border: 1px solid var(--panel-border); color: var(--text-dim); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; transition: border-color 0.2s, color 0.2s, transform 0.2s; } .theme-toggle-btn:hover { border-color: var(--teal); color: var(--teal); transform: rotate(-14deg); } * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* ---------- barra de desplazamiento ---------- */ /* La de arriba-abajo (toda la página) queda delgada y "flotante": no reserva su propio espacio de layout fijo como la barra gris del sistema — el riel es transparente, así que solo se ve el color al desplazar. La de izquierda-derecha (debajo de las tablas anchas, .table-wrap) usa el mismo color turquesa de la marca para que combine, sin volverse flotante — ahí sí conviene que quede visible siempre como referencia de cuánto falta por recorrer. */ * { scrollbar-width: thin; scrollbar-color: var(--teal) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* ---------- Programación CRP: barra flotante de la tabla ---------- */ /* Copiado de Programación mensual de mantenimiento (el panel viejo), que sí lo resolvió bien: en vez de intentar que el navegador dibuje su propia barra "flotando" (no se puede, overflow:overlay ya no existe), se crea una SEGUNDA barra — fija abajo de toda la pantalla, con su propio scroll nativo — que se mantiene sincronizada con el scroll horizontal real de la tabla. Como es nativa de verdad, no hay temporizadores ni observers propios que puedan dispararse en bucle. Solo aparece cuando la tabla visible (Tabla o Historial) no cabe en pantalla.*/ .floating-hscroll { position: fixed; bottom: 0; left: 0; height: 14px; overflow-x: auto; overflow-y: hidden; background: var(--bg-soft); border-top: 1px solid var(--panel-border); z-index: 40; } .floating-hscroll::-webkit-scrollbar { height: 14px; } .floating-hscroll::-webkit-scrollbar-track { background: var(--bg-soft); } .floating-hscroll::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 7px; border: 3px solid var(--bg-soft); } .floating-hscroll::-webkit-scrollbar-thumb:hover { background: var(--teal-dim); } .floating-hscroll__inner { height: 1px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } svg { width: 18px; height: 18px; fill: currentColor; } /* ---------- background grid ---------- */ .grid-overlay { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(47, 214, 200, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(47, 214, 200, 0.06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 30%, transparent 90%); } /* ---------- topbar ---------- */ .topbar { background: var(--bg-soft); border-bottom: 1px solid var(--panel-border); position: relative; z-index: 5; font-size: 0.85rem; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 24px; } .topbar__mail { color: var(--text-dim); transition: color 0.2s; } .topbar__mail:hover { color: var(--teal); } /* ---------- navbar ---------- */ .navbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); background: rgba(6, 11, 20, 0.72); border-bottom: 1px solid var(--panel-border); } .navbar__inner { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 14px 24px; } .brand { display: flex; align-items: center; gap: 12px; } /* El isotipo real de CRP (assets/img/logo-crp.jpg) vive en una tarjeta blanca fija — la foto trae su propio fondo blanco (no es transparente), así que se le da ese fondo a propósito en vez de pelear con él, y así se ve igual de limpio en modo oscuro y en modo claro. Conserva el mismo borde y brillo que ya tenía la marca de texto que reemplaza. */ .brand__mark { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 3px; background: #fff; border: 1px solid var(--panel-border); border-radius: 8px; position: relative; overflow: hidden; flex-shrink: 0; } .brand__mark img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 5px; } .brand__mark::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: 0 0 18px rgba(47, 214, 200, 0.35); pointer-events: none; } .brand__text { font-size: 0.85rem; color: var(--text-dim); display: none; } @media (min-width: 760px) { .brand__text { display: inline; } } .navbar__badge { display: flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--panel); font-family: var(--font-head); } .navbar__badge-num { font-weight: 700; color: var(--orange); } .navbar__badge-label { font-size: 0.75rem; color: var(--text-dim); } /* ---------- navegación de administrador ---------- */ #admin-nav-slot { display: flex; align-items: center; gap: 18px; margin-left: 16px; flex-wrap: wrap; } .admin-badge { font-family: var(--font-head); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); border: 1px solid rgba(255, 138, 61, 0.35); background: rgba(255, 138, 61, 0.1); padding: 3px 10px; border-radius: 999px; white-space: nowrap; } .admin-tabs { display: flex; list-style: none; margin: 0; padding: 0; gap: 18px; } .admin-tabs a { font-size: 0.86rem; color: var(--text-dim); transition: color 0.2s; } .admin-tabs a:hover { color: var(--teal); } .admin-tabs a.active { color: var(--teal); font-weight: 600; } .admin-login-link { background: none; border: none; padding: 0; margin: 0; font-family: var(--font-body); font-size: 0.86rem; color: var(--teal); cursor: pointer; } .admin-login-link:hover { text-decoration: underline; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 24px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; font-family: var(--font-body); cursor: pointer; transition: transform 0.25s, box-shadow 0.25s, background 0.25s, color 0.25s; border: 1px solid transparent; white-space: nowrap; background: transparent; color: var(--text); } .btn--primary { background: var(--gradient); color: #06140f; box-shadow: 0 0 24px rgba(106, 211, 79, 0.35); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(106, 211, 79, 0.5); } .btn--outline { border-color: var(--panel-border); color: var(--text); background: var(--panel); } .btn--outline:hover { border-color: var(--teal); color: var(--teal); } .btn--ghost { border-color: var(--panel-border); color: var(--text); font-size: 0.85rem; padding: 8px 18px; } .btn--ghost:hover { border-color: var(--teal); color: var(--teal); box-shadow: 0 0 14px rgba(47,214,200,0.25); } .btn--lg { padding: 15px 34px; font-size: 1rem; } /* ---------- tagline strip ---------- */ .tagline { position: relative; z-index: 1; padding: 22px 0; border-bottom: 1px solid var(--panel-border); background: linear-gradient(90deg, rgba(47,214,200,0.06), rgba(255,138,61,0.05)); } .tagline p { margin: 0; text-align: center; color: var(--text-dim); font-size: 1rem; max-width: 900px; margin: 0 auto; } .tagline span { color: var(--text); font-weight: 600; } /* ---------- hero ---------- */ .hero { position: relative; z-index: 1; padding: 90px 0 110px; overflow: hidden; } .hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; opacity: 0.5; } .hero__glow--a { width: 460px; height: 460px; background: var(--teal); top: -120px; left: -140px; } .hero__glow--b { width: 420px; height: 420px; background: var(--green); bottom: -160px; right: -120px; opacity: 0.35; } /* Mismo fondo degradado del hero público (Formulario), pero fijo al viewport en vez de vivir dentro de una sola sección — así se ve igual en Panel, Programación CRP y Estadísticas sin importar cuánto se desplace la página ni qué tan larga sea. Mismo z-index que .grid-overlay (0), por debajo de .panel-board (z-index:1) y demás contenido, que ya pintan encima sin necesidad de overflow:hidden. */ .page-glow { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; } .page-glow--a { width: 460px; height: 460px; background: var(--teal); opacity: 0.5; top: -120px; left: -140px; } .page-glow--b { width: 420px; height: 420px; background: var(--green); opacity: 0.35; bottom: -160px; right: -120px; } .hero__inner { display: flex; justify-content: center; } .hero__copy { max-width: 720px; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-head); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; padding: 5px 12px; border: 1px solid rgba(47, 214, 200, 0.35); border-radius: 999px; background: rgba(47, 214, 200, 0.08); } .hero h1 { font-family: var(--font-head); font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.12; margin: 0 0 20px; font-weight: 700; } .text-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__desc { color: var(--text-dim); font-size: 1.05rem; max-width: 46ch; margin: 0 auto 32px; } /* ---------- pilares ---------- */ .pilares { position: relative; z-index: 1; padding: 90px 0; background: var(--bg-soft); border-top: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); } .section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; } .section-head h2 { font-family: var(--font-head); font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin: 0; } .pilares__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 30px 24px; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; } .card:hover { transform: translateY(-6px); border-color: rgba(47, 214, 200, 0.4); box-shadow: 0 14px 40px rgba(0,0,0,0.35); } .card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: var(--gradient-soft); } .card__icon svg { width: 26px; height: 26px; fill: none; stroke-width: 1.6; } .card__icon--energia { color: var(--orange); } .card__icon--energia svg { fill: var(--orange); stroke: none; } .card__icon--motores { color: var(--teal); } .card__icon--motores svg { fill: var(--teal); stroke: none; } .card__icon--construccion { color: var(--green); } .card__icon--construccion svg { fill: var(--green); stroke: none; } .card__icon--zonas { color: var(--green); } .card__icon--zonas svg { fill: none; stroke: var(--green); stroke-linecap: round; stroke-linejoin: round; } .card__icon--soldadura { color: var(--teal); } .card__icon--soldadura svg { fill: var(--teal); stroke: none; } .card__icon--piscinas { color: var(--teal); } .card__icon--piscinas svg { fill: none; stroke: var(--teal); stroke-linecap: round; stroke-linejoin: round; } .card h3 { font-family: var(--font-head); margin: 0 0 8px; font-size: 1.1rem; } .card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; } /* ---------- familia CTA ---------- */ .familia { position: relative; z-index: 1; padding: 100px 0; text-align: center; overflow: hidden; } .familia__glow { position: absolute; width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(47,214,200,0.16), transparent 65%); z-index: -1; } .familia h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 14px; } .familia p { color: var(--text-dim); max-width: 520px; margin: 0 auto 34px; } .familia__actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } /* ---------- footer ---------- */ .footer { position: relative; z-index: 1; background: var(--bg-soft); border-top: 1px solid var(--panel-border); padding: 32px 0 20px; } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; } .footer__mail { color: var(--text-dim); font-size: 0.9rem; } .footer__mail:hover { color: var(--teal); } .footer__copy { text-align: center; color: var(--text-dim); font-size: 0.78rem; margin: 24px 0 0; } /* ---------- form page hero ---------- */ .form-hero { position: relative; z-index: 1; padding: 64px 0 60px; overflow: hidden; } .form-hero__inner { max-width: 720px; margin: 0 auto; text-align: center; } .back-link { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--text-dim); font-size: 0.88rem; margin-bottom: 24px; transition: color 0.2s; } .back-link:hover { color: var(--teal); } .form-hero h1 { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 16px; font-weight: 700; } /* ---------- service form ---------- */ .form-section { position: relative; z-index: 1; padding: 0 0 100px; } .form-section__inner { display: flex; justify-content: center; } /* El formulario de solicitud es más ancho que el resto de formularios del sitio (que sí se quedan en 620px) — a propósito, para que sus 3 tarjetas de categoría quepan en una sola fila sin encogerse. El mensaje de éxito comparte el mismo ancho para que no haya un salto de tamaño al enviar. */ #service-form, #success-view { max-width: 920px; } .service-form { width: 100%; max-width: 620px; background: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius); padding: 36px; display: flex; flex-direction: column; gap: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.35); } @media (max-width: 560px) { .service-form { padding: 26px 20px; } } .field { display: flex; flex-direction: column; gap: 8px; } .field--checkbox label { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; } .field--checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; } .field label { font-family: var(--font-head); font-size: 0.92rem; font-weight: 600; } .req { color: var(--orange); } /* El No. OS se digita a mano (no se incrementa de a uno), así que las flechitas arriba/abajo del solo estorban — se quitan solo aquí, el resto de los campos numéricos del sitio (ej. la búsqueda por número en Seguimiento) las conserva. */ #act-no-os::-webkit-outer-spin-button, #act-no-os::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #act-no-os { -moz-appearance: textfield; } .field input[type="date"], .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select, .field textarea { width: 100%; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s; } .field textarea { resize: vertical; min-height: 110px; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 214, 200, 0.18); } .field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb0c9' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; padding-right: 40px; } .field select:invalid { color: var(--text-dim); } /* Sin filter: color-scheme (:root, arriba) ya hace que el navegador pinte el ícono claro en modo oscuro y oscuro en modo claro, solo. Un filter:invert(1) aquí encima invertía ese resultado ya correcto, dejando el ícono en negro sobre fondo oscuro — casi invisible, que fue justo lo que Danny reportó. */ .field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.8; } .field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; } /* ---------- desplegable de selección múltiple (asignado a) ---------- */ .multiselect { position: relative; } .multiselect__toggle { width: 100%; text-align: left; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 40px 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 0.95rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb0c9' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; } .multiselect__toggle:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(47, 214, 200, 0.18); } .multiselect__toggle span { color: var(--text-dim); } .multiselect__toggle.has-value span { color: var(--text); } .multiselect__panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 8px; max-height: 240px; overflow-y: auto; box-shadow: 0 14px 40px rgba(0,0,0,0.45); } .multiselect__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; } .multiselect__option:hover { background: var(--panel); } .multiselect__option input { accent-color: var(--teal); } .multiselect__option.is-disabled { opacity: 0.4; cursor: not-allowed; } .multiselect__option.is-disabled:hover { background: none; } .field input.touched:invalid, .field select.touched:invalid, .field textarea.touched:invalid { border-color: rgba(255, 90, 90, 0.5); } .hint { margin: 0; font-size: 0.8rem; color: var(--text-dim); } .file-drop { position: relative; border: 1px dashed var(--panel-border); border-radius: 14px; padding: 22px; text-align: center; transition: border-color 0.2s, background 0.2s; } .file-drop:hover { border-color: rgba(47, 214, 200, 0.4); background: rgba(47, 214, 200, 0.04); } .file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .file-drop__label { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-dim); font-size: 0.9rem; pointer-events: none; } .file-drop__label svg { width: 26px; height: 26px; color: var(--teal); } .file-list { margin: 12px 0 0; font-size: 0.82rem; color: var(--text); word-break: break-word; } .form-alert { border-radius: 12px; padding: 14px 16px; font-size: 0.9rem; border: 1px solid rgba(47, 214, 200, 0.35); background: rgba(47, 214, 200, 0.08); color: var(--text); } .form-alert--error { border-color: rgba(255, 90, 90, 0.4); background: rgba(255, 90, 90, 0.08); } /* ---------- panel de mantenimiento ---------- */ .panel-board { position: relative; z-index: 1; padding: 48px 0 100px; } .panel-board__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; } .panel-board__title { font-family: var(--font-head); font-size: clamp(1.6rem, 3.2vw, 2.2rem); margin: 0; } .panel-board__filter { min-width: 220px; } .panel-board__search { min-width: 280px; flex: 1; max-width: 420px; } .panel-board__filter select { background-color: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 14px; color: var(--text); font-family: var(--font-body); } .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .board { grid-template-columns: 1fr; } } .historial-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; } .historial-grid .req-card { margin-bottom: 0; } .board-col h3 { font-family: var(--font-head); font-size: 0.86rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; color: var(--text-dim); } .board-count { margin-left: auto; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 1px 9px; font-size: 0.76rem; } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .dot--grey { background: var(--text-dim); } .dot--orange { background: var(--orange); } .dot--green { background: var(--green); } /* Agrupa las tarjetas de cada columna del Panel por parque/jefatura — mismo criterio visual que el agrupado por día de Programación CRP, adaptado a tarjetas en vez de filas de tabla. */ .panel-group { margin-bottom: 14px; } .panel-group-header { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 12px; margin-bottom: 10px; font-family: var(--font-head); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 8px; } .panel-group-header:hover { filter: brightness(1.1); } .panel-group-arrow { display: inline-block; width: 14px; color: var(--text-dim); flex: none; } .panel-group-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .panel-group-count { margin-left: auto; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 999px; padding: 1px 9px; font-size: 0.72rem; color: var(--text-dim); } .req-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px; margin-bottom: 14px; transition: border-color 0.2s; position: relative; } .req-card:hover { border-color: rgba(47, 214, 200, 0.4); } .req-card__delete { position: absolute; top: 8px; right: 8px; } .req-card .no { font-family: var(--font-head); font-size: 0.72rem; color: var(--text-dim); margin-bottom: 6px; } .req-card .parque { font-weight: 600; font-size: 0.92rem; margin: 6px 0 4px; } .req-card .detalle { font-size: 0.82rem; color: var(--text-dim); margin-bottom: 4px; } /* Una actividad puede tener varias especialidades a la vez — este contenedor envuelve sus pills sin romper el layout de la tarjeta/celda. */ .tipo-pills { display: flex; flex-wrap: wrap; gap: 4px; } .tipo-pill { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; } .tipo-pill.construccion { background: rgba(47,214,200,0.15); color: var(--teal); } .tipo-pill.electricidad { background: rgba(255,138,61,0.15); color: var(--orange); } .tipo-pill.soldadura { background: rgba(255,209,102,0.15); color: #ffd166; } .tipo-pill.piscinas { background: rgba(106,211,79,0.15); color: var(--green); } .tipo-pill.arbol { background: rgba(122,140,255,0.15); color: #9ba8ff; } .tipo-pill.otros { background: rgba(255,255,255,0.08); color: var(--text-dim); } .tipo-pill.vehiculo { background: rgba(255,209,102,0.15); color: #ffd166; } /* ---------- Programación CRP: tokens de página ---------- Alcance solo de esta página (no del :root global) para no afectar el resto del sitio, que usa tarjetas translúcidas (--panel). Aquí se usa una tarjeta sólida y una fuente monoespaciada para datos técnicos (Gantt, No. de solicitud, contadores) — el resto de la identidad visual (--teal/--orange/--green/--bg/--text) ya coincidía con el estilo que se quería adoptar, así que no hizo falta redefinirla. */ body.page-programacion { --card: #101c30; --prog-radius: 7px; --font-mono: "IBM Plex Mono", var(--font-head), monospace; } /* La tabla de actividades es ancha por naturaleza (16 columnas) — Danny pidió que el bloque que la contiene aproveche más el ancho de la pantalla en vez de quedarse en los mismos 1200px que el resto del sitio (pensados para texto de lectura, no para una tabla de datos). */ body.page-programacion .container { max-width: 1800px; } /* Encabezado centrado (título, texto y buscador, uno debajo del otro) — .panel-board__head también lo usa Panel, con su propio layout en fila; aquí se sobreescribe solo para esta página. La campana de avisos se saca del flujo centrado y queda flotando arriba a la derecha. */ body.page-programacion .panel-board__head { position: relative; flex-direction: column; align-items: center; text-align: center; } body.page-programacion .panel-board__search { max-width: 420px; width: 100%; margin-top: 4px; } body.page-programacion .notif-bell { position: absolute; top: 0; right: 0; align-self: auto; } /* Panel: mismo criterio de encabezado centrado que Programación CRP — rótulo y título centrados, y Buscar + Filtrar por especialidad en una misma fila también centrada (los 2 botones de acción quedan en su propia fila debajo, también centrados). */ body.page-panel .panel-board__head { flex-direction: column; align-items: center; text-align: center; } body.page-panel .panel-board__filtros-row, body.page-panel .panel-board__acciones-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 16px; margin-top: 4px; } :root[data-theme="light"] body.page-programacion { --card: #ffffff; } /* ---------- Programación CRP: campana de avisos ---------- */ .notif-bell { position: relative; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; width: 46px; height: 46px; font-size: 1.2rem; cursor: pointer; align-self: flex-end; flex-shrink: 0; } .notif-bell:hover { border-color: var(--teal); } .notif-badge { position: absolute; top: -6px; right: -6px; background: var(--orange); color: #2a1200; font-family: var(--font-head); font-size: 0.68rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* Selector por id (en vez de .notif-list) a propósito: así esta regla le gana siempre a .gestion-lista, sin importar el orden en el archivo — la versión anterior perdía contra .gestion-lista (180px) y la lista se quedaba chiquita aunque aquí dijera otra cosa. */ /* Tablero tipo Kanban: cada categoría es su propia columna, todas en una sola fila — el título de la categoría arriba, sus avisos apilados debajo. Si no caben todas las columnas a la vez, la fila se desplaza horizontalmente en vez de amontonarlas. */ #notif-list { max-height: 62vh; display: flex; flex-direction: row; align-items: flex-start; gap: 18px; overflow-x: auto; } .notif-group { flex: 1 1 210px; min-width: 210px; max-height: 62vh; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; } @media (max-width: 700px) { #notif-list { flex-direction: column; overflow-x: visible; } .notif-group { max-height: none; overflow-y: visible; } } .notif-cat-header { font-family: var(--font-head); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); margin: 0 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; } .notif-group-items { display: flex; flex-direction: column; gap: 6px; } .notif-item { flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; } .notif-item:hover { border-color: var(--teal); } .notif-item .notif-item-title { font-weight: 600; font-size: 0.86rem; } .notif-item .notif-item-detail { color: var(--text-dim); font-size: 0.78rem; } .notif-item.notif-read { opacity: 0.5; } /* ---------- Programación CRP: dashboard (Centro de Control) ---------- */ .dash-panel { margin-bottom: 26px; } .dash-panel__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; cursor: pointer; user-select: none; } .dash-panel__head h2 { font-family: var(--font-head); font-size: 1.1rem; margin: 0 0 4px; } .dash-panel__arrow { color: var(--text-dim); font-size: 0.85rem; margin-top: 4px; flex-shrink: 0; } .dash-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; margin-bottom: 16px; } .dash-kpi { background: var(--card, var(--panel)); border: 1px solid var(--panel-border); border-radius: 10px; padding: 13px 15px; position: relative; overflow: hidden; } .dash-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--dash-accent, var(--orange)); } .dash-kpi .l { font-family: var(--font-body); font-size: 0.7rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; } .dash-kpi .v { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; margin-top: 2px; } .dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } .dash-card { background: var(--card, var(--panel)); border: 1px solid var(--panel-border); border-radius: 12px; padding: 16px; } .dash-card h3 { font-family: var(--font-head); font-size: 0.86rem; margin: 0 0 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.03em; display: flex; align-items: center; gap: 8px; } .dash-card h3 .tag { font-family: var(--font-mono, var(--font-head)); font-size: 0.68rem; text-transform: none; letter-spacing: 0; background: rgba(255,255,255,0.1); color: var(--text); padding: 1px 7px; border-radius: 8px; } .dash-progress { height: 10px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; } .dash-progress__fill { height: 100%; background: var(--gradient); width: 0%; transition: width 0.4s ease; } .dash-rank-row { display: grid; grid-template-columns: 90px 1fr 28px; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; font-size: 0.8rem; } .dash-rank-row:hover .dash-rank-label { color: var(--teal); } .dash-rank-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-rank-bar { height: 8px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; } .dash-rank-bar__fill { height: 100%; background: var(--teal); } .dash-rank-value { font-family: var(--font-mono, var(--font-head)); font-size: 0.74rem; color: var(--text-dim); text-align: right; } .dash-empty-note { color: var(--text-dim); font-size: 0.82rem; font-style: italic; } .prog-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px); background: var(--teal); color: #06231f; font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; padding: 12px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 100; max-width: 90vw; } .prog-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Programación CRP: Gantt semanal ---------- */ .gantt-section { margin-top: 26px; } .gantt-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-family: var(--font-head); font-size: 0.72rem; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--panel); cursor: pointer; color: var(--text-dim); user-select: none; transition: opacity 0.15s; } .chip.active { border-color: var(--teal); color: var(--text); } .gantt { border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; overflow-x: auto; } .gantt-head, .gantt-row { display: grid; grid-template-columns: 220px 150px repeat(7, 1fr); align-items: stretch; min-width: 780px; } .gantt-head { background: var(--bg-soft); border-bottom: 1px solid var(--panel-border); } .gantt-head div { padding: 8px 8px; font-family: var(--font-mono, var(--font-head)); font-size: 0.68rem; text-transform: uppercase; color: var(--text-dim); border-right: 1px solid var(--panel-border); text-align: center; } .gantt-head div:first-child, .gantt-head div:nth-child(2) { text-align: left; } .gantt-head div.today { color: var(--orange); font-weight: 700; } .gantt-row { border-bottom: 1px solid var(--panel-border); } .gantt-row:last-child { border-bottom: none; } .gantt-row:hover { background: rgba(255,255,255,0.03); } .gantt-label { padding: 9px; font-size: 0.8rem; border-right: 1px solid var(--panel-border); line-height: 1.35; } .gantt-label .oid { font-family: var(--font-mono, var(--font-head)); font-size: 0.68rem; color: var(--orange); margin-right: 4px; } .gantt-label .park { display: block; font-family: var(--font-head); font-size: 0.65rem; color: var(--green); margin-top: 2px; } .gantt-label .overdue-tag { display: inline-block; font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; color: var(--danger); margin-top: 3px; } .gantt-collab { padding: 9px 8px; font-size: 0.74rem; color: var(--text-dim); border-right: 1px solid var(--panel-border); display: flex; align-items: center; } .gantt-days { grid-column: 3 / span 7; display: grid; grid-template-columns: repeat(7, 1fr); position: relative; } .gantt-days .daycell { border-right: 1px solid var(--panel-border); min-height: 44px; } .gantt-days .daycell:last-child { border-right: none; } .gantt-days .daycell.today { background: rgba(255,138,61,0.12); } .today-line { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--orange); z-index: 5; pointer-events: none; } .bar { position: absolute; top: 8px; height: 28px; border-radius: 5px; display: flex; align-items: center; padding: 0 9px; font-size: 0.7rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 2px rgba(0,0,0,0.15); cursor: default; } .bar.bar-estado-pendiente { opacity: 0.55; border: 1.5px dashed rgba(255,255,255,0.9); } .bar.bar-estado-en-curso { border: 1.5px solid rgba(255,255,255,0.55); } .bar.bar-estado-pausada { opacity: 0.6; border: 1.5px dashed var(--orange); } .bar.bar-estado-cancelada { opacity: 0.35; text-decoration: line-through; } .bar.bar-overdue { outline: 2px solid var(--danger); outline-offset: 1px; } .no-date { padding: 9px; font-size: 0.72rem; color: var(--text-dim); font-style: italic; grid-column: 3 / span 7; display: flex; align-items: center; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; } .legend .item { display: flex; align-items: center; gap: 6px; font-size: 0.76rem; color: var(--text-dim); } .legend .sw { width: 10px; height: 10px; border-radius: 3px; } /* ---------- Programación CRP: navegación año/mes/semana ---------- */ .prog-nav { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; } .prog-tabbar { display: flex; flex-wrap: wrap; gap: 6px; } .prog-tab { font-family: var(--font-head); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text-dim); cursor: pointer; white-space: nowrap; transition: border-color 0.2s, color 0.2s, background 0.2s; } .prog-tab:hover { border-color: var(--teal); color: var(--text); } .prog-tab.active { background: var(--teal); color: #06231f; border-color: var(--teal); } .prog-tabbar--year .prog-tab { font-size: 0.7rem; opacity: 0.85; padding: 4px 12px; } .prog-tabbar--month .prog-tab.active::before { content: "● "; color: var(--orange); } .prog-tab-cnt { font-family: var(--font-mono, var(--font-head)); font-size: 0.62rem; margin-left: 6px; background: rgba(255,255,255,0.14); padding: 1px 5px; border-radius: 8px; } .prog-tab.active .prog-tab-cnt { background: rgba(0,0,0,0.16); } /* Las pestañas de semana llevan forma de "pestaña de navegador" (solo redondeadas arriba, sin borde inferior) para distinguirlas de los chips de año/mes — se conserva el relleno naranja de "estás aquí" porque ya es el mismo código de color que usa la línea de "hoy" en el Gantt. */ .prog-tabbar--week .prog-tab { border-radius: var(--prog-radius, 7px) var(--prog-radius, 7px) 0 0; border-bottom: none; } .prog-tabbar--week .prog-tab.active { background: var(--orange); border-color: var(--orange); color: #2a1200; } .view-tabbar { display: flex; gap: 8px; margin-bottom: 18px; } .view-tab { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 9px 16px; font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .view-tab:hover { color: var(--text); border-color: var(--teal); } .view-tab.active { background: var(--teal); color: #06231f; border-color: var(--teal); } /* ---------- Programación CRP: celdas editables ---------- */ .prog-table td[contenteditable="true"] { cursor: text; } .prog-table td[contenteditable="true"]:focus { outline: none; background: rgba(47,214,200,0.08); box-shadow: inset 0 0 0 1px var(--teal); } .prog-cell-select, .prog-cell-date { width: 100%; border: none; color: var(--text); font-family: var(--font-body); font-size: 0.86rem; cursor: pointer; color-scheme: dark; } .prog-cell-date { background: transparent; } /* Con background:transparent el navegador no tiene un color sólido del cual derivar el tema oscuro del listado de opciones, y lo pinta blanco por defecto — un fondo sólido (aunque combine con la celda) es lo que hace que el desplegable de opciones también salga oscuro. */ .prog-cell-select { background: var(--bg-soft); border-radius: 6px; } .prog-cell-select:focus, .prog-cell-date:focus { outline: none; } .prog-cell-date::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; } .prog-cell-date::-webkit-calendar-picker-indicator:hover { opacity: 1; } .prog-readonly { color: var(--text-dim); font-style: italic; } .prog-motivo-pausa { margin-top: 5px; padding: 3px 6px; border: 1px dashed var(--panel-border); border-radius: 6px; font-size: 0.78rem; color: var(--text-dim); min-height: 16px; } .prog-motivo-pausa:focus { outline: none; border-color: var(--orange); color: var(--text); } .prog-motivo-pausa:empty::before { content: "¿Motivo de la pausa?"; opacity: 0.6; } .prog-collab-cell { position: relative; } .prog-collab-summary { font-size: 0.86rem; cursor: pointer; min-height: 20px; } .prog-collab-summary:empty::after { content: "Sin asignar"; color: var(--text-dim); font-style: italic; } /* ---------- Programación CRP: barra de herramientas de la tabla ---------- */ .table-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } /* Antes flotaba encima de la tabla (position:absolute) y tapaba justo los datos que se querían mostrar/ocultar — ahora empuja la tabla hacia abajo en vez de superponerse. */ .col-toggle__panel { margin-bottom: 12px; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 10px; padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.15); max-height: 220px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2px; } .col-toggle__option { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 0.82rem; border-radius: 6px; cursor: pointer; } .col-toggle__option:hover { background: rgba(255,255,255,0.05); } .col-toggle__option input { accent-color: var(--teal); } .prog-table.hide-col-1 th:nth-child(1), .prog-table.hide-col-1 td:nth-child(1) { display: none; } .prog-table.hide-col-2 th:nth-child(2), .prog-table.hide-col-2 td:nth-child(2) { display: none; } .prog-table.hide-col-3 th:nth-child(3), .prog-table.hide-col-3 td:nth-child(3) { display: none; } .prog-table.hide-col-4 th:nth-child(4), .prog-table.hide-col-4 td:nth-child(4) { display: none; } .prog-table.hide-col-5 th:nth-child(5), .prog-table.hide-col-5 td:nth-child(5) { display: none; } .prog-table.hide-col-6 th:nth-child(6), .prog-table.hide-col-6 td:nth-child(6) { display: none; } .prog-table.hide-col-7 th:nth-child(7), .prog-table.hide-col-7 td:nth-child(7) { display: none; } .prog-table.hide-col-8 th:nth-child(8), .prog-table.hide-col-8 td:nth-child(8) { display: none; } .prog-table.hide-col-9 th:nth-child(9), .prog-table.hide-col-9 td:nth-child(9) { display: none; } .prog-table.hide-col-10 th:nth-child(10), .prog-table.hide-col-10 td:nth-child(10) { display: none; } .prog-table.hide-col-11 th:nth-child(11), .prog-table.hide-col-11 td:nth-child(11) { display: none; } .prog-table.hide-col-12 th:nth-child(12), .prog-table.hide-col-12 td:nth-child(12) { display: none; } .prog-table.hide-col-13 th:nth-child(13), .prog-table.hide-col-13 td:nth-child(13) { display: none; } .prog-table.hide-col-14 th:nth-child(14), .prog-table.hide-col-14 td:nth-child(14) { display: none; } .prog-table.hide-col-15 th:nth-child(15), .prog-table.hide-col-15 td:nth-child(15) { display: none; } .prog-table.hide-col-16 th:nth-child(16), .prog-table.hide-col-16 td:nth-child(16) { display: none; } .prog-acciones { display: flex; gap: 2px; } .prog-row-delete { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1rem; padding: 4px 6px; border-radius: 6px; } .prog-row-delete:hover { color: var(--danger); background: rgba(255,92,92,0.1); } .prog-row-delete.prog-action-neutral:hover { color: var(--teal); background: rgba(47,214,200,0.1); } /* ---------- Programación CRP: Permiso de Trabajo en Altura (F-TH-68) ---------- */ /* Selector por id (en vez de .alturas-modal) a propósito: esta regla vive ANTES que .modal en el archivo, y con la misma especificidad de clase .modal (max-width:460px, más abajo) le ganaba y dejaba el modal angosto sin importar qué ancho se pusiera aquí — igual que ya había pasado una vez con #notif-list. Con id, siempre gana sin depender del orden. overflow-x: hidden explícito porque, al poner solo overflow-y, el navegador activa también el scroll horizontal por defecto — de ahí salía la barra que se desplazaba a los lados. */ #alturas-modal { width: 1600px; max-width: 97vw; max-height: 92vh; overflow-y: auto; overflow-x: hidden; } .alturas-hint { color: var(--text-dim); font-size: 0.8rem; margin: -6px 0 4px; } .alturas-section { margin: 18px 0 10px; font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); border-bottom: 1px solid var(--panel-border); padding-bottom: 6px; } .alturas-section:first-child { margin-top: 6px; } .alturas-field { margin-bottom: 10px; } .alturas-field label { display: block; font-size: 0.7rem; font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); margin-bottom: 4px; } .alturas-field input, .alturas-field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--bg-soft); color: var(--text); font-family: var(--font-body); font-size: 0.86rem; } .alturas-field textarea { resize: vertical; min-height: 50px; } .alturas-personas-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } @media (max-width: 700px) { .alturas-personas-grid { grid-template-columns: 1fr; } } .alturas-persona-row { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel); } .alturas-persona-row input { padding: 7px 9px; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--bg-soft); color: var(--text); font-family: var(--font-body); font-size: 0.82rem; } .alturas-radio-group { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text); margin-bottom: 10px; } .alturas-radio-group label { display: flex; align-items: center; gap: 5px; cursor: pointer; } .alturas-checklist-grid { display: grid; grid-template-columns: 1fr; } .alturas-check-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--panel-border); font-size: 0.82rem; color: var(--text); } .alturas-check-row:last-child { border-bottom: none; } .alturas-check-row span { flex: 1; } .alturas-check-row select { width: 92px; flex: 0 0 auto; padding: 6px; border: 1px solid var(--panel-border); border-radius: 6px; background: var(--bg-soft); color: var(--text); font-family: var(--font-body); font-size: 0.8rem; } .dia-toggle-btn { background: var(--teal); color: #06231f; border: none; border-radius: 6px; width: 20px; height: 20px; font-size: 0.9rem; font-weight: 700; line-height: 1; cursor: pointer; margin-right: 6px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .dia-toggle-btn:hover { filter: brightness(1.15); } .dia-row { background: rgba(47,214,200,0.03); } .dia-row td { padding: 8px 10px; font-size: 0.78rem; border-bottom: 1px dashed var(--panel-border); vertical-align: middle; } /* La marca "↳" es un ::before, no texto en la celda — así no compite por ancho con el input de fecha (eso fue justo lo que antes hacía que el input se desbordara 900px hacia las celdas vecinas y tapara el clic del calendario). */ .dia-row td.dia-row__label { position: relative; padding-left: 18px; } .dia-row__label::before { content: "↳"; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 0.8rem; } .dia-row--add td { padding: 6px 10px; border-bottom: 1px solid var(--panel-border); } /* Encabezado de grupo por día calendario (LUNES, MARTES...) — igual que Programación mensual de mantenimiento: cada franja de color identifica el día de la semana y se puede colapsar con un clic. */ .day-group-row { cursor: pointer; } .day-group-row td { padding: 9px 14px; font-family: var(--font-head); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); background: var(--bg-soft); border-bottom: 2px solid var(--panel-border); border-top: 1px solid var(--panel-border); } .day-group-row:hover td { filter: brightness(1.08); } .day-group-arrow { display: inline-block; width: 14px; color: var(--text-dim); } .day-group-label { font-weight: 600; } .day-group-row.day-mon td { border-top-color: #C6432B; } .day-group-row.day-tue td { border-top-color: #C9A227; } .day-group-row.day-wed td { border-top-color: #3B6E91; } .day-group-row.day-thu td { border-top-color: #3F7A5C; } .day-group-row.day-fri td { border-top-color: #5B6B72; } /* ---------- Programación CRP (tabla de actividades) ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--panel-border); border-radius: 14px; background: var(--card, var(--panel)); box-shadow: 0 8px 24px rgba(0,0,0,0.25); } /* table-layout:fixed + un ancho por columna a propósito: la tabla puede ser más ancha que la pantalla (para eso está la barra de desplazamiento lateral de .table-wrap) en vez de apretar cada columna para que quepan todas sin scroll — mismo criterio que ya usaba Programación mensual de mantenimiento. */ .prog-table { width: 100%; border-collapse: collapse; min-width: 2150px; table-layout: fixed; } .prog-table th:nth-child(1), .prog-table td:nth-child(1) { width: 50px; } .prog-table th:nth-child(2), .prog-table td:nth-child(2) { width: 90px; } .prog-table th:nth-child(3), .prog-table td:nth-child(3) { width: 90px; } .prog-table th:nth-child(4), .prog-table td:nth-child(4) { width: 230px; } .prog-table th:nth-child(5), .prog-table td:nth-child(5) { width: 150px; } .prog-table th:nth-child(6), .prog-table td:nth-child(6) { width: 180px; } .prog-table th:nth-child(7), .prog-table td:nth-child(7) { width: 140px; } .prog-table th:nth-child(8), .prog-table td:nth-child(8) { width: 140px; } .prog-table th:nth-child(9), .prog-table td:nth-child(9) { width: 120px; } .prog-table th:nth-child(10), .prog-table td:nth-child(10) { width: 120px; } .prog-table th:nth-child(11), .prog-table td:nth-child(11) { width: 100px; } .prog-table th:nth-child(12), .prog-table td:nth-child(12) { width: 120px; } .prog-table th:nth-child(13), .prog-table td:nth-child(13) { width: 200px; } .prog-table th:nth-child(14), .prog-table td:nth-child(14) { width: 200px; } .prog-table th:nth-child(15), .prog-table td:nth-child(15) { width: 140px; } .prog-table th:nth-child(16), .prog-table td:nth-child(16) { width: 150px; } /* El min-width de 2150px es para las 16 columnas completas — en pantalla chica arranca con solo 6 visibles (ver programacion.js), y sin esto el sobrante quedaría igual estirado a 2150px de ancho vacío. Solo importa cuando de verdad hay columnas ocultas; con las 16 puestas, el ancho real de las celdas ya pasa este mínimo de todos modos. */ @media (max-width: 860px) { .prog-table { min-width: 920px; } } .prog-table th { text-align: left; font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); background: var(--bg-soft); padding: 12px 14px; border-bottom: 1px solid var(--panel-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prog-table td { padding: 12px 14px; border-bottom: 1px solid var(--panel-border); font-size: 0.86rem; vertical-align: top; overflow-wrap: break-word; } .prog-table tbody tr:last-child td { border-bottom: none; } .prog-table tbody tr:hover { background: rgba(255,255,255,0.03); } /* Fila de una actividad ya Completada: solo una franja verde delgada a la izquierda (sin teñir el resto de la fila) — se hace con box-shadow (no border) porque .prog-table usa border-collapse:collapse, que ignora los border de / del lado compartido con la celda vecina. */ .prog-table tbody tr.fila-completada > td:first-child { box-shadow: inset 3px 0 0 var(--green); } /* Celda de descripción de un "día" suelto: clic para saltar a su actividad principal (puede vivir en otra semana/mes, ver irAActividadPrincipal en programacion.js). */ .prog-link-principal { cursor: pointer; } .prog-link-principal:hover { color: var(--teal); text-decoration: underline; } /* Resalte momentáneo (1.6s) sobre la fila principal al llegar desde el salto de arriba, para ubicarla fácil entre las demás. */ @keyframes prog-fila-destacada { from { background: rgba(47, 214, 200, 0.28); } to { background: transparent; } } .prog-table tbody tr.fila-destacada > td { animation: prog-fila-destacada 1.6s ease-out; } .prog-table .no-solicitud { font-family: var(--font-mono, var(--font-head)); font-size: 0.72rem; color: var(--text-dim); } .prog-table .badge-interna { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: var(--text-dim); } .prog-fotos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .prog-foto-thumb-wrap { position: relative; width: 40px; height: 40px; flex-shrink: 0; } .prog-foto-thumb { display: block; width: 40px; height: 40px; border-radius: 6px; overflow: hidden; border: 1px solid var(--panel-border); } .prog-foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .prog-foto-del { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 10px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; } .prog-foto-del:hover { filter: brightness(1.15); } .prog-foto-add { width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px; border: 1px dashed var(--panel-border); background: none; color: var(--text-dim); font-size: 18px; cursor: pointer; display: grid; place-items: center; } .prog-foto-add:hover { border-color: var(--teal); color: var(--teal); } /* ---------- tracker de estado (seguimiento) ---------- */ .tracker { display: flex; align-items: center; gap: 0; margin: 8px 0 26px; } .tracker-step { flex: 1; text-align: center; position: relative; } .tracker-step .circle { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); border: 2px solid var(--panel-border); display: grid; place-items: center; margin: 0 auto 8px; font-family: var(--font-head); font-size: 0.8rem; color: var(--text-dim); } .tracker-step.done .circle { background: var(--green); border-color: var(--green); color: #06140f; } .tracker-step.active .circle { background: var(--orange); border-color: var(--orange); color: #2a1200; } .tracker-step .lbl { font-size: 0.76rem; color: var(--text-dim); } .tracker-step.active .lbl, .tracker-step.done .lbl { color: var(--text); font-weight: 600; } .tracker-line { position: absolute; top: 17px; left: -50%; width: 100%; height: 2px; background: var(--panel-border); z-index: -1; } .tracker-step.done .tracker-line, .tracker-step.active .tracker-line { background: var(--green); } .tracker-step:first-child .tracker-line { display: none; } .agenda-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--panel-border); font-size: 0.88rem; } .agenda-item:last-child { border-bottom: none; } .agenda-item .fecha { color: var(--teal); font-weight: 600; min-width: 78px; font-family: var(--font-head); } .status-pill { display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 3px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .status-pill.sin { background: rgba(159, 176, 201, 0.16); color: var(--text-dim); } .status-pill.curso { background: rgba(255, 138, 61, 0.15); color: var(--orange); } .status-pill.fin { background: rgba(106, 211, 79, 0.15); color: var(--green); } /* ---------- confirmación de envío ---------- */ .success-view { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; } .success-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--gradient-soft); color: var(--green); display: grid; place-items: center; } .success-icon svg { width: 26px; height: 26px; } .success-message { margin: 0; font-size: 1.05rem; color: var(--text); max-width: 46ch; } /* ---------- tarjetas de categoría (formulario) ---------- */ .cards2 { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } @media (max-width:820px){ .cards2 { grid-template-columns:1fr; } } .choice-card { background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px; text-align: center; font-family: var(--font-body); color: var(--text); cursor: pointer; transition: border-color .2s, transform .2s; } .choice-card:hover { border-color: var(--teal); transform: translateY(-1px); } .choice-card.selected { border-color: var(--teal); background: rgba(47,214,200,0.08); } .choice-card .choice-icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--gradient-soft); color: var(--teal); margin: 0 auto 10px; } .choice-card .choice-icon svg { width: 20px; height: 20px; } .choice-card strong { display: block; font-family: var(--font-head); font-size: 0.98rem; margin-bottom: 4px; } .choice-card .desc { color: var(--text-dim); font-size: 0.82rem; } /* ---------- modal (programación) ---------- */ .modal { border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--bg-soft); color: var(--text); padding: 0; max-width: 460px; width: 92vw; } .modal::backdrop { background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); } .modal--wide { max-width: 560px; } .modal--notif { max-width: 1300px; } .gestion-seccion { border-top: 1px solid var(--panel-border); padding-top: 16px; } .gestion-seccion:first-of-type { border-top: none; padding-top: 0; } .gestion-seccion h4 { font-family: var(--font-head); font-size: 0.95rem; margin: 0 0 10px; } .gestion-lista { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; max-height: 180px; overflow-y: auto; } .gestion-item { display: flex; align-items: center; justify-content: space-between; background: var(--panel); border: 1px solid var(--panel-border); border-radius: 8px; padding: 7px 12px; font-size: 0.86rem; } .gestion-item .x { color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 0 4px; } .gestion-item .x:hover { color: var(--danger); } .gestion-add { display: flex; gap: 8px; } .gestion-add input { flex: 1; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 10px; padding: 9px 12px; color: var(--text); font-family: var(--font-body); font-size: 0.88rem; } .modal-form { padding: 28px; display: flex; flex-direction: column; gap: 16px; } .modal-form h3 { font-family: var(--font-head); margin: 0; font-size: 1.15rem; } .modal-form textarea { background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 12px; padding: 10px 13px; color: var(--text); font-family: var(--font-body); resize: vertical; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 4px; } /* ---------- crédito de diseño ---------- */ .designer-credit { display: flex; flex-direction: column; line-height: 1.3; } .designer-credit .name { color: var(--text-dim); font-weight: 600; } .designer-credit .email { color: var(--text-dim); opacity: 0.8; } .designer-credit--top { text-align: right; } .designer-credit--footer { text-align: center; font-size: 0.82rem; } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- Agente CRP (chat) ---------- */ .agent-fab { position: fixed; bottom: 22px; right: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--gradient); color: #06140f; border: none; font-size: 24px; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); z-index: 90; display: flex; align-items: center; justify-content: center; } .agent-fab:hover { filter: brightness(0.94); } .agent-fab .dot { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--orange); border: 2px solid var(--bg); } .agent-panel { position: fixed; bottom: 90px; right: 22px; width: 380px; max-width: 92vw; height: 560px; max-height: 76vh; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: var(--radius); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); display: none; flex-direction: column; overflow: hidden; z-index: 90; } .agent-panel.show { display: flex; } .agent-head { background: rgba(255, 255, 255, 0.04); color: var(--text); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-head); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--panel-border); } .agent-head span { color: var(--text-dim); font-weight: 400; font-size: 11.5px; } .agent-close { background: none; border: none; color: var(--text); font-size: 16px; cursor: pointer; opacity: 0.7; } .agent-close:hover { opacity: 1; } .agent-messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; } .agent-msg { max-width: 88%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.48; font-family: var(--font-body); white-space: pre-wrap; } .agent-msg.agent { align-self: flex-start; background: var(--panel); border: 1px solid var(--panel-border); color: var(--text); border-bottom-left-radius: 3px; } .agent-msg.user { align-self: flex-end; background: var(--teal); color: #06140f; border-bottom-right-radius: 3px; } .agent-list { margin: 6px 0 0; padding-left: 18px; } .agent-list li { margin-bottom: 4px; } .agent-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .agent-quick button { border: 1px solid var(--panel-border); background: transparent; color: var(--text); border-radius: 20px; padding: 5px 12px; font-size: 11.5px; cursor: pointer; font-family: var(--font-body); } .agent-quick button:hover { border-color: var(--teal); color: var(--teal); } /* Resultado de búsqueda (No. OT, No. OS con actividad ya programada, o nombre de actividad) — clicable, salta a la fila en Programación CRP. */ .agent-resultado { border: 1px solid var(--panel-border); border-radius: 10px; padding: 8px 11px; margin: 6px 0; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .agent-resultado:hover { border-color: var(--teal); background: rgba(47, 214, 200, 0.08); } .agent-resultado + .agent-resultado { margin-top: 8px; } .agent-typing { display: inline-flex; gap: 3px; padding: 2px 0; } .agent-typing span { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--text-dim); animation: agentTyping 1.2s infinite; } .agent-typing span:nth-child(2) { animation-delay: 0.2s; } .agent-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes agentTyping { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } } .agent-inputrow { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--panel-border); } .agent-inputrow input { flex: 1; padding: 9px 13px; border: 1px solid var(--panel-border); border-radius: 20px; font-family: var(--font-body); font-size: 13px; background: var(--bg); color: var(--text); } .agent-inputrow input:focus { outline: none; border-color: var(--teal); } .agent-inputrow button { border: none; background: var(--orange); color: #2a1200; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; flex-shrink: 0; } .agent-inputrow button:hover { background: #e67a33; } @media (max-width: 520px) { .agent-panel { right: 12px; bottom: 82px; width: calc(100vw - 24px); } .agent-fab { right: 16px; bottom: 16px; } } /* ---------- Estadísticas ---------- */ /* Paleta validada contra ceguera al color (dataviz skill, six-checks validator) sobre esta misma superficie oscura (#0a1120) — no son los colores de marca del sitio (--teal/--orange/--green) porque esos, uno al lado del otro en un gráfico, no pasan la prueba de separación CVD. La identidad de marca vive en el resto de la página (fondo, tarjetas, tipografía); el color de los datos vive aquí, elegido solo por legibilidad. */ .viz-root { --v-surface: var(--bg-soft); --v-ink: var(--text); --v-ink-2: var(--text-dim); --v-grid: rgba(255, 255, 255, 0.08); --v-axis: rgba(255, 255, 255, 0.2); --v-cat-1: #3987e5; /* azul */ --v-cat-2: #d95926; /* naranja */ --v-cat-3: #199e70; /* aguamarina */ --v-cat-4: #c98500; /* amarillo */ --v-cat-5: #d55181; /* magenta */ --v-cat-6: #008300; /* verde */ --v-cat-7: #9085e9; /* violeta */ --v-cat-8: #e66767; /* rojo */ --v-seq: #3987e5; --v-good: #0ca30c; --v-warning: #fab219; --v-serious: #ec835a; --v-critical: #d03b3b; --v-other: #5b6b7a; } /* Los --v-cat-N son fijos (los usa el JS de estadisticas.js como su propio mapa de colores, ya validado por separado para cada tema — ver PALETA_DARK/PALETA_LIGHT ahí) — lo único que sí depende del tema aquí en CSS son las líneas de cuadrícula/eje (blanco tenue sobre oscuro, negro tenue sobre claro) y el fondo del tooltip. */ :root[data-theme="light"] .viz-root { --v-grid: rgba(6, 20, 35, 0.09); --v-axis: rgba(6, 20, 35, 0.28); } :root[data-theme="light"] .viz-tooltip { background: #ffffff; box-shadow: 0 10px 24px rgba(6, 20, 35, 0.16); } .viz-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 22px; } .viz-toolbar select { background: var(--v-surface); border: 1px solid var(--panel-border); color: var(--v-ink); border-radius: 10px; padding: 8px 12px; font-family: var(--font-body); font-size: 0.85rem; cursor: pointer; } .viz-toolbar .spacer { flex: 1; } .viz-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 22px; } .viz-kpi { background: var(--v-surface); border: 1px solid var(--panel-border); border-radius: 14px; padding: 16px 18px; position: relative; overflow: hidden; } .viz-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--v-seq); } .viz-kpi .l { font-family: var(--font-body); font-size: 0.72rem; color: var(--v-ink-2); text-transform: uppercase; letter-spacing: 0.04em; } .viz-kpi .v { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--v-ink); margin-top: 4px; line-height: 1; } .viz-kpi .d { font-size: 0.78rem; margin-top: 6px; } /* Para tarjetas de un solo registro (Solicitante, Atendido por, Tipo...) — son texto, no números grandes, así que el mismo tamaño de las demás KPI se ve desproporcionado y a veces se corta. */ .viz-kpi--texto .v { font-size: 1.05rem; line-height: 1.25; margin-top: 6px; } .viz-kpi .d.up { color: var(--v-good); } .viz-kpi .d.down { color: var(--v-critical); } .viz-kpi .d.flat { color: var(--v-ink-2); } .viz-kpi__spark { margin-top: 8px; line-height: 0; opacity: 0.9; } .viz-spark { display: block; width: 100%; height: 26px; } /* Tablero de Satisfacción: replica las mismas posiciones del Power BI de referencia (logo/parque/KPIs/buscador arriba; solicitante/calificación/ gráfica en medio; lista de servicios grande a la izquierda con atendido-por/cumplió/fechas/tipo a la derecha) en vez de tarjetas sueltas en un grid genérico — así se lee igual que el original. */ .viz-sat-board { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-bottom: 22px; grid-template-areas: "logo logo parque parque parque kpi1 kpi1 kpi2 kpi2 buscar buscar buscar" "solic solic solic calif calif calif grafica grafica grafica grafica grafica grafica" "servicio servicio servicio servicio servicio servicio atendido atendido atendido donut donut donut" "servicio servicio servicio servicio servicio servicio finmtt finmtt iniciomtt iniciomtt tipo tipo"; } @media (max-width: 980px) { .viz-sat-board { grid-template-columns: 1fr; grid-template-areas: "logo" "parque" "kpi1" "kpi2" "buscar" "solic" "calif" "grafica" "atendido" "donut" "finmtt" "iniciomtt" "tipo" "servicio"; } } .viz-sat-cell { background: var(--v-surface); border: 1px solid var(--panel-border); border-radius: 14px; padding: 12px 16px; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; } .viz-sat-cell--logo { align-items: center; justify-content: center; padding: 8px; font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; color: var(--teal); } .viz-sat-cell .l { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--v-ink-2); margin-top: 4px; } .viz-sat-cell .v { font-family: var(--font-head); font-weight: 700; line-height: 1.15; } .viz-sat-cell--parque { padding: 0; } .viz-sat-cell--parque .v { font-size: 1.25rem; } /* Botón que ocupa toda la celda de parque, con el mismo indicador de flecha ya usado en .multiselect__toggle — clic despliega el mismo .multiselect__panel de los demás desplegables del sitio. */ .viz-sat-parque-toggle { all: unset; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 12px 34px 12px 16px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%239fb0c9' stroke-width='1.6'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px 14px; } .viz-sat-parque-toggle:hover { background-color: var(--panel); } .viz-sat-cell--parque .multiselect__panel { max-height: 260px; } .viz-sat-cell--kpi .v { font-size: 1.7rem; } .viz-sat-cell--texto .v { font-size: 1rem; word-break: break-word; } .viz-sat-cell--buscar { flex-direction: row; align-items: center; gap: 8px; } .viz-sat-cell--buscar input { flex: 1; min-width: 0; background: var(--bg-soft); border: 1px solid var(--panel-border); border-radius: 8px; padding: 7px 10px; color: var(--text); font-family: var(--font-body); font-size: 0.82rem; } .viz-sat-cell--calif { flex-direction: row; justify-content: space-around; gap: 6px; text-align: center; } .viz-sat-cell--calif .item .v { font-size: 1.3rem; } .viz-sat-cell--calif .item .l { margin-top: 2px; } .viz-sat-cell--chart, .viz-sat-cell--donut { padding: 10px 14px 4px; } .viz-sat-cell--chart h4, .viz-sat-cell--donut h4 { margin: 0 0 4px; font-family: var(--font-head); font-size: 0.82rem; font-weight: 600; } .viz-sat-cell--servicio { padding: 0; overflow: hidden; } .viz-sat-cell--servicio .viz-sat-servicio-head { padding: 12px 16px 8px; flex-shrink: 0; } .viz-sat-cell--servicio .viz-sat-servicio-head h4 { margin: 0; font-family: var(--font-head); font-size: 0.9rem; } .viz-sat-cell--servicio .viz-parque-list { flex: 1; overflow-y: auto; padding: 0 16px 12px; margin: 0; } .viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; } .viz-card { background: var(--v-surface); border: 1px solid var(--panel-border); border-radius: 14px; padding: 18px 20px 14px; } .viz-card.viz-card--wide { grid-column: 1 / -1; } .viz-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 4px; } .viz-card h3 { font-family: var(--font-head); font-size: 0.98rem; margin: 0; } .viz-card .sub { font-size: 0.76rem; color: var(--v-ink-2); margin: 2px 0 12px; min-height: 1px; } .viz-card__table-btn { background: transparent; border: 1px solid var(--panel-border); color: var(--v-ink-2); border-radius: 8px; padding: 3px 9px; font-size: 0.7rem; cursor: pointer; flex-shrink: 0; } .viz-card__table-btn:hover { color: var(--v-ink); border-color: var(--v-ink-2); } .viz-card__table-btn:disabled { opacity: 0.5; cursor: default; } .viz-card__tabs { display: flex; gap: 6px; margin-bottom: 12px; } .viz-card__tab { background: transparent; border: 1px solid var(--panel-border); color: var(--v-ink-2); border-radius: 999px; padding: 4px 12px; font-size: 0.74rem; font-family: var(--font-body); cursor: pointer; } .viz-card__tab:hover { color: var(--v-ink); } .viz-card__tab.active { background: var(--v-seq); border-color: var(--v-seq); color: #ffffff; font-weight: 600; } .viz-empty { color: var(--v-ink-2); font-size: 0.82rem; font-style: italic; padding: 20px 0; } .viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 0.76rem; color: var(--v-ink-2); } .viz-legend .key { display: inline-flex; align-items: center; gap: 6px; } .viz-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } /* ---------- Satisfacción: filtro cruzado estilo Power BI ---------- */ .viz-filtro-chip-row { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: -6px; } .viz-filtro-chip-label { font-size: 0.78rem; color: var(--v-ink-2); } .viz-filtro-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--v-seq); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 5px 6px 5px 11px; border-radius: 999px; } .viz-filtro-chip button { background: rgba(255,255,255,0.18); border: none; color: inherit; cursor: pointer; width: 18px; height: 18px; border-radius: 50%; font-size: 0.7rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .viz-filtro-chip button:hover { background: rgba(255,255,255,0.32); } .viz-parque-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; } .viz-parque-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; background: none; border: 1px solid transparent; color: var(--v-ink); font-family: var(--font-body); font-size: 0.85rem; } .viz-parque-row:hover { background: var(--panel); } .viz-parque-row.active { background: var(--v-seq); border-color: var(--v-seq); color: #fff; font-weight: 600; } .viz-parque-row .n { font-size: 0.74rem; color: var(--v-ink-2); font-variant-numeric: tabular-nums; flex-shrink: 0; } .viz-parque-row.active .n { color: rgba(255,255,255,0.85); } /* "Servicio realizado": misma lista de .viz-parque-row, pero la descripción puede ser larga — se recorta con "…" en vez de partirse en varias líneas y desordenar el alto de cada fila. */ .viz-servicio-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .viz-tooltip { position: fixed; pointer-events: none; z-index: 200; background: #0d1626; border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 11px; font-size: 0.78rem; color: var(--v-ink); box-shadow: 0 10px 24px rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.1s ease; max-width: 220px; } .viz-tooltip.show { opacity: 1; } .viz-tooltip .tt-title { color: var(--v-ink-2); font-size: 0.7rem; margin-bottom: 3px; } .viz-tooltip .tt-row { display: flex; align-items: center; gap: 6px; } .viz-tooltip .tt-row + .tt-row { margin-top: 2px; } .viz-tooltip .tt-key { width: 10px; height: 2px; border-radius: 1px; flex-shrink: 0; } .viz-tooltip .tt-val { font-weight: 700; } .viz-svg .bar { cursor: pointer; transition: opacity 0.1s ease; } .viz-svg .bar:hover, .viz-svg .bar.hover { opacity: 0.82; } .viz-svg .line-path { fill: none; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; } .viz-svg .area-fill { opacity: 0.1; } .viz-svg .end-dot { stroke: var(--v-surface); stroke-width: 2px; } .viz-svg .grid-line { stroke: var(--v-grid); stroke-width: 1px; } .viz-svg .axis-line { stroke: var(--v-axis); stroke-width: 1px; } .viz-svg text { font-family: var(--font-body); fill: var(--v-ink-2); font-size: 10.5px; } .viz-svg .bar-label { fill: var(--v-ink); font-size: 10.5px; } .viz-svg .crosshair { stroke: var(--v-ink-2); stroke-width: 1px; opacity: 0; pointer-events: none; } .viz-meter { display: flex; align-items: center; gap: 14px; } .viz-meter__track { flex: 1; height: 10px; border-radius: 6px; background: rgba(57, 135, 229, 0.18); overflow: hidden; } .viz-meter__fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; } .viz-meter__val { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--v-ink); width: 56px; text-align: right; } .viz-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .viz-table th, .viz-table td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--panel-border); } .viz-table th { color: var(--v-ink-2); font-weight: 500; } .viz-table td:not(:first-child), .viz-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; } .viz-compare-bar { display: none; flex-wrap: wrap; align-items: center; gap: 10px; background: var(--v-surface); border: 1px solid var(--panel-border); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; } .viz-compare-bar.show { display: flex; } .viz-compare-bar select { background: var(--bg); border: 1px solid var(--panel-border); color: var(--v-ink); border-radius: 8px; padding: 6px 10px; font-size: 0.82rem; } .viz-compare-bar .vs { color: var(--v-ink-2); font-size: 0.8rem; } /* ---------- letrero de bienvenida (session-nav.js) ---------- */ @keyframes crp-saludo-entra { from { opacity: 0; transform: translateY(-14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes crp-saludo-brillo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes crp-saludo-emoji { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(-8deg); } } .crp-saludo { position: relative; display: flex; align-items: center; justify-content: center; gap: 18px; margin: 28px 0 22px; padding: 20px 52px; text-align: center; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--panel-border); animation: crp-saludo-entra 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .crp-saludo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(47, 214, 200, 0.16), rgba(106, 211, 79, 0.1), rgba(255, 138, 61, 0.12)); background-size: 200% 200%; animation: crp-saludo-brillo 6s ease-in-out infinite; pointer-events: none; } .crp-saludo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: var(--gradient); opacity: 0.55; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .crp-saludo--saliendo { animation: crp-saludo-entra 0.35s ease reverse forwards; } .crp-saludo__emoji { font-size: 2.6rem; line-height: 1; animation: crp-saludo-emoji 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); } .crp-saludo__texto { position: relative; z-index: 1; } .crp-saludo__titulo { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.25; } .crp-saludo__nombre { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .crp-saludo__sub { margin-top: 2px; font-size: 1.02rem; font-weight: 600; color: var(--text-dim); } .crp-saludo__frase { margin-top: 8px; font-size: 0.86rem; color: var(--text-dim); opacity: 0.9; } .crp-saludo__cerrar { position: absolute; top: 12px; right: 14px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.08); color: var(--text-dim); cursor: pointer; font-size: 0.8rem; line-height: 1; z-index: 2; } .crp-saludo__cerrar:hover { background: rgba(255, 255, 255, 0.16); color: var(--text); } :root[data-theme="light"] .crp-saludo__cerrar { background: rgba(6, 20, 35, 0.06); } :root[data-theme="light"] .crp-saludo__cerrar:hover { background: rgba(6, 20, 35, 0.12); } @media (max-width: 640px) { .crp-saludo { flex-direction: column; align-items: center; gap: 8px; padding: 18px 44px; } .crp-saludo__titulo { font-size: 1.25rem; } } @media (max-width: 720px) { .viz-grid { grid-template-columns: 1fr; } }