/* ═══════════════════════════════════════════════════
   Michi Olimpo — Michis Viajeros Widget
════════════════════════════════════════════════════ */

.mv-widget {
    --mv-border:      rgba(192, 132, 252, 0.30);
    --mv-accent:      #7c3aed;
    --mv-accent-hl:   #9d5cf5;
    --mv-pink:        #c084fc;
    --mv-white:       #ffffff;
    --mv-muted:       rgba(255, 255, 255, 0.50);
    --mv-radius:      14px;
    --mv-radius-sm:   9px;
    --mv-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    font-family: var(--mv-font);
    background:  transparent;
    width:       100%;
    color:       var(--mv-white);
}

.mv-widget *,
.mv-widget *::before,
.mv-widget *::after {
    box-sizing: border-box;
    padding: 0;
}

/* ── TABS ── */
.mv-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: transparent;
    border-bottom: none;
}

.mv-widget .mv-tabs .mv-tab {
    background:     transparent !important;
    border:         none !important;
    box-shadow:     none !important;
    text-shadow:    none !important;
    color:          var(--mv-muted);
    font-family:    var(--mv-font);
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding:        1.1rem 0.5rem;
    cursor:         pointer;
    position:       relative;
    transition:     color 0.2s, background 0.2s;
    border-radius:  0 !important;
}

.mv-widget .mv-tabs .mv-tab::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     1px;
    background: #CF97D6;
    transform:  scaleX(1);
    transition: none;
}

.mv-widget .mv-tabs .mv-tab:hover {
    background: transparent !important;
    color:      var(--mv-white);
}

.mv-widget .mv-tabs .mv-tab--active {
    color:      var(--mv-white) !important;
    background: rgba(0, 0, 0, 0.35) !important;
}

.mv-widget .mv-tabs .mv-tab--active::after {
    height:     2px;
    background: #FAD5FF;
}

/* ── PANELS ── */
.mv-panel {
    display:    none;
    padding:    1.5rem 1.25rem 1.75rem;
    background: transparent;
}

.mv-panel--active {
    display: block;
}

/* ── FORM ── */
.mv-form {
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}

.mv-field { width: 100%; }

.mv-field-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   0.75rem;
    align-items:           start;
}

@media (max-width: 480px) {
    .mv-field-row { grid-template-columns: 1fr; }
}

/* ── INPUTS ── */
.mv-widget input[type="text"],
.mv-widget input[type="email"],
.mv-widget select,
.mv-widget textarea {
    width:              100%;
    background:         rgba(255, 255, 255, 0.90);
    border:             1.5px solid rgba(192, 132, 252, 0.40);
    border-radius:      15px;
    padding:            0.75rem 1.25rem;
    height:             48px;
    line-height:        1;
    font-family:        var(--mv-font);
    font-size:          0.9rem;
    color:              #3b0764;
    outline:            none;
    transition:         border-color 0.2s, box-shadow 0.2s;
    appearance:         none;
    -webkit-appearance: none;
    box-shadow:         none;
}

.mv-widget input::placeholder {
    color: rgba(100, 50, 180, 0.70);
}
.mv-widget select {
    color: #3b0764 !important;
}

.mv-widget input[type="text"]:focus,
.mv-widget input[type="email"]:focus,
.mv-widget select:focus,
.mv-widget textarea:focus {
    border-color: #c084fc;
    box-shadow:   0 0 0 3px rgba(192, 132, 252, 0.15);
}

.mv-field--select,
.mv-field--voto-select { position: relative; }

.mv-field--select::after,
.mv-field--voto-select::after {
    content:        '▾';
    position:       absolute;
    right:          1.25rem;
    top:            50%;
    transform:      translateY(-50%);
    color:          #7c3aed;
    pointer-events: none;
    font-size:      0.9rem;
}

