/* 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,
.lw-table tbody td .lw-animal {
    font-size: 15px;
    font-weight: 500;
    margin-left: 4px;
    color: var(--lw-ink);
    letter-spacing: .5px;
}

/* Animal names are words, not 3-letter zodiac codes, so they need to be able
   to wrap inside a narrow weekly column. */
.lw-table tbody td .lw-animal {
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* --- Animalito cells: thumbnail above, number + name as its caption -------
   The daily card gives each draw a large tile; here there are seven days
   across, so the picture is small and the text carries the detail. Cells stay
   the same height whether or not an image resolved, so rows don't jump. */
.lw-table tbody td.lw-animal-cell {
    padding: 5px 6px;
    text-align: center;
    vertical-align: top;
    line-height: 1.2;
}

.lw-animal-img {
    display: block;
    width: 38px;
    height: 38px;
    margin: 0 auto 3px;
    object-fit: contain;
    border-radius: 6px;
    background: rgba(0, 0, 0, .04);
}

.lw-animal-label {
    display: block;
    white-space: normal;
}

.lw-animal-label .lw-animal-num {
    font-weight: 700;
    font-size: 14px;
    color: var(--lw-ink);
}

/* Inside the caption the name sits under the number, so the inline gap the
   standalone .lw-animal carries would push it off-centre. */
.lw-animal-label .lw-animal {
    display: block;
    margin-left: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
    opacity: .75;
}

/* 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,
    .lw-table tbody td .lw-animal {
        font-size: 14px;
        margin-left: 3px;
        letter-spacing: 0;
    }
    .lw-table tbody td .lw-animal {
        font-size: 12px;
    }
    .lw-animal-img {
        width: 30px;
        height: 30px;
    }
    .lw-animal-label .lw-animal-num { font-size: 13px; }
    .lw-animal-label .lw-animal     { font-size: 10px; }
}