/* =========================================================
   CAZIVO V1
   Diseño principal
========================================================= */


/* =========================================================
   CONFIGURACIÓN GENERAL
========================================================= */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


:root {

    --background: #f6f6f6;

    --surface: #ffffff;

    --surface-secondary: #fafafa;

    --text-primary: #111111;

    --text-secondary: #666666;

    --border: #dddddd;

    --border-dark: #bdbdbd;

    --max-width: 1100px;

    --radius: 14px;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: var(--background);

    color: var(--text-primary);

    line-height: 1.5;

}


button,
input {

    font-family: inherit;

}



/* =========================================================
   CABECERA
========================================================= */

.header {

    background: var(--surface);

    border-bottom: 1px solid var(--border);

}


.brand {

    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: 0 auto;

    padding: 22px 0;

}


.brand h1 {

    font-size: 25px;

    letter-spacing: 4px;

}


.brand p {

    margin-top: 3px;

    font-size: 13px;

    color: var(--text-secondary);

}



/* =========================================================
   CONTENEDOR
========================================================= */

main {

    width: min(
        calc(100% - 40px),
        var(--max-width)
    );

    margin: 28px auto 60px;

}



/* =========================================================
   TÍTULOS
========================================================= */

.section-heading {

    margin-bottom: 14px;

}


.section-heading span {

    font-size: 11px;

    letter-spacing: 1.4px;

    font-weight: 700;

    color: var(--text-secondary);

}


.section-description {

    margin-top: -7px;

    margin-bottom: 17px;

    font-size: 13px;

    color: var(--text-secondary);

}



/* =========================================================
   EVENTOS SUPERIORES
========================================================= */

.upcoming-events {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px 20px;

    margin-bottom: 18px;

}


.events-list {

    display: flex;

    gap: 10px;

    overflow-x: auto;

}


.event-mini-card {

    min-width: 180px;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px 14px;

    background: var(--surface-secondary);

    cursor: pointer;

    text-align: left;

    color: inherit;

}


.event-mini-card strong {

    display: block;

    font-size: 14px;

}


.event-mini-card span {

    display: block;

    margin-top: 2px;

    font-size: 12px;

    color: var(--text-secondary);

}


.event-mini-card.selected {

    border-color: #111111;

    box-shadow:
        inset 0 0 0 1px #111111;

}



/* =========================================================
   EVENTO PRINCIPAL
========================================================= */

.main-event {

    background: var(--surface);

    border: 1px solid var(--border-dark);

    border-radius: var(--radius);

    padding: 38px 30px;

    margin-bottom: 18px;

    text-align: center;

}


.event-status {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: var(--text-secondary);

    margin-bottom: 7px;

}


.main-event h2 {

    font-size: 31px;

}


.event-date {

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 14px;

}


.event-help {

    margin-top: 19px;

    font-size: 12px;

    color: var(--text-secondary);

}



/* =========================================================
   CONTADOR
========================================================= */

.countdown-title {

    margin-top: 30px;

    margin-bottom: 11px;

}


.countdown-title span {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.4px;

    color: var(--text-secondary);

}


.countdown {

    display: flex;

    justify-content: center;

    gap: 9px;

}


.countdown-item {

    min-width: 90px;

    padding: 15px 12px;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--surface-secondary);

}


.countdown-item strong {

    display: block;

    font-size: 25px;

}


.countdown-item span {

    display: block;

    font-size: 11px;

    color: var(--text-secondary);

}



/* =========================================================
   BUSCADOR
========================================================= */

.search-section,
.categories-section,
.results-section,
.tracking-section {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 24px;

    margin-bottom: 18px;

}


.search-section h2 {

    font-size: 21px;

    margin-bottom: 16px;

}


.search-form {

    display: grid;

    grid-template-columns: 1fr auto;

    gap: 10px;

}


.search-form input {

    width: 100%;

    padding: 14px 15px;

    border: 1px solid var(--border-dark);

    border-radius: 9px;

    font-size: 15px;

}


.search-form input:focus {

    outline: 2px solid #222222;

    outline-offset: 1px;

}


.search-form button {

    min-width: 120px;

    padding: 12px 20px;

    border: 1px solid #111111;

    border-radius: 9px;

    background: #111111;

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

}



/* =========================================================
   CATEGORÍAS
========================================================= */

.categories {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 10px;

}


.category {

    padding: 15px 10px;

    border: 1px solid var(--border-dark);

    border-radius: 10px;

    background: var(--surface);

    color: var(--text-primary);

    font-size: 14px;

    cursor: pointer;

}


.category:hover {

    border-color: #111111;

}


.category.active {

    border-color: #111111;

    box-shadow:
        inset 0 0 0 1px #111111;

}



/* =========================================================
   RESULTADOS
========================================================= */

.results-title-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 12px;

}


.results-count {

    font-size: 12px;

    color: var(--text-secondary);

}


.results-container {

    display: grid;

    gap: 14px;

}


.empty-state {

    min-height: 110px;

    border: 1px dashed var(--border-dark);

    border-radius: 10px;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 25px;

    text-align: center;

    color: var(--text-secondary);

    font-size: 14px;

}