.mv-widget select option        { background: #240d38; color: #fff; }
.mv-widget select:invalid,
.mv-widget select option[disabled] { color: rgba(100, 50, 180, 0.70); }

.mv-field--submit-row { margin-top: 0; }

/* ── BOTONES ── */
.mv-widget .mv-btn-submit {
    width:          100% !important;
    background:     #371750 !important;
    border:         none !important;
    border-radius:  25px !important;
    box-shadow:     none !important;
    text-shadow:    none !important;
    color:          #CF97D5 !important;
    font-family:    var(--mv-font);
    font-size:      1rem;
    font-weight:    700;
    padding:        0.85rem 1.5rem;
    cursor:         pointer;
    transition:     background 0.2s, transform 0.1s;
    letter-spacing: 0.02em;
}

.mv-widget .mv-btn-submit:hover  { background: #9d5cf5 !important; }
.mv-widget .mv-btn-submit:active { transform: scale(0.98); }

.mv-voto-row {
    display:               grid;
    grid-template-columns: 1fr auto;
    gap:                   0.75rem;
    align-items:           center;
    margin-top:            0.5rem;
}

@media (max-width: 400px) {
    .mv-voto-row { grid-template-columns: 1fr; }
}

.mv-widget .mv-btn-votar {
    background:     #371750 !important;
    border:         none !important;
    border-radius:  25px !important;
    box-shadow:     none !important;
    text-shadow:    none !important;
    color:          #CF97D5 !important;
    font-family:    var(--mv-font);
    font-size:      0.95rem;
    font-weight:    700;
    padding:        0.75rem 1.75rem;
    cursor:         pointer;
    transition:     background 0.2s, opacity 0.2s, transform 0.1s;
    white-space:    nowrap;
}

.mv-widget .mv-btn-votar:disabled        { opacity: 0.4 !important; cursor: not-allowed; }
.mv-widget .mv-btn-votar:not(:disabled):hover  { background: #9d5cf5 !important; }
.mv-widget .mv-btn-votar:not(:disabled):active { transform: scale(0.97); }

/* ── ALERTS ── */
.mv-alert {
    border-radius: var(--mv-radius-sm);
    padding:       0.75rem 1rem;
    font-size:     0.88rem;
    margin-top:    0.5rem;
    line-height:   1.4;
}

.mv-alert--success {
    background: rgba(192, 132, 252, 0.12);
    border:     1px solid rgba(192, 132, 252, 0.35);
    color:      #FAD5FF;
}

.mv-alert--error {
    background: rgba(192, 132, 252, 0.12);
    border:     1px solid rgba(192, 132, 252, 0.35);
    color:      #FAD5FF;
}

/* ── VOTACIONES ── */
.mv-section-label {
    font-size:      0.78rem;
    font-weight:    600;
    color:          #c084fc;
    letter-spacing: 0.04em;
    margin-bottom:  1rem;
}

.mv-section-label--mt { margin-top: 1.5rem; }

.mv-top3 {
    display:        flex;
    flex-direction: column;
    gap:            1rem;
}

.mv-destino-bar__header {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    gap:             0.5rem;
    margin-bottom:   0.4rem;
}

.mv-destino-bar__nombre {
    font-size:   0.9rem;
    font-weight: 600;
    color:       #ffffff;
    line-height: 1.3;
}

.mv-destino-bar__votos {
    font-size:   0.82rem;
    font-weight: 700;
    color:       #c084fc;
    white-space: nowrap;
    flex-shrink: 0;
}

.mv-progress {
    width:         100%;
    height:        8px;
    background:    rgba(255,255,255,0.08);
    border-radius: 50px;
    overflow:      hidden;
}

.mv-progress__bar {
    height:        100%;
    border-radius: 50px;
    background:    linear-gradient(90deg, #7c3aed, #c084fc);
    transition:    width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-width:     4px;
}

.mv-empty {
    color:      rgba(255,255,255,0.50);
    font-size:  0.88rem;
    text-align: center;
    padding:    1rem 0;
}

@keyframes mv-spin {
    to { transform: rotate(360deg); }
}

.mv-spinner {
    display:          inline-block;
    width:            14px;
    height:           14px;
    border:           2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius:    50%;
    animation:        mv-spin 0.7s linear infinite;
    vertical-align:   middle;
    margin-right:     4px;
}

.mv-widget input:-webkit-autofill,
.mv-widget input:-webkit-autofill:hover,
.mv-widget input:-webkit-autofill:focus {
    -webkit-text-fill-color: #3b0764 !important;
    -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0.90) inset !important;
}

.mv-widget input[type="text"],
.mv-widget input[type="email"],
.mv-widget select {
    caret-color:             #3b0764;
    -webkit-text-fill-color: #3b0764;
}

/* ═══════════════════════════════════════════════════
   Michis Saludos Widget
════════════════════════════════════════════════════ */

.ms-stats {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
    margin-bottom:         1.5rem;
}

.ms-stat {
    background:    rgba(192, 132, 252, 0.10);
    border:        1px solid rgba(192, 132, 252, 0.25);
    border-radius: 14px;
    padding:       1rem 0.75rem;
    text-align:    center;
}

.ms-stat__num {
    display:       block;
    font-size:     1.8rem;
    font-weight:   800;
    color:         #c084fc;
    line-height:   1;
    margin-bottom: 0.4rem;
}

.ms-stat__num--pink  { color: #c084fc; }
.ms-stat__num--light { color: #c084fc; }

.ms-stat__label {
    font-size:   0.75rem;
    color:       rgba(255,255,255,0.60);
    line-height: 1.4;
}

.ms-stat__label strong { color: #ffffff; }

.ms-subtabs {
    display:                    flex;
    gap:                        0.5rem;
    margin-bottom:              1rem;
    overflow-x:                 auto;
    flex-wrap:                  nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
}

.ms-subtabs::-webkit-scrollbar { display: none; }

.ms-subtab {
    background:     rgba(192, 132, 252, 0.10) !important;
    border:         1px solid rgba(192, 132, 252, 0.25) !important;
    border-radius:  50px !important;
    color:          rgba(255,255,255,0.60) !important;
    font-family:    var(--mv-font);
    font-size:      0.75rem;
    font-weight:    600;
    padding:        0.4rem 1rem;
    white-space:    nowrap;
    flex-shrink:    0;
    cursor:         pointer;
    transition:     all 0.2s;
    box-shadow:     none !important;
    text-shadow:    none !important;
}

.ms-subtab--active,
.ms-subtab:hover {
    background:   rgba(192, 132, 252, 0.30) !important;
    color:        #ffffff !important;
    border-color: #c084fc !important;
}

/* ── Lista de saludos (reemplaza tabla) ── */
.ms-lista-wrap { margin-top: 0.5rem; }

.ms-lista-header {
    display:               grid;
    grid-template-columns: 45% 30% 25%;
    gap:                   0.5rem;
    padding:               0.6rem 0.75rem;
    background:            transparent;
    border-bottom:         1px solid rgba(192, 132, 252, 0.25);
    margin-bottom:         0.4rem;
}

.ms-lista-header span {
    font-size:   0.82rem;
    font-weight: 600;
    color:       rgba(255,255,255,0.50);
    text-align:  left;
}

.ms-lista-row {
    display:               grid;
    grid-template-columns: 45% 30% 25%;
    gap:                   0.5rem;
    padding:               0.6rem 0.75rem;
    border-bottom:         1px solid rgba(255,255,255,0.06);
}

.ms-lista-row:last-child { border-bottom: none; }

.ms-lista-row span {
    font-size:   0.85rem;
    color:       rgba(255,255,255,0.85);
    align-self:  center;
    text-align:  left;
}

.ms-lista-row span:first-child {
    text-align: left;
}

.ms-paginacion {
    display:         flex;
    justify-content: center;
    gap:             0.4rem;
    margin-top:      1rem;
    flex-wrap:       wrap;
}

.ms-page-btn {
    background:    rgba(192,132,252,0.10) !important;
    border:        1px solid rgba(192,132,252,0.25) !important;
    border-radius: 6px !important;
    color:         #FAD5FF !important;
    font-size:     0.8rem;
    padding:       0.3rem 0.7rem;
    cursor:        pointer;
    box-shadow:    none !important;
    text-shadow:   none !important;
    font-family:   var(--mv-font);
}

.ms-page-btn--active {
    background:   rgba(192,132,252,0.35) !important;
    border-color: #c084fc !important;
    color:        #fff !important;
}

.ms-login-banner {
    text-align: center;
    padding:    2rem 1rem;
}

.ms-login-icon {
    font-size:     2.5rem;
    display:       block;
    margin-bottom: 0.75rem;
}

.ms-login-banner p {
    color:         rgba(255,255,255,0.75);
    margin-bottom: 1.25rem;
    font-size:     0.95rem;
}

.ms-login-btns {
    display:         flex;
    justify-content: center;
    gap:             0.75rem;
    flex-wrap:       wrap;
}

.ms-btn-login {
    display:         inline-block;
    background:      #371750 !important;
    border-radius:   25px !important;
    color:           #CF97D5 !important;
    padding:         0.75rem 1.5rem;
    font-weight:     700;
    text-decoration: none;
    font-size:       0.9rem;
}

.ms-btn-register {
    display:         inline-block;
    background:      transparent;
    border:          1px solid rgba(192,132,252,0.40);
    border-radius:   25px;
    color:           #FAD5FF;
    padding:         0.75rem 1.5rem;
    font-weight:     700;
    text-decoration: none;
    font-size:       0.9rem;
    transition:      all 0.2s;
}

.ms-btn-register:hover {
    background:   rgba(192,132,252,0.15);
    border-color: #c084fc;
    color:        #fff;
}

.ms-loading {
    text-align: center;
    color:      rgba(255,255,255,0.50);
    padding:    1rem;
    font-size:  0.88rem;
}