/* derivados.css */
.derivados-section { background: white; border-radius: 16px; padding: 25px; margin: 30px 0; }
.derivados-info { background: #e8f4fd; padding: 20px; border-radius: 12px; margin-bottom: 25px; }
.derivados-info ul { margin-left: 20px; margin-top: 10px; }
.categoria-derivados { margin: 30px 0; }
.categoria-derivados h3 { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.badge-categoria { padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; }
.badge-categoria.balanceados { background: #3498db; color: white; }
.badge-categoria.sinteticos { background: #9b59b6; color: white; }
.badge-categoria.aumentados { background: #e67e22; color: white; }
.metodos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-bottom: 15px; }
.metodo-card { background: #f8f9fa; border-radius: 12px; padding: 15px; border: 1px solid #e9ecef; transition: all 0.2s; position: relative; }
.metodo-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.metodo-card.best { background: linear-gradient(135deg, #fff8e7, #fff3cd); border-color: #ffc107; }
.metodo-nombre { font-weight: 600; margin-bottom: 10px; font-size: 0.9rem; }
.best-badge { background: #ffc107; color: #856404; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; margin-left: 8px; display: inline-block; }
.metodo-metrics { display: flex; gap: 15px; margin: 10px 0; font-size: 0.75rem; color: #6c757d; }
.btn-small { display: inline-block; background: #3498db; color: white; padding: 6px 12px; border-radius: 6px; text-decoration: none; font-size: 0.75rem; margin-top: 10px; }
.btn-small:hover { background: #2980b9; }
.mejor-seleccionado { background: #d4edda; padding: 12px 20px; border-radius: 10px; margin-top: 10px; font-size: 0.9rem; }
.star { color: #f1c40f; margin-right: 5px; }
.flowchart-section { margin-top: 30px; padding: 20px; background: #f8f9fa; border-radius: 16px; text-align: center; }
.flowchart { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.flow-node { background: #e9ecef; padding: 12px 24px; border-radius: 10px; display: inline-block; min-width: 200px; }
.flow-node-group { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.flow-arrow { font-size: 1.5rem; color: #6c757d; }
.best-flow { background: #d4edda; border: 2px solid #28a745; }
.fuente-original-section { background: white; border-radius: 16px; padding: 25px; margin: 30px 0; }
.fuente-card { border: 1px solid #e9ecef; border-radius: 12px; overflow: hidden; }
.fuente-header { background: #f8f9fa; padding: 20px; border-bottom: 1px solid #e9ecef; }
.fuente-titulo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fuente-version { background: #6c757d; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.7rem; }
.fuente-autores { color: #6c757d; margin-bottom: 5px; }
.fuente-body { padding: 20px; }
.fuente-metadata { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 20px; }
.metadata-item { font-size: 0.85rem; }
.metadata-label { font-weight: 600; }
.fuente-section { margin: 20px 0; }
.fuente-section h4 { margin-bottom: 10px; color: #2c3e50; }
.citation-box { background: #f8f9fa; padding: 15px; border-radius: 8px; margin-top: 15px; }
.transformacion-section { background: white; border-radius: 16px; padding: 25px; margin: 30px 0; }
.transformacion-card { background: #f8f9fa; padding: 20px; border-radius: 12px; }
.transformacion-lista { margin-left: 20px; margin-top: 10px; }
.transformacion-lista li { margin: 8px 0; }
.codigo-details { margin-top: 15px; }
.codigo-details summary { cursor: pointer; color: #3498db; font-weight: 500; }
.codigo-block { background: #2c3e50; color: #e9ecef; padding: 15px; border-radius: 8px; overflow-x: auto; font-size: 0.7rem; font-family: monospace; margin: 10px 0; }
.btn-copy-small { background: #3498db; color: white; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 0.7rem; }
.leyenda-section { background: white; border-radius: 16px; padding: 25px; margin: 30px 0; }
.leyenda-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.leyenda-card { background: #f8f9fa; padding: 15px; border-radius: 12px; overflow-x: auto; }
.leyenda-card h3 { margin-bottom: 10px; font-size: 1rem; }
.leyenda-table { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.leyenda-table th, .leyenda-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid #dee2e6; }
.leyenda-table th { font-weight: 600; background: #e9ecef; }
@media (max-width: 768px) { .metodos-grid { grid-template-columns: 1fr; } .leyenda-grid { grid-template-columns: 1fr; } }