/* =========================================================================== HIDENESA · Liquidación de variables Tema claro / oscuro mediante variables CSS. El modo se fija con el atributo data-tema en ("claro" | "oscuro"); sin atributo se sigue al sistema. =========================================================================== */ :root { color-scheme: light; --azul: #10457e; --azul-claro: #e8f0fa; --azul-oscuro: #0a2d52; --gris: #f4f6f9; --superficie: #ffffff; --superficie-2: #fbfcfe; --gris-borde: #d9dee5; --texto: #1f2733; --texto-suave: #6b7686; --verde: #1c7c4a; --verde-suave: #e3f4ea; --rojo: #c0392b; --rojo-suave: #fdeceb; --ambar: #b57608; --ambar-suave: #fdf3e0; --violeta: #5b4b9e; --violeta-suave: #eeebf8; --teal: #0d7d8a; --rosa: #b83280; --cob-on-bg: #37a56b; --cob-on-tx: #06331d; --cob-off-bg: #dce1e8; --cob-off-tx: #5b6472; --lateral-fondo: #0a2d52; --lateral-texto: #cfdcec; /* Paleta de tipos de día (pastel). Espeja los colores guardados en tipos_actividad.color, que son los que usa el Excel. */ --dia-normal: #f2f6fb; --dia-feriado: #d8f3e3; --dia-descanso: #fce1ec; --dia-vacaciones: #dcebfb; --dia-enfermedad: #fbe7cc; --dia-licencia: #e8dffa; --dia-otro: #efefef; --dia-falta: #f5c2c7; --dia-texto: #1f2733; --radio: 8px; --sombra: 0 1px 3px rgba(16, 40, 70, .12); --login-grad: linear-gradient(135deg, #e8f0fa, #cfe0f4); } :root[data-tema="oscuro"] { color-scheme: dark; --azul: #5b9be0; --azul-claro: #17314c; --azul-oscuro: #0d1b2a; --gris: #0f1721; --superficie: #172232; --superficie-2: #1b2838; --gris-borde: #2b3a4d; --texto: #e4eaf2; --texto-suave: #93a2b5; --verde: #5cc98d; --verde-suave: #16362a; --rojo: #f08076; --rojo-suave: #3b1f1d; --ambar: #e0aa4e; --ambar-suave: #3a2d18; --violeta: #a795e8; --violeta-suave: #262147; --teal: #4fc4d1; --rosa: #e879b8; --cob-on-bg: #2e7d54; --cob-on-tx: #d7ffe9; --cob-off-bg: #28323f; --cob-off-tx: #8ea0b4; --lateral-fondo: #0d1b2a; --lateral-texto: #b8c7da; /* Versiones oscuras de la paleta: mismo significado, contraste adecuado */ --dia-normal: #24303f; --dia-feriado: #235c40; --dia-descanso: #5b2b3d; --dia-vacaciones: #234f77; --dia-enfermedad: #5c4620; --dia-licencia: #3f3170; --dia-otro: #2b3542; --dia-falta: #5c2530; --dia-texto: #eef2f8; --sombra: 0 1px 3px rgba(0, 0, 0, .5); --login-grad: linear-gradient(135deg, #0d1b2a, #17222f); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) { color-scheme: dark; --azul: #5b9be0; --azul-claro: #17314c; --azul-oscuro: #0d1b2a; --gris: #0f1721; --superficie: #172232; --superficie-2: #1b2838; --gris-borde: #2b3a4d; --texto: #e4eaf2; --texto-suave: #93a2b5; --verde: #5cc98d; --verde-suave: #16362a; --rojo: #f08076; --rojo-suave: #3b1f1d; --ambar: #e0aa4e; --ambar-suave: #3a2d18; --violeta: #a795e8; --violeta-suave: #262147; --teal: #4fc4d1; --rosa: #e879b8; --cob-on-bg: #2e7d54; --cob-on-tx: #d7ffe9; --cob-off-bg: #28323f; --cob-off-tx: #8ea0b4; --lateral-fondo: #0d1b2a; --lateral-texto: #b8c7da; --dia-normal: #24303f; --dia-feriado: #235c40; --dia-descanso: #5b2b3d; --dia-vacaciones: #234f77; --dia-enfermedad: #5c4620; --dia-licencia: #3f3170; --dia-otro: #2b3542; --dia-falta: #5c2530; --dia-texto: #eef2f8; --sombra: 0 1px 3px rgba(0, 0, 0, .5); --login-grad: linear-gradient(135deg, #0d1b2a, #17222f); } } * { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Roboto, system-ui, sans-serif; font-size: 14px; color: var(--texto); background: var(--gris); transition: background-color .15s ease, color .15s ease; } a { color: var(--azul); } /* ---------- Login (inspirado en Mant. Plantas) ---------- */ .login-fondo { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--login-grad); } .login-wrap { width: min(430px, 94vw); } .login-caja { background: var(--superficie); border-radius: 18px; padding: 34px 32px; box-shadow: 0 18px 50px rgba(10, 30, 60, .28); } .login-cab { text-align: center; margin-bottom: 26px; } .login-logo { height: 76px; width: auto; margin: 0 auto 14px; display: block; } .login-cab h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--texto); } .login-cab p.sub { margin: 6px 0 0; color: var(--texto-suave); font-size: 13px; } .login-form { display: flex; flex-direction: column; gap: 18px; } .login-form .campo { margin: 0; } .login-form label { display: block; font-size: 13px; font-weight: 600; color: var(--texto); margin-bottom: 6px; } .login-form input { width: 100%; padding: 12px 14px; font-size: 14px; border: 1px solid var(--gris-borde); border-radius: 10px; background: var(--superficie-2); color: var(--texto); transition: border-color .15s, box-shadow .15s; } .login-form input:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px color-mix(in srgb, var(--azul) 25%, transparent); } .login-boton { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; margin-top: 2px; font-size: 15px; font-weight: 600; color: #fff; background: var(--azul); border: none; border-radius: 10px; cursor: pointer; transition: background .15s, opacity .15s; } .login-boton:hover { background: var(--azul-oscuro); } .login-boton:disabled { opacity: .6; cursor: not-allowed; } :root[data-tema="oscuro"] .login-boton { color: var(--azul-oscuro); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .login-boton { color: var(--azul-oscuro); } } .login-pie-logo { display: flex; justify-content: center; margin-top: 24px; } .login-lobos { height: 46px; width: auto; opacity: .6; } .login-pie { margin-top: 18px; text-align: center; color: var(--texto-suave); font-size: 12px; } .login-pie p { margin: 2px 0; } .login-pie .fuerte { font-weight: 600; color: var(--texto); } /* ---------- Layout (estilo Mant. Plantas) ---------- */ .app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; background: var(--gris); } /* Barra lateral clara, con logo arriba, menú agrupado y pie con logo + versión */ .lateral { background: var(--superficie); border-right: 1px solid var(--gris-borde); display: flex; flex-direction: column; overflow: hidden; } .lateral .marca { min-height: 72px; padding: 16px 24px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--gris-borde); } .lateral .marca-logo { height: 52px; width: auto; } .lateral nav { flex: 1; overflow-y: auto; padding: 16px 14px; } .menu-grupo { margin-bottom: 18px; } .menu-grupo-tit { margin: 0 0 6px; padding: 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-suave); white-space: nowrap; } .menu-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin-bottom: 2px; border-radius: 10px; color: var(--texto); text-decoration: none; font-size: 14px; font-weight: 500; transition: background .15s, color .15s, box-shadow .15s; } .menu-item:hover { background: var(--gris); } .menu-item.activo { background: #3b82f6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, .35); } .menu-item.activo:hover { background: #2f74e0; } .menu-ico { width: 20px; flex-shrink: 0; text-align: center; font-size: 15px; } .menu-lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Menú con submenús (p. ej. "Planillas del período"). */ .menu-grupo-padre { margin-bottom: 2px; } .menu-padre { width: 100%; background: none; border: none; cursor: pointer; font: inherit; } .menu-caret { margin-left: auto; font-size: 11px; color: var(--texto-suave); transition: transform .15s; } .menu-padre.abierto .menu-caret { transform: rotate(180deg); } .menu-sub { display: none; margin: 2px 0 4px; padding-left: 8px; border-left: 2px solid var(--gris-borde); } .menu-sub.abierto { display: block; } .menu-subitem { font-size: 13px; } .lateral .pie { border-top: 1px solid var(--gris-borde); padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .lateral .pie-logo { height: 44px; width: auto; opacity: .6; transition: transform .2s; } .lateral .pie-logo:hover { transform: scale(1.08); } .lateral .pie-version { font-size: 11px; color: var(--texto-suave); } .principal { display: flex; flex-direction: column; min-width: 0; } /* Topbar: título a la izquierda; a la derecha usuario, campana, tema y salir */ .barra { background: var(--superficie); border-bottom: 1px solid var(--gris-borde); padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .barra h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .barra-derecha { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .barra .usuario { text-align: right; line-height: 1.25; } .barra .usuario strong { display: block; font-size: 13px; font-weight: 600; color: var(--texto); } .barra .usuario span { font-size: 12px; color: var(--texto-suave); } .icono-btn { width: 38px; height: 38px; position: relative; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 10px; background: var(--gris); color: var(--texto); cursor: pointer; font-size: 16px; transition: background .15s; } .icono-btn:hover { background: var(--gris-borde); } #contador-notif { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--rojo); color: #fff; font-size: 10px; line-height: 16px; font-weight: 700; text-align: center; } #contador-notif:empty { display: none; } .salir-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: none; border-radius: 10px; background: var(--rojo-suave); color: var(--rojo); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter .15s; } .salir-btn:hover { filter: brightness(.96); } .contenido { padding: 28px; flex: 1; } /* ---------- Componentes ---------- */ .tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 22px; } .tarjeta { background: var(--superficie); border: 1px solid var(--gris-borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); } .tarjeta .valor { font-size: 28px; font-weight: 600; line-height: 1.1; } .tarjeta .etiqueta { font-size: 12px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; margin-top: 4px; } .tarjeta.alerta .valor { color: var(--rojo); } .tarjeta.ok .valor { color: var(--verde); } .tarjeta.espera .valor { color: var(--ambar); } .panel { background: var(--superficie); border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: 20px; overflow: hidden; } .panel > header { padding: 12px 16px; border-bottom: 1px solid var(--gris-borde); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--superficie-2); } .panel > header h2 { margin: 0; font-size: 15px; flex: 1; } .panel .cuerpo { padding: 16px; } .panel .cuerpo.sin-relleno { padding: 0; } button, .boton { font: inherit; cursor: pointer; border-radius: 6px; border: 1px solid transparent; padding: 8px 14px; background: var(--azul); color: #fff; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } button:hover, .boton:hover { filter: brightness(1.08); } button:disabled { opacity: .5; cursor: not-allowed; } button.secundario, .boton.secundario { background: var(--superficie); color: var(--azul); border-color: var(--gris-borde); } button.secundario:hover { background: var(--azul-claro); } button.exito { background: var(--verde); color: #fff; } button.peligro { background: var(--rojo); color: #fff; } button.chico { padding: 4px 9px; font-size: 12px; } :root[data-tema="oscuro"] button.exito, :root[data-tema="oscuro"] button.peligro { color: #0f1721; } input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--gris-borde); border-radius: 6px; background: var(--superficie); color: var(--texto); width: 100%; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--azul-claro); border-color: var(--azul); } /* Lista desplegable nativa: que siga el tema (buen contraste en oscuro). */ select option, select optgroup { background: var(--superficie); color: var(--texto); } input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--texto-suave); } label { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave); margin-bottom: 4px; } .campo { margin-bottom: 14px; } .grilla-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } /* Parámetros del sistema: cada grupo en su propio recuadro con color en el contorno. Los recuadros se acomodan varios por línea; los "anchos" ocupan toda la fila. */ .param-filas { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; } .param-fila { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; } .param-grupo { flex: 1 1 300px; border: 1.5px solid var(--acento-grupo, var(--gris-borde)); border-radius: 10px; padding: 8px 16px 16px; margin: 0; min-width: 0; background: color-mix(in srgb, var(--acento-grupo, var(--gris-borde)) 5%, var(--superficie)); } .param-grupo > legend { padding: 3px 12px; margin-left: 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--acento-grupo, var(--texto-suave)); border: 1.5px solid var(--acento-grupo, var(--gris-borde)); border-radius: 999px; background: var(--superficie); } /* Campos más compactos: no se estiran a todo lo ancho aunque el grupo tenga uno solo. */ .param-grupo .grilla-campos { grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); } .param-grupo.ancho .grilla-campos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } /* Reportes: fila del desglose seleccionada con su detalle desplegado debajo. */ tr.seleccionada > td { background: color-mix(in srgb, var(--azul) 12%, var(--superficie)); } tr.fila-detalle > td { border-top: none; } /* Cobertura de planta: grilla personas × días (tipo Gantt). */ .cob-tabla { border-collapse: separate; border-spacing: 0; font-size: 13px; } .cob-tabla th, .cob-tabla td { border: 1px solid var(--gris-borde); padding: 0; } .cob-fija { position: sticky; left: 0; z-index: 2; background: var(--superficie); text-align: left; min-width: 380px; white-space: nowrap; padding: 5px 12px !important; } .cob-esq { z-index: 3; } .cob-persona { vertical-align: middle; } .cob-linea { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .cob-nombre { font-size: 14px; white-space: nowrap; } .cob-inicio { display: flex; align-items: center; gap: 4px; } .cob-ancla { font-size: 12px; padding: 2px 4px; max-width: 140px; } .cob-mes { background: var(--gris); font-weight: 700; text-align: center; padding: 4px 8px !important; white-space: nowrap; font-size: 13px; } .cob-numdia { width: 34px; min-width: 34px; text-align: center; color: var(--texto-suave); font-size: 12px; padding: 3px 0 !important; } .cob-cell { width: 34px; min-width: 34px; height: 34px; text-align: center; font-size: 13px; font-weight: 700; } .cob-on { background: var(--cob-on-bg); color: var(--cob-on-tx); } .cob-off { background: var(--cob-off-bg); color: var(--cob-off-tx); } .cob-finde.cob-numdia { background: color-mix(in srgb, var(--texto-suave) 22%, var(--superficie)); } .cob-off.cob-finde { background: color-mix(in srgb, var(--cob-off-bg) 78%, var(--texto-suave)); } .cob-feriado-h { background: color-mix(in srgb, var(--verde) 40%, var(--superficie)); font-size: 11px; } .cob-feriado { box-shadow: inset 0 3px 0 color-mix(in srgb, var(--verde) 70%, transparent); } .cob-total th, .cob-total td { font-weight: 700; } .cob-conteo { color: var(--texto); } .cob-cero { background: color-mix(in srgb, var(--rojo) 45%, var(--superficie)); color: #fff; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 7px 9px; border-bottom: 1px solid var(--gris-borde); text-align: left; vertical-align: middle; } th { background: var(--superficie-2); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); position: sticky; top: 0; z-index: 2; } tbody tr:hover { background: var(--azul-claro); } td.num, th.num { text-align: center; } .tabla-scroll { overflow: auto; max-height: 70vh; } .etiqueta-estado { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 600; white-space: nowrap; } .e-BORRADOR { background: var(--gris); color: var(--texto-suave); } .e-CARGADO { background: var(--ambar-suave); color: var(--ambar); } .e-APROBADO { background: var(--azul-claro); color: var(--azul); } .e-VALIDADO, .e-VALIDADA, .e-CERRADA, .e-LIQUIDADA { background: var(--verde-suave); color: var(--verde); } .e-RECHAZADO { background: var(--rojo-suave); color: var(--rojo); } .e-OBSERVADO, .e-OBSERVADA { background: var(--violeta-suave); color: var(--violeta); } .e-ABIERTA { background: var(--gris); color: var(--texto-suave); } .e-ENVIADA, .e-APROBADA { background: var(--azul-claro); color: var(--azul); } /* ---------- Colores por tipo de día ---------- Paleta pastel del Excel en modo claro; versiones oscurecidas y con buen contraste en modo oscuro (ambas definidas en las variables --dia-*). */ .dia-NORMAL { background: var(--dia-normal) !important; } .dia-FERIADO { background: var(--dia-feriado) !important; } .dia-DESCANSO { background: var(--dia-descanso) !important; } .dia-VACACIONES { background: var(--dia-vacaciones) !important; } .dia-ENFERMEDAD { background: var(--dia-enfermedad) !important; } .dia-LICENCIA { background: var(--dia-licencia) !important; } .dia-OTRO { background: var(--dia-otro) !important; } .dia-FALTA { background: var(--dia-falta) !important; } /* El texto sobre el color de día sigue el tema (oscuro en claro, claro en oscuro) */ .grilla-carga tr[class*="dia-"] td, .grilla-carga tr[class*="dia-"] td.dia, .grilla-carga tr[class*="dia-"] td.dia small, .celda-dia[class*="dia-"], .celda-dia[class*="dia-"] .num, .celda-dia[class*="dia-"] .act, .celda-dia[class*="dia-"] .horas { color: var(--dia-texto) !important; } .grilla-carga tr[class*="dia-"] input, .grilla-carga tr[class*="dia-"] select, .grilla-carga tr[class*="dia-"] textarea { background: rgba(255, 255, 255, .62); color: #1f2733; border-color: rgba(0, 0, 0, .2); } .grilla-carga tr[class*="dia-"] input::placeholder, .grilla-carga tr[class*="dia-"] textarea::placeholder { color: rgba(31, 39, 51, .5); } /* En modo oscuro los campos sobre el color de día van oscuros con texto claro */ :root[data-tema="oscuro"] .grilla-carga tr[class*="dia-"] input, :root[data-tema="oscuro"] .grilla-carga tr[class*="dia-"] select, :root[data-tema="oscuro"] .grilla-carga tr[class*="dia-"] textarea { background: var(--superficie-2); color: var(--texto); border-color: rgba(255, 255, 255, .22); } :root[data-tema="oscuro"] .grilla-carga tr[class*="dia-"] input::placeholder, :root[data-tema="oscuro"] .grilla-carga tr[class*="dia-"] textarea::placeholder { color: var(--texto-suave); } @media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .grilla-carga tr[class*="dia-"] input, :root:not([data-tema="claro"]) .grilla-carga tr[class*="dia-"] select, :root:not([data-tema="claro"]) .grilla-carga tr[class*="dia-"] textarea { background: var(--superficie-2); color: var(--texto); border-color: rgba(255, 255, 255, .22); } :root:not([data-tema="claro"]) .grilla-carga tr[class*="dia-"] input::placeholder, :root:not([data-tema="claro"]) .grilla-carga tr[class*="dia-"] textarea::placeholder { color: var(--texto-suave); } } .muestra-color { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--gris-borde); vertical-align: middle; } .leyenda-dias { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 12px; } .leyenda-dias span.item { display: inline-flex; align-items: center; gap: 6px; } /* ---------- Grilla de carga ---------- */ .grilla-carga { font-size: 12.5px; } .grilla-carga th, .grilla-carga td { padding: 4px 5px; } .grilla-carga input, .grilla-carga select, .grilla-carga textarea { padding: 4px 6px; font-size: 12.5px; } .grilla-carga tbody tr:hover { background: inherit; } .grilla-carga tbody tr:hover td { filter: brightness(.97); } :root[data-tema="oscuro"] .grilla-carga tbody tr:hover td { filter: brightness(1.15); } .grilla-carga tr.finde td.dia { font-style: italic; } .grilla-carga tr.bloqueado td { opacity: .62; } .grilla-carga tr.sucia td:first-child { box-shadow: inset 3px 0 0 var(--ambar); } .grilla-carga td.dia { white-space: nowrap; font-weight: 600; color: var(--dia-texto); } .grilla-carga td.dia small { display: block; font-weight: 400; color: var(--texto-suave); } .grilla-carga td { color: var(--dia-texto); } /* Desplegable con checkboxes (plantas asignadas) */ .selector-multiple { position: relative; } .selector-multiple-boton { width: 100%; justify-content: space-between; font-weight: 400; } .selector-multiple-panel { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--superficie); border: 1px solid var(--gris-borde); border-radius: var(--radio); box-shadow: 0 8px 28px rgba(0, 0, 0, .25); max-height: 260px; overflow: auto; padding: 8px; } .selector-multiple-panel.oculto { display: none; } .selector-multiple-panel .titulo-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; margin: 10px 0 4px; } .selector-multiple-panel .opcion { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 5px; margin: 0; cursor: pointer; font-size: 13px; font-weight: 400; color: var(--texto); text-transform: none; letter-spacing: 0; } .selector-multiple-panel .opcion:hover { background: var(--azul-claro); } .selector-multiple-panel .opcion input { width: auto; margin: 0; flex-shrink: 0; } .selector-multiple-panel .opcion span { flex: 1; } /* Cabecera del calendario cuando se mira el de otra persona */ .panel-ajeno { border-left: 4px solid var(--azul); } .avatar-inicial { width: 44px; height: 44px; border-radius: 50%; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: .5px; flex-shrink: 0; } /* Tareas elegidas del listado, dentro de la celda "Tareas y detalle" */ .chip-tarea { display: inline-flex; align-items: center; gap: 4px; background: var(--azul-claro); color: var(--azul); border: 1px solid var(--gris-borde); border-radius: 20px; padding: 1px 4px 1px 9px; font-size: 11px; font-weight: 600; line-height: 1.5; } .chip-tarea .quitar { background: none; border: none; color: inherit; cursor: pointer; padding: 0 3px; font-size: 13px; line-height: 1; border-radius: 50%; } .chip-tarea .quitar:hover { background: var(--rojo); color: #fff; filter: none; } .col-hora { width: 78px; } .col-num { width: 66px; } .col-chk { width: 38px; text-align: center; } /* ---------- Calendario ---------- */ .calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .calendario .cabecera-dia { text-align: center; font-size: 11px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; padding: 4px 0; } .celda-dia { border: 1px solid var(--gris-borde); border-radius: 6px; background: var(--superficie); min-height: 92px; padding: 6px 7px; cursor: pointer; position: relative; color: var(--dia-texto); } .celda-dia:hover { border-color: var(--azul); } .celda-dia.vacia { background: transparent; border: none; cursor: default; } .celda-dia .num { font-weight: 700; font-size: 13px; } .celda-dia .act { font-size: 11px; color: var(--texto-suave); margin-top: 2px; line-height: 1.25; } .celda-dia .horas { font-size: 11px; margin-top: 4px; font-weight: 600; } .celda-dia .franja { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: 6px 0 0 6px; } .f-BORRADOR { background: #c8ced8; } .f-CARGADO { background: #e0a53a; } .f-APROBADO { background: #3d7fce; } .f-VALIDADO { background: #1c7c4a; } .f-RECHAZADO { background: #c0392b; } .f-OBSERVADO { background: #5b4b9e; } .celda-dia .globo { position: absolute; right: 6px; top: 6px; font-size: 11px; } /* ---------- Modal ---------- */ .fondo-modal { position: fixed; inset: 0; background: rgba(8, 16, 26, .6); display: grid; place-items: center; z-index: 50; padding: 20px; } .modal { background: var(--superficie); border-radius: 10px; width: min(760px, 96vw); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); } .modal > header { padding: 16px 20px; border-bottom: 1px solid var(--gris-borde); display: flex; align-items: center; } .modal > header h2 { margin: 0; font-size: 17px; flex: 1; } .modal .cuerpo { padding: 20px; } .modal > footer { padding: 14px 20px; border-top: 1px solid var(--gris-borde); display: flex; justify-content: flex-end; gap: 10px; background: var(--superficie-2); } /* ---------- Avisos ---------- */ .aviso { padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; border: 1px solid; } .aviso.info { background: var(--azul-claro); border-color: var(--gris-borde); color: var(--texto); } .aviso.error { background: var(--rojo-suave); border-color: var(--rojo); color: var(--rojo); } .aviso.ok { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); } .aviso.atencion { background: var(--ambar-suave); border-color: var(--ambar); color: var(--ambar); } #notificaciones-flotantes { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 100; width: min(360px, 90vw); } #notificaciones-flotantes .toast { background: var(--superficie); color: var(--texto); border-left: 4px solid var(--azul); border-radius: 6px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font-size: 13px; animation: entrar .2s ease-out; } #notificaciones-flotantes .toast.error { border-left-color: var(--rojo); } #notificaciones-flotantes .toast.ok { border-left-color: var(--verde); } @keyframes entrar { from { transform: translateY(10px); opacity: 0; } } .vacio { padding: 40px 20px; text-align: center; color: var(--texto-suave); } .pill-contador { background: var(--rojo); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; } .barra-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .barra-acciones .separador { flex: 1; } .muted { color: var(--texto-suave); font-size: 12px; } .tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--gris-borde); margin-bottom: 16px; } .tabs button { background: none; color: var(--texto-suave); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 14px; } .tabs button:hover { filter: none; color: var(--texto); } .tabs button.activo { color: var(--azul); border-bottom-color: var(--azul); font-weight: 600; } /* Organigrama */ .rama { padding-left: 22px; border-left: 2px solid var(--gris-borde); margin-left: 10px; } .nodo { padding: 6px 0; } .nodo .chip { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 20px; background: var(--azul-claro); color: var(--azul); margin-left: 6px; font-weight: 600; } @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .lateral { border-right: none; border-bottom: 1px solid var(--gris-borde); } .lateral .marca { min-height: 0; padding: 10px; } .lateral .marca-logo { height: 34px; } .lateral nav { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 8px; } .menu-grupo { margin: 0; display: flex; align-items: center; gap: 4px; } .menu-grupo-tit { display: none; } .menu-item { margin: 0; white-space: nowrap; } .menu-item.activo { box-shadow: none; } .lateral .pie { display: none; } .barra { padding: 10px 14px; } .barra h1 { font-size: 18px; } .barra .usuario, .salir-txt { display: none; } .contenido { padding: 16px; } } /* Filas alternadas (zebra) para tablas largas — mejora la legibilidad */ .rayada tbody tr:nth-child(even) { background: var(--superficie-2); } .rayada tbody tr:hover { background: var(--azul-claro); } /* Agrupamiento de "Parámetros del circuito" */ .grupo-parametros { margin-top: 18px; } .grupo-parametros:first-of-type { margin-top: 4px; } .subtitulo-parametros { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 5px; border-bottom: 1px solid var(--gris-borde); } /* Tarjetas del Tablero que llevan a un detalle al hacer clic */ .tarjeta.clickable { transition: transform .08s ease, box-shadow .08s ease, border-color .08s ease; } .tarjeta.clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 40, 70, .18); border-color: var(--azul); }