/* ================================================
   OKRs Dashboard — CSS Frontend
   Clases: okr-* (compartidas) + okr-s1-* + okr-s2-*
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@700;800&display=swap');

:root {
    /* Paleta S1 — Pipeline (púrpura/unicornio) */
    --okr-s1-primary:  #845EC2;
    --okr-s1-dark:     #5C3A8C;
    --okr-s1-light:    #EDE9FE;
    --okr-s1-accent:   #D65DB1;

    /* Paleta S2 — Renovaciones (rosa/cerdito) */
    --okr-s2-primary:  #FF6B9D;
    --okr-s2-dark:     #E05080;
    --okr-s2-light:    #FFF0F7;
    --okr-s2-accent:   #FFB347;

    /* Neutros */
    --okr-text:    #2D1B5E;
    --okr-muted:   #8B7BA8;
    --okr-surface: #FFFFFF;
    --okr-bg:      #F8F5FF;
    --okr-border:  #E8DEFF;
    --okr-green:   #10B981;
    --okr-red:     #E74C3C;

    /* Tipografía */
    --okr-font:   'Nunito', system-ui, sans-serif;
    --okr-font-d: 'Baloo 2', cursive;

    /* Layout */
    --okr-radius:    16px;
    --okr-radius-sm: 10px;
    --okr-shadow:    0 4px 24px rgba(132,94,194,.1);
    --okr-shadow-lg: 0 12px 48px rgba(132,94,194,.2);
}

/* ── Reset scoped ──────────────────────────────── */
.okr-countdown, .okr-stat, .okr-ritmo, .okr-mascota-wrap,
.okr-barra, .okr-input-wrap, .okr-frase, .okr-s2-badge {
    box-sizing: border-box;
    font-family: var(--okr-font);
    color: var(--okr-text);
}
.okr-countdown *, .okr-stat *, .okr-ritmo *, .okr-mascota-wrap *,
.okr-barra *, .okr-input-wrap *, .okr-frase * { box-sizing: border-box; }

/* ════════════════════════════════════════════════
   COUNTDOWN GLOBAL [okr_countdown]
   ════════════════════════════════════════════════ */
