/* Weekly results card — .lw-* ("lottery week"). Each card is one product,
 * with its 7-day grid of results. Same v2 palette as .lc-* cards.
 * Designed in /loteria/resultados/v2/componentes/semana/. */

/* Date picker bar for /anteriores/ — single inline group on desktop,
 * stacks on mobile so the input and button each take the full width. */
.v2-ant-picker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 20px;
}
.v2-ant-picker label {
    margin: 0;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}
.v2-ant-picker-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}
.v2-ant-picker input[type="date"] {
    flex: 1;
    min-width: 0;
    height: 44px;
    min-height: 44px;       /* iOS Safari ignores `height` on date inputs */
    padding: 0 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;        /* ≥16px stops iOS Safari from auto-zooming on focus */
    color: #1f1f1f;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.2;
}
.v2-ant-picker input[type="date"]:focus {
    outline: none;
    border-color: #428c00;
    box-shadow: 0 0 0 2px rgba(66, 140, 0, .15);
}
.v2-ant-go {
    flex: 0 0 auto;
    height: 44px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #428c00;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease;
}
.v2-ant-go:hover,
.v2-ant-go:focus {
    background: #386f04;
}

@media (max-width: 540px) {
    .v2-ant-picker-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .v2-ant-go { width: 100%; }
}


.lw-card {
    --lw-accent: #428c00;
    --lw-cell-bg: #eee;
    --lw-ink: #1f1f1f;

    background: #fff;
    padding: 0;
    margin-bottom: 24px;
    border: 1px solid #e1e1e1;
    border-radius: 10px;
    overflow: hidden;
}
.lw-card * { box-sizing: border-box; }

/* Header — logo + product name, with action icons on the right (desktop). */
.lw-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid #e1e1e1;
}
.lw-logo {
    height: 76px;
    width: 76px;
    object-fit: contain;
    flex: 0 0 auto;
}
.lw-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

/* Action icon row — same look as .lc-footer on the daily card. */
.lw-actions {
    display: flex;
    background: var(--lw-cell-bg);
    overflow: hidden;
}
.lw-actions--top {
    margin-left: auto;
    border-radius: 9px;
}
.lw-actions--bottom {
    display: none;          /* shown only on mobile (≤640px) */
}
.lw-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #8a8a8a;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}
.lw-action-btn:hover,
.lw-action-btn:focus {
    background: var(--lw-accent);
    color: #fff;
    text-decoration: none;
}
.lw-action-btn--soon,
.lw-action-btn--soon:hover {
    background: transparent;
    color: #c5c5c5;
    cursor: default;
}
.lw-action-btn .glyphicon { font-size: 16px; }

/* Horizontally scrollable wrapper for the wide week table. The repeating
 * "TuAzar.com" watermark sits over only this area — header and footer stay
 * clean — using the same pattern asset as the daily .lc-card. */
.lw-scroll {
    overflow-x: auto;
    position: relative;
}
.lw-scroll::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(/in/fg_marcaa6.png) 0 0 repeat;
    pointer-events: none;
    z-index: 5;
}

table.lw-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}
.lw-table th,
.lw-table td {
    padding: 7px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    line-height: 1.2;
    border-right: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

/* Day column headers — green band. */
.lw-table thead th.lw-day {
    background: var(--lw-accent);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .3px;
    padding: 8px 6px;
    border-color: #386f04;
}
.lw-table thead th.lw-day .lw-day-num {
    display: block;
    font-size: 13px;
    font-weight: 400;
    opacity: .9;
    margin-top: 2px;
}

/* "Sorteo" / "Juego" corner headers — match the day-header band. */
.lw-table thead th.lw-corner {
    background: var(--lw-accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .3px;
    padding: 8px 6px;
    border-color: #386f04;
}

/* Body label columns — bold dark text; background comes from the row band. */
.lw-table tbody th.lw-time,
.lw-table tbody th.lw-game {
    color: var(--lw-ink);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 10px;
}
/* Times stay on one line. */
.lw-table tbody th.lw-time { white-space: nowrap; }
/* Game labels may wrap if the name is long (e.g. "Triple Gato Zodiacal"). */
.lw-table tbody th.lw-game {
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

/* Result cells — regular weight, sign in same size as the triple. */
.lw-table tbody td {
    color: var(--lw-ink);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .5px;
    min-width: 84px;
    padding: 6px 8px;
}
.lw-table tbody td.lw-empty {
    color: #c0c0c0;
    letter-spacing: 0;
}
.lw-table tbody td .lw-sign {
    font-size: 15px;
    font-weight: 500;
    margin-left: 4px;
    color: var(--lw-ink);
    letter-spacing: .5px;
}

/* Whole-row band coloring per time block (par/impar). All cells in a tbody
 * share the same tint so each horario reads as one group. */
.lw-table > tbody > tr > th,
.lw-table > tbody > tr > td {
    background: #fff;
}
.lw-table > tbody:nth-of-type(even) > tr > th,
.lw-table > tbody:nth-of-type(even) > tr > td {
    background: #f7f7f7;
}

/* Fixed widths for label columns. Juego is a bit wider so most game names
 * stay on one line; very long ones wrap (per the white-space rule above). */
.lw-table thead th.lw-corner:nth-child(1),
.lw-table tbody th.lw-time { width: 96px; }
.lw-table thead th.lw-corner:nth-child(2),
.lw-table tbody th.lw-game { width: 132px; }

/* Mobile: tighter header, action row moves to a full-width footer. */
@media (max-width: 640px) {
    .lw-head {
        padding: 12px 14px;
        gap: 10px;
        flex-wrap: wrap;
    }
    .lw-logo { height: 52px; width: 52px; }
    .lw-title { font-size: 16px; }

    .lw-actions--top { display: none; }
    .lw-actions--bottom {
        display: flex;
        width: 100%;
        border-top: 1px solid #e1e1e1;
        border-radius: 0;
    }
    .lw-actions--bottom .lw-action-btn {
        flex: 1;
        width: auto;
        height: 44px;
    }
    .lw-actions--bottom .lw-action-btn .glyphicon { font-size: 16px; }

    .lw-table thead th.lw-corner { font-size: 12px; padding: 7px 6px; }
    .lw-table thead th.lw-day { font-size: 13px; padding: 7px 4px; }
    .lw-table thead th.lw-day .lw-day-num { font-size: 11px; }

    .lw-table thead th.lw-corner:nth-child(1),
    .lw-table tbody th.lw-time { width: 76px; }
    .lw-table thead th.lw-corner:nth-child(2),
    .lw-table tbody th.lw-game { width: 104px; }

    .lw-table tbody th.lw-time,
    .lw-table tbody th.lw-game { font-size: 12px; padding: 7px 8px; }

    .lw-table tbody td {
        font-size: 14px;
        min-width: 64px;
        padding: 6px;
        letter-spacing: 0;
    }
    .lw-table tbody td .lw-sign {
        font-size: 14px;
        margin-left: 3px;
        letter-spacing: 0;
    }
}