/* ===================================================================== FS - Gestion de Slots Fuera de Servicio Hoja de estilos unica. Sin frameworks ni CDN: la sala puede quedarse sin internet y la aplicacion tiene que verse igual. Todos los colores salen de variables. El tema oscuro solo redefine las variables, no vuelve a declarar componentes. TEMA: el claro es el predeterminado, siempre. A proposito NO se usa @media (prefers-color-scheme: dark): con esa regla el sistema operativo decidia por el operador y la sala terminaba viendo la aplicacion en oscuro sin haberlo pedido. El oscuro se activa solo cuando el usuario lo elige con el boton de la cabecera, que guarda la preferencia en una cookie y el servidor la escribe como data-tema="oscuro" en . Al venir del servidor, el tema correcto se aplica en el primer pintado: no hay parpadeo de claro a oscuro al cargar la pagina. ===================================================================== */ /* --------------------------------------------------------------------- Tema claro (predeterminado) --------------------------------------------------------------------- */ :root { /* Alinea los controles nativos del navegador (scrollbars, selectores de fecha) con el tema, si no un input[type=date] se ve oscuro sobre claro. */ color-scheme: light; --azul-900: #14233a; --azul-800: #1f3a5f; --azul-600: #2f5d94; --azul-100: #e7eef7; --fondo: #f4f6f9; --fondo-panel: #ffffff; --fondo-suave: #f8fafc; --fondo-hover: #eef2f7; --texto: #1a2230; --texto-suave: #5b6675; --texto-tenue: #8b95a3; --borde: #dde3ea; --borde-fuerte: #c6cfda; --verde: #1a7f4b; --verde-bg: #e3f5ea; --ambar: #9a6200; --ambar-bg: #fdf1dc; --rojo: #b3261e; --rojo-bg: #fdeceb; --gris-bg: #eceff3; --sombra: 0 1px 2px rgba(20, 35, 58, .06), 0 2px 8px rgba(20, 35, 58, .04); --radio: 8px; --radio-chico: 5px; --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --fuente-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; } /* --------------------------------------------------------------------- Tema oscuro: solo cuando el operador lo elige. Redefine unicamente las variables; ningun componente se vuelve a declarar. --------------------------------------------------------------------- */ :root[data-tema="oscuro"] { color-scheme: dark; --azul-100: #1d2c44; --azul-600: #6d9dd6; --fondo: #11161f; --fondo-panel: #1a212d; --fondo-suave: #202836; --fondo-hover: #253040; --texto: #e6ebf2; --texto-suave: #a3aebd; --texto-tenue: #7b8697; --borde: #2c3746; --borde-fuerte: #3b485a; --verde: #5cc98d; --verde-bg: #14301f; --ambar: #e5aa4a; --ambar-bg: #33270f; --rojo: #f28b83; --rojo-bg: #3a1a18; --gris-bg: #262f3d; --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .2); } /* En oscuro el boton primario necesita mas contraste que el azul de la cabecera, que sobre fondo oscuro queda casi invisible. */ :root[data-tema="oscuro"] .btn-primario { background: #2f5d94; border-color: #2f5d94; } :root[data-tema="oscuro"] .btn-primario:hover { background: #3d72b0; border-color: #3d72b0; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--fuente); font-size: 15px; line-height: 1.5; color: var(--texto); background: var(--fondo); -webkit-text-size-adjust: 100%; } a { color: var(--azul-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; line-height: 1.25; font-weight: 650; } h1 { font-size: 1.5rem; } h2 { font-size: 1.05rem; } code { font-family: var(--fuente-mono); font-size: .9em; background: var(--gris-bg); padding: .1em .35em; border-radius: 3px; } .mono { font-family: var(--fuente-mono); font-size: .92em; } .nowrap { white-space: nowrap; } .centro { text-align: center; } .tenue { color: var(--texto-tenue); font-size: .86rem; font-weight: 400; } .visualmente-oculto { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* -------------------------------------------------------------------- Franja de entorno Igual que en legacy_blue: solo se pinta fuera de produccion, para que nadie confunda la copia de pruebas con la sala real. -------------------------------------------------------------------- */ .franja-entorno { background: var(--rojo); color: #fff; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; } /* -------------------------------------------------------------------- Cabecera -------------------------------------------------------------------- */ .cabecera { background: var(--azul-900); color: #fff; box-shadow: var(--sombra); } .cabecera-int { max-width: 1500px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; min-height: 54px; } .marca { color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em; white-space: nowrap; } .marca:hover { text-decoration: none; opacity: .9; } .nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; } .nav a { color: #c8d4e4; padding: 7px 11px; border-radius: var(--radio-chico); font-size: .92rem; white-space: nowrap; } .nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; } .nav a.activo { background: var(--azul-600); color: #fff; font-weight: 600; } .cabecera-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .usuario { color: #fff; display: flex; flex-direction: column; line-height: 1.2; font-size: .88rem; text-align: right; } .usuario:hover { text-decoration: none; opacity: .85; } .usuario .rol { color: #9fb3cd; font-size: .74rem; } .form-sala, .form-salir, .form-tema { margin: 0; } /* Botón de tema. Vive en la cabecera oscura, así que se estila como el selector de sala y no como un botón del contenido. */ .btn-tema { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); color: #fff; border-radius: var(--radio-chico); padding: 5px 9px; font-family: inherit; font-size: .86rem; cursor: pointer; line-height: 1.4; display: flex; align-items: center; gap: 6px; } .btn-tema:hover { background: rgba(255, 255, 255, .2); } .btn-tema .icono { font-size: 1rem; line-height: 1; } /* En la pantalla de ingreso no hay cabecera: el botón va arriba a la derecha y necesita colores del contenido, no de la barra. */ .pagina-login .form-tema { position: absolute; top: 14px; right: 16px; } .pagina-login .btn-tema { background: var(--fondo-panel); border-color: var(--borde-fuerte); color: var(--texto-suave); } .pagina-login .btn-tema:hover { background: var(--fondo-hover); } .form-sala select { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radio-chico); padding: 5px 8px; font-size: .88rem; font-family: inherit; } .form-sala select option { color: #1a2230; background: #fff; } /* -------------------------------------------------------------------- Estructura -------------------------------------------------------------------- */ .contenido { max-width: 1500px; margin: 0 auto; padding: 20px 18px 44px; } .pie { max-width: 1500px; margin: 0 auto; padding: 14px 18px 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--texto-tenue); font-size: .82rem; border-top: 1px solid var(--borde); } .titulo-pagina { margin-bottom: 16px; } .titulo-pagina .sub { margin: 3px 0 0; color: var(--texto-suave); font-size: .92rem; } .titulo-ficha { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; } .ficha-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .grilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; } /* -------------------------------------------------------------------- Paneles -------------------------------------------------------------------- */ .panel { background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px 18px; margin-bottom: 16px; } .panel-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .panel-acciones { display: flex; gap: 7px; flex-wrap: wrap; } .panel-centrado { max-width: 560px; margin: 40px auto; text-align: center; } .panel-accion { background: var(--azul-100); border-color: var(--borde-fuerte); } .panel-peligro { border-color: var(--rojo); } .panel-peligro h2 { color: var(--rojo); } .vacio { color: var(--texto-tenue); background: var(--fondo-suave); border: 1px dashed var(--borde); border-radius: var(--radio-chico); padding: 18px; text-align: center; margin: 0; } /* -------------------------------------------------------------------- KPIs -------------------------------------------------------------------- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; } .kpi { background: var(--fondo-panel); border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: var(--radio); box-shadow: var(--sombra); padding: 13px 15px; display: flex; flex-direction: column; gap: 2px; color: var(--texto); } a.kpi:hover { text-decoration: none; background: var(--fondo-hover); } .kpi-num { font-size: 1.9rem; font-weight: 700; line-height: 1.05; } .kpi-rot { font-size: .8rem; color: var(--texto-suave); } .kpi-reparacion { border-left-color: var(--ambar); } .kpi-reparacion .kpi-num { color: var(--ambar); } .kpi-pendiente { border-left-color: var(--rojo); } .kpi-pendiente .kpi-num { color: var(--rojo); } .kpi-reparada { border-left-color: var(--verde); } .kpi-reparada .kpi-num { color: var(--verde); } .kpi-retirada { border-left-color: var(--texto-tenue); } .kpi-promedio { border-left-color: var(--azul-600); } .kpi-promedio .kpi-num { color: var(--azul-600); } /* -------------------------------------------------------------------- Tablas -------------------------------------------------------------------- */ .tabla-scroll { overflow-x: auto; margin: 0 -18px; padding: 0 18px; } .tabla { width: 100%; border-collapse: collapse; font-size: .88rem; } .tabla th { text-align: left; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 8px 9px; border-bottom: 2px solid var(--borde-fuerte); white-space: nowrap; } .tabla td { padding: 8px 9px; border-bottom: 1px solid var(--borde); vertical-align: middle; } .tabla tbody tr:hover { background: var(--fondo-hover); } .tabla tbody tr:last-child td { border-bottom: none; } .fila-inactiva { opacity: .55; } .tabla-permisos td:first-child { width: 45%; } .tabla-permisos .si { color: var(--verde); font-weight: 650; } .tabla-permisos .no { color: var(--texto-tenue); } /* -------------------------------------------------------------------- Contador de dias con semaforo -------------------------------------------------------------------- */ .dias { display: inline-block; min-width: 2.4em; text-align: center; font-family: var(--fuente-mono); font-weight: 700; font-size: .86rem; padding: 2px 7px; border-radius: var(--radio-chico); background: var(--gris-bg); color: var(--texto-suave); } .dias-grande { font-size: 1.15rem; padding: 5px 12px; } .sem-verde { background: var(--verde-bg); color: var(--verde); } .sem-ambar { background: var(--ambar-bg); color: var(--ambar); } .sem-rojo { background: var(--rojo-bg); color: var(--rojo); } .sem-cerrada { background: var(--gris-bg); color: var(--texto-suave); } /* -------------------------------------------------------------------- Etiquetas de estado -------------------------------------------------------------------- */ .etq { display: inline-block; font-size: .74rem; font-weight: 650; padding: 2px 8px; border-radius: 20px; white-space: nowrap; background: var(--gris-bg); color: var(--texto-suave); } .etq-grande { font-size: .86rem; padding: 4px 12px; } .etq-en_reparacion { background: var(--ambar-bg); color: var(--ambar); } .etq-pendiente { background: var(--rojo-bg); color: var(--rojo); } .etq-reparada { background: var(--verde-bg); color: var(--verde); } .etq-retirada { background: var(--gris-bg); color: var(--texto-suave); } .etq-rol { background: var(--azul-100); color: var(--azul-600); } .etq-accion { background: var(--azul-100); color: var(--azul-600); font-family: var(--fuente-mono); } /* -------------------------------------------------------------------- Botones -------------------------------------------------------------------- */ .btn { display: inline-block; font-family: inherit; font-size: .88rem; font-weight: 550; line-height: 1.4; padding: 7px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); background: var(--fondo-panel); color: var(--texto); cursor: pointer; text-align: center; white-space: nowrap; } .btn:hover { background: var(--fondo-hover); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primario { background: var(--azul-800); border-color: var(--azul-800); color: #fff; } .btn-primario:hover { background: var(--azul-600); border-color: var(--azul-600); } .btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; } .btn-peligro:hover { background: #92201a; border-color: #92201a; } .btn-chico { font-size: .8rem; padding: 4px 10px; } .btn-ancho { width: 100%; padding: 10px; font-size: .95rem; } .btn-enlace { background: none; border: none; color: var(--texto-tenue); cursor: pointer; font-size: .95rem; padding: 0 4px; line-height: 1; } .btn-enlace:hover { color: var(--rojo); } .acciones-pie, .acciones-form { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; } .acciones-form { margin: 14px 0 0; } /* -------------------------------------------------------------------- Formularios -------------------------------------------------------------------- */ .formulario fieldset { border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px 14px 14px; margin: 0 0 14px; } .formulario legend { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); padding: 0 6px; } .formulario-angosto { max-width: 620px; } .formulario-compacto { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); } .campo { margin-bottom: 12px; display: flex; flex-direction: column; } .campo label { font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; } .req { color: var(--rojo); } .campo input[type="text"], .campo input[type="search"], .campo input[type="password"], .campo input[type="email"], .campo input[type="number"], .campo input[type="date"], .campo input[type="file"], .campo select, .campo textarea, .caja-login input { font-family: inherit; font-size: .92rem; color: var(--texto); background: var(--fondo-panel); border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico); padding: 7px 9px; width: 100%; min-width: 0; } .campo textarea { resize: vertical; } .campo input:focus, .campo select:focus, .campo textarea:focus, .caja-login input:focus { outline: 2px solid var(--azul-600); outline-offset: -1px; border-color: var(--azul-600); } .campo input.mono { font-family: var(--fuente-mono); } .campo-check { flex-direction: row; align-items: center; } .campo-check label { display: flex; align-items: center; gap: 7px; margin: 0; font-weight: 500; color: var(--texto); font-size: .9rem; cursor: pointer; } .campo-check input { width: auto; } .campo-boton { justify-content: flex-end; } .campo-boton .btn { margin-bottom: 1px; } .fila-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 0 14px; align-items: start; } .fila-campos .campo-ancho { grid-column: span 2; } .fila-accion { align-items: end; } .error-campo { color: var(--rojo); font-size: .8rem; margin: 4px 0 0; font-weight: 500; } .ayuda { font-size: .8rem; color: var(--texto-tenue); margin: 4px 0 0; line-height: 1.4; } .ayuda-bloque { background: var(--fondo-suave); border-left: 3px solid var(--azul-600); border-radius: var(--radio-chico); padding: 10px 14px; margin: 0 0 16px; font-size: .86rem; color: var(--texto-suave); } .ayuda-uid { font-weight: 600; color: var(--verde); } .ayuda-uid[data-nueva] { color: var(--ambar); } /* -------------------------------------------------------------------- Filtros -------------------------------------------------------------------- */ .filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 0 14px; align-items: end; } .filtros .campo { margin-bottom: 12px; } .filtros-acciones { display: flex; gap: 8px; margin-bottom: 12px; align-items: flex-end; } /* -------------------------------------------------------------------- Listas de definiciones -------------------------------------------------------------------- */ .datos { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 6px 18px; margin: 0; font-size: .9rem; } .datos dt { font-weight: 600; color: var(--texto-suave); } .datos dd { margin: 0; } /* -------------------------------------------------------------------- Bitacora -------------------------------------------------------------------- */ .bitacora { list-style: none; margin: 0; padding: 0; } .bitacora li { border-left: 3px solid var(--azul-600); background: var(--fondo-suave); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; padding: 8px 12px; margin-bottom: 8px; } .bit-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; font-size: .85rem; } .bit-cab form { margin: 0 0 0 auto; } .bitacora p { margin: 0; font-size: .9rem; } /* -------------------------------------------------------------------- Adjuntos -------------------------------------------------------------------- */ .adjuntos { list-style: none; margin: 0; padding: 0; } .adjuntos li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borde); } .adjuntos li:last-child { border-bottom: none; } .adjuntos img { width: 62px; height: 46px; object-fit: cover; border-radius: var(--radio-chico); border: 1px solid var(--borde); display: block; } .adj-doc { width: 62px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--rojo-bg); color: var(--rojo); font-weight: 700; font-size: .78rem; border-radius: var(--radio-chico); border: 1px solid var(--borde); } .adj-doc:hover { text-decoration: none; } .adj-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .adj-info > a { font-size: .88rem; word-break: break-word; } .adjuntos li > form { margin: 0; } /* -------------------------------------------------------------------- Lista de permisos del perfil -------------------------------------------------------------------- */ .lista-permisos { list-style: none; margin: 0; padding: 0; font-size: .89rem; } .lista-permisos li { padding: 3px 0; } .lista-permisos .permitido { color: var(--texto); } .lista-permisos .negado { color: var(--texto-tenue); } /* -------------------------------------------------------------------- Paginacion -------------------------------------------------------------------- */ .paginacion { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); } /* -------------------------------------------------------------------- Mensajes flash -------------------------------------------------------------------- */ .flashes { margin-bottom: 16px; } .flash { padding: 10px 14px; border-radius: var(--radio-chico); border-left: 4px solid; margin-bottom: 8px; font-size: .9rem; } .flash-ok { background: var(--verde-bg); border-color: var(--verde); color: var(--verde); } .flash-error { background: var(--rojo-bg); border-color: var(--rojo); color: var(--rojo); } .flash-aviso { background: var(--ambar-bg); border-color: var(--ambar); color: var(--ambar); } /* -------------------------------------------------------------------- Graficos SVG generados en el servidor -------------------------------------------------------------------- */ .grafico { width: 100%; height: auto; display: block; overflow: visible; } .grafico .g-barra { fill: var(--azul-600); } .grafico .g-etiqueta { fill: var(--texto-suave); font-size: 11px; font-family: var(--fuente); } .grafico .g-valor { fill: var(--texto-tenue); font-size: 10px; font-family: var(--fuente-mono); } .grafico .g-guia { stroke: var(--borde); stroke-width: 1; } /* -------------------------------------------------------------------- Login -------------------------------------------------------------------- */ .pagina-login { display: flex; flex-direction: column; min-height: 100vh; background: var(--fondo); } .caja-login { width: 100%; max-width: 380px; margin: auto; padding: 30px 28px 34px; background: var(--fondo-panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); } .caja-login h1 { font-size: 1.25rem; text-align: center; } .caja-login .sub { text-align: center; color: var(--texto-tenue); font-size: .86rem; margin: 5px 0 20px; } .caja-login label { display: block; font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin: 12px 0 4px; } .caja-login .btn { margin-top: 20px; } /* -------------------------------------------------------------------- Pantallas chicas -------------------------------------------------------------------- */ @media (max-width: 700px) { .cabecera-int { padding: 8px 14px; } .nav { order: 3; width: 100%; } .cabecera-der { margin-left: auto; } .contenido { padding: 16px 14px 34px; } .panel { padding: 14px; } .tabla-scroll { margin: 0 -14px; padding: 0 14px; } .fila-campos .campo-ancho { grid-column: span 1; } .titulo-ficha { flex-direction: column; gap: 10px; } } /* -------------------------------------------------------------------- Impresion Sirve como respaldo del PDF: desde el navegador se puede imprimir cualquier pantalla sin la navegacion ni los botones. -------------------------------------------------------------------- */ @media print { .cabecera, .pie, .franja-entorno, .acciones-pie, .acciones-form, .filtros, .panel-acciones, .paginacion, .formulario-compacto, .panel-peligro, .panel-accion { display: none !important; } body { background: #fff; font-size: 11pt; } .contenido { max-width: none; padding: 0; } .panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .tabla-scroll { overflow: visible; margin: 0; padding: 0; } a { color: inherit; text-decoration: none; } }