/* ==========================================================================
   Winner · Calidez y movimiento
   Capa sobre winner.css: misma identidad verde/teal, con fondo cálido,
   acentos tomados del logo (morado, ámbar, coral, cielo) y micro-animaciones.
   Todo el movimiento se apaga con prefers-reduced-motion.
   ========================================================================== */

:root {
    --winner-bg: #f4f1ec;
    --winner-border: #e4ded5;
    --winner-shadow: 0 10px 30px rgba(54, 42, 28, .07);
    --winner-shadow-hover: 0 18px 40px rgba(54, 42, 28, .12);

    /* Acentos del logo */
    --winner-plum: #5b3f8c;
    --winner-amber: #c9822e;
    --winner-coral: #c8603f;
    --winner-sky: #3d7fa6;

    --winner-ease: cubic-bezier(.2, .8, .2, 1);
    --winner-spring: cubic-bezier(.34, 1.56, .64, 1);

    /* Bootstrap "primary" pasa a ser el verde de marca (antes se colaba el azul por defecto) */
    --bs-primary: #2f6f62;
    --bs-primary-rgb: 47, 111, 98;
    --bs-primary-text-emphasis: #234f46;
    --bs-primary-bg-subtle: #e2ede8;
    --bs-primary-border-subtle: #b9d4ca;
    --bs-link-color: #2f6f62;
    --bs-link-color-rgb: 47, 111, 98;
    --bs-link-hover-color: #234f46;
    --bs-link-hover-color-rgb: 35, 79, 70;
}

html[data-theme="dark"] {
    --winner-shadow-hover: 0 18px 40px rgba(0, 0, 0, .35);
    --bs-primary-text-emphasis: #8dc5b6;
    --bs-primary-bg-subtle: rgba(47, 111, 98, .2);
    --bs-primary-border-subtle: rgba(47, 111, 98, .45);
    --bs-link-color: #8dc5b6;
    --bs-link-color-rgb: 141, 197, 182;
    --bs-link-hover-color: #b3dccf;
}

.text-primary { color: var(--bs-primary-text-emphasis) !important; }
html:not([data-theme="dark"]) .text-primary { color: var(--winner-primary) !important; }
.bg-primary { background-color: var(--winner-primary) !important; }
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--winner-primary) !important; color: #fff !important; }

