/* ============================================================ emergency.css — Ampara Botón de emergencia flotante, dropdown de contactos de emergencia, utilidades de visibilidad y clases de idioma. ✂ Eliminar de styles.css: → 386–415 (.emergency-btn base) → 657–697 (.fixed.emergency-btn + @keyframes pulse) → 763–765 (body.dark-mode .fixed.emergency-btn) → 857–869 (body.dark-mode #emergency-dropdown) → 887–945 (.hidden, #emergency-dropdown-btn, lang-*, #emergency-dropdown) 🔧 Los dos bloques de .emergency-btn fueron fusionados en uno. ============================================================ */ /* ============================================================ BOTÓN BASE ============================================================ */ .emergency-btn { background-color: #dc3545; color: white; border: none; cursor: pointer; font-weight: 700; padding: 0.85rem 1.75rem; border-radius: 12px; box-shadow: 0 6px 12px rgba(220, 53, 69, 0.25); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .emergency-btn:hover { background-color: #c82333; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(220, 53, 69, 0.3); } .emergency-btn:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(220, 53, 69, 0.25); } /* ============================================================ BOTÓN FLOTANTE (fixed) — con animación de pulso ============================================================ */ .fixed.emergency-btn { animation: pulse 2s infinite; } .fixed.emergency-btn:hover { transform: scale(1.1); box-shadow: 0 10px 20px rgba(220, 53, 69, 0.4); } body.dark-mode .fixed.emergency-btn { box-shadow: 0 6px 12px rgba(220, 53, 69, 0.4); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } } /* ============================================================ POSICIONAMIENTO DEL CONTENEDOR FLOTANTE ============================================================ */ #emergency-dropdown-btn { position: fixed; bottom: 1.5rem; left: 1.5rem; z-index: 50; } /* Ocultar cuando la pantalla principal está hidden */ #main-screen.hidden ~ #emergency-dropdown-btn { display: none !important; } /* ============================================================ DROPDOWN DE CONTACTOS DE EMERGENCIA ============================================================ */ #emergency-dropdown { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 0.5rem; background-color: white; border-radius: 0.5rem; border: 1px solid #e5e7eb; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); overflow: hidden; min-width: max-content; max-width: 90vw; } #emergency-dropdown a { display: block; padding: 0.75rem 1rem; color: #374151; text-decoration: none; white-space: nowrap; font-size: 0.9rem; text-align: center; transition: background-color 0.2s ease; } #emergency-dropdown a:hover { background-color: #f3f4f6; } /* Dark mode */ body.dark-mode #emergency-dropdown { background-color: #2d3748; border-color: #4a5568; } body.dark-mode #emergency-dropdown a { color: #e2e8f0; } body.dark-mode #emergency-dropdown a:hover { background-color: #4a5568; } /* ============================================================ VISIBILIDAD POR IDIOMA Controla qué contenido se muestra según data-lang en . ============================================================ */ .lang-es, .lang-qu, .lang-ay, .lang-awa { display: none; } body[data-lang="es"] .lang-es { display: inline; } body[data-lang="qu"] .lang-qu { display: inline; } body[data-lang="ay"] .lang-ay { display: inline; } body[data-lang="awa"] .lang-awa { display: inline; } /* Variante block (para elementos de bloque) */ body[data-lang="es"] .lang-es.block { display: block; } body[data-lang="qu"] .lang-qu.block { display: block; } body[data-lang="ay"] .lang-ay.block { display: block; } body[data-lang="awa"] .lang-awa.block { display: block; } /* ============================================================ UTILIDADES ============================================================ */ .hidden { display: none !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 640px) { .fixed.emergency-btn { padding: 0.6rem 1rem; font-size: 0.9rem; left: 1rem; bottom: 1rem; } #emergency-dropdown { max-width: 85vw; font-size: 0.85rem; } #emergency-dropdown a { padding: 0.6rem 0.8rem; font-size: 0.8rem; } } @media (max-width: 480px) { .emergency-btn { padding: 0.6rem 1rem; font-size: 0.85rem; border-radius: 10px; } }