/* Estilos compartidos Suite de Generadores */
body.gen-page { background: #f9fafb !important; color: #1f2937 !important; font-family: 'Poppins', sans-serif !important; min-height: 100vh; }
.gen-page .main-header { background: #111827; }
.gen-main { max-width: 1200px; margin: 0 auto; padding: 20px 20px 40px; }
.gen-page-title { font-size: 2rem; font-weight: 800; color: #1f2937; letter-spacing: -0.025em; margin-bottom: 4px; text-align: center; }
.gen-page-subtitle { color: #4b5563; font-size: 1rem; margin-bottom: 24px; text-align: center; }
.back-link { display: inline-flex; align-items: center; gap: 8px; background: #ffc107; color: #1f2937; text-decoration: none; font-weight: 700; font-size: 0.9rem; margin-bottom: 20px; padding: 10px 20px; border-radius: 9999px; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(255, 193, 7, 0.35); }
.back-link:hover { background: #ffca2c; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255, 193, 7, 0.45); text-decoration: none; color: #1f2937; }
.btn-volver-gen { display: inline-flex; align-items: center; gap: 8px; background: #0891b2; color: white !important; font-weight: 700; font-size: 1rem; padding: 14px 28px; border-radius: 9999px; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(8, 145, 178, 0.4); }
.btn-volver-gen:hover { background: #0e7490; transform: translateY(-2px); color: white !important; }
.volver-sobre-grid { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.volver-sobre-grid .btn-volver-gen { margin-bottom: 20px; }
.volver-sobre-grid .filters-bar,
.volver-sobre-grid .gen-grid,
.volver-sobre-grid .ebr-levels-grid { width: 100%; }
.filters-bar { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 0; justify-content: center; }
.filter-btn { padding: 8px 18px; border-radius: 9999px; border: 1px solid #d1d5db; font-weight: 500; font-size: 0.85rem; color: #4b5563; background: white; cursor: pointer; transition: all 0.2s ease; }
.filter-btn:hover { background: #f3f4f6; border-color: #9ca3af; }
.filter-btn.active { background: #0891b2; color: white; border-color: #0891b2; }
.gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; padding: 20px 0; }
.gen-card { background: white; border-radius: 16px; border: 1px solid #1f2937; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; overflow: hidden; position: relative; text-decoration: none; color: inherit; }
.gen-card:hover { transform: translateY(-8px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.07); }
.gen-card-header { padding: 20px; display: flex; align-items: flex-start; gap: 14px; }
.gen-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.gen-icon .lucide { width: 28px; height: 28px; }
.gen-icon.planificacion { background: #dbeafe; color: #2563eb; }
.gen-icon.recursos { background: #dcfce7; color: #16a34a; }
.gen-icon.gestion { background: #f3e8ff; color: #9333ea; }
.gen-card-info { flex: 1; }
.gen-card-info h3 { font-size: 1.05rem; font-weight: 600; color: #1f2937; margin: 0 0 4px 0; line-height: 1.3; }
.gen-card-info p { font-size: 0.85rem; color: #4b5563; line-height: 1.5; margin: 0; }
.gen-card-footer { margin-top: auto; padding: 12px 20px; border-top: 1px solid #e5e7eb; background: #f9fafb; font-weight: 500; font-size: 0.85rem; color: #0891b2; text-align: right; }
.gen-badge-new { position: absolute; top: 10px; right: 10px; background: #ffc107; color: #000; font-size: 0.65rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; z-index: 10; }
.gen-card.is-new { border: 2px solid #ffc107 !important; }
.iframe-modal { display: flex; position: fixed; inset: 0; background: rgba(17, 24, 39, 0.9); z-index: 9999; flex-direction: column; padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; }
.iframe-modal.active { opacity: 1; visibility: visible; pointer-events: auto; }
.iframe-modal .modal-toolbar { display: flex; justify-content: flex-end; align-items: center; padding: 12px 0; flex-shrink: 0; z-index: 10001; background: rgba(17, 24, 39, 0.98); }
.iframe-modal .btn-close-iframe { padding: 10px 24px; border-radius: 9999px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 6px; border: none; text-decoration: none; background: #dc2626; color: white; }
.iframe-modal .btn-close-iframe:hover { background: #b91c1c; }
.iframe-modal iframe { flex-grow: 1; width: 100%; border: none; border-radius: 12px; background: #fff; z-index: 1; }
.gen-loader { position: fixed; inset: 0; background: #f9fafb; display: flex; align-items: center; justify-content: center; z-index: 9998; }
.gen-spinner { width: 48px; height: 48px; border: 4px solid #e5e7eb; border-top-color: #0891b2; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast-prox { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #1f2937; color: #fff; padding: 14px 28px; border-radius: 12px; font-size: 0.9rem; font-weight: 600; z-index: 10000; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.toast-prox.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.category-selector { display: flex; gap: 28px; justify-content: center; align-items: stretch; padding: 30px 0 10px; flex-wrap: wrap; }
.category-card { width: 340px; min-height: 280px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 36px 28px; text-align: center; transition: all 0.3s ease; border: 2px solid transparent; text-decoration: none; color: inherit; }
.category-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.category-card .cat-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.category-card .cat-icon .lucide { width: 36px; height: 36px; }
.category-card .cat-title { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; }
.category-card .cat-subtitle { font-size: 0.9rem; font-weight: 500; opacity: 0.85; line-height: 1.4; }
.category-card .cat-count { font-size: 0.8rem; font-weight: 600; padding: 6px 16px; border-radius: 9999px; margin-top: 4px; }
.ebr-levels-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 30px 0 10px; align-items: stretch; }
.ebr-levels-grid .category-card { width: 100%; min-height: 200px; padding: 24px 16px; gap: 10px; border-radius: 16px; }
.ebr-levels-grid .category-card .cat-icon { width: 52px; height: 52px; }
.ebr-levels-grid .category-card .cat-icon .lucide { width: 26px; height: 26px; }
.ebr-levels-grid .category-card .cat-title { font-size: 1.25rem; }
.ebr-levels-grid .category-card .cat-subtitle { font-size: 0.8rem; line-height: 1.3; }
.ebr-levels-grid .category-card .cat-count { font-size: 0.75rem; padding: 4px 12px; }
.category-card.ebr { background: linear-gradient(135deg, #0e7490, #06b6d4); color: white; border-color: #0891b2; }
.category-card.ebr .cat-icon, .category-card.ebr .cat-count { background: rgba(255,255,255,0.2); }
.category-card.inicial { background: linear-gradient(135deg, #059669, #10b981); color: white; border-color: #0d9488; }
.category-card.inicial .cat-icon, .category-card.inicial .cat-count { background: rgba(255,255,255,0.2); }
.category-card.primaria { background: linear-gradient(135deg, #0e7490, #06b6d4); color: white; border-color: #0891b2; }
.category-card.primaria .cat-icon, .category-card.primaria .cat-count { background: rgba(255,255,255,0.2); }
.category-card.secundaria { background: linear-gradient(135deg, #d97706, #f59e0b); color: white; border-color: #b45309; }
.category-card.secundaria .cat-icon, .category-card.secundaria .cat-count { background: rgba(255,255,255,0.2); }
.category-card.unidocente-multigrado { background: linear-gradient(135deg, #4338ca, #6366f1); color: white; border-color: #4f46e5; }
.category-card.unidocente-multigrado .cat-icon, .category-card.unidocente-multigrado .cat-count { background: rgba(255,255,255,0.2); }
.category-card.eba-ebe { background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; border-color: #8b5cf6; }
.category-card.eba-ebe .cat-icon, .category-card.eba-ebe .cat-count { background: rgba(255,255,255,0.2); }
@media (max-width: 768px) {
  .gen-grid { grid-template-columns: 1fr; }
  .gen-page-title { font-size: 1.5rem; }
  .ebr-levels-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ebr-levels-grid .category-card { min-height: 180px; }
}
@media (max-width: 480px) {
  .ebr-levels-grid { grid-template-columns: 1fr; }
  .ebr-levels-grid .category-card { min-height: 140px; }
}