/* ================================================================= SIGEIM — Vista PÚBLICA de información de entes externos Archivo: frontend/css/info-externa.css ----------------------------------------------------------------- Sólo el ARMAZÓN público (cabecera, franja de estado, pie). Las tarjetas de datos son las mismas del panel y se estilan con /css/dashboard.css, que esta página carga sin modificar: los tokens (--primary-color, --gradient-hero…), `.sec-ancha` y la subida a 4 columnas de `#section-info .info-grid-4` viven allí y no se reescriben aquí. `nav.js` inyecta su barra fija de 40 px y reserva el hueco sumando `padding-top` al ; por eso aquí no se fija ninguno. ================================================================= */ body { background: #f8f9fc; } /* --- Cabecera pública ------------------------------------------ */ .iep-header { background: var(--gradient-hero, linear-gradient(135deg, #1B3A5C 0%, #2E6BA6 100%)); color: #fff; } .iep-header__inner { max-width: var(--sec-ancha-max, 2200px); margin: 0 auto; padding: 0.9rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .iep-header__title { font-size: 1.05rem; font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 0.5rem; } /* Mínimo del proyecto: 14px con line-height ~1.5. El subtítulo lleva el nombre del ámbito activo, que llega del backend. */ .iep-header__scope { font-size: 0.875rem; line-height: 1.5; opacity: 0.85; } .iep-btn { background: rgba(255, 255, 255, .18); color: #fff; border: none; border-radius: 10px; padding: 0.5rem 0.9rem; font-size: 0.875rem; font-weight: 700; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; gap: 0.45rem; font-family: inherit; text-decoration: none; transition: background .15s; } .iep-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .3); } .iep-btn:disabled { opacity: .55; cursor: progress; } /* --- Franja de estado ------------------------------------------- */ .iep-estado { max-width: var(--sec-ancha-max, 2200px); margin: 0 auto; padding: 0.65rem 1rem 0; font-size: 0.875rem; line-height: 1.5; color: #4b5563; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .iep-estado__punto { width: 0.6rem; height: 0.6rem; border-radius: 9999px; flex-shrink: 0; background: #9ca3af; } .iep-estado[data-estado="cargando"] .iep-estado__punto { animation: iep-latido 1.1s ease-in-out infinite; } @keyframes iep-latido { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } /* Aviso de fallo del resumen: caja propia, visible, con reintento. No sustituye a los estados de cada tarjeta — los acompaña. */ .iep-fallo { max-width: var(--sec-ancha-max, 2200px); margin: 0.65rem auto 0; padding: 0.75rem 1rem; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; border-radius: 10px; font-size: 0.875rem; line-height: 1.5; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .iep-fallo .iep-btn { background: #b91c1c; } .iep-fallo .iep-btn:hover:not(:disabled) { background: #991b1b; } /* --- Pie -------------------------------------------------------- */ .iep-footer { background: var(--gradient-hero, linear-gradient(135deg, #1B3A5C 0%, #2E6BA6 100%)); color: rgba(255, 255, 255, .92); text-align: center; padding: 1.25rem 1rem; margin-top: 2rem; font-size: 0.875rem; line-height: 1.5; } .iep-footer a { color: #fff; font-weight: 700; text-decoration: underline; } /* --- Móvil (~360 px) -------------------------------------------- */ @media (max-width: 480px) { .iep-header__inner { padding: 0.75rem 0.75rem; gap: 0.6rem; } .iep-header__title { font-size: 0.95rem; } .iep-header__acciones { width: 100%; display: flex; gap: 0.5rem; } .iep-header__acciones .iep-btn { flex: 1 1 0; justify-content: center; } .iep-estado, .iep-fallo { padding-left: 0.75rem; padding-right: 0.75rem; } }