/* Obras360 — Tema v2 (rediseño piloto: Inicio y Tablero). Basado en los mockups aprobados: fondo grafito profundo, amarillo seguridad, franjas de estado, Material Symbols e Inter/Montserrat. TODO es local (fuentes en /app/fonts) para que funcione sin internet en obra. Las pantallas antiguas siguen usando estilos.css; una página usa v2 poniendo y enlazando SOLO esta hoja. */ /* ---- Fuentes locales ---- */ @font-face { font-family: "Inter"; src: url("../fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-var.woff2") format("woff2"); font-weight: 500 800; font-display: swap; } @font-face { font-family: "Material Symbols Outlined"; src: url("../fonts/material-symbols.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: block; } .ms { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; user-select: none; } .ms.lleno { font-variation-settings: "FILL" 1; } /* ---- Tokens (oscuro por defecto) ---- */ :root { --bg: #0d141d; --superficie: #1a202a; /* paneles y tarjetas */ --superficie-2: #161c25; /* cabeceras de panel */ --superficie-3: #242a34; /* hover / elevado */ --borde: #2f353f; --texto: #dde2f0; --texto-2: #afb5c2; /* secundario */ --etiqueta: #d6c4ac; /* rótulos/etiquetas (tinte cálido) */ --amarillo: #ffb319; /* acento de marca */ --amarillo-suave: #ffd79d; --sobre-amarillo: #432c00; --verde: #34d399; --naranja: #f97316; --rojo: #ff8a80; --rojo-fondo: #93000a; --sobre-rojo-fondo: #ffdad6; --sombra: 0 2px 0 rgba(0, 0, 0, .5); --r: 6px; --r-lg: 10px; --cuerpo: "Inter", system-ui, sans-serif; --titulo: "Montserrat", system-ui, sans-serif; /* Compatibilidad con dibujarCurva() de comun.js */ --border: #2f353f; --muted: #afb5c2; --text: #dde2f0; } html[data-tema="claro"] { --bg: #eef2f7; --superficie: #ffffff; --superficie-2: #f5f8fb; --superficie-3: #e8edf4; --borde: #dbe3ec; --texto: #14263c; --texto-2: #566579; --etiqueta: #6b6252; --amarillo: #e09a05; --amarillo-suave: #b97a00; --sobre-amarillo: #2b1c00; --verde: #1a9850; --naranja: #ea580c; --rojo: #d73027; --rojo-fondo: #fde3e1; --sobre-rojo-fondo: #8c1d18; --sombra: 0 2px 0 rgba(11, 36, 71, .08); --border: #dbe3ec; --muted: #566579; --text: #14263c; } /* ---- Base ---- */ body.v2 { margin: 0; background: var(--bg); color: var(--texto); font: 14px/1.45 var(--cuerpo); min-height: 100vh; overflow-x: hidden; /* lo ancho (tablas) scrollea en su contenedor, nunca la página */ } body.v2 * { box-sizing: border-box; } body.v2 h1, body.v2 h2, body.v2 h3 { font-family: var(--titulo); margin: 0; } body.v2 a { color: inherit; text-decoration: none; } /* :where() deja el reset con especificidad 0: cualquier clase lo puede sobrescribir. */ :where(body.v2 button) { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } body.v2 ::-webkit-scrollbar { width: 8px; height: 8px; } body.v2 ::-webkit-scrollbar-track { background: var(--bg); } body.v2 ::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 4px; } /* ---- Layout: sidebar escritorio + contenido ---- */ body.v2 { display: flex; flex-direction: column; } #lateral2 { display: none; } .contenido { flex: 1; display: flex; flex-direction: column; min-height: 100vh; } main.v2main { flex: 1; padding: 16px 16px 96px; max-width: 1280px; width: 100%; margin: 0 auto; } @media (min-width: 1024px) { #lateral2 { display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 50; background: var(--superficie); border-right: 1px solid var(--borde); } .contenido { margin-left: 264px; } main.v2main { padding: 32px 32px 48px; } #navInferior { display: none !important; } } /* ---- Sidebar (escritorio) ---- */ .lat2-head { display: flex; align-items: center; gap: 10px; padding: 18px 16px; border-bottom: 1px solid var(--borde); } .lat2-head .cubo { width: 40px; height: 40px; border-radius: var(--r); flex: none; background: var(--amarillo); color: var(--sobre-amarillo); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); } .lat2-head strong { font-family: var(--titulo); font-size: 18px; color: var(--amarillo-suave); display: block; } .lat2-head small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); } .lat2-menu { flex: 1; overflow-y: auto; padding: 10px 8px; } .lat2-cat { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); padding: 14px 10px 6px; } .lat2-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r); border-left: 3px solid transparent; color: var(--texto-2); font-weight: 600; font-size: 14px; margin: 1px 0; } .lat2-link .ms { font-size: 20px; } .lat2-link:hover { background: var(--superficie-3); color: var(--texto); } .lat2-link.activo { background: var(--amarillo); color: var(--sobre-amarillo); border-left-color: var(--amarillo-suave); box-shadow: var(--sombra); } .lat2-foot { border-top: 1px solid var(--borde); padding: 10px 8px; } /* ---- Barra superior ---- */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 60px; padding: 0 16px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); } @media (min-width: 1024px) { .topbar { padding: 0 32px; } } .topbar .marca { display: flex; align-items: center; gap: 8px; font-family: var(--titulo); font-weight: 700; color: var(--amarillo-suave); } .topbar .marca .cubo { width: 30px; height: 30px; border-radius: var(--r); background: var(--amarillo); color: var(--sobre-amarillo); display: flex; align-items: center; justify-content: center; } .topbar .marca .cubo .ms { font-size: 18px; } @media (min-width: 1024px) { .topbar .marca { display: none; } } .chip-obra { display: flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 6px 10px; font-weight: 700; font-size: 13px; box-shadow: var(--sombra); max-width: 46vw; } .chip-obra span.nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chip-obra .ms { font-size: 18px; color: var(--texto-2); flex: none; } .chip-obra:hover { background: var(--superficie-3); } .topbar .acciones { display: flex; align-items: center; gap: 2px; } .btn-icono { padding: 8px; border-radius: var(--r); color: var(--texto-2); display: flex; align-items: center; position: relative; } .btn-icono:hover { background: var(--superficie-3); color: var(--amarillo-suave); } .btn-icono .punto { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 999px; background: var(--naranja); } .sync-chip { display: flex; align-items: center; gap: 5px; padding: 8px; color: var(--verde); font-size: 12px; font-weight: 700; } .sync-chip.off { color: var(--naranja); } .sync-chip .ms { font-size: 18px; } /* Topbar compacta en pantallas angostas (que nunca desborde) */ @media (max-width: 600px) { .topbar { padding: 0 10px; gap: 6px; } .marca-txt { display: none; } .sync-chip .txt { display: none; } .sync-chip { padding: 6px 4px; } .btn-icono { padding: 7px 5px; } .chip-obra { max-width: 44vw; padding: 6px 8px; } } /* ---- Barra inferior (móvil) ---- */ #navInferior { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: space-around; align-items: stretch; background: var(--superficie-3); border-top: 1px solid var(--borde); padding-bottom: env(safe-area-inset-bottom); border-radius: 12px 12px 0 0; } .ninf-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; color: var(--texto-2); font-size: 11px; font-weight: 700; } .ninf-item .ms { font-size: 24px; } .ninf-item.activo { color: var(--amarillo); } .ninf-item.activo .ms { font-variation-settings: "FILL" 1; } /* ---- Encabezado de página ---- */ .pag-head { margin: 4px 0 18px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; } .pag-head h2 { font-size: 24px; font-weight: 700; letter-spacing: -.01em; } @media (min-width: 1024px) { .pag-head h2 { font-size: 32px; } } .pag-head .sub { color: var(--texto-2); font-size: 15px; margin-top: 4px; } .pag-head .sub strong { color: var(--amarillo-suave); } .chip-fecha { display: flex; align-items: center; gap: 6px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 6px 10px; color: var(--texto-2); font-size: 12.5px; font-variant-numeric: tabular-nums; box-shadow: var(--sombra); } .chip-fecha .ms { font-size: 16px; } /* ---- Tarjetas KPI ---- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; } @media (min-width: 768px) { .kpis { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); border-left-width: 4px; padding: 14px; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kpi .et { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--etiqueta); } .kpi .et .ms { font-size: 15px; } .kpi .val { font-family: var(--titulo); font-size: 26px; font-weight: 700; line-height: 1.1; } .kpi .extra { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; } .kpi .mini-barra { width: 100%; height: 6px; border-radius: 999px; background: var(--superficie-3); overflow: hidden; } .kpi .mini-barra > i { display: block; height: 100%; border-radius: 999px; } .strip-verde { border-left-color: var(--verde); } .strip-ambar { border-left-color: var(--naranja); } .strip-rojo { border-left-color: var(--rojo); } .strip-gris { border-left-color: var(--borde); } .strip-amarillo { border-left-color: var(--amarillo); } .tono-verde { color: var(--verde); } .tono-ambar { color: var(--naranja); } .tono-rojo { color: var(--rojo); } /* ---- Secciones / paneles ---- */ .seccion-tit { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; font-size: 18px; font-weight: 700; } .seccion-tit .izq { display: flex; align-items: center; gap: 8px; font-family: var(--titulo); } .seccion-tit .ms { color: var(--amarillo); font-size: 22px; } .panel { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra); overflow: hidden; } .panel.strip-verde, .panel.strip-ambar, .panel.strip-rojo, .panel.strip-amarillo { border-left-width: 4px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-family: var(--titulo); font-weight: 600; font-size: 15px; } .panel-head .ms { font-size: 20px; color: var(--amarillo); vertical-align: -4px; margin-right: 6px; } .panel-body { padding: 14px; } /* ---- Mosaico de módulos (Inicio) ---- */ .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } @media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, 1fr); } } a.tile2 { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); min-height: 112px; padding: 14px; box-shadow: var(--sombra); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } a.tile2:hover { background: var(--superficie-3); border-color: var(--amarillo); } a.tile2 .ms { font-size: 32px; color: var(--texto-2); } a.tile2:hover .ms { color: var(--amarillo); } a.tile2 .tit { font-weight: 700; font-size: 14px; } a.tile2 .sub { font-size: 11.5px; color: var(--texto-2); } a.tile2.principal { grid-column: span 2; align-items: flex-start; text-align: left; background: var(--amarillo); border-color: var(--amarillo); color: var(--sobre-amarillo); overflow: hidden; } a.tile2.principal .ms { color: var(--sobre-amarillo); } a.tile2.principal .tit { font-family: var(--titulo); font-size: 19px; } a.tile2.principal .sub { color: var(--sobre-amarillo); opacity: .8; } a.tile2.principal .fondo { position: absolute; right: -14px; bottom: -18px; font-size: 96px; opacity: .18; pointer-events: none; } a.tile2 .badge { position: absolute; top: 8px; right: 10px; background: var(--rojo-fondo); color: var(--sobre-rojo-fondo); font-size: 12px; font-weight: 700; min-width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 999px; padding: 0 6px; } /* ---- Tablas ---- */ .tabla-scroll { overflow-x: auto; } table.t2 { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; } table.t2 th { text-align: left; padding: 10px 12px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--etiqueta); background: var(--superficie-3); border-bottom: 1px solid var(--borde); white-space: nowrap; } table.t2 td { padding: 9px 12px; border-bottom: 1px solid var(--borde); vertical-align: middle; } table.t2 tr:last-child td { border-bottom: none; } table.t2 tr:hover td { background: var(--superficie-3); } .dot2 { display: inline-block; width: 10px; height: 10px; border-radius: 999px; vertical-align: -1px; } /* Barra real vs esperado (tabla de frentes) */ .barra-prog2 { position: relative; height: 10px; min-width: 120px; background: var(--superficie-3); border-radius: 999px; overflow: hidden; } .barra-prog2 .real { position: absolute; inset: 0 auto 0 0; background: var(--amarillo); border-radius: 999px; } .barra-prog2 .esp { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--texto-2); } /* ---- Curva S ---- */ .curva-wrap { overflow-x: auto; padding: 14px; } .curva-wrap canvas { display: block; } .leyenda2 { display: flex; flex-wrap: wrap; gap: 14px; padding: 0 14px 14px; font-size: 12px; color: var(--texto-2); } .leyenda2 i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; } /* ---- Formularios (ajustes) ---- */ body.v2 label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--etiqueta); margin: 12px 0 4px; } body.v2 input, body.v2 select, body.v2 textarea { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r); padding: 9px 10px; font: inherit; max-width: 320px; width: 100%; } body.v2 input:focus, body.v2 select:focus, body.v2 textarea:focus { outline: 2px solid var(--amarillo); outline-offset: -1px; } .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--amarillo); color: var(--sobre-amarillo); font-weight: 700; padding: 10px 16px; border-radius: var(--r); box-shadow: var(--sombra); } .btn:hover { filter: brightness(1.06); } .btn-borde { background: none; border: 1px solid var(--amarillo); color: var(--amarillo-suave); } .ok2 { color: var(--verde); font-size: 13px; margin-top: 8px; min-height: 18px; } /* ---- Compatibilidad con clases que genera el JS existente ---- */ body.v2 .mini { display: inline-flex; align-items: center; gap: 4px; background: var(--superficie-3); color: var(--texto); border: 1px solid var(--borde); border-radius: var(--r); padding: 6px 10px; font-size: 12.5px; font-weight: 600; } body.v2 .mini:hover { border-color: var(--amarillo); color: var(--amarillo-suave); } body.v2 .badge { display: inline-block; color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; vertical-align: 2px; } body.v2 .aviso { border-radius: var(--r); border: 1px solid var(--borde); padding: 10px 14px; margin-bottom: 14px; font-weight: 600; font-size: 13.5px; } body.v2 .aviso.offline { background: var(--rojo-fondo); color: var(--sobre-rojo-fondo); border-color: transparent; } body.v2 .aviso.pendiente { background: var(--amarillo); color: var(--sobre-amarillo); border-color: transparent; } body.v2 .error { color: var(--rojo); font-size: 13px; margin-top: 6px; min-height: 0; } body.v2 .ok { color: var(--verde); font-size: 13px; margin-top: 6px; min-height: 0; } body.v2 .nota { color: var(--texto-2); font-size: 12.5px; margin: 6px 0; } body.v2 .fila-plan { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } body.v2 .fila-plan select { flex: 1; min-width: 180px; max-width: none; width: auto; } body.v2 .fila-plan input[type="number"] { max-width: 120px; } body.v2 .miniaturas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } body.v2 .miniatura { position: relative; width: 96px; height: 96px; border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; } body.v2 .miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; } body.v2 .quitar-foto { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(0, 0, 0, .65); color: #fff; border-radius: 999px; font-size: 12px; line-height: 1; display: flex; align-items: center; justify-content: center; } body.v2 .w-full { max-width: none; width: 100%; } /* ---- Pantalla Reportar ---- */ .rep-grid { display: grid; gap: 20px; align-items: start; } @media (min-width: 1100px) { .rep-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr); } } .rep-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .form-2col { display: grid; grid-template-columns: 1fr; gap: 0 16px; } @media (min-width: 640px) { .form-2col { grid-template-columns: 1fr 1fr; } .form-2col .col-todo { grid-column: 1 / -1; } } .sub-panel { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); padding: 12px; margin-top: 14px; } .sub-panel h3 { font-size: 14px; font-weight: 700; margin: 0 0 2px; font-family: var(--cuerpo); } .foto-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 96px; height: 96px; border: 2px dashed var(--borde); border-radius: var(--r); background: var(--superficie-2); color: var(--texto-2); font-size: 12px; font-weight: 700; } .foto-btn .ms { font-size: 26px; color: var(--amarillo); } .foto-btn:hover { border-color: var(--amarillo); color: var(--texto); } .ppc-caja { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); padding: 12px; margin-top: 12px; } .ppc-caja .fila { display: flex; align-items: flex-end; justify-content: space-between; } .ppc-caja .num { font-family: var(--titulo); font-size: 28px; font-weight: 700; } .acciones-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; border-top: 1px solid var(--borde); margin-top: 16px; padding-top: 14px; } .fotos-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; } /* Estado vacío de materiales: visible solo mientras la tabla está oculta (display:none inline) */ .mat-vacio { display: none; } #tablaMatForm[style*="none"] + .mat-vacio { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 1px dashed var(--borde); border-radius: var(--r); background: var(--superficie-2); padding: 16px; margin-top: 10px; text-align: center; color: var(--texto-2); font-size: 13px; } .mat-vacio .ms { font-size: 30px; color: var(--borde); } .mat-vacio p { margin: 0; } /* Reportar en el celular (mockup): plan del día primero, fotos 2×, acciones a lo ancho */ @media (max-width: 1099px) { .rep-grid .rep-col { display: contents; } /* los paneles pasan a ser hijos directos de la rejilla */ #panelPlanDia { order: -1; } .fotos-botones { display: grid; grid-template-columns: 1fr 1fr; } .fotos-botones .foto-btn { width: 100%; height: 84px; } .rep-grid .acciones-form { flex-direction: column-reverse; } .rep-grid .acciones-form .btn, .rep-grid .acciones-form .mini { width: 100%; justify-content: center; min-height: 48px; } } /* ---- Tarjetas de partidas en atraso (Tablero) ---- */ .atrasos-lista { display: flex; flex-direction: column; gap: 10px; padding: 14px; } .atraso-card { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); border-left: 4px solid var(--naranja); padding: 12px 14px; } .atraso-card .cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; } .atraso-card .tit { font-weight: 700; font-size: 14px; } .atraso-card .frente-chip { background: var(--superficie-3); border-radius: var(--r); padding: 2px 8px; font-size: 11.5px; color: var(--texto-2); white-space: nowrap; flex: none; } .atraso-card .datos { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; gap: 10px; } .atraso-card .datos .et { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--etiqueta); } .atraso-card .datos .vl { font-variant-numeric: tabular-nums; font-size: 13.5px; } .atraso-card .brecha { font-family: var(--titulo); font-size: 20px; font-weight: 700; color: var(--naranja); } /* ---- Fila de ajustes (Tablero) ---- */ .ajustes-fila { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; } .ajustes-fila > div { display: flex; flex-direction: column; } .ajustes-fila label { margin: 0 0 4px; } .ajustes-fila input { min-width: 150px; } /* ---- Avance por niveles (árbol acordeón) ---- */ details.niv { border: 1px solid var(--borde); border-left-width: 4px; border-radius: var(--r); background: var(--superficie); box-shadow: var(--sombra); margin-bottom: 10px; overflow: hidden; } details.niv > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 14px; } details.niv > summary::-webkit-details-marker { display: none; } details.niv > summary:hover { background: var(--superficie-3); } details.niv[open] > summary { border-bottom: 1px solid var(--borde); } .niv-chev { transition: transform .2s; color: var(--texto-2); font-size: 20px; flex: none; } details.niv[open] > summary .niv-chev { transform: rotate(90deg); } .niv-id { min-width: 150px; } .niv-etq { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amarillo-suave); } details.niv.niv-sistema .niv-etq { color: var(--verde); } .niv-nom { font-family: var(--titulo); font-weight: 700; font-size: 16px; } details.niv.niv-sistema .niv-nom { font-size: 14px; } .niv-zona { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 14px; } .niv-datos { flex: 1; } .niv-cifras { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; } .niv-pista { position: relative; height: 6px; background: var(--superficie-3); border-radius: 999px; } .niv-pista .fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; } .niv-pista .marca { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--amarillo); } .niv-spi { text-align: right; min-width: 66px; font-variant-numeric: tabular-nums; } .niv-spi .et { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--etiqueta); } .niv-spi .vl { font-family: var(--titulo); font-size: 18px; font-weight: 700; } .niv-hijos { padding: 12px 14px 12px 28px; background: var(--superficie-2); } .niv-frente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 10px; border-radius: var(--r); } .niv-frente:hover { background: var(--superficie-3); } .niv-frente .nom { font-size: 13.5px; min-width: 160px; } .niv-frente .niv-pista { flex: 1; min-width: 140px; height: 4px; } .niv-frente .cifras { font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .leyenda-panel { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); box-shadow: var(--sombra); padding: 12px 14px; margin-bottom: 18px; font-size: 12.5px; color: var(--texto-2); } .leyenda-panel .cuad { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 6px; } /* ---- Grid genérico de dos paneles (colapsa a 1 columna en móvil) ---- */ .grid-2col { display: grid; gap: 20px; align-items: start; } @media (min-width: 1024px) { .grid-2col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .grid-2col.col-1-1 { grid-template-columns: 1fr 1fr; } .grid-2col.col-8-4 { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .grid-2col.col-4-8 { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } } /* ---- Pestañas ---- */ .tabs2 { display: flex; border-bottom: 1px solid var(--borde); margin-bottom: 16px; overflow-x: auto; } .tab2 { padding: 10px 18px; font-weight: 700; font-size: 14px; color: var(--texto-2); border-bottom: 2px solid transparent; white-space: nowrap; } .tab2:hover { color: var(--texto); background: var(--superficie-3); } .tab2.activo { color: var(--amarillo-suave); border-bottom-color: var(--amarillo); background: var(--superficie-2); } /* ---- Control segmentado (tareo: Día / Medio / Faltó) ---- */ .seg { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; } .seg button { padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--texto-2); background: var(--superficie-2); } .seg button + button { border-left: 1px solid var(--borde); } .seg button:hover { background: var(--superficie-3); } .seg button.activo.as-dia { background: rgba(52, 211, 153, .18); color: var(--verde); } .seg button.activo.as-medio { background: rgba(255, 179, 25, .18); color: var(--amarillo-suave); } .seg button.activo.as-no { background: rgba(249, 115, 22, .18); color: var(--naranja); } /* ---- Píldora de ratio/estado en tablas ---- */ .pill { display: inline-block; padding: 3px 10px; border-radius: var(--r); font-size: 12px; font-weight: 700; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; } /* ---- Miniaturas de foto en tablas ---- */ a.foto-thumb { display: inline-block; width: 34px; height: 34px; vertical-align: middle; border: 1px solid var(--borde); border-radius: var(--r); overflow: hidden; background: var(--superficie-3); margin-right: 4px; } a.foto-thumb:hover { border-color: var(--amarillo); } a.foto-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .sin-foto { color: var(--texto-2); font-size: 18px; } /* ---- Detalles plegables (configuración) ---- */ body.v2 details.plegable summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; font-family: var(--titulo); font-weight: 600; font-size: 15px; } body.v2 details.plegable summary::-webkit-details-marker { display: none; } body.v2 details.plegable summary .ms.flecha { transition: transform .2s; } body.v2 details.plegable[open] summary .ms.flecha { transform: rotate(180deg); } /* ---- Impresión (parte diario y similares) ---- */ @media print { #lateral2, .topbar, #navInferior, .no-print { display: none !important; } body.v2 { background: #fff !important; color: #000 !important; } .contenido { margin: 0 !important; } main.v2main { padding: 0 !important; } .panel { border: none !important; box-shadow: none !important; } body.v2 textarea { border: none !important; background: #fff !important; color: #000 !important; } } /* ---- Rejilla de permisos por rol (usuarios.html) ---- */ body.v2 .permisos-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 14px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: var(--r); padding: 12px; } body.v2 .permisos-check .chk { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; text-transform: none; letter-spacing: 0; margin: 0; color: var(--texto); } body.v2 .permisos-check .chk input { width: 16px; height: 16px; max-width: none; padding: 0; accent-color: var(--amarillo); flex: none; } body.v2 .permisos-check .chk:hover { color: var(--amarillo-suave); } /* Avatar de iniciales en tablas */ .avatar-ini { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r); flex: none; background: var(--superficie-3); border: 1px solid var(--borde); font-size: 11px; font-weight: 700; color: var(--amarillo-suave); } /* ---- Árbol de selección de frentes (montarArbolFrentes de comun.js) ---- */ body.v2 .botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; } body.v2 .card-resumen { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r); padding: 10px 14px; margin: 10px 0; box-shadow: var(--sombra); } body.v2 .arbol { margin-top: 6px; } body.v2 .arb-fila { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r); font-size: 13px; flex-wrap: wrap; } body.v2 .arb-fila:hover { background: var(--superficie-3); } body.v2 .arb-fila.lvl-1 { --c: #7fb3ff; } body.v2 .arb-fila.lvl-2 { --c: #4ade80; } body.v2 .arb-fila.lvl-3 { --c: #ffba3f; } body.v2 .arb-fila.lvl-4 { --c: #c4a5ff; } body.v2 .arb-fila.lvl-5 { --c: #ff9a8a; } body.v2 .arb-fila.lvl-6 { --c: #67e8f9; } html[data-tema="claro"] body.v2 .arb-fila.lvl-1 { --c: #0b3d91; } html[data-tema="claro"] body.v2 .arb-fila.lvl-2 { --c: #0f7b52; } html[data-tema="claro"] body.v2 .arb-fila.lvl-3 { --c: #8a4b00; } html[data-tema="claro"] body.v2 .arb-fila.lvl-4 { --c: #7a1fa2; } html[data-tema="claro"] body.v2 .arb-fila.lvl-5 { --c: #9e1c1c; } html[data-tema="claro"] body.v2 .arb-fila.lvl-6 { --c: #0e6b73; } body.v2 .arb-tog { padding: 0 4px; color: var(--texto-2); font-size: 13px; } body.v2 .arb-tog-sp { display: inline-block; width: 18px; } body.v2 .arb-chk { width: 16px; height: 16px; max-width: none; padding: 0; accent-color: var(--amarillo); flex: none; } body.v2 .arbol-cod { color: var(--c, var(--texto-2)); font-weight: 700; white-space: nowrap; } body.v2 .arbol-desc { flex: 1; min-width: 160px; } body.v2 .arbol-desc .arb-cnt { color: var(--texto-2); font-style: normal; } body.v2 .arbol-meta { color: var(--texto-2); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } body.v2 .arb-hijos { margin-left: 16px; border-left: 1px solid var(--borde); padding-left: 6px; } body.v2 .arb-hijos.colapsado { display: none; } /* ---- Pantallas de acceso (login, registro, recuperar, plataforma) ---- */ /* Guarda: reglas con display (p. ej. .acceso) no deben anular el atributo hidden */ body.v2 [hidden] { display: none !important; } .acceso { flex: 1; display: flex; align-items: center; justify-content: center; padding: 32px 16px; } .acceso-card { width: 100%; max-width: 420px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--r-lg); border-top: 3px solid var(--amarillo); box-shadow: var(--sombra); padding: 28px 26px 24px; } .acceso-marca { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 18px; } .acceso-marca .cubo { width: 44px; height: 44px; border-radius: var(--r); flex: none; background: var(--amarillo); color: var(--sobre-amarillo); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); } .acceso-marca .cubo .ms { font-size: 26px; } .acceso-marca strong { font-family: var(--titulo); font-size: 20px; color: var(--amarillo-suave); display: block; line-height: 1.15; } .acceso-marca small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--etiqueta); display: block; } .acceso-card h1 { font-size: 21px; text-align: center; } .acceso-sub { text-align: center; color: var(--texto-2); font-size: 13.5px; margin: 6px 0 10px; } .acceso-card input, .acceso-card select { max-width: none; } .acceso-card .btn { width: 100%; justify-content: center; margin-top: 18px; } .acceso-links { text-align: center; margin-top: 16px; font-size: 13px; color: var(--texto-2); } .acceso-links a { color: var(--amarillo-suave); font-weight: 600; } .acceso-links a:hover { text-decoration: underline; } /* ---- Estados accesibles ---- */ body.v2 :focus-visible { outline: 2px solid var(--amarillo); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .lat2-link, a.tile2, .btn-icono, .ninf-item { transition: background .15s, color .15s, border-color .15s; } }