/**
 * Tickets Vinartes — CSS Ticket Visual
 * Diseño premium para pantalla e impresión
 * Version: 1.0.0
 */

/* Variables */
:root {
    --tv-primary: #021F67;
    --tv-accent:  #E9E3DD;
    --tv-dark:    #070707;
    --tv-white:   #ffffff;
    --tv-radius:  14px;
    --tv-shadow:  0 8px 32px rgba(2,31,103,.12);
}

/* ==========================================================================
   PÁGINA DE TICKET
   ========================================================================== */

.tv-ticket-page {
    max-width: 820px;
    margin: 0 auto;
    padding: 30px 15px 60px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tv-ticket-page__header {
    text-align: center;
    margin-bottom: 30px;
}

.tv-ticket-page__logo {
    max-height: 60px;
    margin-bottom: 15px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tv-ticket-page__title {
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    color: var(--tv-primary);
    margin: 0 0 6px;
}

.tv-ticket-page__subtitle {
    color: #888;
    font-size: 14px;
    margin: 0;
}

/* Botones de acción */
.tv-ticket-page__actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.tv-action-btn {
    padding: 11px 22px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    display: inline-block;
    transition: all .2s ease;
}

.tv-action-btn--primary {
    background: var(--tv-primary);
    color: #fff;
    border-color: var(--tv-primary);
}
.tv-action-btn--primary:hover { filter: brightness(1.15); }

.tv-action-btn--secondary {
    background: var(--tv-accent);
    color: var(--tv-dark);
    border-color: var(--tv-dark);
}
.tv-action-btn--secondary:hover { background: var(--tv-dark); color: #fff; }

.tv-action-btn--outline {
    background: transparent;
    color: var(--tv-primary);
    border-color: var(--tv-primary);
}
.tv-action-btn--outline:hover { background: var(--tv-primary); color: #fff; }

/* ==========================================================================
   TICKET VISUAL PRINCIPAL
   ========================================================================== */

.tv-ticket-visual {
    display: flex;
    align-items: stretch;
    background: var(--tv-white);
    border-radius: var(--tv-radius);
    box-shadow: var(--tv-shadow);
    overflow: hidden;
    margin-bottom: 30px;
    border: 2px solid var(--tv-primary);
    position: relative;
}

/* Franja de color vertical izquierda */
.tv-ticket-visual::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--tv-primary);
}

/* Lado principal (izquierda) */
.tv-ticket-visual__main {
    flex: 1;
    padding: 28px 28px 28px 34px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tv-ticket-visual__brand {
    margin-bottom: 16px;
}

.tv-ticket-visual__brand-logo {
    max-height: 40px;
}

.tv-ticket-visual__brand-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--tv-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tv-ticket-visual__event-name {
    font-size: clamp(18px, 3vw, 24px);
    font-weight: 800;
    color: var(--tv-dark);
    line-height: 1.25;
    margin-bottom: 10px;
}

.tv-ticket-visual__type-badge {
    display: inline-block;
    background: var(--tv-primary);
    color: #fff;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 20px;
}

/* Detalles del evento */
.tv-ticket-visual__details {
    flex-grow: 1;
}

.tv-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 14px;
}

.tv-detail-item__icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.tv-detail-item__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tv-primary);
    margin-bottom: 2px;
}

.tv-detail-item__value {
    font-size: 15px;
    font-weight: 600;
    color: var(--tv-dark);
    line-height: 1.4;
}

.tv-detail-item__value small {
    color: #888;
    font-weight: 400;
    font-size: 12px;
}

.tv-detail-item__sub {
    font-size: 12px;
    color: #888;
    margin-top: 1px;
}

.tv-detail-item__time {
    font-size: 13px;
    color: #666;
    font-weight: 500;
}

.tv-ticket-visual__desc {
    background: var(--tv-accent);
    border-left: 3px solid var(--tv-primary);
    padding: 8px 12px;
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: #555;
    margin-top: 10px;
    margin-bottom: 15px;
}

