/* ========================================================================== Plantilla administrativa v2 · hoja de estilos única Todas las clases empiezan con "pl-" para no chocar con Bootstrap 4, DataTables, Select2 ni SweetAlert2 (que se cargan antes que este archivo). Cómo se personaliza un proyecto (sin tocar este archivo): azul | palma | petroleo | ambar | vino | grafito claro | oscuro (lo pone js_principal.js según el usuario) Índice 0. Fuentes (IBM Plex Sans y Plex Sans Condensed, incluidas en archivos/fuentes) 1. Variables: colores del proyecto, modo claro y modo oscuro 2. Base y utilidades 3. Botones y menús desplegables 4. Formularios 5. Estructura: menú lateral, barra superior, contenido 6. Inicio de sesión 7. Páginas, paneles y rejilla 8. Indicadores, parte del día y gráficos simples 9. Estados, etiquetas, avisos, pestañas, vacío y carga 10. Tablas y DataTables 11. Ventanas (modales de Bootstrap) 12. Select2 13. SweetAlert2 14. Componentes adicionales (ayuda emergente, pasos, archivo, progreso…) 15. Guía de componentes y módulos 16. Pantallas medianas y pequeñas 17. Impresión y movimiento reducido ========================================================================== */ /* 0. Fuentes ------------------------------------------------------------------ */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fuentes/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fuentes/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fuentes/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fuentes/ibm-plex-sans-condensed-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fuentes/ibm-plex-sans-condensed-latin-600-normal.woff2') format('woff2'); } /* 1. Variables ---------------------------------------------------------------- */ /* 1.1 Color del proyecto. Cada juego define: el color de acción (y su versión en números RGB para las transparencias), su tono al pasar el mouse, el tono para texto sobre fondo suave, el tono claro que se usa sobre el menú oscuro y el color del menú lateral. */ :root, [data-color="azul"] { --pl-marca: #1d5fd1; --pl-marca-rgb: 29, 95, 209; --pl-marca-hover: #164ead; --pl-marca-tinta: #133f8f; --pl-marca-luz: #86adf7; --pl-noche: #0e223b; --pl-noche-2: #17304f; } [data-color="palma"] { --pl-marca: #1c7a4d; --pl-marca-rgb: 28, 122, 77; --pl-marca-hover: #15623d; --pl-marca-tinta: #0f4d30; --pl-marca-luz: #7fd3a6; --pl-noche: #0f2a1f; --pl-noche-2: #1a3d2e; } [data-color="petroleo"] { --pl-marca: #0e7181; --pl-marca-rgb: 14, 113, 129; --pl-marca-hover: #0a5a67; --pl-marca-tinta: #08474f; --pl-marca-luz: #79cfdb; --pl-noche: #0b2329; --pl-noche-2: #14363e; } [data-color="ambar"] { --pl-marca: #b4530f; --pl-marca-rgb: 180, 83, 15; --pl-marca-hover: #94430b; --pl-marca-tinta: #7a3708; --pl-marca-luz: #f5b47a; --pl-noche: #2a1a10; --pl-noche-2: #3d281a; } [data-color="vino"] { --pl-marca: #9b2c4a; --pl-marca-rgb: 155, 44, 74; --pl-marca-hover: #7f223c; --pl-marca-tinta: #681b31; --pl-marca-luz: #f0a2b8; --pl-noche: #26121a; --pl-noche-2: #3a1c28; } [data-color="grafito"] { --pl-marca: #3c4a5e; --pl-marca-rgb: 60, 74, 94; --pl-marca-hover: #2c384a; --pl-marca-tinta: #232d3c; --pl-marca-luz: #b4c1d3; --pl-noche: #161b22; --pl-noche-2: #232a34; } /* 1.2 Modo claro (por defecto) */ :root { --pl-marca-suave: rgba(var(--pl-marca-rgb), .09); --pl-marca-suave-2: rgba(var(--pl-marca-rgb), .15); --pl-marca-borde: rgba(var(--pl-marca-rgb), .32); --pl-anillo: 0 0 0 3px rgba(var(--pl-marca-rgb), .22); --pl-fondo: #edf1f5; /* fondo de la aplicación */ --pl-superficie: #ffffff; /* paneles, ventanas, campos */ --pl-superficie-2: #f6f8fb; /* cabeceras de tabla y pies de panel */ --pl-superficie-3: #eaeff5; /* controles segmentados, pistas */ --pl-control: #ffffff; /* fondo de los campos */ --pl-fila-hover: rgba(var(--pl-marca-rgb), .045); --pl-titulo: #0f2036; --pl-texto: #17263b; --pl-tenue: #5a6a80; --pl-tenue-2: #8794a7; --pl-linea: #d7dfe8; --pl-linea-suave: #e7ecf2; --pl-linea-fuerte: #b9c4d2; --pl-ok: #17794f; --pl-ok-rgb: 23, 121, 79; --pl-ok-tinta: #0f5a3a; --pl-alerta: #a15c00; --pl-alerta-rgb: 196, 124, 18; --pl-alerta-tinta: #774400; --pl-peligro: #c0362a; --pl-peligro-rgb: 192, 54, 42; --pl-peligro-tinta: #8e2219; --pl-ok-suave: rgba(var(--pl-ok-rgb), .1); --pl-alerta-suave: rgba(var(--pl-alerta-rgb), .13); --pl-peligro-suave: rgba(var(--pl-peligro-rgb), .09); --pl-neutro-suave: #edf0f4; --pl-neutro-tinta: #4f5d72; /* menú lateral (siempre oscuro) */ --pl-noche-texto: #c2cfe0; --pl-noche-tenue: #8396b2; --pl-noche-linea: rgba(255, 255, 255, .08); --pl-sombra-1: 0 1px 2px rgba(16, 32, 54, .05); --pl-sombra-flota: 0 14px 34px -6px rgba(16, 32, 54, .2), 0 2px 6px rgba(16, 32, 54, .06); --pl-sombra-modal: 0 30px 70px -10px rgba(10, 24, 44, .35); --pl-velo: rgba(12, 24, 40, .55); --pl-side: 264px; --pl-side-mini: 72px; --pl-top: 60px; --pl-r-s: 7px; /* controles y botones */ --pl-r-m: 11px; /* paneles */ --pl-r-l: 15px; /* ventanas */ --pl-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; --pl-font-titulo: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Segoe UI', system-ui, Arial, sans-serif; /* nombres de la versión 1 (los módulos existentes los siguen usando) */ --pl-azul: var(--pl-marca); --pl-azul-osc: var(--pl-marca-hover); --pl-azul-suave: var(--pl-marca-suave); --pl-azul-borde: var(--pl-marca-borde); --pl-acero: #5e7899; --pl-blanco: var(--pl-superficie); --pl-gris-claro: var(--pl-superficie-2); color-scheme: light; } /* 1.3 Modo oscuro */ [data-tema="oscuro"] { --pl-marca-suave: rgba(var(--pl-marca-rgb), .2); --pl-marca-suave-2: rgba(var(--pl-marca-rgb), .3); --pl-marca-borde: rgba(var(--pl-marca-rgb), .55); --pl-marca-tinta: var(--pl-marca-luz); --pl-anillo: 0 0 0 3px rgba(var(--pl-marca-rgb), .45); --pl-fondo: #0c131d; --pl-superficie: #121b28; --pl-superficie-2: #172231; --pl-superficie-3: #1d2a3c; --pl-control: #0f1723; --pl-fila-hover: rgba(255, 255, 255, .035); --pl-titulo: #eef3f9; --pl-texto: #dbe3ed; --pl-tenue: #94a4b9; --pl-tenue-2: #6d7d93; --pl-linea: #26354a; --pl-linea-suave: #1e2b3d; --pl-linea-fuerte: #3a4c66; --pl-ok: #3fbf83; --pl-ok-rgb: 63, 191, 131; --pl-ok-tinta: #7bdcae; --pl-alerta: #e4a23e; --pl-alerta-rgb: 228, 162, 62; --pl-alerta-tinta: #f2c47c; --pl-peligro: #ee6a5e; --pl-peligro-rgb: 238, 106, 94; --pl-peligro-tinta: #f6a69e; --pl-ok-suave: rgba(var(--pl-ok-rgb), .14); --pl-alerta-suave: rgba(var(--pl-alerta-rgb), .14); --pl-peligro-suave: rgba(var(--pl-peligro-rgb), .14); --pl-neutro-suave: #1f2b3b; --pl-neutro-tinta: #a6b4c6; --pl-noche-linea: rgba(255, 255, 255, .07); --pl-sombra-1: 0 1px 2px rgba(0, 0, 0, .3); --pl-sombra-flota: 0 16px 38px -6px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .3); --pl-sombra-modal: 0 30px 80px -10px rgba(0, 0, 0, .7); --pl-velo: rgba(3, 7, 12, .7); --pl-acero: #8aa0bd; color-scheme: dark; } /* En oscuro, el botón de acción conserva un tono legible con texto blanco */ [data-tema="oscuro"][data-color="grafito"] { --pl-marca: #5a6b84; --pl-marca-rgb: 90, 107, 132; --pl-marca-hover: #6c7e98; } /* 2. Base y utilidades -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body.pl-body { margin: 0; font-family: var(--pl-font); font-size: 14px; line-height: 1.5; color: var(--pl-texto); background: var(--pl-fondo); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(.pl-body) a { color: var(--pl-marca); text-decoration: none; } [data-tema="oscuro"] :where(.pl-body) a { color: var(--pl-marca-luz); } :where(.pl-body) a:hover { text-decoration: underline; text-underline-offset: 2px; } :where(.pl-body) h1, :where(.pl-body) h2, :where(.pl-body) h3, :where(.pl-body) h4, :where(.pl-body) h5, :where(.pl-body) h6 { color: var(--pl-titulo); } :where(.pl-body) p { margin: 0 0 10px; } :where(.pl-body) hr { border: 0; border-top: 1px solid var(--pl-linea-suave); } :where(.pl-body) code { padding: 1px 6px; border-radius: 5px; background: var(--pl-superficie-2); border: 1px solid var(--pl-linea-suave); color: var(--pl-titulo); font-size: .88em; font-family: Consolas, 'SFMono-Regular', Menlo, monospace; } :where(.pl-body) ::selection { background: rgba(var(--pl-marca-rgb), .22); } :focus-visible { outline: 2px solid var(--pl-marca); outline-offset: 2px; } [data-tema="oscuro"] :focus-visible { outline-color: var(--pl-marca-luz); } /* Iconos (Feather en SVG: se dibujan con feather.replace()) */ svg.feather { width: 18px; height: 18px; flex: none; vertical-align: -3px; stroke-width: 1.9; } .pl-ico-sm, svg.feather.pl-ico-sm { width: 15px; height: 15px; } .pl-ico-lg, svg.feather.pl-ico-lg { width: 22px; height: 22px; } .pl-num { font-variant-numeric: tabular-nums; } .pl-tenue { color: var(--pl-tenue); } .pl-nw { white-space: nowrap; } .pl-der { text-align: right; } .pl-centro { text-align: center !important; } .pl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pl-mt-0 { margin-top: 0 !important; } .pl-mb-0 { margin-bottom: 0 !important; } .pl-mb-8 { margin-bottom: 8px !important; } .pl-mb-16 { margin-bottom: 16px !important; } .pl-mb-20 { margin-bottom: 20px !important; } .pl-sep { height: 1px; margin: 16px 0; border: 0; background: var(--pl-linea-suave); } .pl-auto { width: auto; } .pl-flex { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pl-ok-txt { color: var(--pl-ok); } .pl-alerta-txt { color: var(--pl-alerta); } .pl-peligro-txt { color: var(--pl-peligro); } /* 3. Botones y menús desplegables -------------------------------------------- */ .pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: var(--pl-r-s); font: inherit; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none !important; -webkit-user-select: none; user-select: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s; } .pl-btn:active:not(:disabled) { transform: translateY(1px); } .pl-btn svg.feather { width: 16px; height: 16px; vertical-align: 0; } .pl-btn:disabled, .pl-btn[disabled] { opacity: .5; cursor: not-allowed; } .pl-btn-primario { background: var(--pl-marca); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(var(--pl-marca-rgb), .35); } .pl-btn-primario:hover:not(:disabled) { background: var(--pl-marca-hover); } .pl-btn-borde { background: var(--pl-superficie); border-color: var(--pl-linea); color: var(--pl-texto) !important; box-shadow: var(--pl-sombra-1); } .pl-btn-borde:hover:not(:disabled) { border-color: var(--pl-linea-fuerte); background: var(--pl-superficie-2); } .pl-btn-borde svg.feather { color: var(--pl-tenue); } .pl-btn-suave { background: var(--pl-marca-suave); color: var(--pl-marca-tinta) !important; } .pl-btn-suave:hover:not(:disabled) { background: var(--pl-marca-suave-2); } .pl-btn-texto { background: transparent; color: var(--pl-marca) !important; padding: 0 10px; } [data-tema="oscuro"] .pl-btn-texto { color: var(--pl-marca-luz) !important; } .pl-btn-texto:hover:not(:disabled) { background: var(--pl-marca-suave); } .pl-btn-peligro { background: var(--pl-peligro); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .pl-btn-peligro:hover:not(:disabled) { filter: brightness(.9); } .pl-btn-exito { background: var(--pl-ok); color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } .pl-btn-exito:hover:not(:disabled) { filter: brightness(.92); } [data-tema="oscuro"] .pl-btn-peligro, [data-tema="oscuro"] .pl-btn-exito { color: #0c131d !important; } .pl-btn-sm { height: 32px; padding: 0 11px; font-size: 13px; gap: 6px; } .pl-btn-lg { height: 46px; padding: 0 22px; font-size: 15px; } .pl-btn-block { width: 100%; } .pl-btn.pl-cargando { position: relative; color: transparent !important; pointer-events: none; } .pl-btn.pl-cargando svg.feather { visibility: hidden; } .pl-btn.pl-cargando::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: pl-giro .7s linear infinite; } .pl-btn-borde.pl-cargando::after, .pl-btn-suave.pl-cargando::after, .pl-btn-texto.pl-cargando::after { border-color: var(--pl-linea); border-top-color: var(--pl-marca); } @keyframes pl-giro { to { transform: rotate(360deg); } } /* Botón de icono (acciones de fila y barra superior) */ .pl-btn-ico { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 7px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); background: var(--pl-superficie); color: var(--pl-tenue); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .pl-btn-ico svg.feather { width: 16px; height: 16px; vertical-align: 0; } .pl-btn-ico:hover { border-color: var(--pl-marca-borde); color: var(--pl-marca-tinta); background: var(--pl-marca-suave); } .pl-btn-ico.pl-peligro:hover { border-color: rgba(var(--pl-peligro-rgb), .45); color: var(--pl-peligro); background: var(--pl-peligro-suave); } .pl-btn-ico.pl-ok:hover { border-color: rgba(var(--pl-ok-rgb), .45); color: var(--pl-ok); background: var(--pl-ok-suave); } .pl-btn-ico:disabled { opacity: .45; cursor: not-allowed; } .pl-btn-ico + .pl-btn-ico { margin-left: 4px; } .pl-btn-txt { display: none; } /* el texto solo se ve en la vista de tarjetas (celular) */ /* Grupo de botones pegados */ .pl-btn-grupo { display: inline-flex; } .pl-btn-grupo > .pl-btn { border-radius: 0; box-shadow: none; } .pl-btn-grupo > .pl-btn + .pl-btn { margin-left: -1px; } .pl-btn-grupo > .pl-btn:first-child { border-radius: var(--pl-r-s) 0 0 var(--pl-r-s); } .pl-btn-grupo > .pl-btn:last-child { border-radius: 0 var(--pl-r-s) var(--pl-r-s) 0; } .pl-btn-grupo > .pl-btn:hover, .pl-btn-grupo > .pl-btn.activo { position: relative; z-index: 1; } .pl-btn-grupo > .pl-btn-borde.activo { background: var(--pl-marca-suave); border-color: var(--pl-marca-borde); color: var(--pl-marca-tinta) !important; } /* Menú desplegable genérico:
…
*/ .pl-drop { position: relative; display: inline-block; } .pl-drop-menu { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 1060; min-width: 214px; padding: 6px; background: var(--pl-superficie); border: 1px solid var(--pl-linea); border-radius: var(--pl-r-m); box-shadow: var(--pl-sombra-flota); } .pl-drop-menu.pl-drop-derecha { left: auto; right: 0; } .pl-drop.abierto > .pl-drop-menu { display: block; animation: pl-aparece .14s ease-out; } @keyframes pl-aparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .pl-drop-menu > a, .pl-drop-menu > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--pl-r-s); background: transparent; color: var(--pl-texto) !important; font: inherit; text-align: left; text-decoration: none !important; cursor: pointer; } .pl-drop-menu > a svg.feather, .pl-drop-menu > button svg.feather { color: var(--pl-tenue); } .pl-drop-menu > a:hover, .pl-drop-menu > button:hover { background: var(--pl-marca-suave); color: var(--pl-marca-tinta) !important; } .pl-drop-menu > a:hover svg.feather, .pl-drop-menu > button:hover svg.feather { color: var(--pl-marca-tinta); } .pl-drop-menu > .pl-drop-peligro, .pl-drop-menu > .pl-drop-peligro svg.feather { color: var(--pl-peligro) !important; } .pl-drop-menu > .pl-drop-peligro:hover { background: var(--pl-peligro-suave); } .pl-drop-sep { height: 1px; margin: 6px 4px; background: var(--pl-linea-suave); } .pl-drop-cab { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--pl-linea-suave); } .pl-drop-cab b { display: block; color: var(--pl-titulo); } .pl-drop-cab small { display: block; color: var(--pl-tenue); } /* 4. Formularios -------------------------------------------------------------- */ .pl-campo { margin-bottom: 16px; min-width: 0; } .pl-campo > label:not([class]), .pl-etiqueta { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--pl-texto); } .pl-req { color: var(--pl-peligro); font-weight: 600; } .pl-opcional { color: var(--pl-tenue-2); font-weight: 400; } .pl-control { display: block; width: 100%; height: 38px; padding: 0 12px; margin: 0; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); background: var(--pl-control); color: var(--pl-texto); font: inherit; line-height: 1.4; transition: border-color .15s, box-shadow .15s, background-color .15s; } textarea.pl-control { height: auto; min-height: 84px; padding: 9px 12px; resize: vertical; } select.pl-control { padding-right: 34px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238794a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } select.pl-control[multiple] { height: auto; padding: 6px 8px; background-image: none; } .pl-control::placeholder { color: var(--pl-tenue-2); opacity: 1; } .pl-control:hover:not(:disabled):not(:focus):not([readonly]) { border-color: var(--pl-linea-fuerte); } .pl-control:focus { outline: 0; border-color: var(--pl-marca); box-shadow: var(--pl-anillo); } .pl-control:disabled, .pl-control[readonly] { background: var(--pl-superficie-2); color: var(--pl-tenue); } .pl-control.is-invalid { border-color: var(--pl-peligro); } .pl-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(var(--pl-peligro-rgb), .2); } .pl-control-sm { height: 32px; font-size: 13px; } .pl-control-lg { height: 46px; font-size: 16px; } input[type="date"].pl-control, input[type="time"].pl-control, input[type="month"].pl-control { padding-right: 8px; } /* Campo con icono a la izquierda y botón opcional a la derecha */ .pl-input { position: relative; } .pl-input > svg.feather { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--pl-tenue-2); pointer-events: none; } .pl-input > .pl-control { padding-left: 37px; } .pl-input > .pl-control.pl-con-boton { padding-right: 42px; } .pl-input:focus-within > svg.feather { color: var(--pl-marca); } [data-tema="oscuro"] .pl-input:focus-within > svg.feather { color: var(--pl-marca-luz); } .pl-input > .pl-input-boton { position: absolute; right: 3px; top: 3px; bottom: 3px; width: 34px; border: 0; border-radius: 5px; background: transparent; color: var(--pl-tenue); display: flex; align-items: center; justify-content: center; cursor: pointer; } .pl-input > .pl-input-boton:hover { color: var(--pl-marca-tinta); background: var(--pl-marca-suave); } .pl-input > .pl-input-boton svg.feather { width: 16px; height: 16px; } /* Campo con unidad o texto pegado (kg, S/, %) */ .pl-input-grupo { display: flex; align-items: stretch; } .pl-input-grupo > .pl-control { flex: 1; min-width: 0; } .pl-input-grupo > .pl-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .pl-input-grupo > .pl-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .pl-input-ad { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--pl-linea); background: var(--pl-superficie-2); color: var(--pl-tenue); font-size: 13px; white-space: nowrap; } .pl-input-ad:first-child { border-right: 0; border-radius: var(--pl-r-s) 0 0 var(--pl-r-s); } .pl-input-ad:last-child { border-left: 0; border-radius: 0 var(--pl-r-s) var(--pl-r-s) 0; } .pl-input-grupo > .pl-btn { box-shadow: none; } .pl-input-grupo > .pl-btn:last-child { border-radius: 0 var(--pl-r-s) var(--pl-r-s) 0; margin-left: -1px; } /* Casillas, opciones e interruptor */ .pl-check { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 8px; font-weight: 400; cursor: pointer; } .pl-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--pl-marca); cursor: pointer; } .pl-check small { display: block; color: var(--pl-tenue); } .pl-check > span { min-width: 0; } .pl-opciones-linea { display: flex; flex-wrap: wrap; gap: 4px 20px; } .pl-switch { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-weight: 400; cursor: pointer; } .pl-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pl-switch-pista { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--pl-linea-fuerte); transition: background-color .18s; } .pl-switch-pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .18s; } .pl-switch input:checked + .pl-switch-pista { background: var(--pl-marca); } .pl-switch input:checked + .pl-switch-pista::after { transform: translateX(16px); } .pl-switch input:focus-visible + .pl-switch-pista { box-shadow: var(--pl-anillo); } .pl-switch input:disabled + .pl-switch-pista { opacity: .5; } /* Tarjetas de opción (elegir entre pocas opciones con descripción) */ .pl-opcion-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .pl-opcion-tarjeta { position: relative; display: block; margin: 0; padding: 12px 14px 12px 40px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-m); background: var(--pl-superficie); cursor: pointer; transition: border-color .15s, background-color .15s; } .pl-opcion-tarjeta input { position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; margin: 0; accent-color: var(--pl-marca); } .pl-opcion-tarjeta b { display: block; font-weight: 600; color: var(--pl-titulo); } .pl-opcion-tarjeta small { display: block; color: var(--pl-tenue); } .pl-opcion-tarjeta:hover { border-color: var(--pl-linea-fuerte); } .pl-opcion-tarjeta:has(input:checked) { border-color: var(--pl-marca); background: var(--pl-marca-suave); box-shadow: inset 0 0 0 1px var(--pl-marca); } .pl-ayuda { display: block; margin-top: 5px; font-size: 12.5px; color: var(--pl-tenue); } .pl-error { display: none; margin-top: 5px; font-size: 12.5px; font-weight: 500; color: var(--pl-peligro); } .pl-error.show { display: flex; align-items: center; gap: 5px; } .pl-error.show::before { content: ""; flex: none; width: 13px; height: 13px; border-radius: 50%; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat; } .pl-contador { float: right; font-size: 12px; font-weight: 400; color: var(--pl-tenue-2); font-variant-numeric: tabular-nums; } .pl-form-titulo { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; font-size: 13px; font-weight: 600; color: var(--pl-tenue); } .pl-form-titulo::after { content: ""; flex: 1; height: 1px; background: var(--pl-linea-suave); } .pl-leyenda { margin: 0 0 14px; font-size: 12.5px; color: var(--pl-tenue); } /* Rejilla de formulario: 2, 3 o 4 columnas que bajan a una en pantallas pequeñas */ .pl-grid, .pl-grid-3, .pl-grid-4 { display: grid; gap: 0 16px; } .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pl-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pl-grid > .pl-completo, .pl-grid-3 > .pl-completo, .pl-grid-4 > .pl-completo { grid-column: 1 / -1; } .pl-grid-3 > .pl-doble, .pl-grid-4 > .pl-doble { grid-column: span 2; } /* 5. Estructura --------------------------------------------------------------- */ :root { --pl-top-fondo: rgba(255, 255, 255, .86); } [data-tema="oscuro"] { --pl-top-fondo: rgba(18, 27, 40, .86); } /* Logo del proyecto: el racimo en blanco sobre el color del proyecto. Para usar un logo propio, ponga en su lugar. */ .pl-logo { position: relative; flex: none; display: inline-block; width: 34px; height: 34px; border-radius: 9px; background: var(--pl-marca); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .pl-logo::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: url('../../imagenes/racimo_mini.svg') center / 100% no-repeat; mask: url('../../imagenes/racimo_mini.svg') center / 100% no-repeat; } .pl-logo-lg { width: 44px; height: 44px; border-radius: 12px; } /* 5.1 Menú lateral */ .pl-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040; width: var(--pl-side); display: flex; flex-direction: column; background: var(--pl-noche); color: var(--pl-noche-texto); border-right: 1px solid rgba(255, 255, 255, .04); transition: width .2s ease, transform .25s ease, box-shadow .2s; } .pl-marca-fila { display: flex; align-items: center; gap: 12px; flex: none; height: var(--pl-top); padding: 0 18px; border-bottom: 1px solid var(--pl-noche-linea); color: #fff !important; text-decoration: none !important; overflow: hidden; } .pl-marca-fila img { flex: none; width: 34px; height: 34px; } .pl-marca-texto { min-width: 0; line-height: 1.2; white-space: nowrap; } .pl-marca-texto b { display: block; font-family: var(--pl-font-titulo); font-size: 17px; font-weight: 600; letter-spacing: .005em; color: #fff; overflow: hidden; text-overflow: ellipsis; } .pl-marca-texto small { display: block; font-size: 12px; color: var(--pl-noche-tenue); overflow: hidden; text-overflow: ellipsis; } .pl-menu-buscar { position: relative; flex: none; padding: 14px 14px 6px; } .pl-menu-buscar svg.feather { position: absolute; left: 26px; top: 50%; margin-top: 4px; transform: translateY(-50%); width: 15px; height: 15px; color: var(--pl-noche-tenue); pointer-events: none; } .pl-menu-buscar input { display: block; width: 100%; height: 36px; padding: 0 10px 0 34px; border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--pl-r-s); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; font-size: 13px; transition: border-color .15s, background-color .15s; } .pl-menu-buscar input::placeholder { color: var(--pl-noche-tenue); } .pl-menu-buscar input:focus { outline: 0; border-color: var(--pl-marca-luz); background: rgba(255, 255, 255, .08); } .pl-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 0 16px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .16) transparent; } .pl-nav ul { margin: 0; padding: 0; list-style: none; } .pl-nav-titulo { padding: 18px 24px 6px; font-size: 12px; font-weight: 500; color: var(--pl-noche-tenue); white-space: nowrap; } .pl-link { position: relative; display: flex; align-items: center; gap: 12px; width: calc(100% - 20px); margin: 1px 10px; padding: 9px 12px; border: 0; border-radius: var(--pl-r-s); background: transparent; color: var(--pl-noche-texto) !important; font: inherit; font-weight: 500; text-align: left; text-decoration: none !important; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; } .pl-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; } .pl-link svg.feather { width: 18px; height: 18px; vertical-align: 0; color: var(--pl-noche-tenue); transition: color .15s; } .pl-link:hover svg.feather { color: #fff; } .pl-mtext { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Opción activa: fondo tenue y una barra del color del proyecto */ .pl-link.activo { background: rgba(255, 255, 255, .09); color: #fff !important; } .pl-link.activo svg.feather { color: var(--pl-marca-luz); } .pl-nav > ul > li > .pl-link.activo::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pl-marca-luz); } .pl-badge-menu { margin-left: auto; min-width: 20px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .pl-flecha { margin-left: auto; width: 16px !important; height: 16px !important; color: var(--pl-noche-tenue) !important; transition: transform .2s; } .pl-badge-menu + .pl-flecha { margin-left: 8px; } .pl-grupo.abierto > .pl-link .pl-flecha { transform: rotate(180deg); } .pl-grupo.con-activo > .pl-link { color: #fff !important; } .pl-grupo.con-activo > .pl-link svg.feather:first-child { color: var(--pl-marca-luz); } .pl-sub { display: none; position: relative; margin: 2px 0 6px; } .pl-grupo.abierto > .pl-sub { display: block; } .pl-sub::before { content: ""; position: absolute; left: 31px; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .1); } .pl-sub .pl-link { padding: 7px 12px 7px 44px; font-size: 13.5px; font-weight: 400; color: #a9b9cf !important; } .pl-sub .pl-link:hover { color: #fff !important; } .pl-sub .pl-link.activo { background: rgba(255, 255, 255, .07); color: #fff !important; font-weight: 500; } .pl-sub .pl-link.activo::before { content: ""; position: absolute; left: 20px; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--pl-marca-luz); } .pl-sub .pl-badge-menu, .pl-badge-menu[data-pl-contador] { background: var(--pl-marca); } .pl-link.activo .pl-badge-menu { background: rgba(255, 255, 255, .22); } .pl-menu-sin { display: none; padding: 16px 24px; color: var(--pl-noche-tenue); font-size: 13px; } .pl-nav.filtrando .pl-menu-sin.mostrar { display: block; } .pl-nav .pl-oculto-filtro { display: none !important; } .pl-side-pie { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--pl-noche-linea); font-size: 12px; color: var(--pl-noche-tenue); white-space: nowrap; overflow: hidden; } .pl-side-pie a { color: var(--pl-noche-tenue) !important; } .pl-side-pie a:hover { color: #fff !important; } .pl-velo { display: none; position: fixed; inset: 0; z-index: 1035; background: var(--pl-velo); } /* Modo compacto (solo PC): iconos; al pasar el mouse el menú se despliega encima del contenido */ @media (min-width: 992px) { body.pl-compacto .pl-side { width: var(--pl-side-mini); } body.pl-compacto .pl-contenedor { margin-left: var(--pl-side-mini); } body.pl-compacto .pl-side:hover, body.pl-compacto .pl-side:focus-within { width: var(--pl-side); box-shadow: 12px 0 36px rgba(0, 0, 0, .3); } body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-marca-texto, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-menu-buscar, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-mtext, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-flecha, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-badge-menu, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-sub, body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-side-pie { display: none; } body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-marca-fila { padding: 0 19px; } body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-nav-titulo { height: 1px; margin: 12px 20px; padding: 0; background: var(--pl-noche-linea); font-size: 0; } body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-link { justify-content: center; padding: 10px 0; } body.pl-compacto .pl-side:not(:hover):not(:focus-within) .pl-grupo.con-activo > .pl-link { background: rgba(255, 255, 255, .09); } } /* 5.2 Contenedor y barra superior */ .pl-contenedor { margin-left: var(--pl-side); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s ease; } .pl-top { position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 14px; height: var(--pl-top); padding: 0 24px; background: var(--pl-top-fondo); border-bottom: 1px solid var(--pl-linea); -webkit-backdrop-filter: saturate(1.6) blur(10px); backdrop-filter: saturate(1.6) blur(10px); } .pl-progreso { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--pl-marca); opacity: 0; pointer-events: none; } .pl-cargando-pagina .pl-progreso { opacity: 1; animation: pl-avance 1.4s ease-out forwards; } @keyframes pl-avance { from { width: 0; } to { width: 88%; } } .pl-top-btn { position: relative; flex: none; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--pl-r-s); background: transparent; color: var(--pl-tenue); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; } .pl-top-btn:hover, .pl-drop.abierto > .pl-top-btn { background: var(--pl-superficie-2); border-color: var(--pl-linea); color: var(--pl-titulo); } .pl-top-btn svg.feather { width: 19px; height: 19px; vertical-align: 0; } .pl-burger { border-color: var(--pl-linea); color: var(--pl-texto); background: var(--pl-superficie); } .pl-contador-top { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--pl-peligro); color: #fff; border: 2px solid var(--pl-superficie); font-size: 10px; font-weight: 600; line-height: 13px; text-align: center; font-variant-numeric: tabular-nums; } .pl-contador-top[hidden] { display: none; } /* Botón de modo claro / oscuro: muestra la luna en claro y el sol en oscuro */ .pl-tema-btn .pl-ico-sol { display: none; } [data-tema="oscuro"] .pl-tema-btn .pl-ico-sol { display: inline-block; } [data-tema="oscuro"] .pl-tema-btn .pl-ico-luna { display: none; } /* Migas de pan */ .pl-migas { display: flex; align-items: center; min-width: 0; margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--pl-tenue); } .pl-migas li { display: flex; align-items: center; min-width: 0; white-space: nowrap; } .pl-migas li + li::before { content: ""; flex: none; width: 14px; height: 14px; margin: 0 6px; background: var(--pl-tenue-2); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / 14px no-repeat; } .pl-migas a { color: var(--pl-tenue) !important; } .pl-migas a:hover { color: var(--pl-marca) !important; } .pl-migas li:last-child { color: var(--pl-titulo); font-weight: 600; overflow: hidden; } .pl-migas li:last-child span { overflow: hidden; text-overflow: ellipsis; } .pl-top-acciones { display: flex; align-items: center; gap: 4px; margin-left: auto; } .pl-entorno { display: inline-flex; align-items: center; gap: 7px; margin-right: 6px; padding: 3px 10px; border: 1px solid rgba(var(--pl-alerta-rgb), .4); border-radius: 999px; background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); font-size: 12px; font-weight: 500; white-space: nowrap; } .pl-entorno::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pl-alerta); } .pl-entorno[hidden] { display: none; } /* Notificaciones */ .pl-notif { width: 350px; padding: 0; overflow: hidden; } .pl-notif-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--pl-linea-suave); } .pl-notif-cab b { color: var(--pl-titulo); } .pl-notif-lista { max-height: 360px; overflow-y: auto; } .pl-notif-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--pl-linea-suave); color: var(--pl-texto) !important; text-decoration: none !important; } .pl-notif-item:hover { background: var(--pl-superficie-2); } .pl-notif-item:last-child { border-bottom: 0; } .pl-notif-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-notif-ico.pl-alerta { background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); border: 0; padding: 0; } .pl-notif-ico.pl-ok { background: var(--pl-ok-suave); color: var(--pl-ok-tinta); } .pl-notif-ico svg.feather { width: 16px; height: 16px; vertical-align: 0; } .pl-notif-item p { margin: 0; font-size: 13px; line-height: 1.4; } .pl-notif-item small { color: var(--pl-tenue-2); font-size: 12px; } .pl-notif-item.no-leida { background: rgba(var(--pl-marca-rgb), .04); } .pl-notif-item.no-leida p { font-weight: 600; } .pl-notif-vacio { margin: 0; padding: 26px 14px; color: var(--pl-tenue); text-align: center; font-size: 13px; } .pl-notif-pie { display: block; padding: 10px 14px; border-top: 1px solid var(--pl-linea-suave); text-align: center; font-size: 13px; font-weight: 500; } /* Usuario */ .pl-user-btn { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 4px; margin-left: 6px; border: 1px solid transparent; border-radius: var(--pl-r-m); background: transparent; color: var(--pl-texto); font: inherit; text-align: left; cursor: pointer; } .pl-user-btn:hover, .pl-drop.abierto > .pl-user-btn { background: var(--pl-superficie-2); border-color: var(--pl-linea); } .pl-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pl-marca); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .02em; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); } .pl-user-datos { line-height: 1.25; min-width: 0; } .pl-user-datos b { display: block; max-width: 180px; font-weight: 600; font-size: 13.5px; color: var(--pl-titulo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-user-datos small { display: block; color: var(--pl-tenue); font-size: 12px; white-space: nowrap; } .pl-user-btn > svg.feather { width: 15px; height: 15px; color: var(--pl-tenue); } /* 5.3 Contenido y pie */ .pl-contenido { flex: 1; width: 100%; max-width: 1600px; margin: 0 auto; padding: 26px 28px 36px; transition: opacity .15s; } .pl-contenido.pl-cargando { opacity: .5; pointer-events: none; } .pl-contenido > *:not(.modal) { animation: pl-entra .22s ease-out; } @keyframes pl-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .pl-pie { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; padding: 14px 28px; border-top: 1px solid var(--pl-linea); background: var(--pl-superficie); color: var(--pl-tenue); font-size: 12.5px; } .pl-aviso-archivo { padding: 10px 24px; background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); border-bottom: 1px solid rgba(var(--pl-alerta-rgb), .3); font-size: 13px; } /* 6. Inicio de sesión ---------------------------------------------------------- */ .pl-login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 540px); min-height: 100vh; background: var(--pl-superficie); } .pl-login-marca { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 56px; background: var(--pl-noche); color: #fff; } /* El racimo: frutos en espiral, del color claro del proyecto */ .pl-login-marca::before { content: ""; position: absolute; z-index: -1; right: -16%; bottom: -30%; width: min(82vw, 780px); aspect-ratio: 1; background: var(--pl-marca-luz); opacity: .5; -webkit-mask: url('../../imagenes/racimo.svg') center / contain no-repeat; mask: url('../../imagenes/racimo.svg') center / contain no-repeat; animation: pl-racimo 1.4s cubic-bezier(.2, .7, .2, 1) both; pointer-events: none; } /* Luz suave detrás del racimo */ .pl-login-marca::after { content: ""; position: absolute; z-index: -2; right: -10%; bottom: -20%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--pl-marca-rgb), .45), transparent); pointer-events: none; } @keyframes pl-racimo { from { opacity: 0; transform: scale(.92) rotate(-8deg); } to { opacity: .5; transform: none; } } .pl-login-logo { display: flex; align-items: center; gap: 14px; } .pl-login-logo img { width: 44px; height: 44px; } .pl-login-logo b { display: block; font-family: var(--pl-font-titulo); font-size: 20px; font-weight: 600; letter-spacing: .005em; } .pl-login-logo small { display: block; color: var(--pl-noche-tenue); font-size: 13px; } .pl-login-texto { max-width: 34rem; } .pl-login-texto h1 { margin: 0 0 16px; color: #fff; font-family: var(--pl-font-titulo); font-size: clamp(34px, 3.6vw, 50px); line-height: 1.04; font-weight: 600; letter-spacing: -.012em; max-width: 16ch; } .pl-login-texto p { margin: 0; max-width: 42ch; color: var(--pl-noche-texto); font-size: 16px; line-height: 1.55; } .pl-login-pie { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--pl-noche-tenue); font-size: 12.5px; } .pl-login-pie a { color: var(--pl-noche-texto) !important; } .pl-login-form { position: relative; display: flex; align-items: center; justify-content: center; padding: 40px 36px; } .pl-login-form .pl-login-tema { position: absolute; top: 18px; right: 18px; } .pl-login-caja { width: 100%; max-width: 368px; } .pl-login-caja h2 { margin: 0 0 6px; font-family: var(--pl-font-titulo); font-size: 32px; line-height: 1.1; font-weight: 600; color: var(--pl-titulo); letter-spacing: -.01em; } .pl-login-caja > p { margin: 0 0 28px; color: var(--pl-tenue); } .pl-login-caja .pl-control { height: 44px; } .pl-login-caja .pl-input > .pl-control { padding-left: 40px; } .pl-login-caja .pl-input > svg.feather { left: 14px; } .pl-login-caja .pl-btn-primario { height: 46px; margin-top: 6px; font-size: 15px; } .pl-login-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -2px 0 20px; } .pl-login-fila .pl-check { margin: 0; font-size: 13.5px; } .pl-login-fila a { font-size: 13.5px; } .pl-login-msg { margin: 0 0 16px; } .pl-login-caja > .pl-login-otro { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--pl-linea); color: var(--pl-tenue); font-size: 13.5px; text-align: center; } .pl-mayus { display: none; margin-top: 6px; font-size: 12.5px; color: var(--pl-alerta); } .pl-mayus.show { display: block; } /* 7. Páginas, paneles y rejilla --------------------------------------------------- */ .pl-cab { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 22px; } .pl-cab > div:first-child { min-width: 0; } .pl-titulo { margin: 0; font-family: var(--pl-font-titulo); font-size: 27px; line-height: 1.15; font-weight: 600; color: var(--pl-titulo); letter-spacing: -.008em; } .pl-subtitulo { margin: 5px 0 0; max-width: 76ch; color: var(--pl-tenue); } .pl-cab-acciones { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pl-panel { background: var(--pl-superficie); border: 1px solid var(--pl-linea); border-radius: var(--pl-r-m); box-shadow: var(--pl-sombra-1); min-width: 0; } .pl-panel + .pl-panel { margin-top: 20px; } .pl-panel-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--pl-linea-suave); } .pl-panel-cab h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--pl-titulo); } .pl-panel-cab p { margin: 2px 0 0; color: var(--pl-tenue); font-size: 13px; } .pl-panel-cab-ico { display: flex; align-items: center; gap: 12px; min-width: 0; } .pl-panel-cab-ico > svg.feather { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 9px; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-panel-cuerpo { padding: 18px; } .pl-panel-pie .pl-izq, .pl-cab-acciones .pl-izq { margin-right: auto; } .pl-panel-pie { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--pl-linea-suave); background: var(--pl-superficie-2); border-radius: 0 0 var(--pl-r-m) var(--pl-r-m); } .pl-fila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; } .pl-fila > * { grid-column: span 12; min-width: 0; } .pl-fila > .pl-col-3 { grid-column: span 3; } .pl-fila > .pl-col-4 { grid-column: span 4; } .pl-fila > .pl-col-5 { grid-column: span 5; } .pl-fila > .pl-col-6 { grid-column: span 6; } .pl-fila > .pl-col-7 { grid-column: span 7; } .pl-fila > .pl-col-8 { grid-column: span 8; } .pl-fila > .pl-col-9 { grid-column: span 9; } .pl-fila > .pl-panel + .pl-panel { margin-top: 0; } /* Lista de pendientes o accesos */ .pl-lista { margin: 0; padding: 0; list-style: none; } .pl-lista li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--pl-linea-suave); } .pl-lista li:last-child { border-bottom: 0; } .pl-lista-texto { flex: 1; min-width: 0; } .pl-lista-texto b { display: block; font-weight: 500; color: var(--pl-titulo); } .pl-lista-texto small { display: block; color: var(--pl-tenue); } .pl-lista-cifra { flex: none; font-family: var(--pl-font-titulo); font-size: 20px; font-weight: 600; color: var(--pl-titulo); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; } .pl-lista li > .pl-lista-fila { flex: 1; display: flex; align-items: center; gap: 12px; margin: -12px -18px; padding: 12px 18px; color: inherit !important; text-decoration: none !important; } .pl-lista-fila:hover { background: var(--pl-superficie-2); } .pl-lista-fila:hover b { color: var(--pl-marca); } /* Accesos rápidos (inicio) */ .pl-accesos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .pl-acceso { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-m); background: var(--pl-superficie); color: var(--pl-texto) !important; text-decoration: none !important; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, background-color .15s; } .pl-acceso > svg.feather { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-acceso b { display: block; font-weight: 600; color: var(--pl-titulo); } .pl-acceso small { display: block; color: var(--pl-tenue); font-size: 12.5px; } .pl-acceso:hover { border-color: var(--pl-marca-borde); background: rgba(var(--pl-marca-rgb), .03); } /* 8. Indicadores, parte del día y gráficos simples --------------------------------- */ .pl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; } .pl-kpi { position: relative; min-width: 0; padding: 16px 18px 15px; background: var(--pl-superficie); border: 1px solid var(--pl-linea); border-radius: var(--pl-r-m); box-shadow: var(--pl-sombra-1); } .pl-kpi-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pl-kpi-etq { color: var(--pl-tenue); font-size: 13px; font-weight: 500; } .pl-kpi-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-kpi-ico svg.feather { width: 17px; height: 17px; vertical-align: 0; } .pl-kpi-valor { display: block; margin-top: 4px; font-family: var(--pl-font-titulo); font-size: 34px; line-height: 1.06; font-weight: 600; color: var(--pl-titulo); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pl-kpi-valor small { margin-left: 4px; font-family: var(--pl-font); font-size: 14px; font-weight: 500; color: var(--pl-tenue); letter-spacing: 0; } .pl-kpi-pie { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; color: var(--pl-tenue); font-size: 12.5px; } .pl-kpi-barra { height: 5px; margin-top: 12px; border-radius: 3px; background: var(--pl-superficie-3); overflow: hidden; } .pl-kpi-barra > span { display: block; height: 100%; border-radius: 3px; background: var(--pl-marca); } .pl-kpi.pl-kpi-ok .pl-kpi-ico { background: var(--pl-ok-suave); color: var(--pl-ok-tinta); } .pl-kpi.pl-kpi-ok .pl-kpi-barra > span { background: var(--pl-ok); } .pl-kpi.pl-kpi-alerta .pl-kpi-ico { background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); } .pl-kpi.pl-kpi-alerta .pl-kpi-barra > span { background: var(--pl-alerta); } .pl-kpi.pl-kpi-peligro .pl-kpi-ico { background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); } .pl-kpi.pl-kpi-peligro .pl-kpi-barra > span { background: var(--pl-peligro); } a.pl-kpi, button.pl-kpi { display: block; width: 100%; color: inherit !important; text-align: left; font: inherit; text-decoration: none !important; cursor: pointer; transition: border-color .15s; } a.pl-kpi:hover, button.pl-kpi:hover { border-color: var(--pl-marca-borde); } .pl-parte { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.6fr); } .pl-parte-principal { padding: 22px 24px; border-right: 1px solid var(--pl-linea-suave); } .pl-parte-etq { margin: 0 0 6px; color: var(--pl-tenue); font-weight: 500; } .pl-parte-cifra { margin: 0; color: var(--pl-titulo); font-family: var(--pl-font-titulo); font-size: 50px; line-height: 1.02; font-weight: 600; letter-spacing: -.015em; font-variant-numeric: tabular-nums; } .pl-parte-cifra small { font-family: var(--pl-font); font-size: 20px; font-weight: 500; color: var(--pl-tenue); letter-spacing: 0; } .pl-parte-comp { margin: 10px 0 0; color: var(--pl-tenue); font-size: 13px; } .pl-sube, .pl-baja, .pl-igual { display: inline-flex; align-items: center; gap: 2px; padding: 1px 7px; border-radius: 5px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .pl-sube { background: var(--pl-ok-suave); color: var(--pl-ok-tinta); } .pl-baja { background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); } .pl-igual { background: var(--pl-neutro-suave); color: var(--pl-neutro-tinta); } .pl-meta { margin-top: 20px; max-width: 360px; } .pl-meta-txt { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; color: var(--pl-tenue); font-size: 13px; } .pl-meta-txt b { color: var(--pl-titulo); font-weight: 600; font-variant-numeric: tabular-nums; } .pl-meta-barra { height: 6px; border-radius: 3px; background: var(--pl-superficie-3); overflow: hidden; } .pl-meta-barra span { display: block; height: 100%; border-radius: 3px; background: var(--pl-marca); } .pl-parte-grafico { padding: 18px 24px 14px; min-width: 0; } .pl-parte-grafico-cab { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--pl-tenue); font-size: 13px; } .pl-barras { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; align-items: end; height: 150px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--pl-linea); } .pl-barras li { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; min-width: 0; } .pl-barras .pl-barra-valor { font-size: 11.5px; color: var(--pl-tenue); font-variant-numeric: tabular-nums; white-space: nowrap; } .pl-barras .pl-barra { width: 100%; max-width: 46px; height: var(--alto, 0%); border-radius: 4px 4px 0 0; background: rgba(var(--pl-marca-rgb), .25); transition: height .5s ease; } .pl-barras li.hoy .pl-barra { background: var(--pl-marca); } .pl-barras li.hoy .pl-barra-valor { color: var(--pl-titulo); font-weight: 600; } .pl-barras-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; text-align: center; color: var(--pl-tenue); font-size: 12px; } .pl-cifras { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--pl-linea-suave); } .pl-cifras > div { padding: 14px 24px; min-width: 0; } .pl-cifras > div + div { border-left: 1px solid var(--pl-linea-suave); } .pl-cifras dt { color: var(--pl-tenue); font-size: 13px; font-weight: 400; } .pl-cifras dd { margin: 2px 0 0; color: var(--pl-titulo); font-family: var(--pl-font-titulo); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; } .pl-cifras dd small { font-family: var(--pl-font); color: var(--pl-tenue); font-size: 13px; font-weight: 400; } .pl-cifras-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 0; } .pl-grafico { border-top: 1px solid var(--pl-linea-suave); } .pl-grafico-titulo { margin: 0 0 12px; color: var(--pl-tenue); font-size: 13px; } .pl-columnas { display: flex; align-items: flex-end; gap: 4px; height: 160px; margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--pl-linea); } .pl-columnas li { flex: 1; min-width: 3px; height: var(--alto, 0%); border-radius: 3px 3px 0 0; background: rgba(var(--pl-marca-rgb), .25); transition: background-color .15s; } .pl-columnas li:hover { background: var(--pl-marca); } .pl-columnas-eje { display: flex; justify-content: space-between; margin-top: 6px; color: var(--pl-tenue); font-size: 12px; } .pl-hbarras { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .pl-hbarras li { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; } .pl-hb-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl-hb-pista { height: 10px; border-radius: 5px; background: var(--pl-superficie-3); overflow: hidden; } .pl-hb-pista span { display: block; height: 100%; border-radius: 5px; background: var(--pl-marca); } .pl-hb-valor { min-width: 7ch; color: var(--pl-titulo); font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; } .pl-part { display: inline-block; width: 64px; height: 6px; margin-right: 8px; border-radius: 3px; background: var(--pl-superficie-3); vertical-align: middle; overflow: hidden; } .pl-part span { display: block; height: 100%; background: var(--pl-marca); } /* 9. Estados, etiquetas, avisos, pestañas, vacío y carga --------------------------- */ .pl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; line-height: 1.6; } .pl-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .pl-chip-activo, .pl-chip-info { background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-chip-inactivo, .pl-chip-neutro { background: var(--pl-neutro-suave); color: var(--pl-neutro-tinta); } .pl-chip-pendiente { background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); } .pl-chip-ok { background: var(--pl-ok-suave); color: var(--pl-ok-tinta); } .pl-chip-anulado { background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); } .pl-chip-anulado { text-decoration: none; } .pl-tag { display: inline-block; padding: 1px 8px; border: 1px solid var(--pl-linea); border-radius: 5px; background: var(--pl-superficie-2); color: var(--pl-neutro-tinta); font-size: 12.5px; font-weight: 500; white-space: nowrap; } .pl-contar { display: inline-block; min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--pl-titulo); color: var(--pl-superficie); font-size: 11.5px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } .pl-vacio { color: var(--pl-tenue-2); } .pl-codigo { font-weight: 600; color: var(--pl-titulo); font-variant-numeric: tabular-nums; } .pl-kbd { display: inline-block; min-width: 22px; padding: 0 6px; border: 1px solid var(--pl-linea); border-bottom-width: 2px; border-radius: 5px; background: var(--pl-superficie); color: var(--pl-tenue); font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; } .pl-alerta, .pl-aviso { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--pl-r-s); border: 1px solid var(--pl-marca-borde); background: var(--pl-marca-suave); color: var(--pl-marca-tinta); font-size: 13.5px; } .pl-alerta { border-color: rgba(var(--pl-peligro-rgb), .32); background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); font-weight: 500; } /* error simple (login, permisos) */ .pl-alerta[hidden], .pl-aviso[hidden] { display: none; } .pl-aviso > svg.feather { margin-top: 1px; } .pl-aviso b { display: block; margin-bottom: 1px; } .pl-aviso p { margin: 0; opacity: .92; } .pl-aviso-exito { border-color: rgba(var(--pl-ok-rgb), .32); background: var(--pl-ok-suave); color: var(--pl-ok-tinta); } .pl-aviso-advertencia { border-color: rgba(var(--pl-alerta-rgb), .38); background: var(--pl-alerta-suave); color: var(--pl-alerta-tinta); } .pl-aviso-error { border-color: rgba(var(--pl-peligro-rgb), .32); background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); } .pl-tabs { display: flex; gap: 4px; margin: 0 0 18px; padding: 0; border-bottom: 1px solid var(--pl-linea); overflow-x: auto; scrollbar-width: none; } .pl-tabs button { position: relative; flex: none; padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--pl-tenue); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; } .pl-tabs button:hover { color: var(--pl-titulo); } .pl-tabs button[aria-selected="true"] { color: var(--pl-marca-tinta); border-bottom-color: var(--pl-marca); } .pl-tabs button .pl-contar { margin-left: 6px; background: var(--pl-superficie-3); color: var(--pl-texto); } .pl-tabs button[aria-selected="true"] .pl-contar { background: var(--pl-marca); color: #fff; } .pl-tab-panel[hidden] { display: none; } .pl-estado-vacio { padding: 46px 24px; text-align: center; } .pl-estado-vacio-ico { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 16px; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); } .pl-estado-vacio-ico svg.feather { width: 24px; height: 24px; } .pl-estado-vacio h3 { margin: 0 0 6px; font-size: 17px; font-weight: 600; } .pl-estado-vacio p { max-width: 52ch; margin: 0 auto 16px; color: var(--pl-tenue); } .pl-estado-vacio.pl-estado-error .pl-estado-vacio-ico { background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); } .pl-pasos { max-width: 560px; margin: 0 auto; padding: 0; list-style: none; counter-reset: paso; text-align: left; } .pl-pasos li { position: relative; padding: 0 0 12px 40px; counter-increment: paso; } .pl-pasos li::before { content: counter(paso); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%; background: var(--pl-superficie); border: 1px solid var(--pl-linea); color: var(--pl-titulo); font-size: 12.5px; font-weight: 600; line-height: 24px; text-align: center; } .pl-pasos li b { display: block; font-weight: 600; color: var(--pl-titulo); } .pl-pasos li span { color: var(--pl-tenue); } .pl-esqueleto { display: block; height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--pl-superficie-3) 25%, var(--pl-superficie-2) 50%, var(--pl-superficie-3) 75%); background-size: 200% 100%; animation: pl-brillo 1.3s ease-in-out infinite; } .pl-esqueleto + .pl-esqueleto { margin-top: 10px; } @keyframes pl-brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } } .pl-cargador { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--pl-linea); border-top-color: var(--pl-marca); animation: pl-giro .7s linear infinite; vertical-align: middle; } .pl-cargando-bloque { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--pl-tenue); } /* Lista de datos (detalle de un registro) */ .pl-dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0; margin: 0; } .pl-dl dt, .pl-dl dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--pl-linea-suave); } .pl-dl dt { color: var(--pl-tenue); font-weight: 400; } .pl-dl dd { color: var(--pl-texto); font-weight: 500; min-width: 0; overflow-wrap: anywhere; } .pl-dl dt:last-of-type, .pl-dl dd:last-of-type { border-bottom: 0; } /* 10. Tablas y DataTables ------------------------------------------------------------ */ .pl-barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--pl-linea-suave); } .pl-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pl-filtro-tipo { width: 220px; } .pl-rango { display: flex; align-items: center; gap: 6px; } .pl-rango .pl-control { width: 150px; } .pl-rango > span { color: var(--pl-tenue); font-size: 13px; } /* Filtro de estado con conteos */ .pl-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--pl-linea); border-radius: 9px; background: var(--pl-superficie-3); } .pl-seg button { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 0; border-radius: var(--pl-r-s); background: transparent; color: var(--pl-tenue); font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s; } .pl-seg button:hover { color: var(--pl-titulo); } .pl-seg button b { min-width: 24px; padding: 0 7px; border-radius: 999px; background: rgba(0, 0, 0, .06); font-size: 12px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; } [data-tema="oscuro"] .pl-seg button b { background: rgba(255, 255, 255, .08); } .pl-seg button.activo { background: var(--pl-superficie); color: var(--pl-titulo); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 1px var(--pl-linea); } .pl-seg button.activo b { background: var(--pl-marca); color: #fff; } .pl-tabla-wrap .dataTables_wrapper { position: relative; padding: 0; } .pl-dt-top, .pl-dt-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 16px; } .pl-dt-bottom { border-top: 1px solid var(--pl-linea-suave); } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_filter { margin: 0; text-align: left; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_filter label { display: block; margin: 0; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_filter input { display: block; width: 340px; max-width: 100%; height: 36px; margin: 0; padding: 0 12px 0 36px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); box-shadow: none; background: var(--pl-control) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238794a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 12px center; color: var(--pl-texto); font: inherit; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_filter input:focus { outline: 0; border-color: var(--pl-marca); box-shadow: var(--pl-anillo); } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_length { margin: 0; text-align: left; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_length label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--pl-tenue); font-size: 13px; font-weight: 400; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_length select { width: auto; height: 34px; margin: 0; padding: 0 28px 0 10px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); background-color: var(--pl-control); color: var(--pl-texto); font: inherit; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_info { padding: 0; color: var(--pl-tenue); font-size: 13px; white-space: normal; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_paginate { margin: 0; padding: 0; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_paginate ul.pagination { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; } .pl-tabla-wrap .pagination .page-link { min-width: 34px; height: 34px; padding: 0 11px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--pl-r-s) !important; background: transparent; color: var(--pl-texto); font-weight: 500; box-shadow: none !important; } .pl-tabla-wrap .pagination .page-link:hover { background: var(--pl-marca-suave); color: var(--pl-marca-tinta); text-decoration: none; } .pl-tabla-wrap .pagination .page-item.active .page-link { background: var(--pl-marca); border-color: var(--pl-marca); color: #fff; } .pl-tabla-wrap .pagination .page-item.disabled .page-link { background: transparent; color: var(--pl-tenue-2); } div.dt-buttons { display: none !important; } /* las exportaciones se lanzan desde el botón «Exportar» */ .pl-tabla-wrap div.dataTables_wrapper div.dataTables_processing { position: absolute; top: 64px; left: 50%; z-index: 5; width: auto; margin: 0; padding: 8px 16px; transform: translateX(-50%); border: 1px solid var(--pl-linea); border-radius: 999px; background: var(--pl-superficie); box-shadow: var(--pl-sombra-flota); color: var(--pl-texto); font-size: 13px; text-align: center; } .pl-tabla-wrap div.dataTables_wrapper div.dataTables_processing > div:last-child { display: none; } .pl-scroll { overflow-x: auto; } .pl-panel .pl-scroll:last-child, .pl-panel > .pl-tabla-wrap:last-child .pl-scroll:last-child { border-radius: 0 0 calc(var(--pl-r-m) - 1px) calc(var(--pl-r-m) - 1px); } table.pl-tabla { width: 100% !important; margin: 0 !important; border-collapse: collapse !important; background: var(--pl-superficie); color: var(--pl-texto); } table.pl-tabla th, table.pl-tabla td { box-sizing: border-box; } table.pl-tabla thead th { padding: 10px 16px; background: var(--pl-superficie-2); border: 0; border-top: 1px solid var(--pl-linea-suave); border-bottom: 1px solid var(--pl-linea); color: var(--pl-tenue); font-size: 12.5px; font-weight: 600; text-align: left; white-space: nowrap; vertical-align: middle; } table.pl-tabla thead th.sorting, table.pl-tabla thead th.sorting_asc, table.pl-tabla thead th.sorting_desc { padding-right: 28px; } table.pl-tabla thead th.sorting_asc, table.pl-tabla thead th.sorting_desc { color: var(--pl-titulo); } /* Flechas de orden de DataTables: una sola marca, del color del proyecto en la columna ordenada */ table.pl-tabla thead th.sorting::before, table.pl-tabla thead th.sorting_asc::before, table.pl-tabla thead th.sorting_desc::before { display: none !important; } table.pl-tabla thead th.sorting::after, table.pl-tabla thead th.sorting_asc::after, table.pl-tabla thead th.sorting_desc::after { content: "" !important; position: absolute; right: 10px; top: 50%; bottom: auto !important; width: 14px; height: 14px; margin-top: -7px; opacity: 1 !important; background: var(--pl-linea-fuerte); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 15 12 20 17 15'/%3E%3Cpolyline points='7 9 12 4 17 9'/%3E%3C/svg%3E") center / 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 15 12 20 17 15'/%3E%3Cpolyline points='7 9 12 4 17 9'/%3E%3C/svg%3E") center / 14px no-repeat; } table.pl-tabla thead th.sorting:hover::after { background: var(--pl-tenue); } table.pl-tabla thead th.sorting_asc::after { background: var(--pl-marca); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 14 12 9 17 14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 14 12 9 17 14'/%3E%3C/svg%3E"); } table.pl-tabla thead th.sorting_desc::after { background: var(--pl-marca); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3C/svg%3E"); } [data-tema="oscuro"] table.pl-tabla thead th.sorting_asc::after, [data-tema="oscuro"] table.pl-tabla thead th.sorting_desc::after { background: var(--pl-marca-luz); } table.pl-tabla thead th.sorting { cursor: pointer; } table.pl-tabla tbody td { padding: 11px 16px; border: 0; border-bottom: 1px solid var(--pl-linea-suave); vertical-align: middle; font-variant-numeric: tabular-nums; } table.pl-tabla tbody tr:last-child td { border-bottom: 0; } table.pl-tabla tbody tr:hover td { background: var(--pl-fila-hover); } table.pl-tabla tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 var(--pl-marca); } table.pl-tabla tbody tr.pl-inactivo td:not(.pl-acciones) { color: var(--pl-tenue-2); } table.pl-tabla tbody tr.pl-seleccionada td { background: var(--pl-marca-suave); } table.pl-tabla td.pl-acciones, table.pl-tabla th.pl-acciones { text-align: right; white-space: nowrap; } table.pl-tabla .pl-der { text-align: right; } table.pl-tabla-compacta thead th { padding-top: 8px; padding-bottom: 8px; } table.pl-tabla-compacta tbody td { padding-top: 7px; padding-bottom: 7px; } table.pl-tabla tfoot td, table.pl-tabla tfoot th { padding: 11px 16px; border: 0; border-top: 1px solid var(--pl-linea); background: var(--pl-superficie-2); color: var(--pl-titulo); font-weight: 600; font-variant-numeric: tabular-nums; } table.pl-tabla td.dataTables_empty { padding: 44px 16px; text-align: center; color: var(--pl-tenue); background: transparent !important; box-shadow: none !important; } .pl-nom { min-width: 0; } .pl-nom b { display: block; font-weight: 500; color: var(--pl-titulo); } .pl-nom small { display: block; max-width: 40ch; color: var(--pl-tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 11. Ventanas (modales de Bootstrap 4) ------------------------------------------------- */ .pl-modal .modal-content { border: 1px solid var(--pl-linea); border-radius: var(--pl-r-l); background: var(--pl-superficie); color: var(--pl-texto); box-shadow: var(--pl-sombra-modal); } .pl-modal .modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--pl-superficie); border-bottom: 1px solid var(--pl-linea-suave); border-radius: var(--pl-r-l) var(--pl-r-l) 0 0; } .pl-modal .modal-title { margin: 0; font-family: var(--pl-font-titulo); font-size: 20px; line-height: 1.2; font-weight: 600; color: var(--pl-titulo); } .pl-modal-sub { margin: 3px 0 0; color: var(--pl-tenue); font-size: 13px; } .pl-modal-x { flex: none; width: 34px; height: 34px; margin: -4px -6px 0 0; border: 0; border-radius: var(--pl-r-s); background: transparent; color: var(--pl-tenue); cursor: pointer; display: flex; align-items: center; justify-content: center; } .pl-modal-x:hover { background: var(--pl-superficie-2); color: var(--pl-titulo); } .pl-modal .modal-body { padding: 20px; } .pl-modal .modal-body > .pl-tabs { margin: -6px -20px 18px; padding: 0 16px; } .pl-modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--pl-superficie-2); border-top: 1px solid var(--pl-linea-suave); border-radius: 0 0 var(--pl-r-l) var(--pl-r-l); } .pl-modal .modal-footer > * { margin: 0; } .pl-modal .modal-footer .pl-izq { margin-right: auto; } .pl-modal.fade .modal-dialog { transform: translateY(10px) scale(.985); transition: transform .2s ease-out; } .pl-modal.show .modal-dialog { transform: none; } .modal-backdrop { background-color: #0a1626; } .modal-backdrop.show { opacity: .5; } [data-tema="oscuro"] .modal-backdrop.show { opacity: .7; } /* 12. Select2 ---------------------------------------------------------------------------- */ .select2-container { width: 100% !important; font-family: var(--pl-font); } .select2-container--default .select2-selection--single { height: 38px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); background: var(--pl-control); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; padding-right: 32px; color: var(--pl-texto); } .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--pl-tenue-2); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; right: 6px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--pl-tenue-2) transparent transparent transparent; } .select2-container--default .select2-selection--single .select2-selection__clear { color: var(--pl-tenue); } .select2-container--default .select2-selection--multiple { min-height: 38px; padding: 0 6px 4px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); background: var(--pl-control); } .select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0; } .select2-container--default .select2-selection--multiple .select2-selection__choice { margin: 4px 6px 0 0; padding: 1px 8px; border: 0; border-radius: 5px; background: var(--pl-marca-suave); color: var(--pl-marca-tinta); font-size: 13px; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { margin-right: 5px; color: var(--pl-marca-tinta); } .select2-container--default .select2-search--inline .select2-search__field { margin-top: 7px; font-family: inherit; color: var(--pl-texto); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: var(--pl-marca); box-shadow: var(--pl-anillo); } .select2-container--default.select2-container--disabled .select2-selection--single { background: var(--pl-superficie-2); } .select2-dropdown { border: 1px solid var(--pl-linea) !important; border-radius: var(--pl-r-s) !important; background: var(--pl-superficie) !important; color: var(--pl-texto); box-shadow: var(--pl-sombra-flota); overflow: hidden; } .select2-container--default .select2-search--dropdown { padding: 6px; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 34px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); padding: 0 10px; font: inherit; background: var(--pl-control); color: var(--pl-texto); } .select2-container--default .select2-search--dropdown .select2-search__field:focus { outline: 0; border-color: var(--pl-marca); } .select2-container--default .select2-results__option { padding: 8px 12px; } .select2-container--default .select2-results__option[aria-selected=true] { background: var(--pl-marca-suave); color: var(--pl-titulo); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--pl-marca); color: #fff; } .select2-container--default .select2-results__option[aria-disabled=true] { color: var(--pl-tenue-2); } .select2-container--default .select2-results__group { color: var(--pl-tenue); font-size: 12.5px; } .select2-container--open .select2-dropdown { z-index: 200001; } select.is-invalid + .select2 .select2-selection { border-color: var(--pl-peligro) !important; } .pl-control-sm + .select2 .select2-selection--single { height: 32px; } .pl-control-sm + .select2 .select2-selection--single .select2-selection__rendered { line-height: 30px; font-size: 13px; } .pl-control-sm + .select2 .select2-selection--single .select2-selection__arrow { height: 30px; } /* 13. SweetAlert2 ------------------------------------------------------------------------ */ .swal2-container { z-index: 200000 !important; } .swal2-container.swal2-backdrop-show { background: rgba(10, 22, 38, .5) !important; } .swal2-popup { font-family: var(--pl-font); border-radius: var(--pl-r-l) !important; background: var(--pl-superficie) !important; color: var(--pl-texto) !important; } .swal2-popup:not(.swal2-toast) { padding: 1.5em 1.5em 1.25em; border: 1px solid var(--pl-linea); box-shadow: var(--pl-sombra-modal); } .swal2-popup:not(.swal2-toast) .swal2-title { font-family: var(--pl-font-titulo); font-size: 22px; font-weight: 600; color: var(--pl-titulo); } .swal2-popup:not(.swal2-toast) .swal2-html-container { font-size: 14px; color: var(--pl-tenue); } .swal2-actions { gap: 8px; } .swal2-styled { margin: 0 !important; padding: 0 18px !important; height: 38px; border-radius: var(--pl-r-s) !important; font-weight: 500 !important; font-size: 14px !important; box-shadow: none !important; } .swal2-styled.swal2-confirm { background-color: var(--pl-marca) !important; } .swal2-styled.swal2-confirm.pl-swal-peligro { background-color: var(--pl-peligro) !important; } .swal2-styled.swal2-cancel { background-color: var(--pl-superficie) !important; color: var(--pl-texto) !important; border: 1px solid var(--pl-linea) !important; } .swal2-styled:focus-visible { box-shadow: var(--pl-anillo) !important; } .swal2-popup.swal2-toast { padding: .7rem 1rem !important; border: 1px solid var(--pl-linea); box-shadow: var(--pl-sombra-flota) !important; } .swal2-popup.swal2-toast .swal2-title { font-size: 14px; font-weight: 500; color: var(--pl-titulo); } .swal2-timer-progress-bar { background: var(--pl-marca-borde) !important; } .swal2-icon.swal2-warning { border-color: rgba(var(--pl-alerta-rgb), .6) !important; color: var(--pl-alerta) !important; } .swal2-icon.swal2-question, .swal2-icon.swal2-info { border-color: var(--pl-marca-borde) !important; color: var(--pl-marca) !important; } .swal2-icon.swal2-error { border-color: rgba(var(--pl-peligro-rgb), .5) !important; } .swal2-icon.swal2-error [class^=swal2-x-mark-line] { background-color: var(--pl-peligro) !important; } .swal2-icon.swal2-success [class^=swal2-success-line] { background-color: var(--pl-ok) !important; } .swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(var(--pl-ok-rgb), .35) !important; } .swal2-icon.swal2-success [class^=swal2-success-circular-line], .swal2-icon.swal2-success .swal2-success-fix { background: var(--pl-superficie) !important; } .swal2-popup .swal2-input-label { justify-content: flex-start; margin: 14px 1.4em 0; font-size: 13px; font-weight: 600; color: var(--pl-texto); } .swal2-popup .swal2-textarea, .swal2-popup .swal2-input { width: auto; margin: 6px 1.4em 0; padding: 9px 12px; border: 1px solid var(--pl-linea); border-radius: var(--pl-r-s); box-shadow: none; background: var(--pl-control); font-family: var(--pl-font); font-size: 14px; color: var(--pl-texto); } .swal2-popup .swal2-input { height: 40px; } .swal2-popup .swal2-textarea:focus, .swal2-popup .swal2-input:focus { border-color: var(--pl-marca); box-shadow: var(--pl-anillo); } .swal2-popup .swal2-validation-message { background: var(--pl-peligro-suave); color: var(--pl-peligro-tinta); font-size: 13px; } /* 14. Componentes adicionales ------------------------------------------------------------- */ /* Ayuda emergente: