:root { color-scheme: light; --azul-oscuro: #0f2d3d; --azul-medio: #16455c; --verde: #1c9c5b; --verde-bg: #e5f7ee; --verde-bg-borde: #bfe9d2; --rojo: #d3402f; --rojo-bg: #fdeae7; --rojo-bg-borde: #f0c4bd; --amarillo: #f5a623; --amarillo-bg: #fdf1dc; --amarillo-bg-borde: #f2d9a8; --gris-medio: var(--gris-medio); --neutro-num: #56707d; --neutro-bg: #eaeff2; --neutro-bg-borde: #d3dbe0; --borde: #e2e8ec; /* Antes #d7dfe4: contra el fondo de la pagina (#f2f6f8) era casi el mismo tono, asi que las tarjetas (equipo, repuesto) practicamente no se distinguian del fondo. Este valor da un salto de contraste real contra el blanco de la tarjeta y contra el fondo, en vez de una diferencia de unos pocos puntos de luminosidad. */ --borde-card: #b6c4cc; --azul-claro: #a9c4d1; --tag-mini-bg: rgba(255,255,255,0.75); /* Superficies y texto: separados de los colores de marca de arriba para que el modo oscuro (mas abajo) pueda invertirlos sin tocar el resto. */ --fondo-pagina: #f2f6f8; --fondo-tarjeta: #ffffff; --fondo-sutil: #f2f6f8; --texto-fuerte: #1a1a1a; --texto-medio: var(--texto-medio); --texto-suave: var(--texto-suave); --texto-tenue: var(--texto-tenue); --texto-palido: var(--texto-palido); /* azul-oscuro/azul-medio siguen fijos para fondos solidos (topbar, botones con texto blanco) -- estos dos son la version "texto de acento sobre superficie clara" de esos mismos colores, que en oscuro necesita aclararse para no perder contraste. */ --acento-texto: var(--azul-oscuro); --acento-texto-medio: var(--azul-medio); --aviso-texto: #7a5200; --peligro-texto: #a15147; /* Relleno solido para "esto esta seleccionado" (chip/tab/boton activo). En claro es azul-oscuro sobre superficies claras -- se nota. En oscuro esas mismas superficies YA son oscuras, asi que un relleno igual de oscuro se pierde: en oscuro este valor se aclara (ver mas abajo). */ --seleccion-fondo: var(--azul-oscuro); --seleccion-texto: white; --overlay-hover: rgba(15,45,61,0.06); /* Amarillo de alerta para "fuera de servicio" -- fijo en ambos temas (no se invierte como el resto de arriba): tiene que ser un amarillo puro y saturado, bien distinto del --amarillo ambar que ya se usa para "por vencer", para que no se confundan de un vistazo. */ --fuera-servicio-amarillo: #ffdd00; } /* Modo oscuro: activado agregando data-tema="oscuro" al (ver inicializarTema() en app.js). Solo invierte superficies/texto/tintes de estado -- los colores de marca solidos (topbar, botones primarios) se dejan igual porque ya funcionan bien en ambos fondos. */ [data-tema="oscuro"] { color-scheme: dark; --azul-claro: #3d5866; --verde: #34c37f; --verde-bg: #14301f; --verde-bg-borde: #235c3c; --rojo: #ef5b4d; --rojo-bg: #3a1a16; --rojo-bg-borde: #5c342c; --amarillo: #f5b84d; --amarillo-bg: #3a2e12; --amarillo-bg-borde: #5c4718; --gris-medio: #3d4f59; --neutro-num: #93a7b0; --neutro-bg: #22323a; --neutro-bg-borde: #3a4a53; --borde: #2a3d47; --borde-card: #2a3d47; --tag-mini-bg: rgba(0,0,0,0.32); --fondo-pagina: #0d1a20; --fondo-tarjeta: #16262e; --fondo-sutil: #1c2e37; --texto-fuerte: #eef2f4; --texto-medio: #c7d0d5; --texto-suave: #9aa7ac; --texto-tenue: #7e8b90; --texto-palido: #66737a; --acento-texto: #6fb3d9; --acento-texto-medio: #5c9fc7; --aviso-texto: #f0c168; --peligro-texto: #e08a7a; --seleccion-fondo: #6fb3d9; --seleccion-texto: #0d1a20; --overlay-hover: rgba(255,255,255,0.08); } * { box-sizing: border-box; } body { margin: 0; font-family: "IBM Plex Sans", "Segoe UI", Arial, sans-serif; background: var(--fondo-pagina); color: var(--texto-fuerte); font-variant-numeric: tabular-nums; } /* Scrollbar acorde a los colores y formas del sitio (pastilla redondeada azul), en vez del scrollbar gris generico del sistema operativo. Pista transparente para que se adapte sola al fondo real de cada contenedor (pagina gris, modales blancos, columnas laterales) sin quedar con un marco de color que no calce. Firefox usa scrollbar-color; Chrome/Edge/ Safari usan los pseudo-elementos ::-webkit-scrollbar-*. */ * { scrollbar-width: thin; scrollbar-color: var(--azul-claro) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: var(--azul-claro); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: var(--azul-medio); } ::-webkit-scrollbar-corner { background: transparent; } .topbar { background: linear-gradient(135deg, var(--azul-oscuro), var(--azul-medio)); color: white; padding: 1.4rem 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; position: sticky; top: 0; z-index: 20; } .topbar-title { display: flex; align-items: center; gap: 0.9rem; } .logo-mecterra { height: 48px; width: auto; flex-shrink: 0; filter: drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white); } .brand { font-size: 0.8rem; letter-spacing: 0.08em; color: #7fd4c1; font-weight: 600; } .topbar h1 { margin: 0.15rem 0; font-size: 1.4rem; } .normativa { font-size: 0.78rem; color: #c8d6dd; } .topbar-meta { display: flex; gap: 0.6rem; flex-wrap: wrap; } .meta-pill { background: rgba(255,255,255,0.08); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.78rem; display: flex; gap: 0.4rem; align-items: baseline; } .meta-pill span { color: #a9c0cb; } .meta-pill strong { color: white; } /* Interruptor de modo oscuro/claro -- vive en el topbar, que no cambia de color segun el tema (siempre es el degrade azul oscuro), asi que se estiliza sobre ese fondo fijo en vez de con las variables de superficie. */ .switch-tema { border: 1px solid rgba(255,255,255,0.28); background: rgba(255,255,255,0.08); color: white; border-radius: 999px; width: 2.3rem; height: 2.3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; } .switch-tema:hover { background: rgba(255,255,255,0.18); } .switch-tema svg { display: block; } .page-body { display: flex; align-items: flex-start; gap: 1.5rem; max-width: 2000px; margin: 0 auto; padding: 0 1.5rem; flex-wrap: wrap; } .content { flex: 1 1 600px; min-width: 0; padding: 1.5rem 0.5rem 3rem; } .columna-izquierda, .columna-derecha { width: 280px; flex: 0 0 280px; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; position: sticky; /* Queda pegada justo debajo del header (que ahora tambien es fijo), no tapada detras de el. --topbar-alto la mide app.js en tiempo real porque el header cambia de alto segun el ancho de pantalla. */ top: calc(var(--topbar-alto, 96px) + 1.5rem); align-self: flex-start; /* La columna tiene su propio scroll interno en vez de depender de que se desplace toda la pagina para llegar al final de su contenido. */ max-height: calc(100vh - var(--topbar-alto, 96px) - 3rem); overflow-y: auto; overflow-x: hidden; padding-right: 2px; /* deja aire para la barra de scroll */ } /* El asistente flotante (.btn-asistente) vive fijo en la esquina inferior derecha de la pantalla, sobre cualquier cosa que haya ahí -- sin este colchón, el último botón de esta columna (ej. "Enviar por correo") queda tapado al llegar al final del scroll interno de la columna. */ .columna-derecha { padding-bottom: 4.5rem; } /* "Proximos a vencer" es el panel que mas cambia dia a dia -- se trata como panel de monitoreo, no como card generica: sin caja, titulo con mas peso, los badges de color de cada item hacen el trabajo visual. */ .sidebar-vencimientos { flex-shrink: 0; } /* El padding/borde inferior van en el cuerpo, no en el contenedor -- para que al contraer en celular (el cuerpo pasa a display:none) no quede un espacio vacio con su propio borde colgando debajo del titulo. */ .sidebar-vencimientos .colapsable-cuerpo { padding-bottom: 1.3rem; border-bottom: 1px solid var(--borde); } .sidebar-vencimientos h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--acento-texto); } /* Base neutra: en escritorio esto se ve identico a un encabezado normal (nada de esto se activa hasta el media query movil, al final del archivo). El boton ocupa todo el ancho para que el area de click en celular sea grande, sin cambiar el look en pantallas grandes. */ .colapsable-cabecera { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 0; margin: 0; font: inherit; text-align: left; color: inherit; } .colapsable-flecha { display: none; } /* "Resumen" (los 4 KPI) no tiene encabezado propio en escritorio -- el titulo+flecha solo aparecen en celular, donde se agrega para poder saltarselo. */ .resumen-colapsable .colapsable-cabecera { display: none; } .resumen-titulo { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--acento-texto); } .sidebar-pendientes, .sidebar-fuera-servicio, .sidebar-certificaciones { background: var(--fondo-tarjeta); /* --borde-card, no --borde: mismo tono que .card-equipo/.card-repuesto, para que estos paneles y las tarjetas de la flota se vean como la misma familia visual y no con un borde mas debil que el resto. */ border: 1px solid var(--borde-card); border-radius: 10px; padding: 1.2rem; flex-shrink: 0; } .sidebar-pendientes-header { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .sidebar-pendientes-header h2 { margin: 0; } .badge-count { font-weight: 700; font-size: 0.82rem; min-width: 1.6rem; height: 1.6rem; padding: 0 0.45rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--neutro-bg); color: var(--neutro-num); } .badge-count.badge-count-alerta { background: var(--rojo-bg); color: var(--rojo); } .sidebar-pendientes h2, .sidebar-fuera-servicio h2, .sidebar-qr-terreno h2, .sidebar-certificaciones h2 { margin: 0; font-size: 0.95rem; color: var(--acento-texto); } /* "App de terreno" es contenido de referencia fijo, no cambia nunca -- se trata como nota fija, no compite por atencion con el resto. */ .sidebar-qr-terreno { padding: 1.3rem 0 0; text-align: center; flex-shrink: 0; } .sidebar-qr-terreno .sidebar-subtitulo { text-align: left; } .qr-terreno { width: 148px; height: 148px; margin: 0.9rem auto; display: block; border: 1px solid var(--borde); border-radius: 8px; padding: 8px; background: var(--fondo-tarjeta); } .qr-guia-titulo { text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--acento-texto); margin: 0 0 0.6rem; } .qr-guia { text-align: left; margin: 0; padding: 0; list-style: none; counter-reset: paso; display: flex; flex-direction: column; gap: 0.6rem; } .qr-guia li { counter-increment: paso; display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.78rem; line-height: 1.4; color: var(--texto-medio); } .qr-guia li::before { content: counter(paso); flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--azul-oscuro); color: white; font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; } /* El texto de cada paso va en un solo para que fluya como parrafo normal (con o sin adentro) y no se parta en columnas raras al quedar como items sueltos dentro del li flex. */ .qr-guia li span { flex: 1 1 auto; min-width: 0; } .qr-guia li strong { color: var(--acento-texto); } .sidebar-fuera-servicio { border: 1.5px solid var(--rojo); background: var(--rojo-bg); } .fuera-servicio-header { display: flex; align-items: center; gap: 0.5rem; } .fuera-servicio-header h2 { color: var(--rojo) !important; } .fuera-servicio-icono { font-size: 1.1rem; } .sidebar-fuera-servicio .sidebar-subtitulo { color: var(--peligro-texto); } .sidebar-fuera-servicio .hint { color: var(--peligro-texto); font-size: 0.78rem; padding: 0.4rem 0 0 0; } .item-pendiente { /* --borde-card, no --borde: contra el blanco de la tarjeta en modo claro (#e2e8ec) el divisor entre filas casi no se ve; --borde-card (#d7dfe4) es el mismo token que ya se usa para el contorno de tarjetas que sí necesitan notarse. En oscuro los dos valores son iguales, así que no cambia nada ahí. */ border-bottom: 1px solid var(--borde-card); padding: 0.7rem 0; font-size: 0.82rem; } .item-pendiente:last-child { border-bottom: none; } .item-pendiente .codigo { font-weight: 600; color: var(--texto-fuerte); } .item-pendiente .meta { font-size: 0.72rem; color: var(--texto-tenue); margin-bottom: 0.4rem; } .item-pendiente .acciones { display: flex; gap: 0.4rem; } .item-pendiente .acciones button { flex: 1; border: 1px solid var(--borde); background: var(--fondo-tarjeta); border-radius: 6px; padding: 0.3rem 0.4rem; font-size: 0.72rem; cursor: pointer; } /* Otras acciones de la fila que siguen siendo enlaces (ej. reenviar un certificado puntual) -- comparten el mismo aspecto que los botones. */ .item-pendiente .acciones a { flex: 1; border: 1px solid var(--borde); background: var(--fondo-tarjeta); border-radius: 6px; padding: 0.3rem 0.4rem; font-size: 0.72rem; text-align: center; text-decoration: none; } .item-pendiente .btn-ver { color: var(--acento-texto-medio); } .tag-cert { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--acento-texto-medio); background: var(--gris-bg); border-radius: 999px; padding: 0.1rem 0.45rem; margin-left: 0.3rem; } .tag-cert-baja { color: var(--rojo); background: var(--rojo-bg); } .tag-envio { align-self: center; font-size: 0.68rem; color: var(--texto-tenue); white-space: nowrap; } .tag-envio-ok { color: var(--verde); font-weight: 600; } .item-pendiente .btn-aprobar-mini { color: var(--verde); border-color: var(--verde); } .item-pendiente .btn-rechazar-mini { color: var(--rojo); border-color: var(--rojo); } /* Manda TODA la tanda "Por enviar" en un solo correo, por eso es un boton ancho aparte y no una accion mas de cada fila -- se oculta solo cuando no queda nada por mandar. */ .btn-enviar-tanda { width: 100%; margin-top: 0.7rem; border: none; border-radius: 8px; background: var(--verde); color: white; font-size: 0.8rem; font-weight: 600; padding: 0.6rem; cursor: pointer; } .btn-enviar-tanda:disabled { opacity: 0.6; cursor: default; } /* Lotes ya enviados: agrupados y colapsados por defecto -- se expanden al pinchar el encabezado, igual que el resto de las certificaciones pero sin depender del colapsable de la sidebar (este vive siempre expandible, en escritorio y en celular). */ .lote-envio { border-top: 1px solid var(--borde-card); margin-top: 0.4rem; padding-top: 0.4rem; } .lote-envio-cabecera { width: 100%; display: flex; align-items: center; gap: 0.4rem; border: none; background: none; padding: 0.2rem 0; font-size: 0.74rem; color: var(--texto-tenue); text-align: left; cursor: pointer; } .lote-envio-flecha { display: inline-block; transition: transform 0.15s; flex-shrink: 0; } .lote-envio-abierto .lote-envio-flecha { transform: rotate(90deg); } .lote-envio-fecha { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* La pastilla es lo que separa un lote del siguiente a simple vista -- sin ella, tres encabezados seguidos son puro texto plano y se mezclan. Solo lleva la cantidad (no la fecha completa): un texto tan largo como "Enviado el 09-09-2026, 04:40" ya no se ve como una pastilla sino como una barra. */ .lote-envio-pastilla { display: inline-block; flex-shrink: 0; background: var(--verde-bg); color: var(--verde); border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.66rem; font-weight: 600; white-space: nowrap; } .lote-envio-cuerpo { padding-left: 0.9rem; } .lote-envio-cuerpo.lote-envio-oculto { display: none; } .btn-reenviar-lote { width: 100%; margin-top: 0.4rem; border: 1px solid var(--borde); background: var(--fondo-tarjeta); border-radius: 6px; padding: 0.35rem; font-size: 0.72rem; color: var(--acento-texto-medio); cursor: pointer; } .btn-reenviar-lote:disabled { opacity: 0.6; cursor: default; } .lote-envio-hint { margin-top: 0.4rem; } .fuera-servicio-caja { margin-bottom: 1rem; } .btn-declarar-fuera-servicio { width: 100%; border: 1.5px solid var(--rojo); background: var(--rojo-bg); color: var(--rojo); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .fuera-servicio-declarar { margin-top: 0.6rem; padding: 0.8rem 0.9rem; border: 1px solid var(--borde-card); border-radius: 8px; background: var(--fondo-sutil); } .fuera-servicio-declarar label { font-size: 0.8rem; font-weight: 600; display: block; margin-bottom: 0.3rem; } .fuera-servicio-declarar textarea { width: 100%; } .fuera-servicio-declarar-acciones { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.6rem; } .btn-fs-confirmar { border: none; background: var(--rojo); color: white; border-radius: 6px; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; } .fuera-servicio-activo { border: 1.5px solid var(--rojo); background: var(--rojo-bg); border-radius: 8px; padding: 0.8rem 0.9rem; margin-bottom: 1rem; } .fuera-servicio-activo-titulo { color: var(--rojo); font-weight: 700; font-size: 0.88rem; margin-bottom: 0.3rem; } .fuera-servicio-activo-motivo { color: var(--peligro-texto); font-size: 0.85rem; margin-bottom: 0.3rem; } .fuera-servicio-activo-meta { color: var(--peligro-texto); font-size: 0.72rem; margin-bottom: 0.6rem; } .fuera-servicio-foto { max-width: 220px; margin-bottom: 0.6rem; } .fuera-servicio-foto .foto-preview { width: 100%; border-radius: 6px; display: block; margin-bottom: 0.3rem; } #fs-foto-slot { max-width: 220px; margin: 0.3rem 0 0.6rem; } .btn-en-servicio { border: 1px solid var(--verde); background: var(--verde-bg); color: var(--verde); border-radius: 6px; padding: 0.45rem 0.8rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; } .pendiente-seccion { margin-bottom: 1rem; } .pendiente-seccion h4 { font-size: 0.78rem; text-transform: uppercase; color: var(--acento-texto); margin: 0 0 0.4rem 0; } .pendiente-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; font-size: 0.85rem; background: var(--fondo-sutil); border-radius: 8px; padding: 0.7rem 0.9rem; } .pendiente-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .pendiente-fotos img { width: 100%; border-radius: 8px; border: 1px solid var(--borde); aspect-ratio: 1; object-fit: cover; } .pendiente-fotos .sin-foto { aspect-ratio: 1; background: var(--fondo-sutil); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--texto-palido); font-size: 0.7rem; text-align: center; } .pendiente-malos { color: var(--rojo); font-weight: 600; } .sidebar-subtitulo { font-size: 0.75rem; color: var(--texto-tenue); margin: 0.2rem 0 0.4rem 0; } .item-proximo { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.2rem 0; border-bottom: 1px solid var(--borde); font-size: 0.82rem; cursor: pointer; } .item-proximo:last-child { border-bottom: none; } .item-proximo:hover { background: var(--fondo-sutil); margin: 0 -0.4rem; padding-left: 0.4rem; padding-right: 0.4rem; border-radius: 6px; } .item-proximo .codigo { font-weight: 600; color: var(--texto-fuerte); display: block; } .item-proximo .ubic { font-size: 0.7rem; color: var(--texto-tenue); } .item-proximo .dias { font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px; white-space: nowrap; } .item-proximo .dias.d-rojo { background: var(--rojo-bg); color: var(--rojo); } .item-proximo .dias.d-naranjo { background: var(--amarillo-bg); color: var(--amarillo); } .item-proximo .dias.d-verde { background: var(--verde-bg); color: var(--verde); } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; } .kpi { background: var(--fondo-tarjeta); border-radius: 10px; padding: 1rem 1.2rem; border: 1px solid var(--borde); cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; } .kpi:hover { box-shadow: 0 2px 10px rgba(15,45,61,0.08); } .kpi.kpi-activo { box-shadow: 0 2px 10px rgba(15,45,61,0.12); } /* Vencidos/Por vencer pesan mas que Al dia/Sin registro: lo urgente debe notarse antes de leer el numero, no despues. Los 4 kpi llevan el fondo tintado a su color, no solo el numero. */ .kpi-ok { background: var(--verde-bg); border-color: var(--verde-bg-borde); } .kpi-warn { background: var(--amarillo-bg); border-color: var(--amarillo-bg-borde); } .kpi-danger { background: var(--rojo-bg); border-color: var(--rojo-bg-borde); } .kpi-neutral { background: var(--neutro-bg); border-color: var(--neutro-bg-borde); } /* Cada kpi se desglosa en 3 columnas -- Gases+Ansul, Trimestral, Hermeticidad -- ya que son programas independientes con su propia vigencia; antes solo se veia el numero combinado de Gases+Ansul. */ .kpi-desglose { display: flex; gap: 0.4rem; margin-top: 0.6rem; } .kpi-sub { flex: 1; text-align: center; cursor: pointer; border-radius: 7px; padding: 0.15rem 0.1rem; transition: background 0.15s; } .kpi-sub:hover { background: var(--overlay-hover); } .kpi-sub-num { font-size: 1.4rem; font-weight: 700; } /* La etiqueta pasa a "chip" solido (fondo azul-oscuro + texto blanco) al estar seleccionada -- mismo lenguaje que .chip.active/.vista-btn.active/ .tab.active en el resto del sitio, en vez de un borde/outline que no se usa en ningun otro lado como indicador de seleccion. */ .kpi-sub-label { font-size: 0.78rem; color: var(--texto-suave); margin-top: 0.3rem; line-height: 1.2; display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px; transition: background 0.15s, color 0.15s; } .kpi-sub.kpi-sub-activo .kpi-sub-label { background: var(--seleccion-fondo); color: var(--seleccion-texto); } .kpi-ok .kpi-sub-num { color: var(--verde); } .kpi-warn .kpi-sub-num { color: var(--amarillo); } .kpi-danger .kpi-sub-num { color: var(--rojo); } .kpi-neutral .kpi-sub-num { color: var(--neutro-num); } .filtro-estado-activo { display: flex; align-items: center; gap: 0.6rem; background: var(--fondo-sutil); border: 1px solid var(--borde); border-radius: 8px; padding: 0.5rem 0.9rem; font-size: 0.85rem; color: var(--texto-medio); margin-bottom: 1.2rem; } .filtro-estado-activo strong { color: var(--acento-texto); } #btn-quitar-filtro-estado { border: none; background: none; color: var(--acento-texto-medio); cursor: pointer; font-size: 0.8rem; text-decoration: underline; margin-left: auto; } .kpi-label { font-size: 0.85rem; font-weight: 600; color: var(--texto-medio); display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; transition: background 0.15s, color 0.15s; } .kpi.kpi-activo .kpi-label { background: var(--seleccion-fondo); color: var(--seleccion-texto); } /* Cada pestaña es su propia tarjeta con borde (se nota que son botones separados, no una fila de texto) incluso en reposo. El color de cada seccion queda reservado para el estado activo -- ahi la pestaña se "enciende": se rellena solida con su color, letra blanca, sube un poco (translateY) y suma sombra -- para que la seleccionada salte a la vista de verdad contra el resto, que se queda en tarjeta neutra. */ .tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .tab { background: var(--fondo-tarjeta); border: 1.5px solid var(--borde-card); border-radius: 10px; padding: 0.65rem 1.2rem; font-size: 0.92rem; font-weight: 600; color: var(--texto-medio); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; } .tab:hover { border-color: var(--tab-color, #667); color: var(--tab-color, #667); } .tab.active { background: var(--tab-color, #667); border-color: var(--tab-color, #667); color: #fff; transform: translateY(-2px); box-shadow: 0 5px 12px -2px rgba(15, 34, 49, 0.4); } .tab.active:hover { background: var(--tab-color, #667); color: #fff; } /* Colores por sección, distintos de los del semáforo (verde/naranjo/rojo/gris) -- fijos en ambos temas (no son tokens de --acento-*) porque son la identidad de cada sección, no parte de la paleta clara/oscura. */ .tab[data-tab="flota"] { --tab-color: #2a4d78; } .tab[data-tab="historial"] { --tab-color: #6b3894; } .tab[data-tab="ot"] { --tab-color: #146669; } .tab[data-tab="repuestos"] { --tab-color: #4144a8; } .tab-panel { display: none; } .tab-panel.active { display: block; } .toolbar { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 1.2rem; align-items: center; } .toolbar input[type="text"] { flex: 1; min-width: 240px; padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid var(--borde); font-size: 0.9rem; } .toolbar select { padding: 0.6rem 0.9rem; border-radius: 8px; border: 1px solid var(--borde); font-size: 0.9rem; background: var(--fondo-tarjeta); color: inherit; } .vista-toggle { display: flex; gap: 0.3rem; margin-left: auto; } .vista-btn { border: 1px solid var(--borde); background: var(--fondo-tarjeta); border-radius: 8px; padding: 0.4rem 0.8rem; font-size: 0.8rem; cursor: pointer; color: var(--texto-medio); } .vista-btn.active { background: var(--seleccion-fondo); color: var(--seleccion-texto); border-color: var(--seleccion-fondo); } .tabla-flota-wrap { margin-top: 0.3rem; max-width: 100%; overflow-x: auto; } .tabla-flota-wrap table { width: 100%; table-layout: auto; } .tabla-flota-wrap .tabla-historial { font-size: 0.78rem; } .tabla-flota-wrap .tabla-historial th { padding: 0.5rem 0.6rem; font-size: 0.64rem; white-space: nowrap; } .tabla-flota-wrap .tabla-historial td { padding: 0.5rem 0.6rem; vertical-align: middle; white-space: nowrap; } .tabla-flota-wrap tr.fila-al_dia { background: var(--verde-bg); } .tabla-flota-wrap tr.fila-por_vencer { background: var(--amarillo-bg); } .tabla-flota-wrap tr.fila-vencido { background: var(--rojo-bg); } .tabla-flota-wrap tr.fila-sin_registro { background: var(--neutro-bg); } .tabla-flota-wrap tr.fila-al_dia:hover, .tabla-flota-wrap tr.fila-por_vencer:hover, .tabla-flota-wrap tr.fila-vencido:hover, .tabla-flota-wrap tr.fila-sin_registro:hover, .tabla-flota-wrap tr.fuera-servicio:hover { filter: brightness(0.97); } /* Solo un acento de borde a la izquierda, no todo el relleno de la fila -- el color de estado normal (al dia/por vencer/etc.) de arriba queda igual. */ .tabla-flota-wrap tr.fuera-servicio td:first-child { box-shadow: inset 3px 0 0 0 var(--fuera-servicio-amarillo); } .tag-mini { display: inline-block; padding: 0.12rem 0.4rem; border-radius: 6px; font-size: 0.68rem; font-weight: 600; background: var(--tag-mini-bg); border: 1px solid currentColor; white-space: nowrap; } .tag-mini.ok { color: var(--verde); } .tag-mini.revisar { color: var(--rojo); } .tag-mini.por-vencer { color: var(--amarillo); } .tag-mini.sin-registro { color: var(--texto-suave); } .tag-mini.no-aplica { color: var(--verde); } .btn-mini { border: none; background: var(--azul-oscuro); color: white; border-radius: 6px; padding: 0.3rem 0.55rem; font-size: 0.7rem; cursor: pointer; white-space: nowrap; } .filtros { display: flex; gap: 0.4rem; flex-wrap: wrap; } .chip { border: 1px solid var(--borde); background: var(--fondo-tarjeta); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.82rem; cursor: pointer; color: var(--texto-medio); } .chip.active { background: var(--seleccion-fondo); color: var(--seleccion-texto); border-color: var(--seleccion-fondo); } /* "Rechazado" no es un tipo de vehículo como el resto de las pastillas -- se distingue en rojo para que no se confunda con un filtro más de categoría. */ .chip-rechazado { color: var(--rojo); border-color: var(--rojo-bg-borde); } .chip-rechazado.active { background: var(--rojo); color: #fff; border-color: var(--rojo); } .grid-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; } .card-equipo { background: var(--fondo-tarjeta); border: 1px solid var(--borde-card); border-radius: 10px; padding: 1rem; box-shadow: 0 1px 2px rgba(15, 45, 61, 0.05), 0 4px 10px rgba(15, 45, 61, 0.04); } /* Equipo fuera de servicio: solo el borde cambia a amarillo de alerta (mas grueso que el borde normal) para que salte a la vista en medio de la grilla -- el relleno de la tarjeta y el texto quedan igual que siempre, no se pisa el color de las pastillas de estado de abajo. */ .card-equipo.fuera-servicio { border: 3px solid var(--fuera-servicio-amarillo); } .card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.6rem; } .card-head h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.45rem; } .card-head .modelo { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 0.15rem; } /* Punto de estado junto al codigo, en vez de la barra de color lateral -- la info real de cumplimiento ya la dan las pastillas Gases/Ansul de abajo, esto es solo un vistazo rapido, no necesita ser un marco de la tarjeta. */ .estado-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--gris-medio); } .estado-dot.estado-al_dia { background: var(--verde); } .estado-dot.estado-por_vencer { background: var(--amarillo); } .estado-dot.estado-vencido { background: var(--rojo); } .card-head-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; } .badge-categoria { background: var(--fondo-sutil); color: var(--texto-medio); font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 6px; font-weight: 600; } .badge-fuera-servicio { background: var(--rojo-bg); color: var(--rojo); font-size: 0.7rem; padding: 0.2rem 0.5rem; border-radius: 6px; font-weight: 600; white-space: nowrap; } .badge-fotos { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; } .badge-fotos-vacio { background: var(--rojo-bg); color: var(--rojo); } .badge-fotos-parcial { background: var(--amarillo-bg); color: var(--amarillo); } .badge-fotos-completo { background: var(--verde-bg); color: var(--verde); } .estados-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.5rem; } .estado-pill { flex: 1; border-radius: 8px; padding: 0.4rem 0.6rem; font-size: 0.75rem; } .estado-pill .titulo { font-weight: 600; display: block; margin-bottom: 0.15rem; } .estado-pill.ok { background: var(--verde-bg); color: var(--verde); } .estado-pill.revisar { background: var(--rojo-bg); color: var(--rojo); } .estado-pill.por-vencer { background: var(--amarillo-bg); color: var(--amarillo); } .estado-pill.sin-registro { background: var(--neutro-bg); color: var(--texto-suave); } .estado-pill.no-aplica { background: var(--verde-bg); color: var(--verde); } .check-no-aplica { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--texto-suave); margin-bottom: 0.8rem; cursor: pointer; } .check-no-aplica input { width: 16px; height: 16px; cursor: pointer; } .ubicacion { font-size: 0.78rem; color: var(--texto-tenue); margin-bottom: 0.8rem; } .icono-ubicacion { color: var(--acento-texto-medio); vertical-align: -2px; margin-right: 1px; } .btn-primario, .btn-secundario { border: none; border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.85rem; cursor: pointer; } .btn-primario { background: var(--azul-oscuro); color: white; width: 100%; } .btn-primario:disabled { background: var(--gris-medio); cursor: not-allowed; } .btn-secundario { background: var(--fondo-sutil); color: var(--texto-medio); } a.btn-secundario, a.btn-primario { display: inline-block; text-decoration: none; } .historial-pie { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin-top: 1rem; font-size: 0.82rem; color: var(--texto-suave); } .historial-pie .btn-secundario { padding: 0.45rem 1rem; } .card-acciones { display: flex; gap: 0.5rem; } /* Boton mas liviano para "Ver Ficha": se repite 100 veces en la grilla de flota, un boton solido oscuro por tarjeta pesa demasiado para una accion de solo consultar (no es la accion "primaria" de la pagina). */ .btn-ver-ficha { flex: 1; background: rgba(22, 69, 92, 0.07); border: 1px solid rgba(22, 69, 92, 0.25); border-radius: 8px; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; color: var(--acento-texto-medio); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .btn-ver-ficha:hover { background: rgba(22, 69, 92, 0.13); border-color: var(--acento-texto-medio); } /* Boton de eliminar: discreto por defecto (no queremos que un dedo/click distraido borre una ficha), se pone claramente rojo recien al pasar el mouse/tocar, para que la intencion de "accion destructiva" solo se note cuando ya se esta apuntando a el. */ .btn-eliminar-equipo { flex-shrink: 0; width: 2.4rem; padding: 0.4rem 0; line-height: 1; text-align: center; background: rgba(211, 64, 47, 0.06); border: 1px solid rgba(211, 64, 47, 0.2); border-radius: 8px; font-size: 0.95rem; color: var(--peligro-texto); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn-eliminar-equipo:hover { background: var(--rojo-bg); border-color: var(--rojo); color: var(--rojo); } .tabla-historial .btn-eliminar-equipo { margin-left: 0.4rem; } .tabla-wrap { background: var(--fondo-tarjeta); border: 1px solid var(--borde-card); border-radius: 10px; overflow: auto; } .tabla-historial { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .tabla-historial th { text-align: left; padding: 0.7rem 1rem; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--texto-tenue); border-bottom: 1px solid var(--borde); } .tabla-historial td { padding: 0.65rem 1rem; border-bottom: 1px solid var(--borde); } .celda-editado { color: var(--texto-tenue); font-size: 0.8rem; white-space: nowrap; } .tag-estado { padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.78rem; font-weight: 600; } .tag-estado.cumple, .tag-estado.ok { background: var(--verde-bg); color: var(--verde); } .tag-estado.no-cumple, .tag-estado.revisar { background: var(--rojo-bg); color: var(--rojo); } .tag-estado.editado { background: var(--fondo-sutil); color: var(--acento-texto-medio); } .hint { color: var(--texto-tenue); padding: 1rem 0; } .btn-ancho-auto { width: auto; } .ot-vacio { background: var(--fondo-tarjeta); border: 1px dashed var(--borde); border-radius: 10px; padding: 2.5rem; text-align: center; color: var(--texto-suave); } .ot-vacio h3 { color: var(--acento-texto); margin-top: 0; } .grid-repuestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; margin-top: 1rem; } /* Mismo formato que .card-equipo (Flota): sombra suave en vez de borde grueso de color, y el estado se marca con un punto junto al titulo, no con un marco lateral -- para que las 2 grillas de tarjetas del sitio se lean como la misma familia visual. */ .card-repuesto { background: var(--fondo-tarjeta); border: 1px solid var(--borde-card); border-radius: 10px; padding: 1rem; box-shadow: 0 1px 2px rgba(15, 45, 61, 0.05), 0 4px 10px rgba(15, 45, 61, 0.04); } .estado-dot.estado-repuesto-completo { background: var(--verde); } .estado-dot.estado-repuesto-atrasado { background: var(--rojo); } .card-repuesto h3 { margin: 0; font-size: 1rem; display: flex; align-items: center; gap: 0.45rem; } .card-repuesto .modelo { font-size: 0.78rem; color: var(--texto-tenue); margin-top: 0.15rem; } .card-repuesto .rp-meta { font-size: 0.78rem; color: var(--texto-tenue); margin: 0.6rem 0 0.7rem; } .rp-etapas { display: flex; gap: 0.3rem; margin-bottom: 0.6rem; } .rp-etapa { flex: 1; text-align: center; font-size: 0.62rem; color: var(--texto-palido); padding-top: 0.5rem; border-top: 3px solid var(--borde); } .rp-etapa.cumplida { color: var(--acento-texto); border-top-color: var(--acento-texto-medio); font-weight: 600; } .rp-estado-texto { font-size: 0.82rem; margin-bottom: 0.7rem; } .rp-estado-texto .atraso { color: var(--rojo); font-weight: 600; } .rp-estado-texto .al-dia { color: var(--verde); font-weight: 600; } .rp-estado-texto .completo-txt { color: var(--verde); font-weight: 600; } .card-repuesto .rp-observacion { font-size: 0.78rem; color: var(--texto-suave); margin-bottom: 0.7rem; } .rp-acciones { display: flex; gap: 0.5rem; } .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 45, 61, 0.45); align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .modal-backdrop.open { display: flex; } /* El modal de confirmar se puede abrir arriba de otro modal ya abierto (ej. "Eliminar usuario" desde dentro de "Usuarios") -- con el mismo z-index que el resto, cual queda encima lo decidia el orden en el DOM, no cual se abrio despues, y el de atras terminaba capturando los clicks. */ #modal-confirmar-backdrop { z-index: 60; } .modal { background: var(--fondo-tarjeta); border-radius: 12px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 1.3rem 1.5rem; } .modal.modal-ancho { max-width: 780px; } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; } .modal-header h2 { margin: 0; font-size: 1.1rem; } .modal-header-acciones { display: flex; align-items: center; gap: 0.6rem; } .modal-subtitulo { color: var(--acento-texto-medio); font-size: 0.85rem; margin-top: 0.15rem; } #aviso-editar-ultimo { background: var(--amarillo-bg); color: var(--aviso-texto); border: 1px solid var(--amarillo-bg-borde); border-radius: 8px; padding: 0.6rem 0.9rem; font-size: 0.82rem; margin-bottom: 1rem; } #aviso-editar-ultimo a { color: var(--aviso-texto); font-weight: 600; } .modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--texto-suave); } .aviso-usuario-temporal { background: var(--verde-bg); color: var(--verde); border: 1px solid var(--verde-bg-borde); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.85rem; margin-bottom: 1.2rem; } .usuario-temporal-clave { margin-top: 0.5rem; font-family: "Consolas", monospace; font-size: 1rem; background: var(--fondo-tarjeta); border-radius: 6px; padding: 0.5rem 0.7rem; display: inline-flex; flex-direction: column; gap: 0.25rem; } .usuario-temporal-etiqueta { font-family: inherit; font-size: 0.7rem; color: var(--texto-tenue); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } .usuario-generado-preview { padding: 0.5rem 0.7rem; border-radius: 7px; border: 1px solid var(--borde); background: var(--fondo-sutil); color: var(--texto-tenue); font-family: "Consolas", monospace; font-size: 0.88rem; } #btn-copiar-usuario-temporal { display: block; margin-top: 0.7rem; width: auto; } .tag-rol { padding: 0.1rem 0.5rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; } .tag-rol.admin { background: var(--rojo-bg); color: var(--rojo); } .tag-rol.terreno { background: var(--neutro-bg); color: var(--texto-suave); } .seccion-titulo { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--acento-texto); border-left: 3px solid #e08a2c; padding-left: 0.5rem; margin: 1.3rem 0 0.7rem 0; } .seccion-titulo:first-of-type { margin-top: 0.2rem; } .form-row { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .form-row label { font-size: 0.78rem; color: var(--texto-medio); font-weight: 600; } label { font-size: 0.78rem; color: var(--texto-medio); font-weight: 600; display: block; margin-bottom: 0.3rem; } .form-row input, .form-row select, .form-row textarea, input[type="text"], input[type="date"], input[type="number"], input[type="password"], textarea { padding: 0.5rem 0.7rem; border-radius: 7px; border: 1px solid var(--borde); font-size: 0.88rem; font-family: inherit; width: 100%; box-sizing: border-box; background: var(--fondo-tarjeta); color: var(--texto-fuerte); } input:disabled { background: var(--fondo-sutil); color: var(--texto-tenue); cursor: not-allowed; } #f-observacion { margin-bottom: 0.3rem; } .form-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 1.2rem; } .form-actions .btn-primario, .form-actions .btn-secundario { width: auto; } /* Modal de confirmacion generico (reemplaza al confirm() nativo del navegador, que no se puede vestir con los colores/tipografia del sitio). */ .modal-confirmar { max-width: 420px; } .modal-confirmar h2 { margin: 0 0 0.6rem; font-size: 1.1rem; color: var(--acento-texto); } .confirmar-mensaje { margin: 0; color: var(--texto-medio); font-size: 0.9rem; line-height: 1.5; white-space: pre-line; } .btn-peligro { width: auto; border: none; border-radius: 8px; padding: 0.55rem 1.1rem; font-size: 0.85rem; font-weight: 600; background: var(--rojo); color: white; cursor: pointer; transition: background 0.15s; } .btn-peligro:hover { background: #b23528; } .btn-generar-informe { background: linear-gradient(135deg, #16455c, #e08a2c); color: white; border: none; border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.85rem; cursor: pointer; } .ficha-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 1.2rem; background: var(--fondo-sutil); border-radius: 8px; padding: 0.8rem 1rem; margin-bottom: 1rem; font-size: 0.85rem; } /* Etiqueta y valor en lineas separadas (no "Etiqueta valor" corrido en el mismo renglon) -- con 3 columnas angostas en celular, un valor como "E-999" quedaba cortado a mitad de palabra en vez de bajar entero a la siguiente linea. */ .ficha-item { display: flex; flex-direction: column; gap: 0.15rem; } .ficha-item-label { color: var(--texto-suave); font-size: 0.78rem; } .ficha-grid .ficha-item strong { color: var(--acento-texto); } .ficha-item-editable label { font-size: 0.72rem; margin-bottom: 0.2rem; } .ficha-item-editable input { padding: 0.35rem 0.5rem; font-size: 0.82rem; background: var(--fondo-tarjeta); } .conglomerado-bloque { border: 1px solid var(--borde-card); border-radius: 10px; padding: 0.9rem 1rem; margin-bottom: 0.8rem; } .conglomerado-cabecera { display: flex; align-items: center; justify-content: space-between; } .conglomerado-cabecera h4 { margin: 0; font-size: 0.85rem; color: var(--acento-texto); } .conglomerado-meta { font-size: 0.75rem; color: var(--texto-tenue); margin: 0.2rem 0 0.6rem; } .medicion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .medicion-bloque { background: var(--fondo-sutil); border-radius: 8px; padding: 0.8rem; } .medicion-titulo { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; color: var(--acento-texto-medio); margin-bottom: 0.6rem; } .medicion-bloque label { font-size: 0.72rem; } .estado-general { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.8rem; font-size: 0.82rem; color: var(--texto-medio); } .estado-general-badge { padding: 0.2rem 0.7rem; border-radius: 999px; font-weight: 600; font-size: 0.78rem; background: var(--amarillo-bg); color: var(--amarillo); } .estado-general-badge.cumple { background: var(--verde-bg); color: var(--verde); } .estado-general-badge.no-cumple { background: var(--rojo-bg); color: var(--rojo); } .checklist-grupo { border: 1px solid var(--borde-card); border-radius: 8px; margin-bottom: 0.6rem; overflow: hidden; } .checklist-grupo-header { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.9rem; background: var(--fondo-sutil); cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--acento-texto); } .checklist-grupo-header .contador { font-weight: 400; color: var(--texto-tenue); font-size: 0.78rem; } .checklist-grupo-body { padding: 0.3rem 0.9rem; } .checklist-grupo-body.colapsado { display: none; } .checklist-item { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0; border-bottom: 1px solid var(--borde); font-size: 0.85rem; } .checklist-item:last-child { border-bottom: none; } .toggle-bueno-malo { display: flex; gap: 0.4rem; } .toggle-bueno-malo button { border: 1px solid var(--borde); background: var(--fondo-tarjeta); color: var(--texto-suave); border-radius: 6px; padding: 0.25rem 0.7rem; font-size: 0.78rem; cursor: pointer; } .toggle-bueno-malo button.activo-bueno { background: var(--verde); color: white; border-color: var(--verde); } .toggle-bueno-malo button.activo-malo { background: var(--rojo); color: white; border-color: var(--rojo); } .toggle-bueno-malo button.activo-na { background: #5a6b7a; color: white; border-color: #5a6b7a; } /* El recuadro (.foto-slot / .pdf-slot) contiene solo el contenido visual -- la imagen o la miniatura del PDF. El título y las acciones (Ver PDF, Quitar, el aviso de origen) van debajo, fuera del borde. */ .foto-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; } .foto-item, .pdf-item { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 0.78rem; color: var(--texto-suave); background: none; font-family: inherit; } .foto-item.completo, .foto-item[data-slot] { cursor: default; } label.foto-item, label.pdf-item { cursor: pointer; } .foto-slot, .pdf-slot { width: 100%; aspect-ratio: 4 / 3; border: 1.5px dashed var(--borde); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--fondo-sutil); } .foto-slot.completo, .pdf-slot.completo { border-style: solid; border-color: var(--verde); } .foto-slot.no-aplica, .pdf-slot.no-aplica { border-style: solid; border-color: var(--verde); background: var(--verde-bg); } .foto-slot.no-aplica .foto-slot-placeholder, .pdf-slot.no-aplica .pdf-slot-placeholder { color: var(--verde); font-weight: 600; } .foto-slot-pipeline, .pdf-slot-pipeline { border-color: var(--acento-texto-medio); } .foto-slot img.foto-preview { width: 100%; height: 100%; object-fit: cover; } .pdf-slot { aspect-ratio: 3 / 4; position: relative; } /* Sello que se superpone a la vista previa del certificado de hermeticidad cuando el técnico marcó "No aprobado" como resultado de la prueba -- la certificación puede estar aprobada como registro (por eso hay PDF), pero el resultado de la prueba en sí fue negativo, y eso no se nota mirando solo el PDF. */ .sello-rechazado { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-16deg); border: 3px solid var(--rojo); background: var(--rojo-bg); color: var(--rojo); font-weight: 800; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.25rem 0.9rem; border-radius: 6px; pointer-events: none; opacity: 0.55; z-index: 2; white-space: nowrap; } .pdf-slot canvas { max-width: 100%; max-height: 100%; } .foto-slot-placeholder, .pdf-slot-placeholder { color: var(--texto-palido); font-size: 0.72rem; padding: 0.5rem; } .hint-foto { font-size: 0.72rem; color: var(--texto-palido); margin: 0.4rem 0 0 0; font-style: italic; } .foto-slot-titulo, .pdf-slot-titulo { font-weight: 600; color: var(--texto-suave); margin-top: 0.5rem; } .foto-item .hint, .pdf-item .hint, .foto-item .btn-ver, .pdf-item .btn-ver { display: inline-block; margin-top: 0.3rem; font-size: 0.72rem; } /* Descargar (flecha) y Quitar (X roja) como íconos, no texto -- mismo estilo redondo con hover suave que .btn-ver-ficha. */ .item-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 0.3rem; } .btn-icono { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: none; background: none; padding: 0; cursor: pointer; color: var(--acento-texto-medio); font-family: inherit; } .btn-icono:hover { background: rgba(22, 69, 92, 0.13); } .btn-icono-quitar { color: var(--rojo); } .btn-icono-quitar:hover { background: rgba(211, 64, 47, 0.13); } .pdf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; } /* En celular el modal de la ficha queda con muy poco ancho util -- 3 columnas (fotos) o 4 (certificados) aprietan tanto que "Ver foto" se parte en dos lineas y el ultimo certificado queda cortado fuera del modal. Con 2 columnas cada casilla vuelve a tener espacio para su miniatura y sus acciones sin desbordar. */ @media (max-width: 640px) { .foto-grid, .pdf-grid { grid-template-columns: repeat(2, 1fr); } .ficha-grid { grid-template-columns: repeat(2, 1fr); } } /* Visor de PDF de la sala de espera (panel Certificaciones) -- queda dentro de la misma página en vez de abrir una pestaña nueva, con flechas para pasar al certificado anterior/siguiente sin cerrar el visor. */ /* Ancho acotado a la proporcion tipica de una hoja carta/A4 vertical, para que el visor no deje franjas oscuras a los costados y la hoja se vea lo mas grande posible dentro del alto disponible. */ #modal-pdf-backdrop { padding: 0.5rem; } .modal.modal-pdf { max-width: 680px; max-height: 99vh; display: flex; flex-direction: column; padding: 0.7rem 0.9rem; } .modal-pdf .modal-header { margin-bottom: 0.4rem; } .pdf-visor-wrap { position: relative; display: flex; align-items: center; justify-content: center; margin: 0.2rem 0; flex: 1; min-height: 0; } .pdf-visor-grande { width: 100%; height: 100%; min-height: 85vh; border: 1px solid var(--borde-card); border-radius: 8px; background: var(--fondo-sutil); display: flex; align-items: center; justify-content: center; overflow: hidden; } .pdf-visor-grande canvas { max-width: 100%; max-height: 100%; border-radius: 4px; } .pdf-visor-estado { color: var(--texto-medio); font-size: 0.9rem; text-align: center; padding: 0 1rem; } .pdf-visor-estado a { color: var(--acento-texto); } .pdf-visor-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--borde-card); background: var(--fondo-tarjeta); color: var(--acento-texto); font-size: 1.3rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(15, 45, 61, 0.15); z-index: 1; } .pdf-visor-flecha:disabled { opacity: 0.3; cursor: default; } .pdf-visor-flecha-izq { left: 0.6rem; } .pdf-visor-flecha-der { right: 0.6rem; } .pdf-visor-descripcion { text-align: center; color: var(--texto-medio); font-size: 0.85rem; padding: 0.3rem 0 0; } /* Visor de foto (registro fotografico de la ficha) -- version simple del visor de PDF, sin flechas: son 3 casillas fijas por equipo, no una lista para recorrer. */ .foto-visor-wrap { display: flex; align-items: center; justify-content: center; margin: 0.5rem 0; } .foto-visor-grande { max-width: 100%; max-height: 75vh; border-radius: 8px; border: 1px solid var(--borde-card); } /* ============================================================ Adaptacion a celular (max-width: 1024px). Este bloque va al final del archivo a proposito: varias de estas propiedades (padding de .sidebar-vencimientos, .content, etc.) ya estan declaradas sin media query mas arriba, y con la misma especificidad (una sola clase) gana la que aparece despues en el archivo -- si este bloque quedara arriba, esas reglas de escritorio lo pisarian silenciosamente en cualquier ancho de pantalla, media query o no. Puesto aca al final, esto siempre gana cuando aplica. Debajo de ~1024px las 3 columnas (280 + 600 + 280 + gaps) ya no entran una al lado de otra, y el "position: sticky" + scroll interno de las columnas laterales queda superpuesto encima del contenido principal en vez de apilarse -- en celular esto dejaba la pagina practicamente ilegible. Se apila todo en una columna. "display: contents" en los dos wrappers de columna hace que sus asides pasen a ser hijos directos de .page-body (sin perder el layout de escritorio, que sigue intacto fuera de este media query), para poder ordenar cada panel individualmente en vez de mover columnas enteras: primero lo accionable/urgente (vencimientos, pendientes), despues Flota, y al final lo de referencia estatica (QR, fuera de servicio). */ @media (max-width: 1024px) { /* Sin relleno horizontal en el contenedor: cada seccion controla su propio inset, para que las tarjetas puedan ir de borde a borde de la pantalla (estilo lista nativa) en vez de quedar "flotando" con doble margen (el del contenedor + el propio de la tarjeta). */ /* align-items: stretch (en vez del "flex-start" de escritorio, que aca solo tenia sentido para la fila horizontal) -- sin esto, cada seccion se encoge a su propio contenido en vez de ocupar el ancho completo, que es justamente el bug que dejaba la flecha de "Proximos a vencer" pegada al texto en vez de en el borde derecho. */ /* Gap en cero: cada panel pasa a tener su propio borde superior (los que no lo tenian -- Resumen y Fichas -- lo suman mas abajo), asi que el borde hace de separador y se pegan entre si, como una lista nativa de verdad en vez de cajas sueltas con un hueco en el medio. .tabs es la excepcion -- son botones, no filas de lista, asi que suma su propio margen para no quedar pegado al primer panel. */ .page-body { flex-direction: column; align-items: stretch; gap: 0; padding: 1.5rem 0; } /* display:contents anula max-height/overflow/sticky del wrapper -- por eso alcanza con esto para que los asides dejen de quedar atrapados en su propio scroll interno y su "sticky" superpuesto. .content tambien entra a la lista para poder sacar las pestañas (.tabs) al principio de todo, separadas del resto de su contenido (Resumen/Fichas), que sigue mas abajo junto con las demas secciones contraibles. */ .columna-izquierda, .columna-derecha, .content { display: contents; } .tabs { order: 1; margin: 0 1.5rem 1rem; } .sidebar-vencimientos { order: 2; padding-left: 1.5rem; padding-right: 1.5rem; } /* "Fichas de terreno" y "Fuera de servicio" pasan de tarjeta flotante a panel de borde a borde (sin radio ni bordes laterales), igual que "Proximos a vencer" -- para que las 3 lean como el mismo ancho real. */ .sidebar-pendientes, .sidebar-fuera-servicio, .sidebar-certificaciones { order: 3; width: 100%; border-radius: 0; border-left: none; border-right: none; padding-left: 1.5rem; padding-right: 1.5rem; } /* Resumen y Fichas no traian borde propio (en escritorio van sueltos dentro de la columna central) -- se suma uno arriba solo aca, para que con el gap en cero sigan leyendose separados del panel anterior. */ .content > .resumen-colapsable { order: 4; padding: 1rem 1.5rem 0; border-top: 1px solid var(--borde); } .tab-panel { order: 5; padding: 1rem 1.5rem 0; border-top: 1px solid var(--borde); } .sidebar-fuera-servicio { order: 6; } /* El QR es para abrir la app desde OTRO celular -- no tiene sentido mostrarlo si ya se esta viendo la pagina desde el celular. */ .sidebar-qr-terreno { display: none; } /* Header compacto: en desktop el sticky tiene sentido (sobra espacio), pero en celular ocupar pantalla completa fija todo el tiempo le quita espacio util a la pantalla mas chica -- se deja de fijar y se reduce tipografia/logo/relleno. */ .topbar { position: static; padding: 0.9rem 1rem; gap: 0.5rem; align-items: center; } .logo-mecterra { height: 34px; } .topbar h1 { font-size: 1.05rem; margin: 0.05rem 0; } .brand { font-size: 0.68rem; } .normativa { display: none; } .topbar-meta { gap: 0.4rem; } .meta-pill { padding: 0.3rem 0.6rem; font-size: 0.7rem; } /* "Proximos a vencer", "Fichas de terreno", "Fuera de servicio" y ahora "Resumen" (los 4 KPI, debajo de las pestañas) se pueden contraer en celular -- para ver una en especifico sin tener que bajar por las 100 fichas de equipos de por medio. Empiezan expandidas (nada cambia en la primera visita). */ .resumen-colapsable .colapsable-cabecera { display: flex; margin-bottom: 0.9rem; } .colapsable-cabecera { cursor: pointer; padding: 0.3rem 0; } .colapsable-flecha { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; margin-left: auto; font-size: 1.8rem; color: var(--acento-texto-medio); transition: transform 0.15s; } .cabecera-colapsada .colapsable-flecha { transform: rotate(-90deg); } .cuerpo-oculto { display: none; } /* La vista "Listado" es una tabla ancha de varias columnas, pensada para pantalla de escritorio -- en celular se desconfigura, asi que se esconde esa opcion y se deja solo "Fichas" (que si es responsiva). */ .vista-toggle { display: none; } } /* ---------- Notificaciones (toast) ---------- */ /* z-index 100: por encima de #modal-confirmar-backdrop (60), para que un error de guardado se vea aunque haya un modal abierto encima. */ #toast-container { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(360px, calc(100vw - 2.4rem)); } .toast { background: var(--fondo-tarjeta); color: var(--texto-fuerte); border-left: 4px solid var(--rojo); border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.85rem; line-height: 1.4; box-shadow: 0 4px 16px rgba(15, 34, 49, 0.18); animation: toast-entrar 0.2s ease-out; } .toast-info { border-left-color: var(--amarillo); } .toast-exito { border-left-color: var(--verde); } .toast-salir { animation: toast-salir 0.3s ease-in forwards; } @keyframes toast-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes toast-salir { to { opacity: 0; transform: translateX(20px); } } @media (max-width: 880px) { #toast-container { left: 1.2rem; right: 1.2rem; max-width: none; } } /* ---------- Asistente de consulta (buscador de la guía) ---------- */ /* Botón flotante, siempre visible, para no competir con el resto del header ni con el flujo del formulario -- se puede abrir desde cualquier pantalla. */ .btn-asistente { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 40; height: 3rem; padding: 0 1.1rem 0 0.9rem; border-radius: 999px; border: none; background: var(--azul-oscuro); color: #ffffff; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 45, 61, 0.35); } .btn-asistente span { font-size: 0.88rem; font-weight: 600; white-space: nowrap; } .btn-asistente:hover { background: var(--azul-medio); } /* Punto ámbar: la guía todavía no está lista para buscar (sin conexión y sin una carga previa en este navegador) -- desaparece solo apenas carga. */ .btn-asistente.sin-datos::after { content: ''; position: absolute; top: -0.15rem; right: -0.15rem; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--amarillo); border: 2px solid var(--fondo-tarjeta); } .modal.modal-asistente { max-width: 460px; display: flex; flex-direction: column; max-height: 85vh; } .asistente-input-wrap { margin-bottom: 0.8rem; } #asistente-input { width: 100%; padding: 0.65rem 0.9rem; border-radius: 8px; border: 1px solid var(--borde-card); background: var(--fondo-sutil); color: var(--texto-fuerte); font-size: 0.95rem; font-family: inherit; } .asistente-resultados { overflow-y: auto; display: flex; flex-direction: column; gap: 0.7rem; } .asistente-vacio { color: var(--texto-palido); font-size: 0.88rem; padding: 0.5rem 0.1rem; } .asistente-resultado { border: 1px solid var(--borde-card); border-radius: 8px; padding: 0.7rem 0.9rem; background: var(--fondo-sutil); } .asistente-resultado-seccion { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--acento-texto-medio); margin-bottom: 0.25rem; } .asistente-resultado-pregunta { font-weight: 700; color: var(--texto-fuerte); margin-bottom: 0.25rem; font-size: 0.92rem; } .asistente-resultado-respuesta { color: var(--texto-suave); font-size: 0.88rem; line-height: 1.5; } /* El admin también busca en la guía de terreno -- esta etiqueta deja claro cuando un resultado viene de esa guía y no de la propia. */ .asistente-tag-origen { display: inline-block; background: var(--amarillo-bg); color: var(--aviso-texto); border-radius: 4px; padding: 0.05rem 0.4rem; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; margin-right: 0.15rem; } @media (max-width: 640px) { .btn-asistente { right: 1rem; bottom: 1rem; } }