.tv-ticket-visual__footer-text {
    font-size: 11px;
    color: #bbb;
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* Separador tipo talonario */
.tv-ticket-visual__sep {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    position: relative;
}

.tv-ticket-visual__sep-line {
    width: 1px;
    flex: 1;
    background: repeating-linear-gradient(to bottom, #ccc 0, #ccc 6px, transparent 6px, transparent 12px);
}

.tv-ticket-visual__sep-icon {
    font-size: 18px;
    color: #ccc;
    padding: 4px 0;
    transform: rotate(90deg);
}

/* Stub (lado derecho con QR) */
.tv-ticket-visual__stub {
    width: 220px;
    flex-shrink: 0;
    background: var(--tv-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    text-align: center;
}

.tv-ticket-visual__qr {
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    border: 3px solid var(--tv-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

.tv-ticket-visual__qr-label {
    font-size: 11px;
    color: #888;
    margin: 10px 0 5px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.tv-ticket-visual__code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--tv-primary);
    letter-spacing: 1px;
    word-break: break-all;
    margin-bottom: 10px;
}

.tv-ticket-visual__code--large {
    font-size: 22px;
    letter-spacing: 3px;
    margin: 10px 0;
}

.tv-ticket-visual__valid {
    font-size: 10px;
    color: #999;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Aviso al pie */
.tv-ticket-page__notice {
    background: #f0f9ff;
    border: 1px solid #bde0fc;
    border-radius: 8px;
    padding: 15px 20px;
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}

.tv-ticket-page__notice p { margin: 5px 0; }

.tv-ticket-page__empty {
    text-align: center;
    padding: 40px;
    color: #999;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 600px) {
    .tv-ticket-visual {
        flex-direction: column;
    }
    .tv-ticket-visual__sep {
        flex-direction: row;
        padding: 5px 0;
    }
    .tv-ticket-visual__sep-line {
        width: auto;
        height: 1px;
        flex: 1;
        background: repeating-linear-gradient(to right, #ccc 0, #ccc 6px, transparent 6px, transparent 12px);
    }
    .tv-ticket-visual__sep-icon {
        transform: none;
        padding: 0 4px;
    }
    .tv-ticket-visual__stub {
        width: 100%;
        padding: 20px;
    }
    .tv-ticket-visual__main {
        padding: 20px;
    }
}

/* ==========================================================================
   IMPRESIÓN
   ========================================================================== */

@media print {
    .no-print { display: none !important; }

    body { background: white !important; }

    .tv-ticket-page {
        padding: 0;
        max-width: 100%;
    }

    .tv-ticket-visual {
        box-shadow: none;
        border: 2px solid #021F67;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .tv-ticket-visual__stub {
        background: #E9E3DD !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tv-ticket-visual__type-badge {
        background: #021F67 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .tv-ticket-page__header,
    .tv-ticket-page__notice {
        display: none;
    }
}

/* ==========================================================================
   CSS BASE MODULAR — GRID + CARDS (para shortcodes de eventos/tickets)
   ========================================================================== */

:root {
    --tv-radius-sm: 8px;
    --tv-shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --tv-transition: all .25s ease;
}

/* Grid */
.tv-grid { display: grid; gap: clamp(15px,2.5vw,28px); width: 100%; }
.tv-grid-1 { grid-template-columns: 1fr; }
.tv-grid-2 { grid-template-columns: repeat(2,1fr); }
.tv-grid-3 { grid-template-columns: repeat(3,1fr); }
.tv-grid-4 { grid-template-columns: repeat(4,1fr); }
@media (max-width:1024px) { .tv-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:768px)  { .tv-grid-3,.tv-grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px)  { .tv-grid-2,.tv-grid-3,.tv-grid-4 { grid-template-columns: 1fr; } }

/* Tarjeta evento */
.tv-event-card { background:#fff; border-radius:var(--tv-radius); box-shadow:var(--tv-shadow); overflow:hidden; display:flex; flex-direction:column; height:100%; transition:var(--tv-transition); }
.tv-event-card:hover { transform:translateY(-4px); box-shadow:var(--tv-shadow-sm); }
.tv-card__image { height:clamp(160px,22vw,240px); overflow:hidden; background:var(--tv-accent); }
.tv-card__image img.tv-card-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.tv-event-card:hover .tv-card__image img { transform:scale(1.06); }
.tv-card__body { padding:clamp(16px,2.5vw,24px); display:flex; flex-direction:column; flex-grow:1; }
.tv-event__meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tv-type-badge { padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }
.tv-type--presencial { background:#dbeafe; color:#1d4ed8; }
.tv-type--virtual    { background:#ede9fe; color:#7c3aed; }
.tv-type--hibrido    { background:#fef3c7; color:#d97706; }
.tv-event__date { font-size:13px; color:#666; }
.tv-event__title { font-size:clamp(16px,2.5vw,22px); font-weight:700; color:var(--tv-dark); margin:0 0 8px; }
.tv-event__location,.tv-event__capacity { font-size:13px; color:#777; margin-bottom:6px; }
.tv-event__description { font-size:13px; color:#666; line-height:1.55; margin-bottom:16px; flex-grow:1; }

/* Tickets en card */
.tv-event__tickets { margin-top:auto; padding-top:15px; border-top:2px solid var(--tv-accent); }
.tv-ticket-row { display:flex; justify-content:space-between; align-items:center; padding:10px; background:var(--tv-accent); border-radius:var(--tv-radius-sm); margin-bottom:8px; }
.tv-ticket-row:last-child { margin-bottom:0; }
.tv-ticket-row__info { display:flex; flex-direction:column; gap:2px; }
.tv-ticket-row__type { font-weight:700; font-size:13px; color:var(--tv-dark); }
.tv-ticket-row__price { font-size:clamp(16px,2.5vw,20px); font-weight:800; color:var(--tv-primary); }
.tv-ticket-row__stock { font-size:11px; color:#888; }
.tv-stock--low { color:#dc3545 !important; font-weight:600; }
.tv-no-tickets { font-size:13px; color:#aaa; font-style:italic; text-align:center; padding:10px 0; }

/* Ticket card individual (shortcode [tv_ticket]) */
.tv-ticket-card { background:#fff; border:2px solid var(--tv-primary); border-radius:var(--tv-radius); overflow:hidden; transition:var(--tv-transition); }
.tv-ticket-card:hover { box-shadow:var(--tv-shadow); }
.tv-ticket-card__header { background:var(--tv-primary); padding:16px 20px; }
.tv-ticket-card__event { color:#fff; font-size:16px; font-weight:700; margin-bottom:6px; }
.tv-ticket-card__type { display:inline-block; background:rgba(255,255,255,.2); color:#fff; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; }
.tv-ticket-card__details { padding:15px 20px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:#666; background:#fafafa; border-bottom:1px solid #eee; }
.tv-ticket-card__price { display:flex; align-items:baseline; gap:4px; padding:15px 20px 10px; }
.tv-price__currency { font-size:14px; font-weight:600; color:var(--tv-dark); }
.tv-price__amount { font-size:clamp(28px,5vw,38px); font-weight:800; color:var(--tv-primary); line-height:1; }
.tv-ticket-card__stock { padding:0 20px 10px; font-size:12px; }

/* Botones */
.tv-btn { display:block; width:100%; padding:clamp(12px,2vw,15px) 20px; text-align:center; text-decoration:none; font-size:14px; font-weight:700; border-radius:var(--tv-radius-sm); transition:var(--tv-transition); cursor:pointer; border:2px solid transparent; text-transform:uppercase; letter-spacing:.4px; box-sizing:border-box; }
.tv-btn:focus-visible { outline:3px solid var(--tv-primary); outline-offset:2px; }
.tv-btn--buy { background:var(--tv-primary); color:#fff !important; border-color:var(--tv-primary); margin:10px 20px 15px; width:calc(100% - 40px); }
.tv-btn--buy:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 4px 12px rgba(2,31,103,.25); }
.tv-btn--soldout { background:#f1f1f1; color:#aaa !important; cursor:not-allowed; border-color:#ddd; margin:10px 20px 15px; width:calc(100% - 40px); }
.tv-btn--sm { padding:8px 16px; font-size:12px; width:auto; display:inline-block; }

/* Compactos */
.tv-upcoming { display:flex; flex-direction:column; gap:10px; }
.tv-event-compact { display:grid; grid-template-columns:65px 1fr auto; gap:14px; align-items:center; padding:13px; background:#fff; border-radius:var(--tv-radius-sm); box-shadow:var(--tv-shadow-sm); transition:var(--tv-transition); }
.tv-event-compact:hover { box-shadow:var(--tv-shadow); transform:translateX(3px); }
.tv-date-badge { background:var(--tv-primary); color:#fff; border-radius:var(--tv-radius-sm); text-align:center; padding:8px 5px; }
.tv-date-badge__day { display:block; font-size:26px; font-weight:800; line-height:1; }
.tv-date-badge__month { display:block; font-size:11px; text-transform:uppercase; margin-top:2px; }
.tv-event-compact__title { font-size:14px; font-weight:700; color:var(--tv-dark); margin:0 0 3px; }
.tv-event-compact__venue { font-size:12px; color:#888; margin:0; }
.tv-empty { color:#aaa; font-style:italic; padding:20px 0; text-align:center; }