/* ===========================================================================
   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
           .lc-row.lc-row--head     column labels
           .lc-row                  one draw: time box + 1-2 game boxes

   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;
}

.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;
}

/* --- 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;
}