/* ===========================================================================
   Lottery Results v2 — result card component
   ---------------------------------------------------------------------------
   Designed and previewed at /loteria/resultados/v2/componentes/ .
   Once approved this is the card used by CardRendererV2 on the real page.

   Structure:
     .lc-card                       the rounded box
       .lc-section                  one or more (sub-lotteries)
         .lc-head                   logo (centered) then title (centered)
         .lc-table                  rows of result boxes  (render_mode=table)
           .lc-row.lc-row--head     column labels
           .lc-row                  one draw: time box + 1-2 game boxes
         .lc-tiles                  grid of animal tiles   (render_mode=tiles)
           .lc-tile                 one draw: image, time, number + name

   Spacing is driven by a single --lc-gap so every gap matches.
   =========================================================================== */

.lc-card {
    --lc-gap: 8px;
    --lc-cell-radius: 9px;
    --lc-accent: #428c00;
    --lc-cell-bg: #eee;
    --lc-ink: #1f1f1f;

    box-sizing: border-box;
    position: relative;
    background: #fff;
    padding: 14px;
}

.lc-card * {
    box-sizing: border-box;
}

/* Repeating "TuAzar.com" watermark layered over the whole card. */
.lc-watermark {
    position: absolute;
    inset: 0;
    background: url(/in/fg_marcaa6.png) 0 0 repeat;
    pointer-events: none;
    z-index: 5;
}

/* --- Section --------------------------------------------------------------- */
.lc-section + .lc-section {
    margin-top: calc(var(--lc-gap) * 2);
    padding-top: calc(var(--lc-gap) * 2);
    border-top: 1px solid #eee;
}

/* --- Header: logo above, centered title ----------------------------------- */
.lc-head {
    text-align: center;
    margin-bottom: var(--lc-gap);
}

/* Uniform logo box: every logo is scaled to fit the same frame, so logos
   with different aspect ratios (e.g. the wide Triple Popular mark) stay
   visually consistent instead of sprawling. */
.lc-logo {
    display: block;
    width: 100%;
    max-width: 140px;
    height: 48px;
    margin: 0 auto 8px;
    object-fit: contain;
}

/* The logo frame is a fixed pixel box, so on a 2-column page — where cards are
   about 1.5x wider than on the 3-column lottery page — the same 140x48 logo
   fills only ~24% of the header instead of ~36%, and reads as too small.
   Scale the frame with the card so a logo occupies the same share on both.
   Desktop only: below 992px every card is full width regardless of type, so
   the shared size is already correct there. */
@media (min-width: 993px) {
    .v2-grid[data-columns="2"] .lc-logo {
        max-width: 200px;
        height: 66px;
    }
}

.lc-title {
    margin: 0;
    font-size: 17px;
    font-weight: 800;    line-height: 1.25;
    text-transform: uppercase;
    color: var(--lc-ink);
}

/* --- Result table ---------------------------------------------------------- */
.lc-table {
    display: flex;
    flex-direction: column;
    gap: var(--lc-gap);
}

.lc-row {
    display: flex;
    gap: var(--lc-gap);
}

.lc-th {
    flex: 1;
    text-align: center;
    font-size: 12px;
    font-weight: 700;    text-transform: uppercase;
    color: #99a0a6;
}

.lc-cell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 4px 6px;
    border-radius: var(--lc-cell-radius);
    background: var(--lc-cell-bg);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--lc-ink);
    text-align: center;
}

/* Time box — first column of every data row. */
.lc-cell--time {
    background: var(--lc-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: normal;
    white-space: nowrap;
}

/* Result not published yet. */
.lc-cell--empty {
    color: #c7c7c7;
    font-weight: 400;
}

.lc-cell abbr {
    text-decoration: none;
    cursor: help;
}

/* --- Animal tiles ----------------------------------------------------------
   Used by animalito products instead of .lc-table. One tile per draw, laid
   out --lc-tiles-per-row across (set inline from the section's tiles_per_row).
   The image is the focus; time and number + name sit under it.
   --------------------------------------------------------------------------- */
.lc-tiles {
    --lc-tiles-per-row: 3;
    display: grid;
    grid-template-columns: repeat(var(--lc-tiles-per-row), minmax(0, 1fr));
    gap: var(--lc-gap);
}

/* Mobile: the grid stacks cards to one full-width column at this same
   breakpoint (lottery-grid-v2.css / lottery-grid-v2.js), so the tiles go two
   across instead of the section's configured count.
   This overrides grid-template-columns rather than the --lc-tiles-per-row
   variable on purpose: the variable is set inline per section, and an inline
   custom property would win over a stylesheet one without !important. The
   longhand is only ever set here, so plain cascade order settles it. */
@media (max-width: 992px) {
    .lc-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.lc-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.lc-tile-img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--lc-cell-radius);
    background: var(--lc-cell-bg);
    object-fit: contain;
}

/* Fallback for browsers without aspect-ratio (older Safari on iOS). */
@supports not (aspect-ratio: 1 / 1) {
    .lc-tile-img {
        height: 84px;
    }
}

/* Waiting placeholder reads as inactive, not as a result: greyed out AND
   inset well inside the tile, so an unpublished draw never looks as loud as
   a real animal image. The padding shrinks the contained logo; the tile box
   itself keeps its size so the grid stays even. */
.lc-tile--empty .lc-tile-img {
    padding: 22%;
    opacity: 0.38;
    filter: grayscale(1);
}

/* Same weight and size as .lc-cell--time on the lottery card, so a horario
   reads identically on both pages. */
.lc-tile-time {
    width: 100%;
    padding: 5px 4px;
    border-radius: var(--lc-cell-radius);
    background: var(--lc-accent);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
}

/* Narrow tiles (many per row, or a phone) would clip "10:00 AM" at 18px. */
@media (max-width: 480px) {
    .lc-tile-time {
        font-size: 15px;
    }
}

.lc-tile-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    font-size: 15px;
    line-height: 1.25;
    text-align: center;
    color: var(--lc-ink);
}

.lc-tile-num {
    font-weight: 800;
}

.lc-tile-animal {
    font-weight: 400;
    overflow-wrap: anywhere;
}

.lc-tile-label--empty {
    color: #c7c7c7;
}

/* --- Footer: action icons in one container --------------------------------- */
.lc-footer {
    display: flex;
    margin-top: calc(var(--lc-gap) * 2.5);
    background: var(--lc-cell-bg);
    border-radius: var(--lc-cell-radius);
    overflow: hidden;
    /* Sit above the watermark so the mark never shows over the footer. */
    position: relative;
    z-index: 10;
}

.lc-footer-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    color: #8a8a8a;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.lc-footer-btn:hover,
.lc-footer-btn:focus {
    background: var(--lc-accent);
    color: #fff;
    text-decoration: none;
}

/* Icons whose page is not built yet — disabled, "Muy pronto" tooltip. */
.lc-footer-btn--soon,
.lc-footer-btn--soon:hover {
    background: transparent;
    color: #c5c5c5;
    cursor: default;
}

.lc-footer-btn .glyphicon {
    font-size: 16px;
}