/* ============================================================
   Reloj Poder Personal (rpp) - Estilos del reloj magico
   Namespace: .rpp-app
   ============================================================ */

.rpp-app {
    --rpp-gradiente: linear-gradient(135deg, #f59e0b 0%, #8b5cf6 100%);
    --rpp-oro: #f59e0b;
    --rpp-purpura: #8b5cf6;
    --rpp-sombra: 0 8px 25px rgba(139,92,246,0.22);
    --rpp-radio: 16px;
    --rpp-trans: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    color: #e2e8f0;
    max-width: 700px;
    margin: 0 auto;
}

.rpp-fase { animation: rppFadeIn 0.5s ease; }
@keyframes rppFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.rpp-header { text-align: center; margin-bottom: 1.5rem; }
.rpp-titulo { font-size: 1.5rem; font-weight: 700; background: var(--rpp-gradiente); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.3rem; }
.rpp-subtitulo { opacity: 0.75; font-size: 0.9rem; }

.rpp-form-box { background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.2); border-radius: var(--rpp-radio); padding: 2rem; text-align: center; }
.rpp-campo { margin-bottom: 1.5rem; }
.rpp-label { display: block; margin-bottom: 0.5rem; font-weight: 500; opacity: 0.85; }
.rpp-input { width: 100%; padding: 0.9rem; border-radius: 12px; border: 1px solid rgba(139,92,246,0.22); background: rgba(255,255,255,0.05); color: #e2e8f0; font-family: inherit; font-size: 1rem; box-sizing: border-box; }
.rpp-input:focus { outline: none; border-color: var(--rpp-purpura); }
.rpp-btn-calcular { display: block; width: 100%; background: var(--rpp-gradiente); border: none; padding: 1rem; border-radius: 30px; color: white; font-weight: 700; font-size: 1.05rem; cursor: pointer; transition: var(--rpp-trans); }
.rpp-btn-calcular:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(139,92,246,0.35); }
.rpp-error { background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.25); color: #fca5a5; padding: 0.8rem; border-radius: 10px; margin-top: 1rem; font-size: 0.9rem; }

.rpp-reloj-container { text-align: center; margin: 1.5rem 0; }
.rpp-reloj { width: 150px; height: 150px; margin: 0 auto; border-radius: 50%; background: rgba(139,92,246,0.08); border: 3px solid rgba(139,92,246,0.3); display: flex; align-items: center; justify-content: center; font-size: 4rem; animation: rppGlow 3s ease-in-out infinite; }
@keyframes rppGlow { 0%,100% { box-shadow: 0 0 15px rgba(139,92,246,0.2); } 50% { box-shadow: 0 0 35px rgba(139,92,246,0.4); } }

.rpp-ciclos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; }
.rpp-ciclo-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(139,92,246,0.15); border-radius: var(--rpp-radio); padding: 1.2rem; text-align: center; }
.rpp-ciclo-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.rpp-ciclo-card h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.rpp-ciclo-hora { font-weight: 700; color: var(--rpp-oro); margin-bottom: 0.5rem; }
.rpp-ciclo-card p { font-size: 0.82rem; opacity: 0.7; }

.rpp-tipos-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; opacity: 0.85; }
.rpp-tipos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; margin-bottom: 1.5rem; }
.rpp-tipo-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 0.8rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rpp-tipo-icon { font-size: 1.5rem; }
.rpp-tipo-info { font-size: 0.85rem; }
.rpp-tipo-info strong { color: var(--rpp-oro); }
.rpp-tipo-desc { font-size: 0.75rem; opacity: 0.55; width: 100%; margin-top: 0.3rem; }

.rpp-btn-reinicio { display: block; width: 100%; background: var(--rpp-gradiente); border: none; padding: 0.9rem; border-radius: 30px; color: white; font-weight: 700; font-size: 1rem; cursor: pointer; transition: var(--rpp-trans); }
.rpp-btn-reinicio:hover { transform: translateY(-3px); }

@media (max-width: 480px) {
    .rpp-ciclos-grid, .rpp-tipos-grid { grid-template-columns: 1fr; }
}
@media (prefers-contrast: high) { .rpp-ciclo-card, .rpp-tipo-card { border: 2px solid white; } }
@media (prefers-reduced-motion: reduce) { .rpp-reloj { animation: none; } }