/**
 * Tickets Vinartes — CSS Base
 * Version: 1.0.0
 * Colores: #021F67 (azul), #E9E3DD (beige), #070707 (negro)
 */

:root {
    --tv-primary:    #021F67;
    --tv-accent:     #E9E3DD;
    --tv-dark:       #070707;
    --tv-white:      #ffffff;
    --tv-success:    #28a745;
    --tv-warning:    #ffc107;
    --tv-error:      #dc3545;
    --tv-radius:     12px;
    --tv-radius-sm:  7px;
    --tv-radius-pill:50px;
    --tv-shadow:     0 4px 18px rgba(2,31,103,.09), 0 1px 4px rgba(0,0,0,.05);
    --tv-shadow-hov: 0 12px 32px rgba(2,31,103,.15), 0 4px 8px rgba(0,0,0,.06);
    --tv-transition: all .26s ease;
    --tv-font:       inherit;
}

/* Reset mínimo */
.tv-grid *, .tv-event-card *, .tv-ticket-card * { box-sizing: border-box; }

/* ==========================================================================
   GRID
   ========================================================================== */
.tv-grid { display:grid; gap:clamp(14px,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 DE EVENTO
   ========================================================================== */
.tv-event-card {
    background:var(--tv-white);
    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-hov); }

.tv-card__image {
    height:clamp(160px,22vw,240px);
    overflow:hidden;
    background:var(--tv-accent);
    flex-shrink:0;
}
.tv-card__image .tv-card-img,
.tv-card__image img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .38s 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;
}

/* Meta (tipo + fecha) */
.tv-event__meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.tv-type-badge { padding:4px 12px; border-radius:var(--tv-radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.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:#777; }

.tv-event__title { font-size:clamp(16px,2.5vw,22px); font-weight:700; color:var(--tv-dark); margin:0 0 8px; line-height:1.3; }
.tv-event__location,
.tv-event__capacity { font-size:13px; color:#888; margin-bottom:6px; }
.tv-event__description { font-size:13px; color:#666; line-height:1.55; margin-bottom:15px; flex-grow:1; }

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

/* ==========================================================================
   TARJETA DE TICKET INDIVIDUAL [tv_ticket]
   ========================================================================== */
.tv-ticket-card {
    background:var(--tv-white);
    border:2px solid var(--tv-primary);
    border-radius:var(--tv-radius);
    overflow:hidden;
    transition:var(--tv-transition);
    display:flex;
    flex-direction:column;
}
.tv-ticket-card:hover { box-shadow:var(--tv-shadow-hov); transform:translateY(-3px); }

.tv-ticket-card__header { background:var(--tv-primary); padding:18px 20px; }
.tv-ticket-card__event  { color:#fff; font-size:clamp(15px,2.5vw,18px); font-weight:700; margin-bottom:8px; line-height:1.3; }
.tv-ticket-card__type   { display:inline-block; background:rgba(255,255,255,.2); color:#fff; padding:4px 13px; border-radius:var(--tv-radius-pill); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; }

.tv-ticket-card__details { padding:13px 20px; display:flex; flex-direction:column; gap:7px; font-size:13px; color:#666; background:#fafafa; border-bottom:1px solid #eee; }
.tv-ticket-card__details span { display:flex; align-items:center; gap:6px; }

.tv-ticket-card__price { display:flex; align-items:baseline; gap:4px; padding:16px 20px 8px; }
.tv-price__currency { font-size:14px; font-weight:600; color:var(--tv-dark); }
.tv-price__amount   { font-size:clamp(28px,5vw,40px); 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:clamp(13px,1.8vw,15px); 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; line-height:1.4;
    font-family:var(--tv-font);
}
.tv-btn:focus-visible { outline:3px solid var(--tv-primary); outline-offset:2px; }

.tv-btn--buy {
    background:var(--tv-primary);
    color:var(--tv-white) !important;
    border-color:var(--tv-primary);
    margin:10px 20px 16px;
    width:calc(100% - 40px);
}
.tv-btn--buy:hover { filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 4px 14px rgba(2,31,103,.28); }

.tv-btn--soldout {
    background:#f0f0f0; color:#bbb !important;
    cursor:not-allowed; border-color:#ddd;
    margin:10px 20px 16px; width:calc(100% - 40px);
}

.tv-btn--sm { padding:8px 16px; font-size:12px; width:auto; display:inline-block; }

/* ==========================================================================
   WIDGET PRÓXIMOS EVENTOS (compacto)
   ========================================================================== */
.tv-upcoming { display:flex; flex-direction:column; gap:10px; }

.tv-event-compact {
    display:grid; grid-template-columns:65px 1fr auto;
    align-items:center; gap:14px;
    padding:13px 15px; background:var(--tv-white);
    border-radius:var(--tv-radius-sm); box-shadow:var(--tv-shadow);
    transition:var(--tv-transition);
}
.tv-event-compact:hover { box-shadow:var(--tv-shadow-hov); 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; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tv-event-compact__venue { font-size:12px; color:#999; margin:0; }

/* ==========================================================================
   MISC
   ========================================================================== */
.tv-empty { color:#bbb; font-style:italic; padding:20px 0; text-align:center; font-size:14px; }

/* Elementor */
.elementor-widget-shortcode .tv-grid { margin:0; }

/* Accesibilidad */
@media(prefers-reduced-motion:reduce) {
    .tv-event-card,.tv-ticket-card,.tv-event-compact,
    .tv-btn,.tv-event-card:hover .tv-card__image img { transform:none; transition:none; }
}

/* Impresión */
@media print {
    .tv-event-card { box-shadow:none; border:1px solid #ddd; break-inside:avoid; }
    .tv-btn { display:none; }
}