/* =========================================================== VARIABLES BÁSICAS =========================================================== */ :root { --tender-bg: #e1e1e1; --tender-bg-inverse: #090705; --tender-navbar: #ffffff; --tender-table-odd: #f5f5f5; --tender-main: #00a1e0; --tender-main-tr: rgba(0, 161, 224, 0.7); --tender-main-tr-0: rgba(0, 161, 224, 0.08); --tender-main-min: #f1f6f8; --tender-paletteB: #00a1e0; --tender-paletteC: #00e0b8; --tender-grey: #64748b; --tender-grey-tr: #94a3b8; --tender-grey-tr-min: rgba(148, 163, 184, 0.4); --tender-black: #111827; --tender-white: #ffffff; --tender-accent-green: #22c55e; --tender-red: #ef4444; --b2: 0.85rem; } /* =========================================================== RESET BÁSICO =========================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: var(--tender-bg); color: var(--tender-black); font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* Oculta elementos con .hidden */ .hidden { display: none !important; } /* =========================================================== LAYOUT GENERAL (SIDEBAR + ZONA PRINCIPAL) =========================================================== */ .layout-root { display: flex; min-height: 100vh; } /* --- Sidebar --- */ .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 80px; background: var(--tender-bg-inverse); display: flex; justify-content: center; z-index: 100; } .sidebar-inner { width: 100%; padding: 20px 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } .sidebar-top, .sidebar-bottom { display: flex; flex-direction: column; align-items: center; gap: 16px; } .sidebar-logo, .sidebar-item { width: 48px; height: 48px; border-radius: 50%; border: none; outline: none; cursor: pointer; background: transparent; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, transform 0.1s ease; color: var(--tender-white); font-size: 1.2rem; } .sidebar-logo { background: linear-gradient(135deg, var(--tender-paletteB), var(--tender-paletteC)); font-weight: 600; } .sidebar-logo-img { padding: 0; background: transparent !important; } .sidebar-logo-icon { width: 32px; height: 32px; display: block; } .sidebar-item:hover { background-color: rgba(15, 23, 42, 0.4); transform: translateY(-1px); } .sidebar-item--active { background-color: var(--tender-main); } .sidebar-icon { font-size: 1.2rem; } /* --- Zona principal --- */ .layout-main { margin-left: 80px; width: calc(100% - 80px); padding: 24px 32px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; /* 👇 clave: el área principal ocupa toda la pantalla y el scroll va por dentro, no en */ height: 100vh; overflow: hidden; } /* Contenedores principales: topbar y contenido */ .topbar { width: 100%; max-width: none; } .dashboard-main { width: 100%; max-width: none; /* que use todo el alto disponible debajo de la topbar */ flex: 1 1 auto; overflow-y: auto; } /* =========================================================== TOPBAR DASHBOARD =========================================================== */ /* Contenedor principal de la topbar */ .topbar { background-color: var(--tender-navbar); border-radius: 24px; padding: 12px 24px; /* antes 18px -> bajamos altura */ box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08); display: flex; align-items: center; justify-content: space-between; gap: 20px; } /* Título + icono en línea, pegados */ .topbar-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; /* antes 10px -> título + subtítulo más juntos */ } .topbar-title-icon { width: 32px; height: 32px; border-radius: 999px; background: var(--tender-main-tr-0); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--tender-main); } .topbar-left { display: flex; flex-direction: column; gap: 4px; /* antes 8px */ } .topbar-subtitle { font-size: 0.8rem; margin: 0; } .topbar-right { position: relative; /* ancla el dropdown */ display: flex; align-items: center; } .topbar-title-group { display: flex; flex-direction: column; gap: 2px; } .topbar-title, .dashboard-section-title { font-family: "Poppins", sans-serif; font-weight: 600; letter-spacing: 0; } .topbar-title { font-size: 1.4rem; color: var(--tender-black); } .topbar-subtitle { font-size: var(--b2); color: var(--tender-grey-tr); } /* Selector de año */ .topbar-year-selector { display: flex; align-items: center; gap: 12px; } .topbar-year-label { font-size: var(--b2); color: var(--tender-grey-tr); } .topbar-year-pills { display: inline-flex; background-color: var(--tender-main-min); border-radius: 999px; padding: 4px; gap: 4px; } .year-pill { border: none; outline: none; cursor: pointer; font-size: 0.8rem; padding: 4px 10px; border-radius: 999px; background: transparent; color: var(--tender-grey); transition: background-color 0.2s ease, color 0.2s ease; } .year-pill--active { background-color: var(--tender-main); color: var(--tender-white); } /* Usuario */ .user-menu-toggle { display: flex; /* 👈 ahora todo va en línea */ align-items: center; gap: 10px; border: none; background: transparent; cursor: pointer; padding: 4px 10px; /* un poco más compacto */ border-radius: 999px; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } .user-menu-toggle:hover { background-color: rgba(148, 163, 184, 0.08); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08); } .user-menu-toggle--open { background-color: var(--tender-main-min); } /* Columna de texto del usuario */ .user-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } /* Ya tienes .user-name, reutilizado */ .user-role { font-size: 0.75rem; color: var(--tender-grey-tr); } /* Chevron del menú */ .user-menu-chevron { font-size: 0.7rem; color: var(--tender-grey-tr); } /* Dropdown */ .user-menu-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; background-color: #ffffff; border-radius: 12px; box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18); padding: 6px 0; min-width: 170px; display: none; z-index: 20; } .user-menu-dropdown--open { display: block; } .user-menu-item { width: 100%; padding: 8px 14px; text-align: left; font-size: 0.85rem; background: transparent; border: none; cursor: pointer; color: var(--tender-grey); display: flex; align-items: center; gap: 8px; } .user-menu-item:hover { background-color: rgba(148, 163, 184, 0.08); } .user-menu-item[data-action="logout"]::before { content: "⏻"; font-size: 0.9rem; } .user-name { font-size: 0.85rem; color: var(--tender-grey-tr); font-weight: 500; letter-spacing: 0.01em; } .user-avatar { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, var(--tender-paletteB), var(--tender-paletteC)); display: flex; align-items: center; justify-content: center; color: var(--tender-white); font-weight: 600; font-size: 0.9rem; } /* =========================================================== CONTENIDO PRINCIPAL DASHBOARD =========================================================== */ .dashboard-main { margin: 0 auto 40px; } /* Métricas (fila de tarjetas) */ .dashboard-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; /* separación con la topbar */ margin-bottom: 24px; } .metric-card { background-color: var(--tender-navbar); border-radius: 18px; padding: 18px 20px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; gap: 8px; } .metric-header { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--tender-grey); text-transform: uppercase; } .metric-info { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--tender-grey-tr-min); display: flex; align-items: center; justify-content: center; font-size: 0.7rem; color: var(--tender-grey); } .metric-value { font-size: 1.6rem; font-weight: 600; color: var(--tender-black); } .metric-sub { font-size: 0.8rem; color: var(--tender-grey-tr); } .metric-sub--positive { color: var(--tender-accent-green); } .metric-sub--negative { color: var(--tender-red); } /* Secciones del dashboard */ .dashboard-section { margin-top: 24px; } .dashboard-section-header { margin-bottom: 16px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* El bloque del título ocupa todo el espacio a la izquierda */ .dashboard-section-header-main { flex: 1 1 auto; min-width: 0; } /* El botón de info se queda pegado a la derecha */ .dashboard-section-header .panel-info { flex: 0 0 auto; margin-top: 2px; /* leve ajuste vertical con el título */ } .dashboard-section-title { font-size: 1.25rem; margin: 0 0 2px; color: var(--tender-black); } .dashboard-section-subtitle { margin: 0; font-size: var(--b2); color: var(--tender-grey-tr); } .dashboard-grid { display: grid; grid-template-columns: 2fr 1.4fr; /* Más altura mínima por fila para que el header + gráfica quepan cómodos */ grid-auto-rows: minmax(520px, auto); gap: 20px; } .dashboard-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panel { background-color: var(--tender-navbar); border-radius: 20px; padding: 18px 20px; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04); display: flex; flex-direction: column; position: relative; overflow: visible; /* ✅ dejamos que títulos y tooltips respiren */ } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .panel-title { font-size: 0.95rem; font-weight: 600; color: var(--tender-black); } .panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 8px; } /* Variación para cabeceras con título + subtítulo */ .panel-header--stacked { align-items: flex-start; } .panel-header-text { display: flex; flex-direction: column; gap: 2px; } .panel-title { font-size: 0.95rem; font-weight: 600; color: var(--tender-black); line-height: 1.3; } .panel-subtitle { font-size: 0.78rem; color: var(--tender-grey-tr); } /* Panel-body específico para gráficas del motor */ /* Panel-body específico para todas las gráficas del motor */ .panel-body--chart { border-radius: 16px; border: 1px dashed rgba(148, 163, 184, 0.4); background: linear-gradient(135deg, #f9fafb, #f3f4f6); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 8px 10px; overflow: hidden; /* 👉 la gráfica nunca se sale del recuadro */ } .panel-body--chart .chart { flex: 1 1 auto; /* ocupa todo el alto restante del panel */ width: 100%; height: 100%; min-height: 260px; /* más altura para que se vean bien los ejes X */ } /* Afinidad histograma y motivos: un pelín más altos porque tienen más texto/ejes */ #motor-chart-motivos.chart, #motor-chart-afinidad-hist.chart { min-height: 300px; } @media (min-width: 1440px) { #motor-chart-motivos.chart, #motor-chart-afinidad-hist.chart { min-height: 340px; } } /* Highcharts dentro del panel: adaptado al alto disponible */ .panel-body--chart .highcharts-container, .panel-body--chart .highcharts-container svg { height: 100% !important; max-height: 100% !important; } .panel-info { width: 22px; height: 22px; border-radius: 50%; border: none; background-color: var(--tender-main-min); color: var(--tender-main); font-size: 0.8rem; display: flex; align-items: center; justify-content: center; cursor: pointer; } .panel-body { flex: 1; border-radius: 16px; border: 1px dashed rgba(148, 163, 184, 0.4); background: linear-gradient(135deg, #f9fafb, #f3f4f6); display: flex; align-items: center; justify-content: center; } .panel-placeholder { font-size: 0.85rem; color: var(--tender-grey-tr); } /* Contenedores de gráfico */ .loading-chart { display: none; font-size: var(--b2); color: var(--tender-grey-tr); align-items: center; justify-content: center; text-align: center; padding: 12px; width: 100%; height: 100%; } .chart { width: 100%; height: 100%; } /* Ocultar créditos de Highcharts */ .highcharts-credits { display: none; } /* =========================== Spinner TenderPanel =========================== */ /* Area donde TenderPanel pinta sus tarjetas (sin fondo propio: usamos el que pone index.js) */ #resultados-tenderpanel { position: relative; /* para poder centrar el spinner */ padding-top: 16px; /* separación con la topbar */ min-height: 520px; /* alto mínimo para que las tarjetas respiren */ } /* Estado de carga: solo spinner, sin fondo adicional */ #resultados-tenderpanel[data-loading="true"] { pointer-events: none; } /* SOLO el círculo, sin ::before, sin overlay gris */ #resultados-tenderpanel[data-loading="true"]::after { content: ""; position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin-top: -18px; margin-left: -18px; border-radius: 999px; border: 3px solid rgba(148, 163, 184, 0.6); border-top-color: var(--tender-main); animation: tenderpanel-spinner 0.8s linear infinite; z-index: 11; } @keyframes tenderpanel-spinner { to { transform: rotate(360deg); } } /* =========================================================== BOTONES GENERALES =========================================================== */ .btn-primary, .btn-secondary, .btn-secondary-light, .btn-danger, .btn-link { font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 0.85rem; border-radius: 999px; padding: 6px 14px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease; } /* Primario (azul Tender) */ .btn-primary { background-color: var(--tender-main); color: #ffffff; box-shadow: 0 8px 18px rgba(0, 160, 224, 0.3); } .btn-primary:hover { background-color: #0083b6; box-shadow: 0 10px 24px rgba(0, 160, 224, 0.4); transform: translateY(-1px); } /* Secundario gris */ .btn-secondary { background-color: var(--tender-main-min); color: var(--tender-main); } .btn-secondary:hover { background-color: var(--tender-main-tr-0); } /* Secundario muy suave (por ejemplo “Volver”) */ .btn-secondary-light { background-color: transparent; color: var(--tender-grey-tr); border: 1px solid rgba(148, 163, 184, 0.4); } .btn-secondary-light:hover { background-color: rgba(148, 163, 184, 0.08); } /* Peligro / eliminar */ .btn-danger { background-color: #ef4444; color: #ffffff; } .btn-danger:hover { background-color: #dc2626; } /* Botón tipo enlace */ .btn-link { background: transparent; color: var(--tender-main); padding: 0; border-radius: 0; box-shadow: none; } .btn-link:hover { text-decoration: underline; } /* Utilidad pequeña */ .mt-2 { margin-top: 0.5rem; } /* =========================================================== PÁGINA CONFIGURACIÓN – GRID Y TARJETAS =========================================================== */ .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; } /* Tarjeta base */ .settings-card { background-color: var(--tender-navbar); border-radius: 18px; padding: 18px 18px 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; display: flex; flex-direction: column; gap: 6px; } .settings-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12); background-color: #ffffff; } /* Icono redondo */ .settings-card-icon { width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 4px; background: var(--tender-main-min); color: var(--tender-main); } .settings-card-title { font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; color: var(--tender-black); margin: 0; } .settings-card-text { font-size: var(--b2); color: var(--tender-grey-tr); line-height: 1.4; margin: 0 0 4px; } /* CTA dentro de la tarjeta */ .settings-card-cta { margin-top: 6px; align-self: flex-start; } /* Iconos específicos (solo color distinto si quieres) */ .settings-card-icon--user { /* estilos personalizados opcionales */ } .settings-card-icon--apps { /* estilos personalizados opcionales */ } .settings-card-icon--notifications { /* estilos personalizados opcionales */ } /* =========================================================== PÁGINA APLICACIONES – GRID Y TARJETAS =========================================================== */ .apps-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .apps-header-actions { display: flex; gap: 10px; align-items: center; } .app-card-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } /* Tarjeta de aplicación */ .app-card { background-color: var(--tender-navbar); border-radius: 18px; padding: 16px 18px 12px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 8px; } /* Estado placeholder / error */ .app-card--placeholder { align-items: center; justify-content: center; text-align: center; color: var(--tender-grey-tr); } .app-card--error { border: 1px solid #fecaca; background-color: #fef2f2; } /* Cabecera de tarjeta */ .app-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; } .app-card-title { font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; margin: 0; color: var(--tender-black); } .app-card-meta { margin: 2px 0 0; font-size: 0.8rem; color: var(--tender-grey-tr); } /* Cuerpo: filas clave/valor */ .app-card-body { border-radius: 12px; background: linear-gradient(135deg, #f9fafb, #f3f4f6); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .app-card-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 0.85rem; } .app-card-label { flex: 0 0 45%; font-weight: 500; color: var(--tender-grey); } .app-card-value { flex: 1 1 auto; text-align: right; color: rgba(15, 23, 42, 0.8); word-wrap: break-word; word-break: break-word; } /* Pie de tarjeta: botones */ .app-card-footer { margin-top: 8px; display: flex; justify-content: flex-end; gap: 8px; } /* Estado de carga al eliminar una aplicación */ .app-card--loading { position: relative; opacity: 0.6; pointer-events: none; } .app-card--loading::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.6); } .app-card--loading::before { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin-top: -11px; margin-left: -11px; border-radius: 50%; border: 3px solid rgba(148, 163, 184, 0.7); border-top-color: var(--tender-main); animation: app-card-spinner 0.8s linear infinite; } @keyframes app-card-spinner { to { transform: rotate(360deg); } } /* =========================================================== MODAL APLICACIONES =========================================================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: 999; } .modal-window { background: #ffffff; border-radius: 16px; max-width: 640px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25); } .modal-header, .modal-footer { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; } .modal-title { font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; margin: 0; } .modal-close { border: none; background: transparent; font-size: 1.2rem; cursor: pointer; } .modal-body { padding: 10px 18px 14px; overflow-y: auto; } /* Formulario dentro del modal */ .form-rows { display: flex; flex-direction: column; gap: 10px; } .form-row label { display: block; font-size: 0.85rem; margin-bottom: 3px; color: var(--tender-grey-tr); } .form-row input.editing { width: 100%; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.7); padding: 6px 10px; font-size: 0.85rem; } .form-row--split { display: flex; gap: 10px; } .form-row--split .form-field { flex: 1; } /* Árbol Territorios / Sectores */ /* Contenedor general del árbol (NUTS / CPV) */ .tree-container { border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.7); /* mismo estilo que inputs */ padding: 0; font-size: 0.8rem; color: var(--tender-grey-tr); background: #ffffff; } .tree-card { background: #ffffff; border-radius: 10px; /* igual que los inputs del modal */ box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12); border: 1px solid rgba(148, 163, 184, 0.4); overflow: hidden; } .tree-card-header { width: 100%; background: var(--tender-main); /* azul marca */ color: #ffffff; border: none; padding: 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 500; cursor: pointer; border-radius: 10px 10px 0 0; /* como el resto de controles */ } .tree-card-header:focus { outline: none; box-shadow: none; -webkit-tap-highlight-color: transparent; } .tree-card-header .tree-arrow { font-size: 0.9rem; } .tree-card-body { border-top: 1px solid var(--tender-main); border-radius: 0 0 10px 10px; padding: 10px 14px; background: #ffffff; } /* Toolbar + filtro + scroll se quedan igual */ .tree-toolbar { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: var(--tender-grey-tr); } .tree-filter-input { flex: 1; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); padding: 4px 10px; font-size: 0.8rem; } .tree-scroll { max-height: 260px; overflow-y: auto; font-size: 0.8rem; } /* Árbol sin bullets, sólo sangría por nivel */ .tree-root, .tree-children { list-style: none; margin: 0; padding-left: 0; } .tree-node { margin: 2px 0; } .tree-node-label { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; padding: 2px 0; } .tree-node-label input[type="checkbox"] { margin: 0; } /* Nodos ocultos por filtro */ .tree-node--hidden { display: none; } /* =========================================================== RESPONSIVE =========================================================== */ @media (max-width: 1024px) { .dashboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-grid { grid-template-columns: 1fr; grid-auto-rows: 260px; } .layout-main { padding: 16px; } } @media (max-width: 768px) { .sidebar { width: 64px; } .layout-main { margin-left: 64px; width: calc(100% - 64px); } .topbar { flex-direction: column; align-items: flex-start; gap: 12px; } .user-name { display: none; } .dashboard-main { max-width: 100%; margin: 16px auto 24px; padding: 0 12px; } .apps-header { flex-direction: column; align-items: flex-start; } .app-card-row { flex-direction: column; align-items: flex-start; } .app-card-value { text-align: left; } } /* ============================ BUSCADOR AVANZADO ============================ */ .search-main { margin-top: 20px; } .search-layout { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); gap: 20px; } .search-filters { background-color: var(--tender-navbar); border-radius: 18px; padding: 14px 14px 16px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 12px; } .search-filters-header { display: flex; align-items: center; gap: 6px; } .search-save-input { flex: 1; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); padding: 6px 10px; font-size: 0.85rem; } .search-icon-button { width: 32px; height: 32px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); background: #ffffff; font-size: 0.8rem; cursor: pointer; } .search-main-button { width: 100%; border: none; border-radius: 999px; padding: 8px 12px; font-size: 0.9rem; font-weight: 500; background-color: #15803d; color: #ffffff; cursor: pointer; margin-top: 4px; } .search-main-button:hover { background-color: #166534; } .search-scope { margin-top: 4px; display: flex; flex-direction: column; gap: 4px; } .search-scope-label { font-size: 0.8rem; color: var(--tender-grey-tr); } .search-scope-select { border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.7); padding: 6px 10px; font-size: 0.85rem; } /* Grupos de filtros */ .search-filter-group { background-color: var(--tender-main-min); border-radius: 12px; padding: 8px 10px; } .search-filter-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .search-filter-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--tender-white); } .search-filter-group[data-filter="fechas"] .search-filter-header, .search-filter-group[data-filter="expediente"] .search-filter-header, .search-filter-group[data-filter="texto"] .search-filter-header, .search-filter-group[data-filter="importe"] .search-filter-header, .search-filter-group[data-filter="clasificacion"] .search-filter-header { background-color: var(--tender-main); border-radius: 9px; padding: 6px 8px; } .search-filter-toggle { border: none; background: transparent; color: var(--tender-white); cursor: pointer; font-size: 0.8rem; } .search-filter-body { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; } .search-field-label { font-size: 0.75rem; color: var(--tender-grey-tr); } .search-input, .search-select { width: 100%; border-radius: 8px; border: 1px solid rgba(148, 163, 184, 0.8); padding: 6px 8px; font-size: 0.85rem; background-color: #ffffff; } .search-inline-field { display: flex; gap: 4px; } .search-inline-add { min-width: 32px; border-radius: 8px; border: 1px solid rgba(22, 163, 74, 0.8); background-color: #ecfdf3; color: #16a34a; font-weight: 600; cursor: pointer; } .search-filter-group--collapsed .search-filter-body { display: none; } /* Footer filtros */ .search-filter-footer { margin-top: 6px; } .search-link-button { border: none; background: transparent; padding: 0; font-size: 0.8rem; color: var(--tender-main); cursor: pointer; text-decoration: underline; } /* Resultados */ .search-results { background-color: var(--tender-navbar); border-radius: 18px; padding: 16px 18px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08); display: flex; flex-direction: column; gap: 12px; } .search-results-header { margin-bottom: 4px; } .search-results-title { margin: 0; font-size: 1rem; font-weight: 600; } .search-results-subtitle { margin: 2px 0 0; font-size: 0.85rem; color: var(--tender-grey-tr); } .search-results-placeholder { border-radius: 12px; border: 1px dashed rgba(148, 163, 184, 0.7); padding: 18px 14px; font-size: 0.85rem; color: var(--tender-grey-tr); } .search-results-hint { margin-top: 4px; } /* Responsive */ @media (max-width: 992px) { .search-layout { grid-template-columns: minmax(0, 1fr); } } .panel-info { width: 22px; height: 22px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.6); background-color: #ffffff; font-size: 0.75rem; font-weight: 600; color: rgba(15, 23, 42, 0.7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .panel-info:hover { background-color: rgba(148, 163, 184, 0.08); } /* Popover de texto como overlay dentro del panel */ .panel-info-popover { display: none; position: absolute; left: 16px; right: 16px; top: 40px; /* justo debajo del header */ padding: 8px 10px; border-radius: 12px; background-color: rgba(249, 250, 251, 0.96); border: 1px solid rgba(148, 163, 184, 0.4); font-size: 0.8rem; color: #6b7280; z-index: 5; /* por encima de la gráfica */ box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12); } .panel-info-popover p { margin: 0; } /* Cuando está activa */ .panel-info-popover--open { display: block; } /* Tooltip específico de la sección del motor */ .panel-info-popover--section { left: auto; /* ignoramos left */ right: 0; /* pegado al icono, lado derecho */ width: min(420px, 70vw); /* ancho máximo razonable */ max-height: 260px; /* para no tapar todo el viewport */ overflow-y: auto; /* scroll interno si el texto es largo */ top: 40px; /* sigue apareciendo justo bajo el header */ } .modal-window { max-width: 900px; /* antes era más estrecho */ width: 90vw; max-height: 90vh; } .modal-body { max-height: calc(90vh - 120px); overflow-y: auto; } /* Wrapper para el autocomplete del usuario en el modal de aplicaciones */ .autocomplete-usuario-wrapper { position: relative; } /* Wrapper para el autocomplete del usuario en el modal de aplicaciones */ .autocomplete-usuario-wrapper { position: relative; } /* Icono de lupa dentro del input */ .autocomplete-usuario-wrapper::before { content: "🔍"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 0.85rem; color: var(--tender-grey-tr); pointer-events: none; } /* Damos espacio a la lupa en el input del usuario */ .autocomplete-usuario-wrapper > input[type="text"] { padding-left: 30px; /* o ajusta a tu gusto */ } /* Lista desplegable de usuarios (si no la tenías aún) */ .autocomplete-usuarios-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; background: #ffffff; border-radius: 10px; border: 1px solid rgba(148, 163, 184, 0.7); box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12); max-height: 220px; overflow-y: auto; font-size: 0.82rem; } .autocomplete-usuarios-list.hidden { display: none; } .autocomplete-item { padding: 6px 10px; cursor: pointer; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .autocomplete-item:hover { background-color: #f3f4f6; } /* Overlay para confirmaciones rápidas */ .confirm-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.35); display: flex; align-items: center; justify-content: center; z-index: 60; } /* Caja de confirmación */ .confirm-dialog { background: #ffffff; border-radius: 18px; box-shadow: 0 25px 60px rgba(15, 23, 42, 0.25); max-width: 420px; width: 90vw; padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 0.95rem; } .confirm-dialog-title { font-weight: 600; color: #0f172a; font-size: 1rem; margin-bottom: 4px; } .confirm-dialog-body { color: #4b5563; } .confirm-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; } /* Botones de la confirmación: reutilizan tus estilos base */ .confirm-btn { border-radius: 999px; padding: 6px 16px; font-size: 0.85rem; font-weight: 500; border: none; cursor: pointer; } .confirm-btn-secondary { background: #e5e7eb; color: #111827; } .confirm-btn-primary { background: var(--tender-main); color: #ffffff; } .app-card-content { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 20px; border-radius: 16px; background: #f8fafc; } /* Bloques */ .app-card-block { background: white; padding: 16px; border-radius: 14px; border: 1px solid #e2e8f0; } /* Etiquetas */ .app-card-label { font-size: 0.85rem; color: #6b7280; font-weight: 500; margin-bottom: 4px; } /* Valores */ .app-card-value { font-size: 0.95rem; color: #1f2937; margin-bottom: 12px; } /* NUTS bloque grande */ .nuts-list span { display: inline-block; margin-right: 8px; margin-bottom: 4px; background: #f1f5f9; padding: 3px 8px; border-radius: 6px; color: #334155; } /* === Layout interno de las tarjetas de aplicación (CPV + NUTS + campos) === */ .app-card-block--nuts { background: #f8fafc; } /* Cabecera de cada bloque (CPVs / NUTS) */ .app-card-block-header { font-size: 0.8rem; font-weight: 500; color: var(--tender-grey); margin-bottom: 2px; } /* Contenido de cada bloque: chips */ .app-card-block-body { font-size: 0.9rem; color: rgba(15, 23, 42, 0.9); display: flex; flex-wrap: wrap; gap: 4px; } /* Chips CPV */ .chip { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 0.8rem; margin: 0 4px 4px 0; } .chip--cpv { background: #e0f2fe; color: #0369a1; } /* NUTS en bloque con scroll */ .nuts-list { max-height: 160px; overflow-y: auto; padding-right: 4px; } .nut-chip { display: inline-block; margin: 0 4px 4px 0; padding: 3px 8px; border-radius: 8px; background: #f1f5f9; color: #334155; font-size: 0.78rem; } /* Fila de campos inferiores (palabras / importes) */ .app-card-fields { margin-top: 8px; padding: 4px 2px 0; display: flex; flex-direction: column; gap: 4px; } .app-card-field { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 0.85rem; } .app-card-field-label { font-weight: 500; color: var(--tender-grey); } .app-card-field-value { flex: 1 1 auto; text-align: right; color: rgba(15, 23, 42, 0.9); word-break: break-word; } /* Texto “Sin datos” si alguna vez lo usamos */ .app-card-empty { color: var(--tender-grey-tr); font-style: italic; } /* Responsive: una columna en pantallas estrechas */ @media (max-width: 900px) { .app-card-content { grid-template-columns: minmax(0, 1fr); } .app-card-field { flex-direction: column; align-items: flex-start; } .app-card-field-value { text-align: left; } } /* =========================================================== MOTOR DE CLASIFICACIÓN =========================================================== */ .motor-toolbar { display: flex; align-items: center; gap: 8px; } .motor-toolbar-label { font-size: 0.8rem; color: var(--tender-grey-tr); } .motor-toolbar-select { padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.4); font-size: 0.8rem; background-color: #ffffff; } /* Reutiliza la base de .app-card, sólo damos un acento distinto */ .motor-card { border: 2px solid var(--tender-main); border-radius: 18px; /* igual que .app-card */ } .motor-card--no-line { border-color: #fecaca; } /* Zona de badge con chip + score */ .motor-card-badge { display: flex; flex-direction: row; /* 👈 en línea */ align-items: center; gap: 8px; } /* Chips de estado */ .motor-chip { font-size: 0.7rem; padding: 3px 8px; border-radius: 999px; background-color: var(--tender-main-min); color: var(--tender-main); } .motor-chip--no-line { background-color: #fee2e2; color: var(--tender-red); } /* Puntuación */ .motor-score { font-size: 0.8rem; font-weight: 600; color: var(--tender-grey); } /* Footer de las tarjetas del motor */ .motor-card-footer { justify-content: space-between; } /* Mensajes vacíos/estado */ .motor-empty { font-size: 0.85rem; color: var(--tender-grey-tr); padding: 12px 4px; } /* ============================ MOTOR - listado derecho ============================ */ .motor-card-grid { width: 100%; display: flex; flex-direction: column; gap: 12px; /* Que ocupe el alto disponible en el panel y haga scroll interno cuando haya muchas tarjetas */ flex: 1 1 auto; min-height: 0; /* importante dentro de flex */ overflow-y: auto; padding-right: 4px; /* aire para el scrollbar */ } /* Toolbar de filtros */ .motor-list-toolbar { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; } .motor-list-filter { border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.32); background-color: #ffffff; padding: 3px 10px; font-size: 0.75rem; color: var(--tender-grey); cursor: pointer; } .motor-list-filter--active { background-color: var(--tender-main-min); border-color: var(--tender-main); color: var(--tender-main); } /* Contenedor del botón "Mostrar más" */ .motor-list-more { margin-top: 12px; display: flex; justify-content: center; } .motor-list-more-btn { font-size: 0.8rem; padding: 6px 16px; border-radius: 999px; } .panel-body--no-border { border: none; background: transparent; /* override de panel-body para el motor */ padding: 12px 14px; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }