/* Búho · panel de gestión. Dirección de diseño: docs/DISENO-COMERCIAL.md §4. Papel cálido, tinta casi negra, un solo acento (reemplazable por la marca de la empresa), separación con filetes de 1 px y espacio; sombra solo en lo que flota. */ [hidden] { display: none !important; } /* ===================== TOKENS ===================== */ :root { /* Comunes en buho-tokens.css (texto, acento, estados, familias de la cinta, letra). Aquí solo lo propio del panel. El fondo es un poco más neutro que el papel cálido de la presentación (decisión del director, 11/11/2026). */ --bg: #F3F2EE; --panel2: #F8F5EE; --hundido: #EFEBE2; --muted: #646A60; --faint: #6A6F64; --line2: #E9E5DB; --line-strong: #C6C0B2; --accent-ink: #FFFFFF; --barra: var(--accent); --sidebar-ink: #C9D2CB; --sidebar-ink2: #8E9C93; --sidebar-line: #26332C; --sidebar-active: #233129; --good-bg: #E8F0EA; --warn-bg: #F6EDDC; --crit-bg: #F5E4DF; --r-campo: 4px; --r-tarjeta: 6px; --sombra-flota: 0 18px 48px -18px rgba(22, 33, 28, .45), 0 2px 6px rgba(22, 33, 28, .08); --t: 150ms ease; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121613; --panel: #1A201C; --panel2: #1F2621; --hundido: #161B17; --text: #E9E6DD; --text2: #B5B8AE; --muted: #9A9E94; --faint: #8A8F85; --line: #2C342E; --line2: #242B26; --line-strong: #3B453E; --accent: #4E9A7C; --accent-ink: #0E1511; --sidebar: #0D120F; --sidebar-ink: #C3CBC4; --sidebar-ink2: #87938B; --sidebar-line: #1E2721; --sidebar-active: #1C2620; --green: #5DAF8A; --amber: #D9A24A; --red: #D2735F; --inactivo: #5E625A; --good-bg: #17271F; --warn-bg: #2A2316; --crit-bg: #2D1C18; --fam-trabajo: #3C8BCB; --fam-sinclas: #AD8A2C; --fam-otros: #B962A9; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #121613; --panel: #1A201C; --panel2: #1F2621; --hundido: #161B17; --text: #E9E6DD; --text2: #B5B8AE; --muted: #9A9E94; --faint: #8A8F85; --line: #2C342E; --line2: #242B26; --line-strong: #3B453E; --accent: #4E9A7C; --accent-ink: #0E1511; --sidebar: #0D120F; --sidebar-ink: #C3CBC4; --sidebar-ink2: #87938B; --sidebar-line: #1E2721; --sidebar-active: #1C2620; --green: #5DAF8A; --amber: #D9A24A; --red: #D2735F; --inactivo: #5E625A; --good-bg: #17271F; --warn-bg: #2A2316; --crit-bg: #2D1C18; --fam-trabajo: #3C8BCB; --fam-sinclas: #AD8A2C; --fam-otros: #B962A9; color-scheme: dark; } /* ===================== BASE ===================== */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.con-modal { overflow: hidden; } h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; } p { margin: 0 0 .75rem; } a { color: var(--accent); text-underline-offset: 2px; } .num, .tnum { font-variant-numeric: tabular-nums; } .mono, code, pre { font-family: var(--f-mono); font-size: .92em; } .muted { color: var(--muted); } .hint { color: var(--muted); font-size: 13.5px; line-height: 1.5; margin: 0 0 .6rem; } .error { color: var(--red); font-size: 14px; margin: .4rem 0 0; min-height: 0; } .error:empty { display: none; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cuenta { font-family: var(--f-body); font-weight: 500; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } .lista-limpia { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: 6px; } .lista-limpia li { display: flex; gap: 8px; align-items: flex-start; } .nota { font-size: 13.5px; color: var(--text2); background: var(--panel2); border-left: 2px solid var(--line-strong); padding: 10px 14px; margin: 12px 0; } .nota-ok { display: flex; gap: 10px; align-items: flex-start; color: var(--green); font-weight: 500; margin: 0 0 12px; } /* ===================== BOTONES ===================== */ button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-campo); border: 1px solid transparent; font-family: var(--f-body); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t); } .btn svg.i { width: 17px; height: 17px; vertical-align: 0; } .btn.primario { background: var(--accent); color: var(--accent-ink); } .btn.primario:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); } .btn.secundario { background: var(--panel); color: var(--text); border-color: var(--line-strong); } .btn.secundario:hover { border-color: var(--text2); background: var(--panel2); } .btn.discreto { color: var(--text2); padding: 0 10px; } .btn.discreto:hover { color: var(--text); background: var(--hundido); } .btn.peligro { color: var(--red); } .btn.peligro:hover { background: var(--crit-bg); color: var(--red); } .btn.peligro-lleno { background: var(--red); color: #fff; } .btn.peligro-lleno:hover { background: color-mix(in srgb, var(--red) 85%, #000); } .btn.icono { width: 40px; padding: 0; } .btn.ancho { width: 100%; } .btn.btn-chico { min-height: 34px; padding: 0 12px; font-size: 13.5px; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn.girado svg { transform: rotate(-90deg); } .fila-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 6px; } /* ===================== CAMPOS ===================== */ input, select, textarea { font: inherit; font-size: 14.5px; color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--r-campo); padding: 0 12px; min-height: 40px; transition: border-color var(--t), box-shadow var(--t); } textarea { padding: 10px 12px; min-height: 72px; resize: vertical; } select { padding-right: 34px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23858a80' stroke-width='1.6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); } input::placeholder, textarea::placeholder { color: var(--faint); } input:disabled, select:disabled, textarea:disabled { background: var(--hundido); color: var(--muted); cursor: not-allowed; } input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; accent-color: var(--accent); padding: 0; margin: 0; } input[type="color"] { width: 56px; padding: 4px; cursor: pointer; } input[type="date"] { padding-right: 8px; } .campo { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text2); min-width: 0; } .campo > .hint { font-weight: 400; margin: 0; } .campo.ancho { grid-column: 1 / -1; } .campo-linea { flex-direction: row; align-items: center; gap: 8px; } .campo-color input { width: 72px; } .check { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); min-height: 40px; cursor: pointer; } .form-linea { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0 4px; } .form-linea .campo { flex: 1 1 220px; } .form-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 18px; align-items: end; margin: 8px 0; } .form-rejilla.una { grid-template-columns: 1fr; } .emp-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px 24px; align-items: start; margin: 8px 0 4px; } .emp-campos .campo { margin: 0; } .emp-campos .hint { display: block; margin: 6px 0 0; font-weight: 400; } .color-fila, .logo-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; } .logo-ver { width: 40px; height: 40px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-campo); background: var(--panel2); } .emp-form + .panel-t { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line2); } .logo-fila input.sr:focus-visible + .btn, .logo-fila label.btn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .u-perms { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 10px 14px 6px; margin: 0; display: flex; flex-wrap: wrap; gap: 0 22px; } .u-perms legend { font-size: 13.5px; font-weight: 600; color: var(--text2); padding: 0 6px; } /* Interruptor (ajustes sí/no) */ .interruptor { position: relative; display: inline-flex; width: 42px; height: 24px; flex: none; cursor: pointer; } .interruptor input { position: absolute; inset: -10px -6px; opacity: 0; width: auto; height: auto; margin: 0; cursor: pointer; z-index: 1; } .interruptor span { position: absolute; inset: 0; border-radius: 12px; background: var(--line-strong); transition: background var(--t); } .interruptor span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); transition: transform var(--t); } .interruptor input:checked + span { background: var(--accent); } .interruptor input:checked + span::after { transform: translateX(18px); } .interruptor input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .interruptor input:disabled + span { opacity: .45; cursor: not-allowed; } /* ===================== CHIPS, SEGMENTADOS, PESTAÑAS ===================== */ .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-campo); background: var(--panel); font-size: 13.5px; font-weight: 500; color: var(--text2); transition: border-color var(--t), background var(--t), color var(--t); } .chip:hover { border-color: var(--line-strong); color: var(--text); } .chip.on, .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--panel); } .chip .num { color: inherit; opacity: .7; } .chip svg.i { width: 15px; height: 15px; vertical-align: 0; } .segmentado, .conmutador { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--r-campo); background: var(--panel); padding: 2px; gap: 2px; } .segmentado button, .conmutador button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 3px; font-size: 13.5px; font-weight: 500; color: var(--text2); transition: background var(--t), color var(--t); } .segmentado button:hover, .conmutador button:hover { color: var(--text); } .segmentado button.on, .conmutador button[aria-selected="true"] { background: var(--hundido); color: var(--text); font-weight: 600; } .segmentado svg.i { width: 16px; height: 16px; vertical-align: 0; } .pestanas, .subnav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 20px; overflow-x: auto; scrollbar-width: none; } .pestanas::-webkit-scrollbar, .subnav::-webkit-scrollbar { display: none; } .pestanas button, .subnav button { flex: none; min-height: 44px; padding: 0 14px; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 500; color: var(--text2); transition: color var(--t), border-color var(--t); } .pestanas button:hover, .subnav button:hover { color: var(--text); } .pestanas button[aria-selected="true"], .subnav button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); } /* ===================== ESTADO (en uso / en pausa / apagado) ===================== */ .estado { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--text2); white-space: nowrap; } .estado i { width: 9px; height: 9px; border-radius: 50%; flex: none; } .est-uso { color: var(--text); } .est-uso i { background: var(--green); } .est-pausa i { background: var(--inactivo); } .est-off i { background: transparent; border: 1.5px solid var(--faint); } .est-off { color: var(--muted); } /* ===================== SHELL ===================== */ .shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; position: relative; } .shell::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 236px; background: var(--sidebar); } .sidebar { z-index: 1; } .hoy-izq { min-width: 0; } .sidebar { background: var(--sidebar); color: var(--sidebar-ink); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px 16px; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 6px; } .brand-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; flex: none; } .brand-txt { min-width: 0; display: flex; flex-direction: column; } .brand-txt b { font-family: var(--f-head); font-size: 19px; font-weight: 800; color: #F3F1EA; letter-spacing: -.01em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .brand-txt span { font-size: 12.5px; color: var(--sidebar-ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { position: relative; display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: var(--r-campo); color: var(--sidebar-ink); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: background var(--t), color var(--t); } .nav a svg.i { width: 19px; height: 19px; opacity: .75; vertical-align: 0; } .nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; } .nav a[aria-current="page"] { background: var(--sidebar-active); color: #fff; font-weight: 600; } .nav a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: #9FC7B4; } .nav a[aria-current="page"] svg.i { opacity: 1; } .nav-badge { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .1); color: #F3F1EA; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; } .nav-badge.badge-crit { background: #8E3628; } .nav-aparte { border-top: 1px solid var(--sidebar-line); padding-top: 12px; } .nav-sep { display: block; font-size: 12.5px; color: var(--sidebar-ink2); padding: 0 12px 6px; } .side-foot { margin-top: auto; border-top: 1px solid var(--sidebar-line); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; } .side-btn { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: var(--r-campo); color: var(--sidebar-ink2); font-size: 14px; text-align: left; transition: background var(--t), color var(--t); } .side-btn:hover { background: rgba(255, 255, 255, .05); color: #fff; } .acct { display: flex; align-items: center; gap: 10px; padding: 8px 12px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--sidebar-active); color: #F3F1EA; display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; } .acct .who { min-width: 0; display: flex; flex-direction: column; } .acct .who b { font-size: 13.5px; font-weight: 600; color: #F3F1EA; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct .who span { font-size: 12.5px; color: var(--sidebar-ink2); } .side-pie { font-size: 12px; color: var(--sidebar-ink2); padding: 6px 12px 0; margin: 0; opacity: .8; } .shell-main { min-width: 0; display: flex; flex-direction: column; } /* ===================== BARRA SUPERIOR ===================== */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 64px; padding: 10px 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); } .topbar-tit { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; } .topbar h1 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .controls select { max-width: 240px; } main { padding: 28px 32px 72px; width: 100%; max-width: 1440px; } main:focus { outline: 0; } .vista-intro { color: var(--text2); max-width: 70ch; margin: 0 0 20px; } /* Franja de primeros pasos y de la prueba */ .franja { border-bottom: 1px solid var(--line); background: var(--panel); padding: 14px 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } .pasos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; flex: 1 1 640px; } .paso { display: flex; gap: 10px; align-items: flex-start; flex: 1 1 200px; color: var(--muted); font-size: 13.5px; } .paso b { display: block; color: var(--text2); font-size: 14px; font-weight: 600; } .paso span { margin-right: 6px; } .paso a { font-weight: 600; } .paso-de { display: none; font-size: 12.5px; color: var(--muted); } .paso .btn-chico { margin-top: 6px; } .paso-n { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--muted); flex: none; } .paso.actual .paso-n { border-color: var(--accent); color: var(--accent); } .paso.actual b { color: var(--text); } .paso.hecho .paso-n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .paso.hecho .paso-n svg { width: 14px; height: 14px; vertical-align: 0; stroke-width: 2.2; } .paso .btn { margin-top: 8px; } .franja .prueba { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text2); white-space: nowrap; } .franja-llego { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; color: var(--text); } .franja-llego > svg.i { color: var(--green); width: 22px; height: 22px; } /* Equipos que esperan cupo (tope de equipos, 12/11/2026) */ .franja-tope { display: flex; gap: 12px; align-items: flex-start; flex: 1 1 100%; color: var(--text); } .franja-tope > svg.i { color: var(--amber); width: 22px; height: 22px; flex: none; margin-top: 2px; } .franja-tope .hint { margin: 2px 0 6px; } .franja-tope ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; } .franja-tope li { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; } .franja-tope li > span { flex: 1 1 280px; min-width: 0; } /* Prueba terminada */ .suspendida { max-width: 720px; padding: 8px 0 32px; } .suspendida .frase { margin-bottom: 8px; } .suspendida .nota-ok { display: block; color: var(--text); font-weight: 400; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; margin: 18px 0; } .suspendida .nota-ok b { color: var(--green); } .susp-pasos { margin: 8px 0 18px; padding-left: 22px; display: grid; gap: 6px; font-size: 15px; } .aviso-plan { max-width: 720px; } .check-linea { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; max-width: 640px; cursor: pointer; } .check-linea input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); } .check-linea .hint { display: block; margin-top: 2px; font-weight: 400; } /* ===================== PANELES ===================== */ .panel, .bloque { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 20px 22px; margin-bottom: 20px; } .bloque-suave { border-top: 1px solid var(--line); padding: 20px 0 0; margin-top: 28px; } .panel-t { font-size: 16.5px; margin: 0 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .panel-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 12px; } .panel-cab .hint { margin: 0; } .subh { font-family: var(--f-body); font-size: 14px; font-weight: 600; color: var(--text); margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: 0; } .dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } .pliegue { border-top: 1px solid var(--line); margin: 20px 0 0; padding: 0; } .pliegue > summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text2); font-size: 14.5px; } .pliegue > summary::-webkit-details-marker { display: none; } .pliegue > summary::before { content: ""; width: 7px; height: 7px; border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor; transform: rotate(-45deg); transition: transform var(--t); margin: 0 4px 0 2px; } .pliegue[open] > summary::before { transform: rotate(45deg); } .pliegue > summary:hover { color: var(--text); } .pliegue > :not(summary) { margin-bottom: 14px; } .vacio-util { display: flex; gap: 12px; align-items: flex-start; color: var(--text2); padding: 6px 0; } .vacio-util > svg.i { color: var(--green); margin-top: 2px; } .vacio-util p { margin: 0; } .vacio-util.grande { background: var(--panel); border: 1px dashed var(--line-strong); border-radius: var(--r-tarjeta); padding: 28px; } .vacio-util.grande > svg.i { width: 28px; height: 28px; color: var(--text2); } .vacio-util.grande h3 { font-size: 18px; margin: 0 0 6px; color: var(--text); } .vacio-util.grande p { margin: 0 0 14px; max-width: 52ch; } /* ===================== HOY ===================== */ .hoy-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: end; margin: 4px 0 26px; } .hoy-fecha { grid-column: 1 / -1; color: var(--muted); font-size: 14px; margin: 0 0 6px; } .frase { font-size: clamp(22px, 2.1vw, 28px); line-height: 1.18; letter-spacing: -.02em; max-width: 26ch; } .frase-2 { grid-column: 1; color: var(--text2); font-size: 15px; margin: 8px 0 0; max-width: 60ch; } .hoy-cab .conmutador { grid-column: 2; grid-row: 2 / span 2; align-self: end; } .hoy-malla { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } .cinta-bloque { padding: 18px 20px 14px; margin: 0; container-type: inline-size; container-name: cinta; } .bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; } .bloque-cab h3 { font-size: 16.5px; display: flex; align-items: baseline; gap: 10px; } .ejemplo-aviso { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); background: var(--warn-bg); border-radius: var(--r-campo); padding: 4px 10px; margin: 0 0 8px; } .ejemplo-aviso::before { content: "Ejemplo"; font-weight: 700; color: var(--text); } .fleet-list { min-width: 0; } .jor-regla, .jor-fila { display: grid; grid-template-columns: 36px minmax(140px, 200px) minmax(0, 1fr) 146px; gap: 0 14px; align-items: center; } .jor-regla > div:first-child { grid-column: 1 / 3; } .jor-ruler { position: relative; height: 22px; } .jor-tick { position: absolute; top: 16px; bottom: -4px; border-left: 1px solid var(--line2); } .jor-tick span { position: absolute; left: -2px; top: -17px; font-size: 11.5px; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; display: none; } .jor-tick:not(.fuerte) { border-left-color: transparent; } .jor-tick.ver span { display: block; } /* cuáles se ven lo decide etiquetasRegla() según el ancho real */ .jor-tick:last-child span { left: 2px; transform: translateX(-100%); } .jor-fila { padding: 10px 0; border-top: 1px solid var(--line2); cursor: pointer; transition: background var(--t); border-radius: 2px; } .jor-fila:hover { background: var(--panel2); } .jor-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .jor-fila.ejemplo { cursor: default; opacity: .88; } .jor-fila.ejemplo:hover { background: none; } .jor-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--hundido); color: var(--text2); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; } .jor-id { min-width: 0; } .jor-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jor-sub { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jor-nota { color: var(--text2); } .jor-bar { position: relative; height: 24px; border-radius: 3px; background: var(--rayado), var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); } .jor-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; box-shadow: inset -1px 0 0 var(--panel); } .jor-seg:first-child { border-radius: 3px 0 0 3px; } .jor-marca { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--amber); z-index: 2; } .jor-marca::before { content: ""; position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; box-shadow: 0 0 0 2px var(--panel); } .jor-marca.grave, .jor-marca.caida { background: var(--red); } .jor-marca::after { content: ""; position: absolute; inset: -6px -9px; } /* zona de toque más grande que la marca */ .jor-ahora { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px dashed var(--text2); z-index: 1; } .jor-apagado { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 10px; font-size: 12.5px; color: var(--muted); } .jor-est { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .jor-horas { font-size: 13px; color: var(--muted); } .jor-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 0 2px; border-top: 1px solid var(--line2); font-size: 13px; color: var(--text2); } .jl-item { display: inline-flex; align-items: center; gap: 7px; } .jl-item i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; } .jl-item i.jl-rayado { background: var(--rayado), var(--panel2); box-shadow: inset 0 0 0 1px var(--line); } .jl-item i.jl-marca { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); } /* ---- Pausas sobre la cinta ---- */ .jor-pausa { position: absolute; top: 0; bottom: 0; min-width: 2px; background: var(--rayado), var(--panel2); box-shadow: inset 0 0 0 1px var(--line); z-index: 1; transition: box-shadow var(--t); } .jor-pausa::after { content: ""; position: absolute; inset: -4px -3px; } /* zona de cursor más ancha que la pausa */ .jor-pausa:hover { box-shadow: inset 0 0 0 1.5px var(--text2); } /* ---- Conmutador Cinta | Torta ---- */ .bloque-cab .conm-forma { margin-left: auto; } .bloque-cab h3 + .conm-forma + .chips { flex-basis: 100%; } /* ---- Torta de la jornada ---- */ .tor-oficina { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; padding: 6px 0 18px; } .tor-grande svg { width: 220px; height: 220px; display: block; } .torta { overflow: visible; } .tor-porcion { stroke: var(--panel); stroke-width: 2; stroke-linejoin: round; transition: opacity var(--t); cursor: default; outline: none; } .tor-porcion.unica { stroke: none; } .tor-oficina.con-foco .tor-porcion:not(.on) { opacity: .35; } .tor-porcion:focus-visible { stroke: var(--text); stroke-width: 2.5; } .tor-vacia { fill: none; stroke: var(--line2); } .tor-centro { text-anchor: middle; font-family: var(--f-body); font-weight: 600; font-size: 21px; fill: var(--text); font-variant-numeric: tabular-nums; } .tor-centro2 { text-anchor: middle; font-family: var(--f-body); font-size: 13px; fill: var(--muted); } .tor-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 460px; } .tor-lista li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; min-height: 34px; padding: 0 8px; border-radius: 3px; font-size: 14px; transition: background var(--t); } .tor-lista li + li { border-top: 1px solid var(--line2); } .tor-lista li.on { background: var(--hundido); } .tor-sw { width: 12px; height: 12px; border-radius: 2px; display: inline-block; flex: none; } .tor-n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tor-t { color: var(--text); text-align: right; } .tor-pc { color: var(--muted); text-align: right; } .tor-sin { padding: 24px 0; } .tor-fila { display: grid; grid-template-columns: 36px minmax(140px, 200px) 64px minmax(0, 1fr) 146px; gap: 0 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line2); cursor: pointer; transition: background var(--t); border-radius: 2px; } .tor-fila:hover { background: var(--panel2); } .tor-fila:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .tor-fila.ejemplo { cursor: default; opacity: .88; } .tor-mini svg { width: 64px; height: 64px; display: block; } .tor-texto { min-width: 0; font-size: 13.5px; } .tor-top { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--text2); } .tor-prog { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .tor-prog .tor-sw { width: 10px; height: 10px; } .tor-prog b { font-weight: 500; color: var(--text); max-width: 16ch; overflow: hidden; text-overflow: ellipsis; } .tor-pausas { color: var(--muted); margin-top: 3px; } .jor-col { min-width: 0; display: flex; flex-direction: column; gap: 4px; } .jornada-linea { display: block; text-align: left; font-size: 12.5px; color: var(--muted); padding: 0; min-height: 0; background: none; border: 0; cursor: help; white-space: normal; max-width: 100%; line-height: 1.35; font-variant-numeric: tabular-nums; } .jornada-linea .nw { white-space: nowrap; } .jornada-linea:hover { color: var(--text2); text-decoration: underline dotted; text-underline-offset: 3px; } .jornada-linea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tor-texto .jornada-linea { margin-top: 3px; white-space: normal; } .nota-jornada { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); max-width: 80ch; } /* Llegó / empezó a trabajar y bloques de concentración (12/11/2026): dato neutro, sin color. */ .jor-llegada { font-size: 12.5px; color: var(--muted); line-height: 1.35; font-variant-numeric: tabular-nums; } .tor-texto .jor-llegada { margin-top: 3px; } .pj-llegada { font-size: 13px; color: var(--text2); font-variant-numeric: tabular-nums; } .pers-llegada { margin: 0 0 4px; font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; } .como-mide { margin: 0 0 18px; } .lista-simple { margin: 6px 0 0; padding-left: 1.1em; display: grid; gap: 6px; color: var(--text2); max-width: 80ch; } /* Espacio de capturas (Ajustes): una barra sobria, sin colores de aviso. */ .cap-espacio { margin: 0 0 18px; } .cap-linea { margin: 0 0 8px; font-variant-numeric: tabular-nums; } .cap-barra { height: 8px; border-radius: 4px; background: var(--line, #e6e1d6); overflow: hidden; max-width: 420px; } .cap-barra > span { display: block; height: 100%; background: var(--text2); width: 0; } .pers-jornada { margin: 0 0 20px; padding: 16px 20px; } .pj-tabla th.num, .pj-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; } .pj-orden { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; min-height: 0; } .pj-orden:hover { color: var(--text); } .pj-eq { display: block; font-size: 12.5px; color: var(--muted); } .pj-tabla .pj-nl { display: inline; font-size: 14px; color: var(--text); } .ocio { margin-top: 20px; } .ocio-ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .ocio-def { max-width: 80ch; } .ocio-periodo { color: var(--muted); font-size: 14px; margin: 10px 0 0; } .ocio-cifras { margin: 6px 0 18px; } #ocio-cuerpo.cargando { opacity: .55; transition: opacity var(--t); } .ocio-malla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-bottom: 20px; } .ocio-graf svg.columnas { width: 100%; height: auto; display: block; overflow: visible; } .col-base { stroke: var(--line-strong); stroke-width: 1; } .col-zona { fill: transparent; } .col-barra { fill: var(--fam-otros); transition: opacity var(--t); } .col.on .col-barra, .col:focus-visible .col-barra { opacity: .75; } .col { outline: none; } .col:focus-visible .col-zona { stroke: var(--text); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .col-eti { font-family: var(--f-body); font-size: 11px; fill: var(--muted); text-anchor: middle; } .col-max { font-family: var(--f-body); font-size: 11px; fill: var(--muted); } .rk { display: grid; gap: 2px; } .rk-fila { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 76px; gap: 10px; align-items: center; min-height: 32px; font-size: 14px; } .rk-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rk-n small { color: var(--muted); margin-left: 6px; font-size: 12px; } .rk-pista { height: 10px; } .rk-barra { display: block; height: 10px; border-radius: 0 3px 3px 0; background: var(--fam-otros); } .rk-v { text-align: right; color: var(--text); } .ocio-top { color: var(--text2); font-size: 13.5px; } .ocio-top .num { color: var(--muted); } .enlace-ocio { font-size: 13px; color: var(--accent); } .apps-torta { display: flex; gap: 20px; align-items: center; margin: 4px 0 14px; } .apps-torta:empty { display: none; } .apps-torta svg { width: 150px; height: 150px; flex: none; } .apps-torta .tor-centro { font-size: 16px; } .apps-torta .tor-centro2 { font-size: 12px; } .apps-torta-ley { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--text2); } .vacio-cinta { padding: 16px 0; } .para-revisar { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 18px 20px 10px; } .para-revisar h3 { font-size: 16.5px; margin: 0 0 6px; display: flex; align-items: baseline; gap: 10px; } .rev-item { padding: 14px 0; border-top: 1px solid var(--line2); } .rev-item:first-child { border-top: 0; padding-top: 8px; } .rev-sev { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text2); margin-bottom: 4px; } .rev-sev svg.i { width: 15px; height: 15px; vertical-align: 0; } .rev-cuando { margin-left: auto; font-weight: 400; color: var(--muted); } .sev-critica .rev-sev, .sev-alta .rev-sev, .sev-critica .tec-sev, .sev-alta .tec-sev { color: var(--red); } .sev-media .rev-sev, .sev-media .tec-sev { color: var(--amber); } .rev-tit { font-weight: 600; font-size: 15px; line-height: 1.35; } .rev-det { font-size: 13.5px; color: var(--text2); margin-top: 4px; } .rev-paso { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--text); margin-top: 6px; } .rev-paso svg.i { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); } .rev-acc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .rev-guia .rev-tit { font-size: 16px; } .ver-todos { margin: 4px 0 6px -10px; } .ver-todos svg.i { width: 15px; height: 15px; } .cifras-respaldo { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 18px 0 0; padding: 0 2px; } .cifras-respaldo > div, .cifras-linea > div { display: flex; flex-direction: column; } .cifras-respaldo dt, .cifras-linea dt { font-size: 13px; color: var(--muted); } .cifras-respaldo dd, .cifras-linea dd { margin: 0; font-size: 16px; font-weight: 600; color: var(--text); } .cifras-respaldo dd small { font-weight: 400; color: var(--muted); font-size: 13px; } #apps-pliegue .chart { max-width: 760px; } .nota-transparencia { margin: 34px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); max-width: 88ch; } /* Vista técnica */ .tec-cab { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 12px; } .tec-lista { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 0 20px; } .tec-lista > .vacio-util { padding: 18px 0; } .tec-fila { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px 20px; padding: 16px 0; border-top: 1px solid var(--line2); align-items: start; } .tec-fila:first-child { border-top: 0; } .tec-fila.al-muted { opacity: .6; } .tec-sev { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text2); padding-top: 2px; } .tec-sev svg.i { width: 16px; height: 16px; vertical-align: 0; } .tec-main h4 { font-family: var(--f-body); font-size: 15px; font-weight: 600; letter-spacing: 0; } .tec-meta { font-size: 13px; color: var(--muted); margin: 2px 0 0; } .tec-hacer { font-size: 14px; color: var(--text); margin: 6px 0 0; } .tec-mas { margin-top: 6px; font-size: 13.5px; color: var(--text2); } .tec-mas summary { cursor: pointer; color: var(--accent); font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; } .tec-mas ul { margin: 4px 0 8px 18px; padding: 0; } .tec-acc { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 560px; } .tec-acc .btn svg.i { width: 16px; height: 16px; } /* ===================== UN EQUIPO ===================== */ .eq-cab { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; margin: 0 0 10px; } .eq-id h2 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.02em; } .eq-sub { color: var(--text2); margin: 4px 0 0; font-size: 14.5px; } .eq-estado { padding-top: 8px; } .eq-datos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; white-space: nowrap; margin: 6px 0 0; font-size: 14px; color: var(--muted); } .eq-datos b { color: var(--text); font-weight: 600; } .eq-datos .sep { width: 1px; height: 14px; background: var(--line-strong); margin: 0 12px; } .eq-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; } .eq-acciones:not(:has(:not([hidden]))) { display: none; } .tab-panel { min-width: 0; } .resumen-panel { padding: 22px 24px; } .resumen-head h2 { font-size: 22px; letter-spacing: -.015em; } .resumen-head p { color: var(--text2); margin: 6px 0 0; font-size: 15.5px; } .cifras-linea { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line2); } .revisar-wrap .subh { margin-top: 20px; } .revisar-lista { display: flex; flex-direction: column; } .revisar-item { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line2); } .revisar-item:first-child { border-top: 0; } .rev-marca { width: 3px; border-radius: 2px; background: var(--line-strong); flex: none; } .revisar-item.lvl-alto .rev-marca { background: var(--text); } .revisar-item.lvl-medio .rev-marca { background: var(--text2); } .revisar-item b { font-size: 14.5px; font-weight: 600; } .revisar-item span { display: block; font-size: 13.5px; color: var(--text2); } .relato { margin-top: 6px; } .relato ul { margin: 0; padding-left: 18px; color: var(--text); display: flex; flex-direction: column; gap: 4px; } .alert-banner, .seg-banner { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; padding: 12px 16px; border-radius: var(--r-tarjeta); margin-bottom: 14px; font-size: 14px; } .alert-banner { background: var(--warn-bg); color: var(--text); } .alert-banner svg.i { color: var(--amber); } .seg-banner { background: var(--panel); border: 1px solid var(--line); flex-direction: column; } .seg-title b { font-weight: 600; } .seg-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cat-chip { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; } .aviso-solo-salud { margin: 0 0 14px; } .dist-panel .panel-t { margin-bottom: 14px; } .donut-full { display: flex; gap: 32px; align-items: center; flex-wrap: wrap; } .donut-big svg { display: block; max-width: 100%; height: auto; } .donut-side { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 16px; } .donut-total { fill: var(--text); font-family: var(--f-head); font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; } .donut-sub { fill: var(--muted); font-family: var(--f-body); font-size: 12px; } .donut-seg { cursor: pointer; transition: opacity var(--t); } .donut-seg:hover { opacity: .8; } .cat-legend { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .leg-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; padding: 5px 6px; border-radius: 3px; cursor: pointer; transition: background var(--t); } .leg-row:hover, .leg-row.active { background: var(--hundido); } .leg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; } .leg-dot.rayado, i.rayado { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 4px) !important; } .leg-name { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .leg-val { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; } .detail-kpis { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line2); } .detail-kpis dt { font-size: 13px; color: var(--muted); } .detail-kpis dd { margin: 0; font-weight: 600; font-size: 16px; } .cat-inline { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); } .ci-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; margin-bottom: 8px; } .ci-head .ci-close { margin-left: auto; } .ci-list { display: flex; flex-direction: column; gap: 6px; } .ci-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; } .ci-lbl { display: flex; align-items: center; gap: 8px; min-width: 0; } .ci-track { height: 8px; background: var(--hundido); border-radius: 2px; overflow: hidden; display: block; } .ci-fill { display: block; height: 100%; } .ci-val { color: var(--text2); white-space: nowrap; } .guia-colores { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px 28px; } .guia-fam-h { display: flex; flex-direction: column; margin-bottom: 6px; } .guia-fam-h .hint { margin: 0; } .guia-row { display: grid; grid-template-columns: 10px 150px 1fr; gap: 10px; font-size: 13px; padding: 3px 0; align-items: baseline; } .guia-row span:last-child { color: var(--muted); } /* Barras de magnitud */ .chart { display: flex; flex-direction: column; gap: 4px; } .bar-row2 { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 4px; border-radius: 3px; } .bar-row2.clickable { cursor: pointer; transition: background var(--t); } .bar-row2.clickable:hover { background: var(--hundido); } .bar-label { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text); } .applogo { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; border-radius: 4px; } .lbl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track2 { height: 8px; background: var(--hundido); border-radius: 2px; overflow: hidden; } .bar-fill2 { display: block; height: 100%; border-radius: 0 2px 2px 0; } .bar-val { font-size: 13.5px; color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; } /* El día en orden (registro) */ .reg-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; } .registro { position: relative; } .ev-wrap { border-top: 1px solid var(--line2); } .ev-wrap:first-child { border-top: 0; } .ev-wrap.open { background: var(--panel2); } .ev { display: grid; grid-template-columns: 74px 18px minmax(0, 1fr) auto 70px 70px; gap: 12px; align-items: center; padding: 8px 4px; min-height: 52px; } .ev.click { cursor: pointer; } .ev.click:hover { background: var(--panel2); } .ev-h { font-size: 13px; color: var(--text2); white-space: nowrap; } .ev-rail { position: relative; display: flex; justify-content: center; align-self: stretch; align-items: center; } .ev-rail::before { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); } .ev-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--panel); border: 2px solid var(--fam-trabajo); z-index: 1; } .ev[data-tipo="pagina"] .ev-dot { border-color: var(--fam-sinclas); } .ev[data-tipo="regreso"] .ev-dot { background: var(--text2); border-color: var(--text2); } .ev[data-tipo="pausa"] .ev-dot { border-color: var(--line-strong); background: var(--rayado), var(--panel); } .ev[data-tipo="usuario"] .ev-dot { border-color: var(--text); background: var(--text); } .ev.flag .ev-dot { border-color: var(--fam-otros); } .ev-main { min-width: 0; } .ev-p1 { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; } .ev-p2 { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ev[data-tipo="pausa"] .ev-p1 { font-weight: 500; color: var(--text2); } .echev { display: inline-flex; color: var(--faint); margin-right: 4px; transition: transform var(--t); } .echev svg.i { width: 14px; height: 14px; vertical-align: 0; } .ev-wrap.open .echev, .td-row.open .echev { transform: rotate(90deg); color: var(--accent); } .ev-tail { justify-self: end; } .cat { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); white-space: nowrap; } .cat::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cc, var(--muted)); } .ev-ret { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .ev-dur { font-size: 13px; color: var(--text2); text-align: right; white-space: nowrap; } .ev-cap, .tcap { position: relative; display: block; width: 70px; height: 42px; padding: 0; border-radius: 3px; overflow: hidden; background: var(--hundido); box-shadow: inset 0 0 0 1px var(--line); justify-self: end; } .ev-cap .cap-mini, .tcap .cap-mini { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(.6); transition: filter var(--t); } .ev-cap.has:hover .cap-mini, .tcap:hover .cap-mini, .ev-cap:focus-visible .cap-mini, .tcap:focus-visible .cap-mini { filter: none; } .cap-st { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(22, 33, 28, .78); color: #F3F1EA; font-size: 10.5px; text-align: center; line-height: 1.5; } .cap-x { display: grid; place-items: center; width: 100%; height: 100%; font-size: 11px; color: var(--faint); } .ev-det { display: none; padding: 4px 12px 16px 108px; } .ev-wrap.open .ev-det { display: block; } .det-sec { margin-top: 12px; } .det-sec:first-child { margin-top: 2px; } .det-lbl { font-size: 13px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } .det-ruta { font-family: var(--f-mono); font-size: 12.5px; color: var(--text2); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-campo); padding: 6px 10px; display: inline-block; word-break: break-all; } .det-ses { display: flex; flex-direction: column; max-width: 380px; } .det-ses .row { display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text2); padding: 5px 0; border-bottom: 1px solid var(--line2); background: none; border-radius: 0; } .det-caps { display: flex; flex-wrap: wrap; gap: 8px; } .tcap { width: 104px; height: 64px; cursor: pointer; } .det-note { font-size: 13px; color: var(--muted); } .reg-graf { padding: 10px 2px 4px; } .graf-ruler { position: relative; height: 18px; margin-bottom: 4px; } .graf-tick { position: absolute; transform: translateX(-50%); font-size: 11.5px; color: var(--faint); white-space: nowrap; } .graf-tick:first-child { transform: none; } .graf-bar { position: relative; height: 44px; border-radius: 3px; background: var(--rayado), var(--panel2); box-shadow: inset 0 0 0 1px var(--line2); overflow: hidden; } .graf-seg { position: absolute; top: 0; bottom: 0; min-width: 1px; box-shadow: inset -1px 0 0 var(--panel); } .graf-seg[data-cap] { cursor: zoom-in; } .graf-seg.idle, .graf-seg.bloq { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .4) 0 2px, transparent 2px 5px) !important; } .graf-mark { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); } .graf-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--text2); } .graf-leyenda span { display: inline-flex; align-items: center; gap: 6px; } .graf-leyenda i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; } .graf-leyenda i.vacio { background: var(--rayado), var(--panel2); box-shadow: inset 0 0 0 1px var(--line); } .busca-dia { margin-bottom: 14px; max-width: 560px; } .busca-dia .campo-linea { position: relative; } .busca-dia svg.i { position: absolute; left: 12px; color: var(--muted); } .busca-dia input { width: 100%; padding-left: 38px; } .search-result { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 14px 18px; margin-bottom: 16px; } .sr-head { font-size: 14.5px; margin-bottom: 8px; } .sr-big { font-family: var(--f-head); font-weight: 800; font-size: 20px; } .sr-items { display: flex; flex-wrap: wrap; gap: 6px; } .sr-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 10px; background: var(--panel2); border-radius: var(--r-campo); } /* Tablas del día */ .td-table, .hw-table, .cc-hist-tabla { width: 100%; border-collapse: collapse; font-size: 14px; } .td-table th, .eq-table th, .cc-hist-tabla th { text-align: left; font-size: 13px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .td-table td, .cc-hist-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; } .td-table td:first-child > * { vertical-align: middle; margin-right: 6px; } .td-table td:first-child .td-tab { display: inline-flex; vertical-align: middle; } .td-row { cursor: pointer; transition: background var(--t); } .td-row:hover, .td-row.open { background: var(--panel2); } .td-detrow > td { padding: 0 10px 12px !important; background: var(--panel2); } .td-tab { display: inline-flex; flex-direction: column; min-width: 0; } .td-tab b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 26rem; } .td-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; } .tabla-dia .td-table td:first-child b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Descargas y cambios */ .sysevents { display: flex; flex-direction: column; gap: 10px; } .sys-group { border-top: 1px solid var(--line2); padding-top: 8px; } .sys-group:first-child { border-top: 0; } .sys-title { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; min-height: 36px; cursor: pointer; } .sys-title .chev { display: inline-flex; transition: transform var(--t); color: var(--muted); } .sys-title .chev svg.i, .drill-cat .chev svg.i { width: 15px; height: 15px; vertical-align: 0; } .plegado .chev { transform: rotate(-90deg); } .sys-row { padding: 8px 6px 8px 26px; border-radius: 3px; cursor: pointer; } .sys-row:hover, .sys-row.open { background: var(--panel2); } .sys-line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .sys-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .sys-meta { color: var(--muted); font-size: 13px; white-space: nowrap; } .sys-detail { font-size: 13.5px; color: var(--text2); padding: 6px 0 2px; display: flex; flex-direction: column; gap: 2px; word-break: break-word; } /* Pausas */ .idle-list { display: flex; flex-direction: column; } .idle-resumen { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line2); } .idle-res-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; font-size: 14px; color: var(--text2); } .idle-res-row b { color: var(--text); font-weight: 500; } .idle-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line2); } .idle-when { display: flex; gap: 12px; align-items: center; flex: none; } .idle-range { font-size: 14px; color: var(--text); } .idle-dur { font-size: 13px; color: var(--muted); } .idle-prog { font-size: 13.5px; color: var(--muted); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idle-app { color: var(--text2); font-weight: 500; } /* Detalle de programa */ .drill-group { margin-bottom: 8px; } .drill-cat { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 8px 0 6px; cursor: pointer; } .drill-cat-sec { margin-left: auto; color: var(--muted); font-size: 13px; } .drill-item { border-top: 1px solid var(--line2); } .drill-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 4px; cursor: pointer; min-height: 44px; } .drill-head:hover, .drill-item.open .drill-head { background: var(--panel2); } .drill-head .lbl { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; } .drill-head .track { display: block; height: 8px; background: var(--hundido); border-radius: 2px; overflow: hidden; } .track .fill { display: block; height: 100%; } .drill-meta { font-size: 13px; color: var(--text2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; } .drill-meta .chev { display: inline-flex; transition: transform var(--t); color: var(--muted); } .drill-meta .chev svg.i { width: 14px; height: 14px; vertical-align: 0; } .drill-item.open .drill-meta .chev { transform: rotate(90deg); } .drill-sessions { padding: 10px 12px 12px; background: var(--panel2); } .sess-title { font-size: 14px; margin-bottom: 6px; word-break: break-word; } .sess-path { display: flex; gap: 8px; margin: 2px 0 8px; font-size: 13px; overflow-wrap: anywhere; } .sess-path .sp-l { color: var(--muted); flex: none; } .sess-path .sp-v { font-family: var(--f-mono); color: var(--text2); word-break: break-all; } .sess-note { font-size: 13px; color: var(--muted); margin: 6px 0; } .sess-head { font-size: 13px; font-weight: 600; color: var(--text2); margin: 6px 0 4px; } .sess { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; border-bottom: 1px solid var(--line2); } .sess-dur { color: var(--muted); } .drill-caps-btn { margin-top: 8px; } .drill-caps { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 8px; } .dcap { position: relative; padding: 0; border-radius: 3px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .dcap img { display: block; width: 100%; height: 72px; object-fit: cover; } .dcap-t { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(22, 33, 28, .78); color: #F3F1EA; font-size: 11px; text-align: center; } /* Capturas */ .shot-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; } .shot { position: relative; display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: var(--r-tarjeta); overflow: hidden; background: var(--panel); transition: border-color var(--t); } .shot:hover { border-color: var(--text2); } .shot img { width: 100%; height: 104px; object-fit: cover; display: block; background: var(--hundido); } .shot-cap { display: block; padding: 7px 10px 2px; font-size: 13px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shot-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 0 10px 8px; } .shot-badge i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .shot-badge.inl { padding: 0; } .shots-list { display: flex; flex-direction: column; } .shot-li { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line2); text-align: left; width: 100%; } .shot-li:hover { background: var(--panel2); } .shot-li img { width: 64px; height: 38px; object-fit: cover; border-radius: 3px; flex: none; } .sli-main { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; } .sli-tab { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Salud */ .hscore { display: flex; align-items: center; gap: 14px; padding: 12px 0 14px; border-bottom: 1px solid var(--line2); margin-bottom: 12px; } .hs-num { font-family: var(--f-head); font-size: 30px; font-weight: 800; color: var(--hc, var(--text)); line-height: 1; flex: none; } .hs-num small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 2px; } .hs-txt b { font-size: 15px; font-weight: 600; } .hs-txt .hint { margin: 2px 0 0; } .hi-box, .hi-ok { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--r-tarjeta); font-size: 14px; margin-bottom: 14px; } .hi-box { background: var(--warn-bg); } .hi-box > svg.i { color: var(--amber); margin-top: 2px; } .hi-box ul { margin: 4px 0; padding-left: 18px; } .hi-box .hint { margin: 0; } .hi-ok { background: var(--good-bg); color: var(--text); } .hi-ok > svg.i { color: var(--green); } .health-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-tarjeta); overflow: hidden; margin-bottom: 16px; } .hk { padding: 14px 16px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); margin: 0 -1px -1px 0; } .hk-label { font-size: 13px; color: var(--muted); } .hk-val { font-family: var(--f-head); font-size: 24px; font-weight: 800; line-height: 1.15; margin: 2px 0 4px; } .hk-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text2); } .hk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hc); } .hk-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .health-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; } .hc-item { border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 10px 12px; } .hc-clic { cursor: pointer; transition: background var(--t); } .hc-clic:hover, .hc-clic.abierto { background: var(--panel2); } .hc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 500; margin-bottom: 4px; } .hc-head .hint { margin: 0; font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; } .hc-chev svg.i { width: 14px; height: 14px; vertical-align: 0; transition: transform var(--t); } .hc-clic.abierto .hc-chev svg.i { transform: rotate(180deg); } .spark { display: block; } .hc-detalle { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); cursor: default; } .hcd-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; } .hcd-kpis > div { display: flex; flex-direction: column; } .hcd-l { font-size: 12.5px; color: var(--muted); } .hcd-kpis b { font-size: 16px; font-variant-numeric: tabular-nums; } .hcd-h { font-size: 12px; color: var(--muted); } .hcd-fila { display: grid; grid-template-columns: 80px 1fr 56px; gap: 10px; align-items: center; padding: 3px 0; font-size: 13px; background: none; border: 0; border-bottom: 1px solid var(--line2); border-radius: 0; } .hcd-barra { height: 6px; background: var(--hundido); border-radius: 2px; overflow: hidden; display: block; } .hcd-barra span { display: block; height: 100%; } .htop-list { display: flex; flex-direction: column; gap: 6px; } .htop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; font-size: 14px; } .htop-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .htop-bar { height: 8px; background: var(--hundido); border-radius: 2px; overflow: hidden; display: block; } .htop-bar span { display: block; height: 100%; background: var(--barra); } .htop-v { color: var(--text2); font-size: 13px; } .evt-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; } .evt-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) minmax(0, 2fr); gap: 10px; padding: 7px 0 7px 10px; border-bottom: 1px solid var(--line2); border-left: 2px solid transparent; font-size: 13.5px; } .evt-row.crit { border-left-color: var(--amber); } .evt-row.bsod { border-left-color: var(--red); background: var(--crit-bg); } .evt-when { color: var(--muted); } .evt-src { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .evt-msg { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bsod-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 600; } .disk-list, .drv-list { display: flex; flex-direction: column; gap: 4px; } .disk-i, .drv-i { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; } .disk-i.ok svg.i { color: var(--green); } .disk-i.warn svg.i, .drv-i svg.i { color: var(--amber); } .pv-ai { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; } .ai-loading { color: var(--muted); } .ai-err { display: flex; gap: 8px; align-items: flex-start; color: var(--text); background: var(--crit-bg); padding: 10px 14px; border-radius: var(--r-tarjeta); } .ai-err svg.i { color: var(--red); } .ai-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .ai-score { font-family: var(--f-head); font-size: 28px; font-weight: 800; color: var(--hc, var(--text)); } .ai-verdict { color: var(--text2); font-size: 14px; } .ai-by { font-size: 12.5px; color: var(--muted); } .ai-acciones { display: flex; gap: 4px; margin-left: auto; } .ai-obs { margin: 10px 0 0; padding-left: 18px; font-size: 14px; color: var(--text2); } .dx-sec { margin: 12px 0; font-size: 14px; color: var(--text2); } .dx-sec b { color: var(--text); } .dx-sec ul { margin: 4px 0 0 18px; padding: 0; } .dx-tl-row { display: flex; gap: 12px; padding: 2px 0; } .dx-tl-when { min-width: 110px; color: var(--muted); } .diag-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .diag-item { border-left: 3px solid var(--sc, var(--line-strong)); background: var(--panel2); padding: 10px 14px; font-size: 14px; } .diag-t { font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .diag-sev, .diag-conf, .diag-hum { font-size: 12.5px; font-weight: 500; color: var(--text2); } .diag-c, .diag-r, .diag-e { margin-top: 4px; color: var(--text2); } .diag-c b, .diag-r b, .diag-e b { color: var(--text); font-weight: 600; } .pat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 24px; } .pat-chip { display: flex; flex-direction: column; padding: 8px 0; border-bottom: 1px solid var(--line2); } .pat-k { font-size: 13px; color: var(--muted); } .pat-v { font-size: 14.5px; } .pat-mix { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; color: var(--text2); } .pat-cat { display: inline-flex; align-items: center; gap: 6px; } .pat-cat i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; } .pat-perfil { font-size: 15px; } .pat-rasgo { font-size: 14px; padding: 3px 0; } .pat-ev { color: var(--muted); } .pat-nose { margin-top: 10px; font-size: 14px; color: var(--text2); } .pat-foot { margin-top: 12px; font-size: 13px; color: var(--muted); } /* Inventario y listas simples */ .hw-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 7px 16px 7px 0; width: 38%; border-bottom: 1px solid var(--line2); font-size: 14px; } .hw-table td { padding: 7px 0; border-bottom: 1px solid var(--line2); word-break: break-word; } .list { display: flex; flex-direction: column; } .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: 14px; } .row .meta { color: var(--muted); font-size: 13px; } .app-tag { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--text2); background: var(--hundido); border-radius: 3px; padding: 1px 8px; margin: 2px 4px 0 0; } .grp-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 4px; } .fila-cuenta { grid-template-columns: minmax(0, 1fr) auto auto; } .fc-quien { display: flex; flex-direction: column; min-width: 0; } .fc-quien .mono { font-size: 13px; } .fila-acc { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; } .inv-programas .row { padding: 7px 0; } /* Equipos (tabla de gestión) */ .eq-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 16px; } .eq-busca { position: relative; flex: 0 1 340px; } .eq-busca svg.i { position: absolute; left: 12px; color: var(--muted); } .eq-busca input { width: 100%; padding-left: 38px; } .eq-table-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); overflow-x: auto; } .eq-table { width: 100%; border-collapse: collapse; font-size: 14px; } .eq-table th { padding: 10px 14px; background: var(--panel2); } .eq-table td { padding: 12px 14px; border-bottom: 1px solid var(--line2); vertical-align: top; } .eq-table tr:last-child td { border-bottom: 0; } .eq-table select { min-width: 150px; max-width: 220px; } .eq-nombre b { display: block; font-size: 15px; } .eq-row.revd { opacity: .65; } .eq-row.eq-nuevo { background: var(--warn-bg); } .eq-acts { white-space: nowrap; text-align: right; } .eq-acts .btn { min-height: 36px; } .eq-badge { display: inline-block; font-size: 12.5px; color: var(--text2); background: var(--hundido); border-radius: 3px; padding: 1px 8px; margin: 4px 4px 0 0; } .eq-badge.warn, .eq-badge.nuevo { background: var(--warn-bg); color: var(--text); } .eq-badge.crit { background: var(--crit-bg); color: var(--text); } .eq-badge.ok { background: var(--good-bg); color: var(--text); } .aviso-mini { display: inline-flex; gap: 6px; align-items: flex-start; font-size: 13.5px; color: var(--text); max-width: 260px; } .aviso-mini svg.i { width: 15px; height: 15px; margin-top: 2px; color: var(--amber); } .aviso-mini.sev-critica svg.i, .aviso-mini.sev-alta svg.i { color: var(--red); } /* Personas */ .pers-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; } .pers-side { display: flex; flex-direction: column; gap: 14px; } .pers-new { display: flex; flex-direction: column; gap: 8px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 14px; } .pers-cab { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 600; color: var(--text2); padding: 0 2px; } .pers-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); overflow: hidden; } .pers-list > .hint { padding: 14px; margin: 0; } .pers-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line2); min-height: 56px; transition: background var(--t); } .pers-item:last-child { border-bottom: 0; } .pers-item:hover { background: var(--panel2); } .pers-item.on { background: var(--hundido); box-shadow: inset 2px 0 0 var(--accent); } .pers-av { width: 34px; height: 34px; border-radius: 50%; background: var(--hundido); display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: var(--text2); } .pers-item.on .pers-av { background: var(--panel); } .pers-meta { display: flex; flex-direction: column; min-width: 0; } .pers-meta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pers-meta span { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pers-cdot { font-size: 12px; color: var(--muted); } .pers-cdot.ok svg.i { color: var(--green); width: 16px; height: 16px; } .pers-cdot.warn svg.i { color: var(--text2); width: 16px; height: 16px; } /* dato de una persona: neutro */ .pers-falta { font-size: 12.5px; color: var(--text2); } .zona-peligro { border-top: 1px solid var(--line); padding: 18px 0 0; margin-top: 8px; } .pers-detail { min-width: 0; } .pers-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; } .pd-nombre-campo { flex: 1; } .pd-title { font-family: var(--f-head); font-weight: 800; font-size: 24px; border-color: transparent; background: transparent; padding: 0 8px; margin-left: -8px; min-height: 44px; } .pd-title:hover { border-color: var(--line); } .pers-block { border-top: 1px solid var(--line2); padding: 16px 0 6px; } .pers-block:first-of-type { border-top: 0; } .pers-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; align-items: end; } .pers-consent { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 14px; } .pers-consent > span:first-child { display: flex; gap: 8px; align-items: flex-start; } .pers-consent.ok > span:first-child svg.i { color: var(--green); } .pers-consent.warn > span:first-child svg.i { color: var(--text2); } .pers-consent-acts { display: flex; gap: 6px; } .pers-devs { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 12px; } .pers-dev { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; cursor: pointer; } .pers-block .campo { margin-bottom: 10px; } .pers-ov-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } .pers-ov-head .panel-t { margin: 0; } .frase-persona { font-size: 17px; margin: 0 0 4px; } .frase-persona b { font-family: var(--f-head); font-weight: 800; } .pers-ov-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin: 12px 0; } .donut-mini svg { width: 100%; max-width: 200px; height: auto; display: block; } .pa-list { display: flex; flex-direction: column; gap: 4px; } .pa-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; } .pa-row.pa-equipo { grid-template-columns: minmax(0, 1fr) auto auto; } .pa-lbl { display: flex; align-items: center; gap: 8px; min-width: 0; } .pa-track { height: 8px; background: var(--hundido); border-radius: 2px; overflow: hidden; display: block; } .pa-fill { display: block; height: 100%; } .pa-val { color: var(--text2); font-size: 13.5px; white-space: nowrap; } /* Informes */ .inf-malla { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; } .inf-form { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-top: 8px; } .inf-lado { padding-top: 4px; } .inf-lado .panel-t { font-size: 15px; } .inf-otros { margin: 0 0 20px; padding-left: 18px; color: var(--text2); font-size: 14px; display: flex; flex-direction: column; gap: 8px; } .inf-otros b { color: var(--text); font-weight: 600; } /* Ajustes */ .instalar p { max-width: 64ch; } .pasos-lista { margin: 4px 0 6px 20px; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--text2); } .cfg-scope-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 18px; } .cfg-scope-bar .campo { min-width: 240px; } .cfg-scope-bar .hint { margin: 0 0 10px; } .cfg-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; } .cfg-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 18px 20px 8px; } .cf-row { border-top: 1px solid var(--line2); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; } .cfg-card .panel-t + .cf-row, .cfg-card .hint + .cf-row { border-top: 0; } .cf-body { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; } .cf-body.inherit .cf-label { color: var(--muted); } .cf-label { font-size: 14.5px; display: flex; flex-direction: column; flex: 1 1 200px; min-width: 0; } .cf-label .hint { margin: 2px 0 0; font-size: 13px; } .cf-tag { font-size: 12.5px; color: var(--muted); } .cf-num { display: inline-flex; align-items: center; gap: 8px; } .cf-num input { width: 84px; } .cf-unidad { font-size: 13px; color: var(--muted); max-width: 170px; } .cf-body input[type="text"] { flex: 1 1 100%; } .cf-custom { min-height: 32px; font-size: 13px; color: var(--text2); align-self: flex-start; } .cfg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--line); } .appsel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 52vh; overflow-y: auto; } .appsel-item { display: grid; grid-template-columns: 18px 1fr; gap: 2px 10px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line2); cursor: pointer; } .appsel-n { font-size: 14px; } .appsel-m { grid-column: 2; font-size: 12.5px; color: var(--muted); } .mfa-secret { margin: 6px 0 10px; } .mfa-secret code { display: inline-block; font-size: 15px; letter-spacing: .08em; padding: 8px 12px; background: var(--hundido); border-radius: var(--r-campo); word-break: break-all; } .sec-pass { border-top: 1px solid var(--line2); margin-top: 18px; padding-top: 16px; } /* Cuenta › registro */ .audit-list { display: flex; flex-direction: column; } .audit-row { display: grid; grid-template-columns: 170px 240px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 14px; } .au-when { color: var(--muted); font-size: 13px; white-space: nowrap; } .au-act { font-weight: 500; } .au-who, .au-tgt { color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .au-ip { color: var(--muted); font-size: 12.5px; } /* Empresas (revendedor) */ .alta { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 0 18px; margin-bottom: 16px; } .alta > summary { min-height: 52px; } .alta-ok h4 { display: flex; gap: 8px; align-items: center; font-size: 15px; margin: 12px 0 6px; } .alta-ok h4 svg.i { color: var(--green); } .alta-ok pre { background: var(--hundido); padding: 10px 12px; border-radius: var(--r-campo); overflow-x: auto; font-size: 12.5px; } .alta-aviso { display: flex; gap: 8px; color: var(--text); background: var(--warn-bg); padding: 8px 12px; border-radius: var(--r-campo); } #clientes-list { gap: 14px; margin-top: 16px; } .cli-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .cli-staging { background: var(--panel2); border-style: dashed; } .cli-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .cli-head b { font-family: var(--f-head); font-size: 17px; font-weight: 800; } .cli-head .meta { color: var(--muted); font-size: 12.5px; } .cli-acciones { margin-left: auto; display: flex; gap: 2px; } .cli-plan, .cli-comercial, .cli-token, .cli-demo, .cli-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; } .ct-label { color: var(--muted); font-size: 13.5px; min-width: 150px; } .ct-val { background: var(--hundido); padding: 4px 8px; border-radius: 3px; font-size: 12.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .cli-mods { display: flex; flex-wrap: wrap; gap: 6px; } .cp-ajustes { font-size: 13px; color: var(--muted); } .cc-lbl { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13.5px; } .cc-lbl input { width: 110px; } .cc-uso.excede { color: var(--red); font-weight: 600; } .cc-fact { color: var(--text2); font-weight: 500; } .demo-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--text2); } .demo-badge.soon { color: var(--amber); font-weight: 600; } .cli-consent > span { display: inline-flex; gap: 8px; align-items: flex-start; } .cli-consent.ok > span svg.i { color: var(--green); } .cli-consent.warn > span svg.i { color: var(--amber); } .ct-inst-info { margin: 0; } /* Paginación */ .pag-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 0 2px; font-size: 13.5px; color: var(--muted); } .pag-nums { display: flex; align-items: center; gap: 2px; margin-left: auto; } .pag-n { min-width: 36px; height: 36px; border-radius: var(--r-campo); color: var(--text2); font-variant-numeric: tabular-nums; } .pag-n:hover:not(:disabled) { background: var(--hundido); color: var(--text); } .pag-n.act { background: var(--text); color: var(--panel); font-weight: 600; } .pag-n:disabled { opacity: .35; cursor: default; } .pag-mas { padding: 0 4px; } .pag-por { display: flex; align-items: center; gap: 8px; } .pag-por select { min-height: 34px; } .panel-cuerpo { min-width: 0; } .collapsible { cursor: pointer; } .chev { display: inline-flex; transition: transform var(--t); } /* Etiqueta flotante */ .tooltip { position: fixed; z-index: 90; pointer-events: none; background: var(--sidebar); color: #F3F1EA; border-radius: var(--r-campo); padding: 8px 11px; font-size: 13px; max-width: 320px; line-height: 1.4; box-shadow: var(--sombra-flota); display: flex; flex-direction: column; } .tooltip b { font-weight: 600; } .tooltip span { color: #C9D2CB; } /* ===================== VENTANAS FLOTANTES ===================== */ .modal { position: fixed; inset: 0; z-index: 70; background: rgba(18, 24, 20, .5); display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-box { background: var(--panel); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-flota); width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 24px; } .modal-angosto { width: min(460px, 100%); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .modal-box h2 { font-size: 19px; } #dlg-titulo { margin-bottom: 8px; } .dlg-texto { color: var(--text2); margin-bottom: 14px; } .dlg-texto ul { margin: 8px 0 0; padding-left: 18px; } #dlg-campo-wrap { margin-bottom: 14px; } .dlg-acciones { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 16px; } .brief-lead, .brief-warn { background: var(--panel2); padding: 10px 14px; margin: 10px 0; font-size: 14px; border-left: 3px solid var(--accent); } .brief-warn { border-left-color: var(--amber); display: flex; gap: 8px; } .brief-lead ul { margin: 6px 0 0 18px; padding: 0; color: var(--text2); } .brief-first { margin-top: 8px; font-weight: 600; } .brief-sec { margin: 14px 0; font-size: 14px; } .brief-sec > b { display: block; margin-bottom: 6px; } .brief-list { display: flex; flex-direction: column; gap: 6px; } .brief-h { border-left: 3px solid var(--line-strong); padding: 6px 12px; background: var(--panel2); } .brief-h.sev-critica, .brief-h.sev-alta { border-left-color: var(--red); } .brief-h.sev-media { border-left-color: var(--amber); } .brief-h-t { font-weight: 600; } .brief-h-e { font-size: 13px; color: var(--muted); } .brief-n { font-size: 12.5px; color: var(--text2); font-weight: 500; } /* Captura en grande */ .lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(12, 16, 13, .92); display: flex; flex-direction: column; padding: 16px; gap: 10px; } .lb-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: #F3F1EA; } .lb-caption { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; flex-wrap: wrap; } .lb-caption .shot-badge { color: #C9D2CB; } .lb-actions { display: flex; gap: 6px; flex-wrap: wrap; } .lb-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: var(--r-campo); background: rgba(255, 255, 255, .1); color: #F3F1EA; text-decoration: none; font-size: 14px; } .lb-btn:hover { background: rgba(255, 255, 255, .18); } .lb-stage { flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; min-height: 0; } .lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; background: #fff; } /* Avisos breves */ .avisos { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; } .aviso-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; max-width: 420px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-flota); padding: 8px 6px 8px 14px; font-size: 14px; } .aviso-toast > svg.i { color: var(--green); } .aviso-toast.error { border-left-color: var(--red); } .aviso-toast.error > svg.i { color: var(--red); } .aviso-toast .btn.icono { width: 36px; min-height: 36px; } /* ===================== ENTRAR ===================== */ .entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); } .entrada-lado { background: var(--sidebar); color: #E9E6DD; padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; gap: 22px; } .entrada-marca { display: flex; align-items: center; gap: 14px; } .entrada-buho { width: 52px; height: 52px; object-fit: contain; } .marca-nombre { font-family: var(--f-head); font-weight: 800; font-size: 28px; color: #F3F1EA; } .entrada-promesa { font-family: var(--f-head); font-weight: 800; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; max-width: 18ch; margin: 0; color: #F3F1EA; } .entrada-cinta { position: relative; height: 22px; max-width: 420px; border-radius: 3px; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 7px), rgba(255, 255, 255, .04); } .entrada-cinta i { position: absolute; top: 0; bottom: 0; left: var(--a); width: var(--b); background: var(--c); box-shadow: inset -1px 0 0 var(--sidebar); } .entrada-cinta { --fam-trabajo: #3C8BCB; --fam-sinclas: #AD8A2C; --fam-otros: #B962A9; } .entrada-nota { color: #AEB8B0; max-width: 46ch; margin: 0; } .entrada-caja { align-self: center; justify-self: center; width: min(380px, 100% - 32px); display: flex; flex-direction: column; gap: 14px; padding: 40px 0; } .entrada-caja h1 { font-size: 26px; margin-bottom: 6px; } .entrada-caja .btn { min-height: 46px; margin-top: 6px; } /* ===================== MENÚ DEL CELULAR ===================== */ .menu-movil, .hoja { display: none; } /* ===================== PANTALLAS MEDIANAS ===================== */ @media (max-width: 1200px) { .hoy-malla { grid-template-columns: minmax(0, 1fr); } .inf-malla { grid-template-columns: minmax(0, 1fr); } .audit-row { grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); } .au-tgt, .au-ip { grid-column: 2 / -1; } } @media (max-width: 1024px) { .shell { grid-template-columns: 76px minmax(0, 1fr); } .shell::before { width: 76px; } .sidebar { padding: 16px 10px; align-items: stretch; } .brand { justify-content: center; padding: 0 0 6px; } .brand-txt, .nav-sep, .side-pie, .acct .who { display: none; } .nav a, .side-btn { justify-content: center; padding: 0; font-size: 0; gap: 0; } .nav a svg.i, .side-btn svg.i { width: 21px; height: 21px; } .nav-badge { position: absolute; top: 4px; right: 6px; font-size: 11px; min-width: 18px; height: 18px; } .acct { justify-content: center; padding: 8px 0; } .dos, .dos-col { grid-template-columns: minmax(0, 1fr); } .pers-layout { grid-template-columns: minmax(0, 1fr); } .tec-fila { grid-template-columns: minmax(0, 1fr); } .tec-acc { justify-content: flex-start; max-width: none; } } /* ===================== CELULAR ===================== */ @media (max-width: 720px) { body { font-size: 15.5px; } .shell { display: block; } .shell::before { display: none; } .sidebar { display: none; } .topbar { padding: 10px 16px; min-height: 58px; gap: 8px; } .topbar h1 { font-size: 18px; } .topbar-sub { display: none; } .controls { width: 100%; } .controls select#device, .controls #btn-export { display: none; } .controls input[type="date"] { flex: 1 1 140px; } main { padding: 18px 16px calc(96px + env(safe-area-inset-bottom)); } .franja { padding: 12px 16px; } .pasos { flex-direction: column; gap: 12px; flex: 1 1 auto; } .paso { flex: none; } .paso:not(.actual) { display: none; } .paso-de { display: block !important; } .franja .prueba { white-space: normal; } .btn, .chip, input, select, .pestanas button, .subnav button, .segmentado button, .conmutador button, .pag-n { min-height: 44px; } .btn.icono { width: 44px; } .eq-acts .btn, .pag-por select, .btn.btn-chico { min-height: 44px; } .pag-n { min-width: 44px; } .leg-row { min-height: 44px; } .check { min-height: 44px; } .chip { padding: 0 14px; } .hoy-cab { grid-template-columns: minmax(0, 1fr); margin-bottom: 18px; } .hoy-cab .conmutador { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 14px; } .frase { font-size: 22px; } .frase-2 { font-size: 15px; } .cinta-bloque { padding: 14px 14px 10px; } .jor-regla { display: grid; grid-template-columns: minmax(0, 1fr); } .jor-regla > div:first-child, .jor-regla > div:last-child { display: none; } .jor-fila { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "av id est" "bar bar bar"; gap: 6px 10px; padding: 12px 0; } .jor-avatar { grid-area: av; } .jor-id { grid-area: id; } .jor-est { grid-area: est; align-items: flex-end; } .jor-col { grid-area: bar; } .ocio-malla { grid-template-columns: minmax(0, 1fr); } .rk-fila { grid-template-columns: minmax(0, 1fr) 70px 70px; } .ocio-tabla td.ocio-top { display: block; text-align: left; } .ocio-tabla td.ocio-top::before { display: block; } .pers-jornada { padding: 14px; } .pj-tabla thead { display: none; } .pj-tabla, .pj-tabla tbody, .pj-tabla tr, .pj-tabla td { display: block; width: 100%; } .pj-tabla tr { padding: 10px 0; border-bottom: 1px solid var(--line2); } .pj-tabla td { border: 0; padding: 2px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; } .pj-tabla td::before { content: attr(data-t); color: var(--muted); font-size: 13px; text-align: left; } .pj-tabla td:first-child { display: block; text-align: left; } .pj-tabla td:first-child::before { content: none; } .pj-tabla .pj-nl { min-height: 32px; } .jornada-linea { white-space: normal; min-height: 32px; } .tor-oficina { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; } .tor-grande svg { width: min(240px, 70vw); height: auto; } .tor-lista { width: 100%; max-width: none; } .tor-lista li { min-height: 44px; grid-template-columns: 12px minmax(0, 1fr) auto 60px; } .tor-fila { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "av id est" "mini txt txt"; gap: 8px 10px; padding: 12px 0; } .tor-fila .jor-avatar { grid-area: av; } .tor-fila .jor-id { grid-area: id; } .tor-fila .jor-est { grid-area: est; align-items: flex-end; } .tor-mini { grid-area: mini; align-self: start; } .tor-mini svg { width: 56px; height: 56px; } .tor-texto { grid-area: txt; } .bloque-cab .conm-forma { margin-left: 0; } .para-revisar { padding: 14px 16px 6px; } .cifras-respaldo { gap: 10px 24px; } /* Las cinco pestañas del equipo caben enteras en 360-390 px: nada queda escondido a la derecha. Las subsecciones (más largas) se desplazan, con un borde que se desvanece para que se note que hay más. */ .pestanas { margin: 0 -16px 18px; padding: 0 6px; gap: 0; overflow-x: visible; } .pestanas button { flex: 1 1 auto; padding: 0 4px; font-size: 13.5px; } .subnav { margin: 0 -16px 18px; padding: 0 12px; -webkit-mask-image: linear-gradient(90deg, #000 80%, transparent); mask-image: linear-gradient(90deg, #000 80%, transparent); } .subnav.al-final { -webkit-mask-image: none; mask-image: none; } .panel, .bloque { padding: 16px; border-radius: var(--r-tarjeta); } .eq-cab { grid-template-columns: minmax(0, 1fr); } .eq-estado { padding-top: 0; } .eq-datos .sep { margin: 0 8px; } .ev { grid-template-columns: 62px 14px minmax(0, 1fr) 70px; gap: 8px; } .ev-tail, .ev-dur { display: none; } .ev-det { padding: 4px 8px 14px 20px; } .bar-row2 { grid-template-columns: minmax(0, 1fr) auto; } .bar-row2 .bar-track2 { grid-column: 1 / -1; grid-row: 2; } .ci-row, .pa-row, .htop-row, .drill-head { grid-template-columns: minmax(0, 1fr) auto; } .ci-track, .pa-track, .htop-bar, .drill-head .track { grid-column: 1 / -1; grid-row: 2; } .pa-row.pa-equipo { grid-template-columns: minmax(0, 1fr) auto auto; } .evt-row { grid-template-columns: 70px minmax(0, 1fr); } .evt-msg { grid-column: 1 / -1; white-space: normal; } .idle-row { flex-direction: column; align-items: flex-start; gap: 2px; } .idle-prog { text-align: left; white-space: normal; } .donut-full { gap: 16px; } .donut-big { width: 100%; display: flex; justify-content: center; } .donut-big svg { width: 200px; } .pers-ov-grid { grid-template-columns: minmax(0, 1fr); } .donut-mini { display: flex; justify-content: center; } .inf-form { grid-template-columns: minmax(0, 1fr); } .cfg-modules { grid-template-columns: minmax(0, 1fr); } .cf-custom { align-self: stretch; } .audit-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } .au-tgt, .au-ip { grid-column: auto; white-space: normal; } .fila-cuenta { grid-template-columns: minmax(0, 1fr); } .fila-acc { justify-content: flex-start; } .td-tab b { max-width: 60vw; } .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); } .eq-busca { flex: 1 1 100%; } .ct-label { min-width: 0; width: 100%; } /* Tablas que se vuelven tarjetas */ .eq-table-wrap { background: none; border: 0; overflow: visible; } .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr, .tabla-tarjetas td { display: block; width: 100%; } .tabla-tarjetas thead { display: none; } .tabla-tarjetas tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); padding: 6px 14px; margin-bottom: 12px; } .tabla-tarjetas td { border: 0; padding: 8px 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; align-items: start; } .tabla-tarjetas td::before { content: attr(data-et); font-size: 13px; color: var(--muted); padding-top: 2px; } .tabla-tarjetas td.eq-nombre, .tabla-tarjetas td.eq-acts { grid-template-columns: minmax(0, 1fr); } .tabla-tarjetas td.eq-nombre::before, .tabla-tarjetas td.eq-acts::before { content: none; } .tabla-tarjetas td.eq-nombre { border-bottom: 1px solid var(--line2); padding-bottom: 10px; } .tabla-tarjetas td.eq-acts { display: flex; flex-wrap: wrap; gap: 6px; text-align: left; border-top: 1px solid var(--line2); padding-top: 10px; } .tabla-tarjetas select { max-width: none; width: 100%; } .tabla-tarjetas td > :not(:first-child) { grid-column: 2; } .tabla-tarjetas td.eq-nombre > *, .tabla-tarjetas td.eq-acts > * { grid-column: auto; } .td-table th:nth-child(2), .td-table td:nth-child(2), .td-table th:nth-child(4), .td-table td:nth-child(4) { display: none; } .pj-tabla.td-table td:nth-child(2), .pj-tabla.td-table td:nth-child(4) { display: flex; } /* Menú inferior de cinco */ .menu-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--sidebar); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sidebar-line); } .menu-movil a, .menu-movil button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: var(--r-campo); color: var(--sidebar-ink2); text-decoration: none; font-size: 12px; font-weight: 500; } .menu-movil svg.i { width: 22px; height: 22px; vertical-align: 0; } .menu-movil [aria-current="page"], .menu-movil .activo { color: #fff; background: var(--sidebar-active); } .menu-movil a[hidden] { display: none; } .hoja { position: fixed; inset: 0; z-index: 45; background: rgba(18, 24, 20, .45); display: flex; align-items: flex-end; } .hoja[hidden] { display: none; } .hoja-caja { width: 100%; background: var(--panel); border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0; padding: 10px 12px calc(84px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; box-shadow: var(--sombra-flota); } .hoja-caja a, .hoja-caja button { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; color: var(--text); text-decoration: none; font-size: 16px; border-bottom: 1px solid var(--line2); text-align: left; } .hoja-caja a[aria-current="page"] { color: var(--accent); font-weight: 600; } .avisos { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); align-items: stretch; } .aviso-toast { max-width: none; } .modal { padding: 12px; align-items: flex-end; } .modal-box { padding: 18px; max-height: calc(100vh - 24px); } .dlg-acciones .btn { flex: 1 1 auto; } .entrada { grid-template-columns: minmax(0, 1fr); } .entrada-lado { padding: 32px 20px 28px; gap: 14px; } .entrada-promesa { font-size: 24px; } .entrada-nota { font-size: 14px; } .entrada-caja { padding: 28px 0 40px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media print { .sidebar, .topbar, .menu-movil, .franja, .pestanas, .eq-acciones { display: none !important; } .shell { display: block; } } /* ---- Historia clínica, prevención, aperturas, archivos (12/11/2026) ---- */ .evt-row.evt-simple, .evt-list .evt-row { grid-template-columns: 76px minmax(0, 1fr); } .evt-list .evt-msg { white-space: normal; overflow: visible; color: var(--text); } .evt-hacer { color: var(--text2); } .evt-tecnico { margin-top: 4px; font-size: 12.5px; color: var(--muted); } .evt-tecnico summary { cursor: pointer; width: max-content; } .evt-tecnico > span { display: block; word-break: break-word; } .hs-marca { color: var(--hc, var(--text)); flex: none; display: grid; place-items: center; } .hs-marca svg.i { width: 24px; height: 24px; } .hs-lista { margin: 4px 0; padding-left: 18px; font-size: 14px; color: var(--text2); } .signos-frase { font-size: 16px; font-weight: 500; margin: 0 0 14px; max-width: 70ch; } .signos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-tarjeta); overflow: hidden; } .signo { padding: 14px 16px 12px; border-right: 1px solid var(--line2); border-top: 3px solid var(--inactivo); min-width: 0; } .signo:last-child { border-right: 0; } .signo.f-bien { border-top-color: var(--green); } .signo.f-regular { border-top-color: var(--amber); } .signo.f-atencion { border-top-color: var(--red); } .signo-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .signo-nombre { font-weight: 600; font-size: 14px; } .signo-franja { font-size: 13px; font-weight: 600; color: var(--text2); } .f-bien .signo-franja { color: var(--green); } .f-regular .signo-franja { color: var(--amber); } .f-atencion .signo-franja { color: var(--red); } .signo-num { font-family: var(--f-head); font-weight: 800; font-size: 28px; line-height: 1.1; margin: 6px 0 8px; } .signo-num small { font-family: var(--f-body); font-size: 13px; font-weight: 500; color: var(--muted); } .signo-lineas { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; } .signo-lineas li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; } .signo-pts { color: var(--text2); font-weight: 600; text-align: right; } .signo-nodato { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; } .prev-lista { list-style: none; margin: 0 0 8px; padding: 0; } .prev-item { display: grid; grid-template-columns: 180px 110px minmax(0, 1fr); gap: 4px 14px; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 14px; align-items: baseline; } .prev-titulo { font-weight: 600; } .prev-estado { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 13px; color: var(--muted); } .prev-estado svg.i { width: 15px; height: 15px; } .e-bien .prev-estado { color: var(--green); } .e-atencion .prev-estado { color: var(--amber); } .prev-texto { color: var(--text2); } .perdida-lista { list-style: none; margin: 0; padding: 0; counter-reset: perdida; } .perdida-fila { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.6fr) auto; gap: 6px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line2); font-size: 14px; } .perdida-fila:last-child { border-bottom: 0; } .perdida-signos { color: var(--text2); font-size: 13.5px; } .perdida-razon { color: var(--text); } .enlace-archivos { margin-top: -10px; } .arch-limites ul { margin: 4px 0 8px; padding-left: 18px; } .arch-limites p { margin: 0; } .arch-limites .subh { margin-top: 0; } .arch-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; align-items: end; } .arch-form .arch-q { grid-column: span 2; } .arch-form .arch-temp, .arch-form .arch-botones { grid-column: 1 / -1; } .arch-botones { display: flex; flex-wrap: wrap; gap: 8px; } .arch-resumen { font-size: 14px; color: var(--text2); margin: 4px 0 10px; } .arch-tabla { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); font-size: 13.5px; } .arch-tabla th { text-align: left; font-weight: 600; color: var(--text2); padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 13px; } .arch-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; word-break: break-word; } .arch-tabla td svg.i { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--text2); } .arch-tabla .arch-carpeta { font-size: 12.5px; color: var(--text2); } .arch-tabla tr.arch-temporal td { color: var(--muted); } .arch-pag { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 14px 0; } .arch-pie { margin-top: 18px; max-width: 90ch; } .inv-foto { margin-top: 0; } @media (max-width: 900px) { .signos { grid-template-columns: 1fr; } .signo { border-right: 0; border-bottom: 1px solid var(--line2); } .prev-item { grid-template-columns: minmax(0, 1fr) auto; } .prev-texto { grid-column: 1 / -1; } .perdida-fila { grid-template-columns: minmax(0, 1fr) auto; } .perdida-signos, .perdida-razon { grid-column: 1 / -1; } .perdida-fila .perdida-ver { grid-row: 1; grid-column: 2; } .arch-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .arch-tabla, .arch-tabla tbody, .arch-tabla tr, .arch-tabla td { display: block; width: 100%; } .arch-tabla { border: 0; background: none; } .arch-tabla thead { display: none; } .arch-tabla tr { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-tarjeta); margin-bottom: 10px; padding: 6px 12px; } .arch-tabla td { border: 0; padding: 4px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; } .arch-tabla td::before { content: attr(data-r); color: var(--muted); font-size: 12.5px; } } @media (max-width: 520px) { .arch-form { grid-template-columns: 1fr; } .arch-form .arch-q { grid-column: auto; } .arch-botones .btn { flex: 1 1 100%; } } /* Calculadora del espacio de capturas (Ajustes › Qué se registra). Sobria: la barra de uso de arriba y una frase. */ .cap-calc { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); } .cap-calc-t { font-size: 1rem; margin: 0 0 4px; } .cap-calc-campos { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 10px 0 12px; align-items: flex-end; } .cap-calc-campos .campo { display: flex; flex-direction: column; gap: 4px; min-width: 160px; } .cap-calc-campos input[type="number"] { width: 110px; } .cap-calc-rango { display: flex; align-items: center; gap: 10px; } .cap-calc-rango input[type="range"] { width: 200px; accent-color: var(--accent); } .cap-calc-rango output { font-variant-numeric: tabular-nums; min-width: 64px; } .cap-calc-frase { margin: 0 0 6px; font-size: 1.02rem; line-height: 1.5; max-width: 70ch; font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .cap-calc-campos .campo, .cap-calc-rango input[type="range"] { width: 100%; } .cap-calc-rango { width: 100%; } } /* La cinta es la protagonista (pulido, 12/11/2026). En una tarjeta angosta (portátil de 1280 a 1440 px con «Para revisar» al lado, o tableta) la fila deja de repartir el ancho en cuatro columnas: nombre y estado arriba, la cinta a TODO el ancho debajo y el resumen de la jornada en una línea. Así la cinta no baja de ~520 px en 1280×720. */ @container cinta (max-width: 900px) { .jor-regla { grid-template-columns: minmax(0, 1fr); } .jor-regla > div:first-child, .jor-regla > div:last-child { display: none; } .jor-fila { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "av id est" "bar bar bar"; gap: 8px 12px; padding: 12px 0; } .jor-avatar { grid-area: av; } .jor-id { grid-area: id; } .jor-est { grid-area: est; flex-direction: row; align-items: baseline; gap: 12px; } .jor-col { grid-area: bar; } .jor-col .jornada-linea, .jor-col .jor-llegada { display: inline; } } @container cinta (max-width: 520px) { .jor-est { flex-direction: column; align-items: flex-end; gap: 0; } } /* Dato de una persona (pausas, otros usos): neutro, sin color de alerta (pulido, 12/11/2026). */ .dato-persona { margin: 0 0 12px; font-size: 14px; color: var(--text2); font-variant-numeric: tabular-nums; }