/* =========================================================
   AVISO DEMO
========================================================= */

.demo-notice {

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 12px 14px;

    font-size: 12px;

    color: var(--text-secondary);

    background: var(--surface-secondary);

}



/* =========================================================
   TARJETA DE OFERTA
========================================================= */

.offer-card {

    border: 1px solid var(--border-dark);

    border-radius: 12px;

    overflow: hidden;

}


.offer-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 15px;

    padding: 18px;

    border-bottom: 1px solid var(--border);

}


.offer-product {

    flex: 1;

}


.offer-store {

    font-size: 11px;

    letter-spacing: 1px;

    color: var(--text-secondary);

    margin-bottom: 4px;

}


.offer-product h3 {

    font-size: 18px;

    font-weight: 650;

}


.offer-variant {

    margin-top: 3px;

    font-size: 13px;

    color: var(--text-secondary);

}


.offer-stock {

    font-size: 12px;

    white-space: nowrap;

}



/* =========================================================
   PRECIOS
========================================================= */

.price-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-bottom: 1px solid var(--border);

}


.price-box {

    padding: 17px;

    border-right: 1px solid var(--border);

}


.price-box:last-child {

    border-right: none;

}


.price-label {

    display: block;

    font-size: 11px;

    color: var(--text-secondary);

    margin-bottom: 4px;

}


.price-value {

    font-size: 19px;

    font-weight: 650;

}


.price-detail {

    display: block;

    margin-top: 3px;

    font-size: 10px;

    color: var(--text-secondary);

}



/* =========================================================
   MÉTRICAS
========================================================= */

.metrics-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-bottom: 1px solid var(--border);

}


.metric {

    padding: 15px 17px;

    border-right: 1px solid var(--border);

}


.metric:last-child {

    border-right: none;

}


.metric span {

    display: block;

    font-size: 10px;

    color: var(--text-secondary);

    margin-bottom: 4px;

}


.metric strong {

    display: block;

    font-size: 14px;

}



/* =========================================================
   HISTORIAL
========================================================= */

.history-box {

    padding: 17px;

    border-bottom: 1px solid var(--border);

}


.history-box h4 {

    font-size: 12px;

    margin-bottom: 11px;

}


.history-row {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 4px 0;

    font-size: 12px;

}


.history-row span:first-child {

    color: var(--text-secondary);

}



/* =========================================================
   ACCIONES
========================================================= */

.offer-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    padding: 15px 18px;

}


.updated-at {

    font-size: 11px;

    color: var(--text-secondary);

}


.offer-actions {

    display: flex;

    gap: 8px;

}


.action-button {

    border: 1px solid #111111;

    border-radius: 8px;

    padding: 9px 13px;

    background: #ffffff;

    color: #111111;

    font-size: 12px;

    cursor: pointer;

}


.action-button.primary {

    background: #111111;

    color: #ffffff;

}


.action-button:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}



/* =========================================================
   SEGUIMIENTOS
========================================================= */

.tracking-container {

    display: grid;

    gap: 10px;

}


.tracking-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 15px;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 14px;

}


.tracking-item strong {

    display: block;

    font-size: 13px;

}


.tracking-item span {

    display: block;

    margin-top: 2px;

    font-size: 11px;

    color: var(--text-secondary);

}



/* =========================================================
   PIE
========================================================= */

footer {

    border-top: 1px solid var(--border);

    background: var(--surface);

    text-align: center;

    padding: 27px 20px;

    color: var(--text-secondary);

}


footer p {

    font-size: 12px;

}


footer small {

    display: block;

    margin-top: 4px;

    font-size: 10px;

}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 800px) {

    .categories {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .metrics-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .metric:nth-child(2) {

        border-right: none;

    }


    .metric {

        border-bottom:
            1px solid var(--border);

    }

}



/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 560px) {

    .brand {

        width: calc(100% - 28px);

        padding: 18px 0;

    }


    main {

        width: calc(100% - 28px);

        margin-top: 18px;

    }


    .main-event {

        padding: 28px 15px;

    }


    .main-event h2 {

        font-size: 25px;

    }


    .countdown {

        gap: 5px;

    }


    .countdown-item {

        flex: 1;

        min-width: 0;

        padding: 12px 4px;

    }


    .countdown-item strong {

        font-size: 20px;

    }


    .search-form {

        grid-template-columns: 1fr;

    }


    .search-form button {

        width: 100%;

    }


    .price-grid {

        grid-template-columns: 1fr;

    }


    .price-box {

        border-right: none;

        border-bottom:
            1px solid var(--border);

    }


    .price-box:last-child {

        border-bottom: none;

    }


    .metrics-grid {

        grid-template-columns: 1fr 1fr;

    }


    .offer-header {

        flex-direction: column;

    }


    .offer-footer {

        flex-direction: column;

        align-items: stretch;

    }


    .offer-actions {

        width: 100%;

    }


    .action-button {

        flex: 1;

    }


    .tracking-item {

        flex-direction: column;

        align-items: stretch;

    }

}