/* Fondo con un leve resplandor cálido arriba */
body {
    background:
        radial-gradient(1200px 420px at 85% -120px, rgba(201, 130, 46, .08), transparent 70%),
        radial-gradient(900px 380px at -10% -80px, rgba(47, 111, 98, .07), transparent 70%),
        var(--winner-bg);
    background-attachment: fixed;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 420px at 85% -120px, rgba(201, 130, 46, .06), transparent 70%),
        var(--winner-bg);
}
.winner-topbar { background: rgba(255, 253, 250, .9); }
html[data-theme="dark"] .winner-topbar { background: rgba(17, 28, 50, .9); }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .18s var(--winner-ease), box-shadow .18s var(--winner-ease),
        background-color .18s ease, border-color .18s ease, color .18s ease, filter .18s ease;
}
.btn:hover:not(:disabled):not(.disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled):not(.disabled) { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn .bi { display: inline-block; transition: transform .25s var(--winner-spring); }
.btn:hover .bi-plus, .btn:hover .bi-plus-lg, .btn:hover .bi-plus-circle { transform: rotate(90deg); }
.btn:hover .bi-arrow-right, .btn:hover .bi-chevron-right, .btn:hover .bi-box-arrow-in-right { transform: translateX(3px); }
.btn:hover .bi-download, .btn:hover .bi-file-earmark-arrow-down { transform: translateY(2px); }

.btn-primary {
    background: linear-gradient(135deg, #2f6f62, #3b8273);
    box-shadow: 0 6px 16px rgba(47, 111, 98, .25);
}
.btn-primary:hover:not(:disabled) {
    filter: none;
    background: linear-gradient(135deg, #2a6458, #357a6b);
    box-shadow: 0 12px 24px rgba(47, 111, 98, .32);
}
/* Brillo que cruza el botón principal al pasar el mouse */
.btn-primary::after, .btn-success::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -60%;
    width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-20deg);
    z-index: -1;
    transition: left .55s var(--winner-ease);
    pointer-events: none;
}
.btn-primary:hover::after, .btn-success:hover::after { left: 120%; }

.btn-outline-primary {
    --bs-btn-color: var(--winner-primary);
    --bs-btn-border-color: #9cc3b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--winner-primary);
    --bs-btn-hover-border-color: var(--winner-primary);
    --bs-btn-active-bg: #234f46;
    --bs-btn-active-border-color: #234f46;
    --bs-btn-active-color: #fff;
}
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: #8dc5b6; --bs-btn-border-color: rgba(141, 197, 182, .5); }
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-success:hover,
.btn-outline-danger:hover, .btn-light:hover { box-shadow: 0 8px 18px rgba(54, 42, 28, .12); }
.btn-success { background: linear-gradient(135deg, #3f7d5c, #4b8f6a); border: 0; box-shadow: 0 6px 16px rgba(63, 125, 92, .22); }
.btn-danger { box-shadow: 0 6px 16px rgba(163, 73, 47, .18); }
.btn-icon:hover { border-color: #9cc3b8; color: var(--winner-primary); }

/* Onda al hacer clic (la crea winner-ui.js) */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: currentColor;
    opacity: .25;
    pointer-events: none;
    animation: winner-ripple .6s var(--winner-ease) forwards;
    z-index: -1;
}
.btn-primary .btn-ripple, .btn-success .btn-ripple, .btn-danger .btn-ripple { background: #fff; opacity: .35; }
@keyframes winner-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Estado "enviando…": evita dobles envíos y da respuesta inmediata */
.btn.is-loading { pointer-events: none; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1.1em;
    height: 1.1em;
    margin: -.55em 0 0 -.55em;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    animation: winner-spin .7s linear infinite;
    z-index: 2;
}
.btn.is-loading:not(.btn-primary):not(.btn-success):not(.btn-danger)::before {
    border-color: rgba(47, 111, 98, .25);
    border-top-color: var(--winner-primary);
}
@keyframes winner-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Tarjetas e íconos con color
   -------------------------------------------------------------------------- */
.card { transition: transform .25s var(--winner-ease), box-shadow .25s var(--winner-ease), border-color .25s ease; }
.metric-card:hover, .test-card:hover, .audience-card:hover, a.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--winner-shadow-hover);
}

/* Cada tarjeta de métrica toma un acento distinto del logo */
.metric-card { --accent: var(--winner-primary); --accent-soft: rgba(47, 111, 98, .12); }
.row > :nth-child(5n+2) > .metric-card, .row > :nth-child(5n+2) .metric-card { --accent: var(--winner-amber); --accent-soft: rgba(201, 130, 46, .14); }
.row > :nth-child(5n+3) > .metric-card, .row > :nth-child(5n+3) .metric-card { --accent: var(--winner-sky); --accent-soft: rgba(61, 127, 166, .13); }
.row > :nth-child(5n+4) > .metric-card, .row > :nth-child(5n+4) .metric-card { --accent: var(--winner-plum); --accent-soft: rgba(91, 63, 140, .12); }
.row > :nth-child(5n+5) > .metric-card, .row > :nth-child(5n+5) .metric-card { --accent: var(--winner-coral); --accent-soft: rgba(200, 96, 63, .12); }

.metric-card::after { background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 70%); transition: transform .5s var(--winner-ease); }
.metric-card:hover::after { transform: scale(1.35); }
.metric-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
    opacity: .85;
}
.metric-icon, .metric-card .icon {
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.25rem;
    background: var(--accent-soft);
    color: var(--accent);
    transition: transform .35s var(--winner-spring);
}
.metric-card:hover .metric-icon, .metric-card:hover .icon { transform: rotate(-8deg) scale(1.08); }
.metric-card .h3, .metric-value { font-family: var(--winner-font-display); font-weight: 800; letter-spacing: -.03em; }
html[data-theme="dark"] .metric-icon, html[data-theme="dark"] .metric-card .icon { filter: brightness(1.35); }

