* { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: light; --white: #fff; --cream: #f4f6f8; --ink: #2a2a2a; --blue: #2a2a2a; --blue-soft: #f7f7f7; --gray: #ededed; --muted: #636363; }
body { min-width: 320px; min-height: 100vh; color: var(--muted); background: var(--cream); font-family: "Matter", system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
.ranking-view { display: flex; flex-direction: column; width: min(1280px, calc(100% - 2rem)); min-height: 100vh; margin: 0 auto; padding: clamp(.8rem, 2vh, 1.4rem) 0 .65rem; }
.ranking-header { margin-bottom: clamp(.55rem, 1.4vh, .9rem); text-align: center; }
.ranking-logo { display: block; width: 30px; height: auto; margin: 0 auto .2rem; }
.ranking-kicker { margin-bottom: .2rem; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.ranking-header h1 { color: var(--ink); font-family: "Bradford", Georgia, serif; font-size: clamp(1.7rem, 2.5vw, 2.25rem); font-weight: 400; line-height: 1; }
.ranking-subtitle { margin-top: .6rem; color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.25rem); }
.filter-toolbar { display: flex; justify-content: flex-end; margin-bottom: .55rem; }
.ranking-actions { align-items: center; justify-content: space-between; gap: .75rem; }
.seller-guide-link { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.15rem; padding: .4rem 1rem; color: var(--white); background: var(--ink); border: 1px solid var(--ink); border-radius: 9999px; font-size: .85rem; font-weight: 600; line-height: 1; text-decoration: none; box-shadow: 0 2px 5px rgb(0 0 0 / 12%); transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.seller-guide-link:hover { background: #444; box-shadow: 0 4px 9px rgb(0 0 0 / 16%); transform: translateY(-1px); }
.seller-guide-link:focus-visible { outline: 3px solid rgb(42 42 42 / 22%); outline-offset: 2px; }
.ranking-back { align-self: center; color: var(--muted); font-size: .85rem; font-weight: 500; text-decoration: none; }
.ranking-back:hover { color: var(--ink); text-decoration: underline; }
.management-page .filter-toolbar { justify-content: space-between; }
.toggle-filters { min-height: 2.15rem; padding: .4rem 1rem; color: var(--ink); background: var(--white); border: 1px solid var(--gray); border-radius: 9999px; font: inherit; font-size: .85rem; font-weight: 500; cursor: pointer; }
.toggle-filters:hover { color: var(--white); background: var(--ink); border-color: var(--ink); }
.ranking-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: .65rem; margin-bottom: .65rem; padding: .7rem; background: var(--white); border: 1px solid var(--gray); border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 3%); }
.ranking-filters[hidden] { display: none; }
.management-page .ranking-filters { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.ranking-filters label { display: grid; gap: .35rem; }
.ranking-filters label span { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .04em; text-transform: none; }
.ranking-filters input, .ranking-filters select { width: 100%; min-height: 2.25rem; padding: .45rem .75rem; color: var(--muted); background: #fafafa; border: 1px solid var(--gray); border-radius: 10px; font: inherit; outline: none; }
.ranking-filters select { cursor: pointer; }
.ranking-filters input:focus, .ranking-filters select:focus { background: var(--white); border-color: #b8b8b8; box-shadow: 0 0 0 3px rgb(42 42 42 / 7%); }
.clear-filters { min-height: 2.25rem; padding: .45rem 1rem; color: var(--white); background: var(--ink); border: 1px solid var(--ink); border-radius: 9999px; font: inherit; font-weight: 500; cursor: pointer; }
.clear-filters:hover { filter: brightness(1.08); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.goal-carousel { margin-bottom: .55rem; }
.goal-title-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.goal-scope-note { color: var(--muted); font-size: .75rem; text-align: left; }
.goal-carousel-viewport { min-height: 7rem; }
.campaign-progress { display: none; min-height: 7rem; padding: .65rem 1rem .45rem; background: var(--white); border: 1px solid var(--gray); border-radius: 14px; box-shadow: 0 1px 3px rgb(0 0 0 / 4%); }
.goal-slide.is-active { display: block; animation: goal-slide-in .3s ease; }
.campaign-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.goal-title-row > p:first-child { color: var(--ink); font-size: .75rem; font-weight: 600; }
.campaign-progress-amount { color: var(--muted); font-size: .72rem; }
.campaign-progress-amount strong { color: var(--ink); font-size: 1rem; }
.campaign-progress-amount b { font-weight: 400; }
.campaign-percentage { color: var(--ink); font-size: 1rem; }
.campaign-progress-track { position: relative; height: 8px; margin: .55rem .5rem 0; overflow: hidden; background: var(--gray); border-radius: 9999px; }
.campaign-progress-track > span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #1f6f4a, #55a779); border-radius: inherit; transition: width .6s ease; }
.campaign-milestones { position: relative; height: 4.15rem; margin: 0 .5rem; list-style: none; }
.goal-slide[data-goal-slide="total"] { padding-bottom: .8rem; }
.campaign-milestone { position: absolute; top: .25rem; left: var(--milestone-position); display: grid; justify-items: center; width: 7.5rem; transform: translateX(-50%); color: var(--muted); text-align: center; }
.campaign-milestone:last-child { transform: translateX(-100%); }
.campaign-milestone-icon { position: relative; display: grid; place-items: center; width: 1.55rem; height: 1.55rem; background: var(--white); border: 1px solid #d7d7d7; border-radius: 50%; font-size: .85rem; }
.campaign-milestone-check { position: absolute; top: -.3rem; right: -.4rem; display: none; place-items: center; width: .95rem; height: .95rem; color: #fff; background: #238657; border: 2px solid var(--white); border-radius: 50%; font-size: .62rem; font-weight: 700; }
.campaign-milestone.is-complete .campaign-milestone-icon { border-color: #238657; box-shadow: 0 0 0 2px rgb(35 134 87 / 13%); }
.campaign-milestone.is-complete .campaign-milestone-check { display: grid; }
.campaign-milestone-label { display: grid; gap: .05rem; margin-top: .12rem; font-size: calc(.58rem + 2px); line-height: 1.05; white-space: nowrap; }
.campaign-milestone-name { color: var(--ink); font-weight: 600; }
.campaign-milestone-detail { color: var(--muted); font-size: calc(.54rem + 2px); }
.campaign-milestone-prize { color: var(--ink); font-size: calc(.52rem + 2px); font-weight: 600; }
.campaign-progress.is-pending .campaign-progress-track > span { background: #a9a9a9; }
.goal-context { margin-top: 1.15rem; color: var(--muted); font-size: .78rem; text-align: center; }
.goal-carousel-controls { display: flex; justify-content: center; gap: .4rem; padding-top: .3rem; }
.goal-carousel-dot { width: .5rem; height: .5rem; padding: 0; background: #c6c6c6; border: 0; border-radius: 50%; cursor: pointer; }
.goal-carousel-dot.is-active { background: var(--ink); transform: scale(1.15); }
@keyframes goal-slide-in { from { opacity: 0; transform: translateX(.4rem); } to { opacity: 1; transform: translateX(0); } }
.ranking-wrapper { overflow-x: auto; background: var(--white); border: 1px solid var(--gray); border-radius: 14px; box-shadow: 0 1px 3px rgb(0 0 0 / 4%); }
.ranking-wrapper[hidden], .news-slide[hidden] { display: none; }
.news-slide { position: relative; min-height: 320px; overflow: hidden; background: #071426; border: 1px solid var(--gray); border-radius: 14px; box-shadow: 0 1px 3px rgb(0 0 0 / 4%); animation: slide-fade .35s ease both; }
.news-slide figure { position: relative; width: 100%; height: clamp(320px, 47vh, 500px); overflow: hidden; background: #071426; }
.news-slide-backdrop { position: absolute; inset: -1.5rem; width: calc(100% + 3rem); height: calc(100% + 3rem); object-fit: cover; filter: blur(18px) brightness(.45); transform: scale(1.05); }
.news-slide-image { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.news-slide-badge { position: absolute; top: .85rem; left: .85rem; padding: .3rem .7rem; color: #fff; background: rgb(7 20 38 / 78%); border: 1px solid rgb(255 255 255 / 28%); border-radius: 9999px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px); }
.ranking-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ranking-table caption { padding: 8px 16px; color: var(--ink); background: var(--white); border-bottom: 1px solid var(--gray); font-size: 12px; font-weight: 500; text-align: left; }
.ranking-table th, .ranking-table td { padding: 7px 14px; border-bottom: 1px solid var(--gray); overflow-wrap: anywhere; text-align: left; }
.ranking-table td { line-height: 1.25; }
.ranking-table th { padding-top: 8px; padding-bottom: 8px; color: var(--muted); background: #fafafa; font-size: 10px; font-weight: 400; letter-spacing: .02em; white-space: nowrap; text-transform: none; }
.ranking-table th:first-child, .ranking-table td:first-child { width: 7%; }
.ranking-table th:nth-child(2), .ranking-table td:nth-child(2) { width: 25%; }
.ranking-table th:nth-child(3), .ranking-table td:nth-child(3) { width: 17%; }
.ranking-table th:nth-child(4), .ranking-table td:nth-child(4) { width: 25%; }
.ranking-table th:nth-child(5), .ranking-table td:nth-child(5) { width: 13%; }
.ranking-table th:last-child, .ranking-table td:last-child { width: 13%; }
.ranking-table tbody tr:last-child td { border-bottom: 0; }
.ranking-table tbody tr:hover { background: #fafafa; }
.numeric-column { text-align: right !important; }
.place-column { color: var(--ink); text-align: center !important; font-weight: 500; }
.management-link { color: inherit; text-decoration-color: rgb(42 42 42 / 35%); text-underline-offset: .2em; }
.management-link:hover { color: var(--ink); text-decoration-color: currentColor; }
.management-page .ranking-table th:first-child, .management-page .ranking-table td:first-child { width: 7%; }
.management-page .ranking-table th:nth-child(2), .management-page .ranking-table td:nth-child(2) { width: 30%; }
.management-page .ranking-table th:nth-child(3), .management-page .ranking-table td:nth-child(3) { width: 37%; }
.management-page .ranking-table th:nth-child(4), .management-page .ranking-table td:nth-child(4),
.management-page .ranking-table th:last-child, .management-page .ranking-table td:last-child { width: 13%; }
.ticket-total { color: var(--ink); font-size: 1em; font-weight: 500; }
.weekly-total { color: var(--ink); font-size: 1em; font-weight: 500; }
.status-row td { padding: 3rem 1rem; color: var(--muted); text-align: center !important; }
.slide-enter { animation: slide-fade .35s ease both; }
.slideshow-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 2.6rem; padding-top: .35rem; }
.slideshow-controls button { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; color: var(--muted); background: var(--white); border: 1px solid var(--gray); border-radius: 9999px; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.slideshow-controls button:hover:not(:disabled) { color: var(--white); background: var(--ink); border-color: var(--ink); }
.slideshow-controls button:disabled { opacity: .35; cursor: default; }
.slideshow-controls p { min-width: 13rem; color: var(--muted); font-size: .85rem; text-align: center; }
@keyframes slide-fade { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }
.ranking-footer { display: flex; justify-content: flex-end; align-items: center; margin-top: auto; padding-top: .45rem; color: var(--muted); font-size: .75rem; }
.ranking-footer p { text-align: right; }
@media (min-width: 601px) and (max-height: 800px) {
  body { font-size: 12.5px; }
  .ranking-view { width: min(1360px, calc(100% - 1rem)); padding: .35rem 0 .25rem; }
  .ranking-header { margin-bottom: .3rem; }
  .ranking-logo { width: 22px; margin-bottom: .05rem; }
  .ranking-kicker { margin-bottom: .05rem; font-size: 8px; }
  .ranking-header h1 { font-size: clamp(1.35rem, 2vw, 1.65rem); }
  .filter-toolbar { margin-bottom: .3rem; }
  .toggle-filters { min-height: 1.8rem; padding: .25rem .75rem; font-size: .75rem; }
  .seller-guide-link { min-height: 1.8rem; padding: .25rem .75rem; font-size: .75rem; }
  .ranking-back { font-size: .75rem; }
  .ranking-filters { gap: .45rem; margin-bottom: .4rem; padding: .5rem; }
  .ranking-filters label { gap: .15rem; }
  .ranking-filters label span { font-size: 9px; }
  .ranking-filters input, .ranking-filters select, .clear-filters { min-height: 1.9rem; padding-top: .3rem; padding-bottom: .3rem; }
  .goal-carousel { margin-bottom: .35rem; }
  .goal-carousel-viewport, .campaign-progress { min-height: 5.65rem; }
  .campaign-progress { padding: .4rem .75rem .25rem; }
  .campaign-progress-track { margin-top: .35rem; }
  .campaign-milestones { height: 3.65rem; }
  .goal-slide[data-goal-slide="total"] { padding-bottom: .55rem; }
  .goal-context { margin-top: .75rem; font-size: .7rem; }
  .goal-carousel-controls { padding-top: .18rem; }
  .ranking-table caption { padding: 5px 12px; font-size: 10.5px; }
  .ranking-table th, .ranking-table td { padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ranking-table td { font-size: 12.5px; line-height: 1.1; }
  .ranking-table th { padding-top: 5px; padding-bottom: 5px; font-size: 9px; }
  .news-slide { min-height: 290px; }
  .news-slide figure { height: min(47vh, 390px); min-height: 290px; }
  .slideshow-controls { min-height: 2rem; padding-top: .1rem; }
  .slideshow-controls button { width: 1.8rem; height: 1.8rem; font-size: 1.25rem; }
  .slideshow-controls p { font-size: .75rem; }
  .ranking-footer { padding-top: .1rem; font-size: .65rem; }
}
@media (max-width: 600px) {
  .ranking-view { width: min(100% - 1rem, 1180px); padding-top: 1rem; }
  .ranking-header { margin-bottom: .75rem; }
  .ranking-header h1 { font-size: clamp(1.75rem, 9vw, 2.2rem); }
  .filter-toolbar { margin-bottom: .5rem; }
  .ranking-actions { align-items: stretch; }
  .seller-guide-link, .ranking-actions .toggle-filters { justify-content: center; }
  .ranking-filters { grid-template-columns: 1fr; gap: .7rem; padding: .85rem; }
  .management-page .ranking-filters { grid-template-columns: 1fr; }
  .ranking-filters label span { font-size: .65rem; }
  .campaign-progress { padding-right: .65rem; padding-left: .65rem; }
  .campaign-progress-amount span { display: block; }
  .goal-slide[data-goal-slide="total"] { padding-bottom: .9rem; }
  .goal-slide[data-goal-slide="total"] .campaign-progress-track { margin-right: 0; margin-left: 0; }
  .goal-slide[data-goal-slide="total"] .campaign-milestones {
    position: static;
    display: flex;
    gap: .55rem;
    height: auto;
    margin: .55rem 0 0;
    padding: .1rem .05rem .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-padding-inline: .05rem;
    scroll-snap-type: x proximity;
    scrollbar-color: #b9b9b9 transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .goal-slide[data-goal-slide="total"] .campaign-milestone {
    position: relative;
    top: auto;
    left: auto !important;
    flex: 0 0 7.5rem;
    width: 7.5rem;
    min-width: 0;
    padding: .5rem .35rem .7rem;
    transform: none !important;
    background: #fafafa;
    border: 1px solid var(--gray);
    border-radius: 10px;
    scroll-snap-align: start;
  }
  .goal-slide[data-goal-slide="total"] .campaign-milestone-label {
    width: 100%;
    gap: .15rem;
    margin-top: .3rem;
    font-size: .72rem;
    line-height: 1.2;
    white-space: normal;
  }
  .goal-slide[data-goal-slide="total"] .campaign-milestone-name,
  .goal-slide[data-goal-slide="total"] .campaign-milestone-detail,
  .goal-slide[data-goal-slide="total"] .campaign-milestone-prize {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .goal-slide[data-goal-slide="total"] .campaign-milestone-detail { font-size: .68rem; }
  .goal-slide[data-goal-slide="total"] .campaign-milestone-prize { font-size: .66rem; line-height: 1.15; }
  .clear-filters { width: 100%; }
  .ranking-wrapper { overflow: hidden; border-radius: .65rem; }
  .news-slide { min-height: 0; border-radius: .65rem; }
  .news-slide figure { height: auto; min-height: 230px; aspect-ratio: 16 / 9; }
  .news-slide-badge { top: .55rem; left: .55rem; font-size: .62rem; }
  .ranking-table { table-layout: auto; }
  .ranking-table thead { display: none; }
  .ranking-table tbody { display: block; }
  .ranking-table tbody tr { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .7rem .85rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--gray); }
  .ranking-table tbody tr:last-child { border-bottom: 0; }
  .ranking-table td { width: auto !important; padding: 0; border: 0; overflow-wrap: anywhere; }
  .ranking-table caption { padding: .75rem 1rem; font-size: .8rem; text-align: center; }
  .ranking-table td:first-child { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 2.5rem !important; padding: .55rem .25rem; border-radius: 50%; background: var(--blue-soft); font-size: 1.05rem; }
  .ranking-table td:nth-child(2) { grid-column: 2 / -1; font-size: 1.05rem; font-weight: 500; }
  .ranking-table td:nth-child(3), .ranking-table td:nth-child(4), .ranking-table td:nth-child(5), .ranking-table td:nth-child(6) { display: grid; gap: .2rem; align-content: end; font-size: .95rem; }
  .ranking-table td:nth-child(3)::before, .ranking-table td:nth-child(4)::before, .ranking-table td:nth-child(5)::before, .ranking-table td:nth-child(6)::before { color: var(--muted); font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
  .ranking-table td:nth-child(3)::before { content: "Gerencia"; }
  .ranking-table td:nth-child(4)::before { content: "Coordinador"; }
  .ranking-table td:nth-child(5) { grid-column: 3; grid-row: 2; align-self: end; }
  .ranking-table td:nth-child(5)::before { content: "Acumulados"; }
  .ranking-table td:nth-child(6) { grid-column: 3; grid-row: 3; align-self: end; }
  .ranking-table td:nth-child(6)::before { content: "Semana"; }
  .management-page .ranking-table td:nth-child(3) { grid-column: 2; grid-row: 2 / 4; }
  .management-page .ranking-table td:nth-child(3)::before { content: "Coordinador"; }
  .management-page .ranking-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
  .management-page .ranking-table td:nth-child(4)::before { content: "Acumulados"; }
  .management-page .ranking-table td:nth-child(5) { grid-column: 3; grid-row: 3; }
  .management-page .ranking-table td:nth-child(5)::before { content: "Semana"; }
  .ranking-table .numeric-column { min-width: 4.5rem; text-align: right !important; }
  .ranking-table .status-row { display: block; }
  .ranking-table .status-row td { display: block; width: 100% !important; padding: 2rem .5rem; border-radius: 0; background: transparent; }
  .ranking-table .status-row td::before { content: none; }
  .ranking-footer { justify-content: center; padding-top: 1rem; }
  .ranking-footer p { text-align: center; }
  .slideshow-controls { gap: .65rem; }
  .slideshow-controls p { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .slide-enter, .goal-slide.is-active, .news-slide { animation: none; } }