.okr-countdown {
    background: linear-gradient(135deg, #1A0B3B, #2D1B5E);
    border-radius: var(--okr-radius);
    padding: 1.2rem 1.5rem;
    text-align: center;
    box-shadow: 0 6px 28px rgba(26,11,59,.3);
}
.okr-countdown--urgent {
    background: linear-gradient(135deg, #6B0000, #A01010);
    animation: okrUrgentPulse 1.5s ease-in-out infinite;
}
@keyframes okrUrgentPulse { 0%,100%{box-shadow:0 6px 28px rgba(160,16,16,.3)} 50%{box-shadow:0 8px 40px rgba(160,16,16,.6)} }
.okr-countdown--expired { background: linear-gradient(135deg, #2A2A2A, #1A1A1A); }

.okr-countdown__label {
    display: block; font-size: .65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em;
    color: rgba(255,255,255,.5); margin-bottom: .65rem;
}
.okr-countdown__digits {
    display: flex; align-items: center; justify-content: center;
    gap: .3rem; margin-bottom: .45rem;
}
.okr-countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.okr-countdown__num {
    display: block; font-family: var(--okr-font-d);
    font-size: 2rem; font-weight: 800; color: #fff; line-height: 1;
    min-width: 2ch; text-align: center;
}
.okr-countdown__sub {
    font-size: .58rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(255,255,255,.38); margin-top: .15rem;
}
.okr-countdown__sep {
    font-family: var(--okr-font-d); font-size: 1.6rem; font-weight: 800;
    color: rgba(255,255,255,.28); align-self: flex-start; margin-top: .05rem;
    animation: okrSepBlink 1s step-end infinite;
}
@keyframes okrSepBlink { 0%,100%{opacity:1} 50%{opacity:.1} }
.okr-countdown__fecha { font-size: .63rem; color: rgba(255,255,255,.28); font-weight: 600; }

/* ════════════════════════════════════════════════
   STATS — Cards de valores
   ════════════════════════════════════════════════ */
.okr-stat {
    background: var(--okr-surface);
    border: 2px solid var(--okr-border);
    border-radius: var(--okr-radius);
    padding: 1.1rem 1.4rem;
    box-shadow: var(--okr-shadow);
    transition: transform .2s, box-shadow .2s;
}
.okr-stat:hover { transform: translateY(-2px); box-shadow: var(--okr-shadow-lg); }

/* S1 */
.okr-s1-target { border-left: 5px solid var(--okr-s1-primary); }
.okr-s1-actual { border-left: 5px solid var(--okr-s1-accent); background: linear-gradient(135deg, #FDF0FF, #F5F0FF); }
.okr-s1-target .okr-stat__num { color: var(--okr-s1-primary); }
.okr-s1-actual .okr-stat__num { color: var(--okr-s1-accent); }

/* S2 */
.okr-s2-barra__fill {
    background: linear-gradient(90deg, var(--okr-s2-primary), var(--okr-s2-accent)) !important;
}
.okr-s2-hito--activo .okr-barra__hito-line  { background: var(--okr-s2-primary) !important; }
.okr-s2-hito--activo .okr-barra__hito-label { color: var(--okr-s2-primary) !important; }
.okr-s2-barra .okr-barra__pct { color: var(--okr-s2-primary); }

.okr-s2-target { border-left: 5px solid var(--okr-s2-primary); background: linear-gradient(135deg, var(--okr-s2-light), #FFF5FA); }
.okr-s2-target .okr-stat__num { color: var(--okr-s2-primary); }
.okr-s2-pct-actual { display:block; font-size:.8rem; font-weight:700; color:var(--okr-s2-dark); margin-top:.3rem; }
.okr-s2-marcador--2025 { border-left: 5px solid var(--okr-muted); }
.okr-s2-marcador--2026 { border-left: 5px solid var(--okr-s2-primary); background: var(--okr-s2-light); }
.okr-s2-marcador--2026 .okr-stat__num { color: var(--okr-s2-primary); }

.okr-stat__label {
    display: block; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em;
    color: var(--okr-muted); margin-bottom: .4rem;
}
.okr-stat__num {
    display: block; font-family: var(--okr-font-d);
    font-size: 2rem; font-weight: 800; color: var(--okr-text); line-height: 1; margin-bottom: .3rem;
}
.okr-stat__pct {
    display: inline-block; font-size: .82rem; font-weight: 800;
    color: var(--okr-s1-primary); background: rgba(132,94,194,.1);
    padding: .18rem .55rem; border-radius: 99px;
}
.okr-stat__mejora {
    display: inline-block; font-size: .88rem; font-weight: 800;
    padding: .18rem .55rem; border-radius: 99px; margin-top: .25rem;
}
.okr-stat__mejora--up      { color: var(--okr-green); background: #D1FAE5; }
.okr-stat__mejora--down    { color: var(--okr-red);   background: #FEE2E2; }
.okr-stat__mejora--neutral { color: var(--okr-muted); background: #F0EDF8; }

/* ════════════════════════════════════════════════
   MASCOTA (unicornio S1 + cerdito S2)
   ════════════════════════════════════════════════ */
.okr-mascota-wrap {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    width: var(--okr-size, 280px);
}
.okr-mascota__coins {
    position: absolute; inset: 0;
    pointer-events: none; overflow: visible; z-index: 10;
}
.okr-mascota__img {
    width: 100%; height: auto; display: block;
    transition: opacity .4s ease;
    filter: drop-shadow(0 8px 24px rgba(132,94,194,.18));
}
.okr-s2-cerdito .okr-mascota__img { filter: drop-shadow(0 8px 24px rgba(255,107,157,.18)); }
.okr-mascota__glow {
    position: absolute; inset: -15px; border-radius: 50%;
    background: radial-gradient(circle, rgba(132,94,194,.4) 0%, transparent 70%);
    opacity: 0; pointer-events: none;
}
.okr-s2-cerdito .okr-mascota__glow {
    background: radial-gradient(circle, rgba(255,107,157,.4) 0%, transparent 70%);
}

/* Badge de mejora S2 */
.okr-s2-badge {
    display: inline-block;
    font-family: var(--okr-font-d);
    font-size: 1.1rem; font-weight: 800;
    padding: .3rem .9rem; border-radius: 99px;
    margin-top: .6rem;
    box-shadow: var(--okr-shadow);
}
.okr-s2-badge--up      { background: #D1FAE5; color: var(--okr-green); }
.okr-s2-badge--down    { background: #FEE2E2; color: var(--okr-red); }
.okr-s2-badge--neutral { background: #F0EDF8; color: var(--okr-muted); }

/* ════════════════════════════════════════════════
   RITMO NECESARIO [okr_s1_ritmo]
   ════════════════════════════════════════════════ */
.okr-ritmo {
    background: var(--okr-surface); border: 2px solid var(--okr-border);
    border-radius: var(--okr-radius); padding: 1rem 1.25rem;
    box-shadow: var(--okr-shadow); transition: border-color .4s, background .4s;
}
.okr-ritmo--urgente { border-color: #FCA5A5; background: #FFF5F5; }
.okr-ritmo__label {
    display: block; font-size: .65rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--okr-muted); margin-bottom: .4rem;
}
.okr-ritmo__principal {
    display: block; font-family: var(--okr-font-d);
    font-size: 1.5rem; font-weight: 800; color: var(--okr-s1-primary); line-height: 1; margin-bottom: .25rem;
}
.okr-ritmo--urgente .okr-ritmo__principal { color: var(--okr-red); }
.okr-ritmo__secundario { display: block; font-size: .75rem; color: var(--okr-muted); line-height: 1.4; }

/* ════════════════════════════════════════════════
   BARRA DE PROGRESO [okr_s1_barra]
   ════════════════════════════════════════════════ */
.okr-barra--horizontal { width: var(--okr-barra-w, 100%); }
.okr-barra--horizontal .okr-barra__track {
    height: var(--okr-barra-h, 16px); background: var(--okr-s1-light);
    border-radius: 99px; position: relative; overflow: visible;
}
.okr-barra--horizontal .okr-barra__fill {
    height: 100%; background: linear-gradient(90deg, var(--okr-s1-primary), var(--okr-s1-accent));
    border-radius: 99px; transition: width 1s cubic-bezier(.4,0,.2,1), background .6s;
    min-width: 4px; position: relative; overflow: hidden;
}
.okr-barra--horizontal .okr-barra__fill::after {
    content: ''; position: absolute; top: 20%; right: 6px;
    width: 26px; height: 60%; background: rgba(255,255,255,.55);
    border-radius: 99px; animation: okrBarGlow 2s ease-in-out infinite;
}
@keyframes okrBarGlow { 0%,100%{opacity:.6;transform:translateX(0)} 50%{opacity:1;transform:translateX(-6px)} }

.okr-barra--vertical { height: var(--okr-barra-h,300px); width: var(--okr-barra-w,40px); display:inline-flex; flex-direction:column; align-items:center; gap:.5rem; }
.okr-barra--vertical .okr-barra__track { width:100%; flex:1; background:var(--okr-s1-light); border-radius:99px; position:relative; overflow:visible; display:flex; align-items:flex-end; }
.okr-barra--vertical .okr-barra__fill { width:100%; background:linear-gradient(180deg,var(--okr-s1-primary),var(--okr-s1-accent)); border-radius:99px; transition:height 1s cubic-bezier(.4,0,.2,1); min-height:4px; }

.okr-barra__hito {
    position: absolute; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none; z-index: 5;
}
.okr-barra__hito-line { width: 2px; height: 18px; background: #D4C5FF; border-radius: 99px; transition: background .4s, transform .3s; }
.okr-barra__hito-label { font-size: .58rem; font-weight: 800; color: #B0A0D0; margin-top: 2px; letter-spacing: .04em; transition: color .4s; }
.okr-barra__hito--activo .okr-barra__hito-line { background: var(--okr-s1-primary); transform: scaleY(1.3); }
.okr-barra__hito--activo .okr-barra__hito-label { color: var(--okr-s1-primary); }
.okr-barra__pct { font-family: var(--okr-font-d); font-size: .85rem; font-weight: 800; color: var(--okr-s1-primary); margin-top: .4rem; text-align: center; }

/* ════════════════════════════════════════════════
   INPUT [okr_s1_input] [okr_s2_input_*]
   ════════════════════════════════════════════════ */
.okr-input-wrap {
    background: var(--okr-surface); border: 2px solid var(--okr-border);
    border-radius: var(--okr-radius); padding: 1.1rem 1.25rem; box-shadow: var(--okr-shadow);
}
.okr-s2-input--2025 { border-left: 4px solid var(--okr-muted); }
.okr-s2-input--2026 { border-left: 4px solid var(--okr-s2-primary); }

.okr-input__label {
    display: block; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--okr-muted); margin-bottom: .6rem;
}
.okr-input__row { display: flex; gap: .5rem; align-items: center; }
.okr-input__prefix {
    font-family: var(--okr-font-d); font-size: 1.3rem; font-weight: 800;
    color: var(--okr-s1-primary); flex-shrink: 0;
}
.okr-s2-input--2026 .okr-input__prefix,
.okr-s2-input--2025 .okr-input__prefix { color: var(--okr-s2-primary); }

.okr-input__field {
    flex: 1; padding: .7rem 1rem; border: 2px solid var(--okr-border);
    border-radius: var(--okr-radius-sm); font-family: var(--okr-font-d);
    font-size: 1.1rem; font-weight: 700; color: var(--okr-text);
    background: var(--okr-bg); outline: none; text-align: right;
    transition: border-color .2s, box-shadow .2s; min-width: 0;
}
.okr-input__field:focus { border-color: var(--okr-s1-primary); box-shadow: 0 0 0 4px rgba(132,94,194,.15); }
.okr-s2-input .okr-input__field:focus { border-color: var(--okr-s2-primary); box-shadow: 0 0 0 4px rgba(255,107,157,.15); }

.okr-input__btn {
    padding: .7rem 1.1rem;
    background: linear-gradient(135deg, var(--okr-s1-primary), var(--okr-s1-dark));
    color: #fff; border: none; border-radius: var(--okr-radius-sm);
    font-family: var(--okr-font); font-size: .88rem; font-weight: 800;
    cursor: pointer; transition: transform .15s, box-shadow .15s;
    box-shadow: 0 4px 16px rgba(132,94,194,.35); white-space: nowrap;
}
.okr-s2-input .okr-input__btn {
    background: linear-gradient(135deg, var(--okr-s2-primary), var(--okr-s2-dark));
    box-shadow: 0 4px 16px rgba(255,107,157,.35);
}
.okr-input__btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(132,94,194,.5); }
.okr-input__btn:disabled { opacity: .6; cursor: not-allowed; }

.okr-input__feedback { margin-top: .5rem; font-size: .78rem; font-weight: 700; min-height: 1rem; text-align: center; }
.okr-input__feedback--ok  { color: var(--okr-green); }
.okr-input__feedback--err { color: var(--okr-red); }

/* ════════════════════════════════════════════════
   FRASE [okr_s1_frase] [okr_s2_frase]
   ════════════════════════════════════════════════ */
.okr-frase {
    border-radius: var(--okr-radius); padding: 1rem 1.5rem;
    font-size: 1rem; font-weight: 700; text-align: center;
    box-shadow: var(--okr-shadow); transition: opacity .3s; line-height: 1.5;
}
.okr-s1-frase {
    background: linear-gradient(135deg, var(--okr-s1-light), #F5F0FF);
    border: 2px solid #C4B5FD; color: var(--okr-s1-primary);
}
.okr-s2-frase {
    background: linear-gradient(135deg, var(--okr-s2-light), #FFF5FA);
    border: 2px solid #FDDDE9; color: var(--okr-s2-dark);
}

/* ════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════ */
.okr-toast {
    position: fixed; bottom: 5rem; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--okr-text); color: #fff;
    padding: .65rem 1.5rem; border-radius: 99px;
    font-size: .88rem; font-weight: 700; font-family: var(--okr-font);
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    opacity: 0; transition: opacity .3s, transform .3s;
    pointer-events: none; z-index: 9998; white-space: nowrap;
}
.okr-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .okr-stat__num      { font-size: 1.6rem; }
    .okr-countdown__num { font-size: 1.5rem; }
    .okr-ritmo__principal { font-size: 1.2rem; }
    .okr-input__row     { flex-wrap: wrap; }
    .okr-input__btn     { width: 100%; justify-content: center; }
    .okr-mascota-wrap   { width: 200px !important; }
}