.empty-state-icon, .empty-state .bi-inbox {
    animation: winner-float 3.2s ease-in-out infinite;
}
.empty-state-icon { background: linear-gradient(135deg, rgba(201, 130, 46, .14), rgba(47, 111, 98, .14)); }
@keyframes winner-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Saludo del encabezado */
.page-eyebrow, .winner-greeting { color: var(--winner-amber); }
.winner-greeting { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }
.winner-greeting .bi { display: inline-block; transform-origin: 70% 80%; animation: winner-wave 2.4s ease-in-out 1s 2; }
@keyframes winner-wave {
    0%, 60%, 100% { transform: rotate(0); }
    10%, 30% { transform: rotate(16deg); }
    20%, 40% { transform: rotate(-8deg); }
}

/* --------------------------------------------------------------------------
   Navegación, formularios, tablas, barras
   -------------------------------------------------------------------------- */
.winner-pill { transition: background-color .2s ease, color .2s ease, transform .2s var(--winner-ease); }
.winner-pill:hover { transform: translateY(-1px); }
.winner-pill.active { box-shadow: 0 6px 14px rgba(47, 111, 98, .25); }
.winner-nav-link:hover i { color: var(--winner-primary); }
.profile-button { transition: background-color .2s ease; }
.avatar { background: linear-gradient(135deg, #e2ede8, #f3e6d3); }
.dropdown-menu.show { animation: winner-pop .18s var(--winner-ease); transform-origin: top; }
@keyframes winner-pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.form-control, .form-select { border-color: #e2dcd2; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; }
.form-control:hover:not(:focus), .form-select:hover:not(:focus) { border-color: #c9c0b2; }
.form-check-input { transition: background-color .2s ease, border-color .2s ease, transform .2s var(--winner-spring); }
.form-check-input:checked { background-color: var(--winner-primary); border-color: var(--winner-primary); transform: scale(1.08); }

.table tbody tr { transition: background-color .15s ease; }
.table-hover > tbody > tr:hover > *, .winner-table-wrap tbody tr:hover > * { --bs-table-bg-state: rgba(201, 130, 46, .06); }
.table tbody td { border-color: #efe9e1; }
html[data-theme="dark"] .table tbody td { border-color: var(--winner-border); }

.progress { background: #ece6dc; }
html[data-theme="dark"] .progress { background: rgba(255, 255, 255, .08); }
.progress-bar { background: linear-gradient(90deg, #2f6f62, #3f9a83); transition: width .9s var(--winner-ease); }

.winner-alert { animation: winner-slide-in .4s var(--winner-ease); }
@keyframes winner-slide-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

.option-card { transition: border-color .15s ease, background-color .15s ease, transform .2s var(--winner-ease), box-shadow .2s ease; }
.option-card:hover { transform: translateX(3px); background: #fbf8f3; }
html[data-theme="dark"] .option-card:hover { background: rgba(255, 255, 255, .04); }

/* --------------------------------------------------------------------------
   Entrada de la página: el contenido aparece suavemente, en cascada
   (winner-ui.js marca los elementos con .winner-reveal y su retraso)
   -------------------------------------------------------------------------- */
.winner-reveal { animation: winner-rise .55s var(--winner-ease) both; animation-delay: var(--reveal-delay, 0ms); }
@keyframes winner-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .btn:hover:not(:disabled), .card:hover { transform: none !important; }
}

/* Ajustes de modo oscuro */
html[data-theme="dark"] .avatar { background: rgba(47, 111, 98, .25); color: #8dc5b6; }
html[data-theme="dark"] .list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--winner-text); --bs-list-group-border-color: var(--winner-border); }
.winner-table-wrap thead { background: rgba(201, 130, 46, .05); }
html[data-theme="dark"] .winner-table-wrap thead { background: rgba(255, 255, 255, .03); }