:root { /* --------------------------------------------------------------------- Paleta institucional PUCV — Manual de Normas Gráficas Centenario (Dirección de Comunicación Estratégica, junio 2025) ece5e0 crudo, fondo prioritario del manual 24588d azul institucional profundo 1d71b8 azul 008cba azul cian 36a9e1 celeste a3d1e3 celeste claro 30b6be turquesa f4ce46 amarillo ee7269 coral e73a34 rojo 9366a9 morado --------------------------------------------------------------------- */ /* Marca */ --azul-profundo: #24588D; --azul: #1D71B8; --azul-cian: #008CBA; --celeste: #36A9E1; --celeste-claro: #A3D1E3; --turquesa: #30B6BE; --amarillo: #F4CE46; --coral: #EE7269; --rojo: #E73A34; --morado: #9366A9; --crudo: #ECE5E0; /* Superficies */ --tinta: var(--azul-profundo); --tinta-2: #2E6BA8; --papel: var(--crudo); --panel: #FFFFFF; --panel-2: #F7F3F0; --linea: #DDD4CD; --linea-fuerte: #C4B8AF; /* Texto */ --texto: #2A2521; --texto-suave: #6B605A; --texto-tenue: #948880; /* Roles semánticos, derivados de la paleta del manual */ --acento: var(--azul); --acento-claro: #E4EFF8; --acento-oscuro: #17456F; --exito: #1B8A91; /* turquesa oscurecido para contraste */ --exito-claro: #DDF2F3; --aviso: #96731A; /* amarillo oscurecido para contraste */ --aviso-claro: #FCF3D8; --peligro: #C0241F; /* rojo oscurecido para contraste */ --peligro-claro: #FBE5E4; --morado-claro: #EFE7F4; /* Compatibilidad con nombres previos */ --oro: var(--aviso); --oro-claro: var(--aviso-claro); --carmesi: var(--peligro); --carmesi-claro: var(--peligro-claro); --verde: var(--exito); --verde-claro: var(--exito-claro); --azul-claro: var(--acento-claro); --radio: 4px; --radio-g: 8px; --sombra: 0 1px 2px rgba(36, 88, 141, .07), 0 4px 14px rgba(36, 88, 141, .07); --fuente: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, -apple-system, sans-serif; --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "Liberation Mono", monospace; --rail: 232px; } /* --------------------------------------------------------------------------- Modo oscuro Se aplica de dos formas, y por eso las declaraciones aparecen dos veces: data-tema="oscuro" lo eligió la persona en Configuración data-tema="sistema" sigue la preferencia del sistema operativo El atributo lo pone app.js sobre antes de pintar, para que no haya un parpadeo claro al cargar. --------------------------------------------------------------------------- */ :root[data-tema="oscuro"] { --tinta: #16324F; --tinta-2: #1E4570; --papel: #12181D; --panel: #1A2229; --panel-2: #212B33; --linea: #2E3A44; --linea-fuerte: #3F4E5A; --texto: #E9E4DF; --texto-suave: #A79E97; --texto-tenue: #7A716B; --acento: var(--celeste); --acento-claro: #14283A; --acento-oscuro: var(--celeste-claro); --exito: #4FC9C4; --exito-claro: #10312F; --aviso: var(--amarillo); --aviso-claro: #362C10; --peligro: #F0827C; --peligro-claro: #3A1A18; --morado-claro: #2A1F33; --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); } @media (prefers-color-scheme: dark) { :root[data-tema="sistema"] { --tinta: #16324F; --tinta-2: #1E4570; --papel: #12181D; --panel: #1A2229; --panel-2: #212B33; --linea: #2E3A44; --linea-fuerte: #3F4E5A; --texto: #E9E4DF; --texto-suave: #A79E97; --texto-tenue: #7A716B; --acento: var(--celeste); --acento-claro: #14283A; --acento-oscuro: var(--celeste-claro); --exito: #4FC9C4; --exito-claro: #10312F; --aviso: var(--amarillo); --aviso-claro: #362C10; --peligro: #F0827C; --peligro-claro: #3A1A18; --morado-claro: #2A1F33; --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25); } } /* Transición suave al cambiar de tema, sin afectar al resto de la interfaz */ :root[data-cambiando-tema] *, :root[data-cambiando-tema] *::before, :root[data-cambiando-tema] *::after { transition: background-color .18s ease, color .18s ease, border-color .18s ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; background: var(--papel); color: var(--texto); font-family: var(--fuente); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; } .oculto { display: none !important; } :focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Marca ─────────────────────────────────────────────────────────────── */ .marca { display: flex; align-items: center; gap: 10px; padding: 18px 16px 20px; } .marca strong { display: block; font-size: 14px; letter-spacing: -.01em; color: var(--texto); } .marca small { display: block; font-size: 11px; color: var(--texto-tenue); letter-spacing: .02em; } .marca__glifo { width: 26px; height: 26px; border-radius: 5px; flex: none; background: var(--tinta-2); position: relative; } .marca__glifo::before { content: ''; position: absolute; inset: 6px 5px 9px; background: var(--amarillo); border-radius: 1px; } .marca__glifo::after { content: ''; position: absolute; left: 11px; bottom: 5px; width: 4px; height: 2px; background: var(--amarillo); } .marca--grande { padding: 0 0 24px; } .marca--grande strong { font-size: 17px; } /* Con logo institucional: la imagen arriba y el texto debajo, centrados. El logo del centenario es muy apaisado (algo más de 3:1), así que se ajusta por ancho: limitarlo por altura lo dejaría diminuto en la barra lateral. */ .marca--vertical { flex-direction: column; align-items: center; text-align: center; gap: 9px; } .marca--vertical strong, .marca--vertical small { text-align: center; } .marca__logo { width: 100%; max-width: 100%; height: auto; display: block; object-fit: contain; } .rail .marca__logo { max-width: 176px; } /* En el fondo azul de la barra lateral, un logo a color necesita un respaldo claro para no perderse. */ .rail .marca__logo--fondo { background: #FFFFFF; padding: 8px 10px; border-radius: var(--radio); } .marca--grande .marca__logo { max-width: 290px; margin: 0 auto 4px; } /* ── Ingreso ───────────────────────────────────────────────────────────── */ .ingreso { min-height: 100%; display: grid; place-items: center; padding: 24px; background: var(--crudo); position: relative; overflow: hidden; } /* Grilla de color del logo centenario, como marca de agua del fondo */ .ingreso::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--amarillo) 0 0) 0 0 / 18vmin 18vmin no-repeat, linear-gradient(var(--turquesa) 0 0) 18vmin 0 / 18vmin 18vmin no-repeat, linear-gradient(var(--celeste) 0 0) 0 18vmin / 18vmin 18vmin no-repeat, linear-gradient(var(--coral) 0 0) 18vmin 18vmin / 18vmin 18vmin no-repeat, linear-gradient(var(--morado) 0 0) right 0 bottom 18vmin / 18vmin 18vmin no-repeat, linear-gradient(var(--azul) 0 0) right 18vmin bottom 18vmin / 18vmin 18vmin no-repeat, linear-gradient(var(--celeste-claro) 0 0) right 0 bottom 0 / 18vmin 18vmin no-repeat, linear-gradient(var(--azul-cian) 0 0) right 18vmin bottom 0 / 18vmin 18vmin no-repeat; opacity: .16; } .ingreso__caja { position: relative; z-index: 1; } .ingreso__caja { width: 100%; max-width: 390px; background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 34px 32px 32px; box-shadow: 0 4px 24px rgba(36, 88, 141, .12); overflow: hidden; } /* Franja superior con los colores del logo centenario */ .ingreso__franja { display: flex; height: 5px; margin: -34px -32px 26px; } .ingreso__franja i { flex: 1; } .ingreso__pie { margin: 22px -32px -32px; padding: 12px 32px; border-top: 1px solid var(--linea); background: var(--panel-2); font-size: 11.5px; color: var(--texto-tenue); text-align: center; } .ingreso__error { margin: 4px 0 12px; padding: 9px 11px; font-size: 13px; background: var(--carmesi-claro); color: var(--carmesi); border-left: 3px solid var(--carmesi); border-radius: 0 var(--radio) var(--radio) 0; } /* ── Estructura ────────────────────────────────────────────────────────── */ .app { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100vh; } .rail { background: var(--tinta); color: #C6D8E8; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .rail .marca strong { color: #fff; } .rail__nav { flex: 1; padding: 4px 8px; } .rail__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 1px; border-radius: var(--radio); color: #A8C2D8; font-size: 13.5px; text-decoration: none; } .rail__link:hover { background: rgba(255,255,255,.06); color: #fff; text-decoration: none; } .rail__link.activo { background: rgba(255,255,255,.13); color: #FFFFFF; box-shadow: inset 3px 0 0 var(--amarillo); } .rail__link::before { content: ''; width: 6px; height: 6px; border-radius: 1px; background: currentColor; opacity: .45; flex: none; } .rail__link.activo::before { opacity: 1; } .rail__separador { height: 1px; background: rgba(255,255,255,.1); margin: 10px 10px 8px; } .rail__pie { padding: 8px; border-top: 1px solid rgba(255,255,255,.08); } .sesion { display: flex; align-items: center; gap: 8px; padding: 10px; } .sesion__datos { flex: 1; min-width: 0; text-decoration: none; display: block; padding: 4px 6px; margin: -4px -6px; border-radius: var(--radio); } .sesion__datos:hover { background: rgba(255,255,255,.08); text-decoration: none; } .sesion__datos strong { display: block; font-size: 12.5px; color: #EDF4FA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sesion__datos small { font-size: 11px; color: #8FAAC4; text-transform: uppercase; letter-spacing: .06em; } .lienzo { padding: 0 0 64px; min-width: 0; } .cargando { padding: 48px; color: var(--texto-tenue); } /* ── Encabezado de vista ───────────────────────────────────────────────── */ .cabecera { position: sticky; top: 0; z-index: 20; background: var(--panel); border-bottom: 1px solid var(--linea); padding: 18px 28px 16px; } .cabecera__fila { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .cabecera h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.015em; } .cabecera__sub { margin: 3px 0 0; color: var(--texto-suave); font-size: 13px; } .cabecera__acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--texto-tenue); } .contenido { padding: 24px 28px; } .seccion { margin-bottom: 28px; } .seccion__titulo { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--linea); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); } .seccion__titulo span { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--texto-tenue); } /* ── Tarjetas de cifras ────────────────────────────────────────────────── */ .cifras { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .cifra { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 14px 16px; box-shadow: var(--sombra); } .cifra__valor { font-size: 27px; font-weight: 600; letter-spacing: -.025em; line-height: 1.1; font-variant-numeric: tabular-nums; } .cifra__etiqueta { margin-top: 3px; font-size: 12px; color: var(--texto-suave); } .cifra--alerta { border-color: var(--carmesi); } .cifra--alerta .cifra__valor { color: var(--carmesi); } /* ── Paneles ───────────────────────────────────────────────────────────── */ .panel { background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-g); box-shadow: var(--sombra); overflow: hidden; } .panel__cabeza { padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--panel-2); display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); } .panel__cabeza .btn { margin-left: auto; } .panel__cuerpo { padding: 16px; } .rejilla { display: grid; gap: 16px; } .rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } /* ── Tablas ────────────────────────────────────────────────────────────── */ .tabla-envoltura { overflow-x: auto; } table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; } .tabla th { text-align: left; padding: 9px 12px; white-space: nowrap; background: var(--panel-2); border-bottom: 1px solid var(--linea-fuerte); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--texto-suave); position: sticky; top: 0; z-index: 2; } .tabla td { padding: 8px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; } .tabla tbody tr:hover { background: var(--panel-2); } .tabla tbody tr.seleccionable { cursor: pointer; } .tabla .num { text-align: right; font-variant-numeric: tabular-nums; } .tabla__vacia { padding: 36px 16px; text-align: center; color: var(--texto-tenue); } .tabla__vacia strong { display: block; color: var(--texto); margin-bottom: 4px; font-size: 14px; } /* Firma visual: los identificadores siempre en monoespaciada teñida */ .id { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; background: var(--azul-claro); color: var(--azul); padding: 1px 5px; border-radius: 3px; white-space: nowrap; } .id--oro { background: var(--oro-claro); color: var(--oro); } .id--neutro { background: var(--panel-2); color: var(--texto-suave); border: 1px solid var(--linea); } .mono { font-family: var(--mono); font-size: 12.5px; } /* ── Insignias ─────────────────────────────────────────────────────────── */ .insignia { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; background: var(--panel-2); color: var(--texto-suave); border: 1px solid var(--linea); } .insignia--ok { background: var(--verde-claro); color: var(--verde); border-color: transparent; } .insignia--aviso { background: var(--oro-claro); color: var(--oro); border-color: transparent; } .insignia--malo { background: var(--carmesi-claro); color: var(--carmesi); border-color: transparent; } .insignia--info { background: var(--azul-claro); color: var(--azul); border-color: transparent; } /* ── Botones ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: var(--radio); border: 1px solid var(--linea-fuerte); background: var(--panel); color: var(--texto); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: var(--panel-2); border-color: var(--texto-tenue); } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--primario { background: var(--tinta-2); border-color: var(--tinta-2); color: #fff; } .btn--primario:hover { background: var(--tinta); border-color: var(--tinta); } .btn--peligro { color: var(--carmesi); border-color: var(--carmesi); background: transparent; } .btn--peligro:hover { background: var(--carmesi-claro); } .btn--fantasma { background: transparent; border-color: rgba(255,255,255,.18); color: #C9D2E0; } .btn--fantasma:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); } .btn--chico { padding: 4px 9px; font-size: 12px; } .btn--ancho { width: 100%; } /* ── Formularios ───────────────────────────────────────────────────────── */ .campo { display: block; margin-bottom: 14px; } .campo__etiqueta { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); } .campo__ayuda { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-tenue); } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { width: 100%; padding: 7px 10px; font: inherit; font-size: 13.5px; background: var(--panel); color: var(--texto); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); } input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px rgba(29,113,184,.16); } textarea { min-height: 76px; resize: vertical; } select { cursor: pointer; } .campos { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .campos--3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .campo--ancho { grid-column: 1 / -1; } .marca-check { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; font-size: 13.5px; } .marca-check input { width: auto; } /* ── Filtros ───────────────────────────────────────────────────────────── */ .filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; padding: 12px 28px; background: var(--panel-2); border-bottom: 1px solid var(--linea); } .filtros .campo { margin: 0; min-width: 132px; } .filtros .campo--busca { flex: 1; min-width: 220px; } /* ── Ficha (pares dato/valor) ──────────────────────────────────────────── */ .ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 20px; } .dato__clave { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); margin-bottom: 2px; } .dato__valor { font-size: 13.5px; word-break: break-word; } .dato__valor--vacio { color: var(--texto-tenue); font-style: italic; } /* ── Migas de pan ──────────────────────────────────────────────────────── */ .migas { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 4px; } .migas span { color: var(--texto-tenue); margin: 0 6px; } /* ── Barras comparativas ───────────────────────────────────────────────── */ .barra { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 13px; } .barra__nombre { flex: none; width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barra__pista { flex: 1; height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; border: 1px solid var(--linea); } .barra__relleno { height: 100%; background: var(--tinta-2); } .barra__valor { flex: none; width: 48px; text-align: right; font-variant-numeric: tabular-nums; color: var(--texto-suave); } /* ── Modal ─────────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; z-index: 100; background: rgba(16, 26, 43, .5); backdrop-filter: blur(2px); display: grid; place-items: start center; padding: 40px 20px; overflow-y: auto; } .modal__caja { width: 100%; max-width: 760px; background: var(--panel); border-radius: var(--radio-g); box-shadow: 0 20px 60px rgba(0,0,0,.3); border: 1px solid var(--linea); } .modal__caja--ancho { max-width: 1040px; } .modal__cabeza { padding: 16px 20px; border-bottom: 1px solid var(--linea); display: flex; align-items: center; gap: 12px; } .modal__cabeza h2 { margin: 0; font-size: 16px; font-weight: 600; } .modal__cerrar { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 22px; line-height: 1; color: var(--texto-tenue); padding: 0 4px; } .modal__cerrar:hover { color: var(--texto); } .modal__cuerpo { padding: 20px; } .modal__pie { padding: 14px 20px; border-top: 1px solid var(--linea); background: var(--panel-2); display: flex; gap: 8px; justify-content: flex-end; border-radius: 0 0 var(--radio-g) var(--radio-g); } /* ── Avisos ────────────────────────────────────────────────────────────── */ .avisos { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; } .aviso { padding: 11px 15px; border-radius: var(--radio); background: var(--tinta-2); color: #fff; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); max-width: 380px; border-left: 3px solid var(--celeste); } .aviso--ok { border-left-color: var(--turquesa); } .aviso--error { border-left-color: var(--coral); } /* ── Paginación ────────────────────────────────────────────────────────── */ .paginacion { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--linea); font-size: 13px; color: var(--texto-suave); } .paginacion .btn { margin: 0; } .paginacion__espacio { flex: 1; } /* ── Pestañas ──────────────────────────────────────────────────────────── */ .pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--linea); margin-bottom: 18px; overflow-x: auto; } .pestana { padding: 8px 14px; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--texto-suave); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .pestana:hover { color: var(--texto); } .pestana.activa { color: var(--acento); border-bottom-color: var(--acento); font-weight: 600; } /* ── Token recién creado ───────────────────────────────────────────────── */ /* Es un : al pulsarlo se selecciona entero y Ctrl+C funciona aunque el navegador bloquee el copiado automático, cosa que ocurre al servir la plataforma por HTTP sin certificado. */ input.token-nuevo, .token-nuevo { width: 100%; font-family: var(--mono); font-size: 13.5px; letter-spacing: .01em; background: var(--tinta); color: var(--amarillo); border: 1px solid var(--tinta-2); border-radius: var(--radio); padding: 12px 14px; margin: 10px 0; cursor: text; } input.token-nuevo:focus { outline: 2px solid var(--amarillo); outline-offset: 1px; border-color: var(--amarillo); } .campo-copiable { width: 100%; font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); color: var(--texto); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 10px; } /* ── Responsivo ────────────────────────────────────────────────────────── */ /* El botón sólo existe en pantallas pequeñas */ .rail__hamburguesa { display: none; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } /* La barra se reduce a una cabecera: logo a la izquierda, botón a la derecha, a la misma altura. Los módulos se despliegan debajo. */ .rail { position: sticky; top: 0; z-index: 60; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0 14px; gap: 0; box-shadow: 0 1px 0 rgba(255,255,255,.08); } .rail .marca { flex: 1; min-width: 0; flex-direction: row; align-items: center; text-align: left; padding: 10px 0; gap: 10px; } .rail .marca strong, .rail .marca small { text-align: left; } .rail .marca small { display: none; } /* el subtítulo no cabe */ .rail .marca__logo { max-height: 34px; } .rail__hamburguesa { display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; flex: none; order: 2; background: none; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radio); cursor: pointer; } .hamburguesa__barra { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform .2s ease, opacity .2s ease; } .rail--abierto .hamburguesa__barra:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rail--abierto .hamburguesa__barra:nth-child(2) { opacity: 0; } .rail--abierto .hamburguesa__barra:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Plegado por defecto; se despliega con el botón */ .rail__nav, .rail__pie { display: none; flex: 1 0 100%; order: 3; } .rail--abierto .rail__nav { display: block; padding: 6px 0 10px; max-height: calc(100vh - 64px); overflow-y: auto; } .rail--abierto .rail__pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.08); } .rail__link { white-space: nowrap; } .rail__pie .rail__link { flex: none; } .rail__separador { margin: 8px 0; } .cabecera, .contenido, .filtros { padding-left: 16px; padding-right: 16px; } .cabecera__fila { flex-direction: column; align-items: flex-start; gap: 12px; } .cabecera__acciones { width: 100%; flex-wrap: wrap; } } @media (max-width: 620px) { /* En un teléfono, las acciones ocupan el ancho para poder pulsarlas bien */ .cabecera__acciones .btn { flex: 1; justify-content: center; } .rail .marca strong { font-size: 14px; } } @media print { .rail, .filtros, .cabecera__acciones, .avisos, .paginacion { display: none !important; } .app { grid-template-columns: 1fr; } body { background: #fff; } .panel { box-shadow: none; border-color: #ccc; } } /* =========================================================================== Selector de tema =========================================================================== */ .temas { display: flex; gap: 12px; flex-wrap: wrap; } .tema { flex: 1; min-width: 150px; cursor: pointer; border: 2px solid var(--linea); border-radius: var(--radio-g); padding: 12px; background: var(--panel); text-align: left; font: inherit; color: var(--texto); } .tema:hover { border-color: var(--linea-fuerte); } .tema.activo { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(29,113,184,.14); } .tema__muestra { height: 54px; border-radius: var(--radio); margin-bottom: 9px; border: 1px solid var(--linea); overflow: hidden; display: flex; } .tema__muestra i { display: block; } .tema__nombre { display: block; font-size: 13.5px; font-weight: 600; } .tema__ayuda { display: block; font-size: 11.5px; color: var(--texto-tenue); margin-top: 1px; } /* Miniaturas: se dibujan con los colores fijos de cada tema, no con las variables, para que la muestra del tema claro se vea clara aunque la interfaz esté en oscuro. */ .muestra-claro { background: #ECE5E0; } .muestra-claro .barra { width: 26%; background: #24588D; } .muestra-claro .hoja { flex: 1; background: #FFFFFF; margin: 7px; border-radius: 2px; } .muestra-oscuro { background: #12181D; } .muestra-oscuro .barra { width: 26%; background: #16324F; } .muestra-oscuro .hoja { flex: 1; background: #1A2229; margin: 7px; border-radius: 2px; } .muestra-sistema { background: linear-gradient(100deg, #ECE5E0 0 50%, #12181D 50% 100%); } .muestra-sistema .barra { width: 26%; background: #24588D; } .muestra-sistema .hoja { flex: 1; background: rgba(255,255,255,.45); margin: 7px; border-radius: 2px; } /* =========================================================================== Perfil =========================================================================== */ .avatar { width: 62px; height: 62px; border-radius: 50%; flex: none; background: var(--tinta); color: #fff; display: grid; place-items: center; font-size: 23px; font-weight: 600; letter-spacing: .02em; } .perfil__cabeza { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; } .perfil__nombre { font-size: 18px; font-weight: 600; } .perfil__correo { font-size: 13px; color: var(--texto-suave); } /* =========================================================================== Manual de uso =========================================================================== */ .manual { display: grid; grid-template-columns: 218px 1fr; gap: 26px; align-items: start; } .manual__indice { position: sticky; top: 92px; } .manual__indice a { display: block; padding: 6px 10px; border-radius: var(--radio); font-size: 13px; color: var(--texto-suave); text-decoration: none; border-left: 2px solid transparent; } .manual__indice a:hover { background: var(--panel-2); color: var(--texto); text-decoration: none; } .manual__indice a.activo { color: var(--acento); border-left-color: var(--acento); background: var(--acento-claro); font-weight: 600; } .manual__cuerpo { max-width: 760px; min-width: 0; } .manual__cuerpo h2 { font-size: 17px; margin: 30px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--linea); scroll-margin-top: 92px; } .manual__cuerpo h2:first-child { margin-top: 0; } .manual__cuerpo h3 { font-size: 14px; margin: 20px 0 6px; } .manual__cuerpo p, .manual__cuerpo li { font-size: 13.5px; line-height: 1.65; } .manual__cuerpo ul, .manual__cuerpo ol { padding-left: 20px; margin: 8px 0; } .manual__cuerpo li { margin-bottom: 4px; } .manual__cuerpo code { font-family: var(--mono); font-size: 12.5px; background: var(--panel-2); padding: 1px 5px; border-radius: 3px; border: 1px solid var(--linea); } .manual__nota { border-left: 3px solid var(--acento); background: var(--acento-claro); padding: 11px 14px; margin: 14px 0; font-size: 13px; border-radius: 0 var(--radio) var(--radio) 0; } .manual__nota--aviso { border-left-color: var(--aviso); background: var(--aviso-claro); } .manual__pasos { counter-reset: paso; list-style: none; padding-left: 0; } .manual__pasos li { counter-increment: paso; position: relative; padding-left: 34px; margin-bottom: 10px; } .manual__pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; } @media (max-width: 860px) { .manual { grid-template-columns: 1fr; } .manual__indice { position: static; display: flex; flex-wrap: wrap; gap: 4px; } } /* Enlace del manual en la barra lateral, con icono */ .rail__link--ayuda::before { content: '?'; width: 15px; height: 15px; border-radius: 50%; background: none; border: 1.5px solid currentColor; opacity: 1; font-size: 10px; font-weight: 700; line-height: 12px; text-align: center; } /* =========================================================================== Pie con la versión del sistema =========================================================================== */ .version { padding: 6px 12px 10px; text-align: center; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.4); font-family: var(--mono); } /* =========================================================================== Reportes =========================================================================== */ .reportes { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; } .reportes__lista { position: sticky; top: 92px; } .reportes__grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-tenue); margin: 16px 0 6px; padding-left: 10px; } .reportes__grupo:first-child { margin-top: 0; } .reporte-item { display: block; width: 100%; text-align: left; cursor: pointer; padding: 9px 11px; margin-bottom: 3px; border-radius: var(--radio); border: 1px solid transparent; background: none; font: inherit; font-size: 13px; color: var(--texto-suave); } .reporte-item:hover { background: var(--panel-2); color: var(--texto); } .reporte-item.activo { background: var(--panel); border-color: var(--linea); color: var(--texto); font-weight: 600; box-shadow: inset 3px 0 0 var(--acento); } .reporte-item small { display: block; font-weight: 400; font-size: 11.5px; color: var(--texto-tenue); margin-top: 2px; line-height: 1.4; } .tabla tfoot td { background: var(--panel-2); font-weight: 600; border-top: 2px solid var(--linea-fuerte); } @media (max-width: 900px) { .reportes { grid-template-columns: 1fr; } .reportes__lista { position: static; } } /* =========================================================================== Importación de planillas =========================================================================== */ .soltar { border: 2px dashed var(--linea-fuerte); border-radius: var(--radio-g); background: var(--panel); padding: 44px 24px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; } .soltar:hover { border-color: var(--acento); background: var(--panel-2); } .soltar--activo { border-color: var(--acento); background: var(--acento-claro); border-style: solid; } .soltar__icono { display: inline-block; margin-bottom: 14px; font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--acento); background: var(--acento-claro); border: 1px solid var(--acento); border-radius: var(--radio); padding: 9px 14px; } .soltar__titulo { font-size: 16px; font-weight: 600; margin-bottom: 4px; } .soltar__ayuda { font-size: 13px; color: var(--texto-tenue); } /* Bloque que se despliega para no cargar la pantalla de entrada */ .plegable { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 12px; } .plegable__boton { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--acento); text-align: left; } .plegable__boton:hover { text-decoration: underline; } .plegable__cuerpo { margin-top: 12px; } /* =========================================================================== Cambios registrados en una mantención =========================================================================== */ .cambio { border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; margin-bottom: 10px; background: var(--panel-2); } .cambio__linea { display: grid; gap: 10px; align-items: end; margin-bottom: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .cambio__linea:last-child { margin-bottom: 0; } .cambio__linea .campo__etiqueta { margin-bottom: 3px; } .cambio__resumen { font-size: 13px; margin-bottom: 3px; } .cambio__resumen:last-child { margin-bottom: 0; } /* Selección de técnicos acompañantes en una mantención */ .acompanantes { display: grid; gap: 2px 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; background: var(--panel-2); max-height: 160px; overflow-y: auto; } .acompanantes .marca-check { margin-bottom: 2px; font-size: 13px; } /* Lista de equipos o nombres con casillas, en operaciones en bloque */ .equipos-masiva { display: grid; gap: 2px 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border: 1px solid var(--linea); border-radius: var(--radio); padding: 10px 12px; background: var(--panel-2); max-height: 220px; overflow-y: auto; } .equipos-masiva .marca-check { margin-bottom: 2px; font-size: 13px; } /* =========================================================================== Permisos por módulo, en el formulario de rol =========================================================================== */ .permisos { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--panel-2); overflow: hidden; } .permisos__fila { display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--linea); } .permisos__fila:last-child { border-bottom: none; } .permisos__nombre { font-size: 13.5px; } /* Interruptor: una casilla dibujada como palanca */ .interruptor { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--texto-suave); cursor: pointer; user-select: none; white-space: nowrap; } .interruptor input { position: absolute; opacity: 0; width: 0; height: 0; } .interruptor span { width: 34px; height: 19px; border-radius: 10px; flex: none; background: var(--linea-fuerte); position: relative; transition: background .15s; } .interruptor span::after { content: ''; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); } .interruptor input:checked + span { background: var(--acento); } .interruptor input:checked + span::after { transform: translateX(15px); } .interruptor input:disabled + span { opacity: .4; cursor: not-allowed; } .interruptor input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; } @media (max-width: 620px) { .permisos__fila { grid-template-columns: 1fr; gap: 6px; } } /* =========================================================================== Asistente de registro =========================================================================== */ .rail__link--asistente::before { content: ''; width: 15px; height: 15px; border-radius: 3px; border: 1.5px solid currentColor; background: none; opacity: 1; box-shadow: inset 0 0 0 1.5px transparent; position: relative; } .rail__link--asistente { color: var(--amarillo); } .rail__link--asistente.activo { color: #fff; } /* Elección inicial */ .asistente__pregunta { display: flex; align-items: center; gap: 10px; font-size: 19px; margin: 0 0 6px; } .asistente__pregunta svg { color: var(--acento); flex: none; } .asistente__ayuda { color: var(--texto-suave); font-size: 13.5px; margin: 0 0 18px; } .objetivos { display: grid; gap: 14px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .objetivo { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: var(--texto); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio-g); padding: 20px; transition: border-color .15s, transform .15s; } .objetivo:hover { border-color: var(--acento); transform: translateY(-2px); } .objetivo__icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radio); margin-bottom: 6px; background: var(--acento-claro); color: var(--acento); } .objetivo__titulo { font-size: 15.5px; font-weight: 600; } .objetivo__desc { font-size: 12.5px; color: var(--texto-tenue); line-height: 1.5; } /* Barra de pasos, al estilo de un «stepper»: círculo numerado, línea de unión y etiqueta debajo. El paso hecho muestra un tic; el actual va destacado. */ .pasos { display: flex; list-style: none; padding: 0; margin: 0 0 22px; counter-reset: paso; } .paso { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-tenue); text-align: center; min-width: 0; } /* La línea nace del círculo y llega al siguiente paso */ .paso::after { content: ''; position: absolute; top: 13px; left: calc(50% + 18px); width: calc(100% - 36px); height: 2px; background: var(--linea); } .paso--ultimo::after { display: none; } .paso__marca { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--panel); color: var(--texto-tenue); border: 2px solid var(--linea); } .paso__nombre { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .paso--hecho { color: var(--ok); } .paso--hecho .paso__marca { background: var(--ok); border-color: var(--ok); color: #fff; } .paso--hecho::after { background: var(--ok); } .paso--actual { color: var(--acento); font-weight: 600; } .paso--actual .paso__marca { background: var(--acento); border-color: var(--acento); color: #fff; box-shadow: 0 0 0 4px var(--acento-claro); } /* Migas de lo ya elegido */ .migas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .miga { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--texto-suave); background: var(--panel-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 3px 9px; } .miga svg { color: var(--texto-tenue); } .asistente__cuerpo { /* Dentro del modal no hace falta otro marco: bastan un poco de aire y la línea que lo separa de la barra de pasos. */ padding-top: 4px; min-height: 240px; } .asistente .objetivos { margin-top: 4px; } .asistente .opciones { max-height: 300px; } /* Elegir existente o crear */ .alterna { display: flex; gap: 8px; margin: 4px 0 18px; flex-wrap: wrap; } .alterna__opcion { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; cursor: pointer; color: var(--texto-suave); background: var(--panel-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 8px 14px; } .alterna__opcion:hover { border-color: var(--linea-fuerte); color: var(--texto); } .alterna__opcion.activo { background: var(--acento-claro); border-color: var(--acento); color: var(--acento); font-weight: 600; } .opciones { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-height: 340px; overflow-y: auto; } .opcion { display: flex; flex-direction: column; gap: 3px; text-align: left; font: inherit; color: var(--texto); cursor: pointer; background: var(--panel-2); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; } .opcion:hover { border-color: var(--acento); background: var(--acento-claro); } .opcion__nombre { font-weight: 600; font-size: 14px; } .opcion__detalle { font-size: 12px; color: var(--texto-tenue); } .asistente__nota { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--texto-suave); background: var(--acento-claro); border-left: 3px solid var(--acento); border-radius: 0 var(--radio) var(--radio) 0; padding: 11px 14px; margin: 4px 0 18px; } .asistente__nota svg { flex: none; margin-top: 1px; color: var(--acento); } .asistente__form { margin-top: 4px; } .asistente__botones { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linea); } /* Pantalla final */ .asistente__final { text-align: center; padding: 40px 20px; } .asistente__tic { display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%; background: var(--ok-claro); color: var(--ok); } .asistente__final h2 { font-size: 22px; margin: 0 0 6px; } .resumen-creado { list-style: none; padding: 0; margin: 18px auto; max-width: 380px; text-align: left; } .resumen-creado li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 9px 12px; margin-bottom: 6px; background: var(--panel-2); border-radius: var(--radio); border: 1px solid var(--linea); } .resumen-creado svg { color: var(--ok); flex: none; } /* Botón compacto de sólo icono, para acciones secundarias dentro de una fila */ .btn-icono { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; font: inherit; font-size: 14px; line-height: 1; cursor: pointer; color: var(--texto-suave); background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio); } .btn-icono:hover { background: var(--panel-2); color: var(--texto); } .btn-icono--peligro:hover { color: var(--malo); border-color: var(--malo); background: var(--malo-claro); } /* Acción principal de una pantalla: destaca sobre los botones normales sin competir con el primario de los formularios. */ .btn--destacado { background: var(--coral); color: #fff; border-color: var(--coral); font-weight: 600; } .btn--destacado:hover { background: var(--coral-fuerte, #E2564C); border-color: var(--coral-fuerte, #E2564C); color: #fff; } /* Versión en la pantalla de ingreso */ .version--ingreso { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--texto-tenue); text-align: center; }