Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Análisis Cuantitativo del Sector Biotecnológico</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #161b22; | |
| --panel-bg: #1f2633; | |
| --text-primary: #c9d1d9; | |
| --text-secondary: #8b949e; | |
| --border-color: #30363d; | |
| --color-eeuu: #3b82f6; /* Blue */ | |
| --color-europa-de: #22c55e; /* Green */ | |
| --color-europa-fr: #16a34a; /* Darker Green */ | |
| --color-europa-es: #15803d; /* Darkest Green */ | |
| --color-europa-ch: #4ade80; /* Lighter Green */ | |
| --color-europa-be: #84cc16; /* Lime Green */ | |
| --color-corea: #f97316; /* Orange */ | |
| --color-amlat: #ef4444; /* Red */ | |
| --color-alemania-alt: #eab308; /* Gold */ | |
| --color-francia-alt: #db2777; /* Pink */ | |
| --color-espana-alt: #dc2626; /* Red */ | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background-color: #0d1117; | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .slide { | |
| width: 1280px; | |
| height: 720px; | |
| background-color: var(--bg-dark); | |
| color: var(--text-primary); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 32px; | |
| } | |
| .main-header { | |
| text-align: center; | |
| margin-bottom: 24px; | |
| } | |
| .main-header h1 { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| .main-header p { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| font-weight: 400; | |
| } | |
| .dashboard { | |
| flex-grow: 1; | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| grid-template-rows: repeat(2, 1fr); | |
| gap: 24px; | |
| } | |
| .panel { | |
| background-color: var(--panel-bg); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| animation: fadeIn 0.5s ease-in-out forwards; | |
| opacity: 0; | |
| } | |
| @keyframes fadeIn { | |
| to { | |
| opacity: 1; | |
| } | |
| } | |
| .panel-empresas { grid-column: 1 / 3; animation-delay: 0.1s; } | |
| .panel-inversion { grid-column: 3 / 5; animation-delay: 0.2s; } | |
| .panel-patentes { grid-column: 5 / 7; animation-delay: 0.3s; } | |
| .panel-eficiencia { grid-column: 1 / 4; animation-delay: 0.4s; } | |
| .panel-ratio { grid-column: 4 / 7; animation-delay: 0.5s; } | |
| .panel-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-secondary); | |
| margin-bottom: 16px; | |
| border-bottom: 1px solid var(--border-color); | |
| padding-bottom: 8px; | |
| } | |
| /* Panel 1: Número de Empresas */ | |
| .empresas-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 20px; | |
| flex-grow: 1; | |
| align-content: center; | |
| } | |
| .empresa-item { | |
| text-align: center; | |
| } | |
| .empresa-item .number { | |
| font-size: 32px; | |
| font-weight: 700; | |
| } | |
| .empresa-item .country { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| } | |
| .empresa-item .number.eeuu { color: var(--color-eeuu); } | |
| .empresa-item .number.francia { color: var(--color-europa-fr); } | |
| .empresa-item .number.corea { color: var(--color-corea); } | |
| .empresa-item .number.espana { color: var(--color-europa-es); } | |
| .empresa-item .number.alemania { color: var(--color-europa-de); } | |
| .empresa-item .number.amlat { color: var(--color-amlat); } | |
| /* Panel 2: Inversión I+D */ | |
| .inversion-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| flex-grow: 1; | |
| } | |
| .donut-chart-container { | |
| position: relative; | |
| width: 140px; | |
| height: 140px; | |
| } | |
| .donut-chart { | |
| width: 100%; | |
| height: 100%; | |
| border-radius: 50%; | |
| background: conic-gradient( | |
| var(--color-eeuu) 0% 74.7%, | |
| var(--color-europa-de) 74.7% 82.6%, | |
| var(--color-europa-fr) 82.6% 90.4%, | |
| var(--color-corea) 90.4% 97.1%, | |
| var(--color-europa-es) 97.1% 99.2%, | |
| var(--color-amlat) 99.2% 100% | |
| ); | |
| transition: transform 0.5s; | |
| } | |
| .donut-chart:hover { | |
| transform: scale(1.05); | |
| } | |
| .donut-chart::before { | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 60%; | |
| height: 60%; | |
| background: var(--panel-bg); | |
| border-radius: 50%; | |
| } | |
| .legend { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| font-size: 13px; | |
| } | |
| .legend-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .legend-color { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 3px; | |
| } | |
| .legend-text { | |
| color: var(--text-secondary); | |
| } | |
| .legend-value { | |
| color: var(--text-primary); | |
| font-weight: 600; | |
| margin-left: auto; | |
| } | |
| /* Panel 3 & 5: Bar Charts */ | |
| .bar-chart { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| flex-grow: 1; | |
| justify-content: center; | |
| } | |
| .bar-item { | |
| display: grid; | |
| grid-template-columns: 70px 1fr 50px; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 13px; | |
| } | |
| .bar-label { | |
| color: var(--text-secondary); | |
| text-align: left; | |
| } | |
| .bar-container { | |
| background-color: var(--bg-dark); | |
| border-radius: 4px; | |
| height: 16px |