/* ==============================================================
 * Archivo: event-pills.css
 * Ruta: includes/modules/pills/event-pills.css
 *
 * Descripción:
 *  Estilos de las píldoras reutilizables en listado y ficha.
 * ============================================================== */

/* ========================= */
/*   CONTENEDORES DE PILL    */
/* ========================= */

.ec-event-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.ec-event-card-share-line {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ========================= */
/*   BASE DE TODA PÍLDORA    */
/* ========================= */

.ec-pill,
.ec-pill-day--today,
.ec-pill-day--tomorrow,
.ec-pill-day--soon,
.ec-pill-day--past,
.ec-pill-day--ongoing,
.ec-pill-time--countdown,
.ec-pill-time--live,
.ec-pill-time--ended,
.ec-pill--place,
.ec-pill--city,
.ec-pill-price,
.ec-pill--date,
.ec-pill--share,
.ec-pill--edit {
    display: inline-flex !important;          /* fuerza fila */
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    color: #111827;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap; /* escritorio: una sola línea por defecto */
}

/* Icono SIEMPRE a la izquierda */
.ec-pill .ec-pill-icon,
.ec-pill-day--today .ec-pill-icon,
.ec-pill-day--tomorrow .ec-pill-icon,
.ec-pill-day--soon .ec-pill-icon,
.ec-pill-day--past .ec-pill-icon,
.ec-pill-day--ongoing .ec-pill-icon,
.ec-pill-time--countdown .ec-pill-icon,
.ec-pill-time--live .ec-pill-icon,
.ec-pill-time--ended .ec-pill-icon,
.ec-pill--place .ec-pill-icon,
.ec-pill--city .ec-pill-icon,
.ec-pill-price .ec-pill-icon,
.ec-pill--date .ec-pill-icon,
.ec-pill--share .ec-pill-icon,
.ec-pill--edit .ec-pill-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin-right: 6px !important;
    margin-bottom: 0 !important;
    font-size: 13px;
    flex-shrink: 0;
}

/* Por si el tema hace span { display:block } */
.ec-pill > span:not(.ec-pill-icon),
.ec-pill-day--today > span:not(.ec-pill-icon),
.ec-pill-day--tomorrow > span:not(.ec-pill-icon),
.ec-pill-day--soon > span:not(.ec-pill-icon),
.ec-pill-day--past > span:not(.ec-pill-icon),
.ec-pill-day--ongoing > span:not(.ec-pill-icon),
.ec-pill-time--countdown > span:not(.ec-pill-icon),
.ec-pill-time--live > span:not(.ec-pill-icon),
.ec-pill-time--ended > span:not(.ec-pill-icon),
.ec-pill--place > span:not(.ec-pill-icon),
.ec-pill--city > span:not(.ec-pill-icon),
.ec-pill-price > span:not(.ec-pill-icon),
.ec-pill--date > span:not(.ec-pill-icon),
.ec-pill--share > span:not(.ec-pill-icon),
.ec-pill--edit > span:not(.ec-pill-icon) {
    display: inline-block !important;
}

/* Texto interno multilínea (por ejemplo, WhatsApp) */
.ec-pill .ec-pill-text {
    display: inline-block;
    white-space: normal;     /* permite saltos de línea dentro del texto */
    line-height: 1.2;
}

/* Segunda línea del WhatsApp (pequeña) */
.ec-pill--share .ec-pill-text small {
    display: block;
    font-size: 11px;
    opacity: 0.85;
    margin-top: 1px;
}

/* ========================= */
/*     PÍLDORAS GENÉRICAS    */
/* ========================= */

.ec-pill--place {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
}

.ec-pill--city {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
}

.ec-pill-price {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

/* FECHA */
.ec-pill--date {
    background: #eff6ff;
    border-color: #dbeafe;
    color: #1d4ed8;
}

/* DÍA */
.ec-pill-day--today {
    background: #dcfce7;
    border-color: #bbf7d0;
    color: #15803d;
}

.ec-pill-day--tomorrow {
    background: #fef9c3;
    border-color: #fde68a;
    color: #854d0e;
}

.ec-pill-day--soon {
    background: #ffe7d6;
    border-color: #fed7aa;
    color: #9a3412;
}

.ec-pill-day--past {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #4b5563;
}

.ec-pill-day--ongoing {
    background: #e0f2fe;
    border-color: #bae6fd;
    color: #075985;
}

/* TIEMPO */
.ec-pill-time--countdown {
    background: #fef3c7;
    border-color: #fde68a;
    color: #92400e;
    font-weight: 600;
}

.ec-pill-time--live {
    background: #fee2e2;
    border-color: #fecaca;
    color: #b91c1c;
    font-weight: 700;
}

/* Evento de hoy ya terminado (píldora negra) */
.ec-pill-time--ended {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
    font-weight: 600;
}

/* SHARE */
.ec-pill--share {
    background: #e0fbe3;
    border-color: #bbf7d0;
    color: #15803d;
    font-weight: 600;
    cursor: pointer;
}

.ec-pill--share:hover {
    background: #bbf7d0;
    border-color: #86efac;
    color: #166534;
}

/* EDITAR (solo admins) */
.ec-pill--edit {
    background: #111827;
    border-color: #111827;
    color: #f9fafb;
    font-weight: 600;
    cursor: pointer;
}

.ec-pill--edit:hover {
    background: #020617;
    border-color: #020617;
    color: #ffffff;
}

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

@media (max-width: 768px) {
    .ec-pill,
    .ec-pill-day--today,
    .ec-pill-day--tomorrow,
    .ec-pill-day--soon,
    .ec-pill-day--past,
    .ec-pill-day--ongoing,
    .ec-pill-time--countdown,
    .ec-pill-time--live,
    .ec-pill-time--ended,
    .ec-pill--place,
    .ec-pill--city,
    .ec-pill-price,
    .ec-pill--date,
    .ec-pill--share,
    .ec-pill--edit {
        font-size: 14px;
        padding: 5px 13px;

        /* 👇 cambios clave para móvil */
        white-space: normal;      /* permite salto de línea en toda la pill si hace falta */
        max-width: 100%;          /* que no sobresalga del contenedor */
        line-height: 1.3;
        word-break: break-word;   /* por si hay palabras muy largas o URLs */
        align-items: flex-start;  /* icono arriba, texto puede ocupar varias líneas */
    }

    .ec-event-card-meta {
        gap: 5px;
    }

    .ec-event-card-share-line {
        gap: 5px;
    }

    .ec-pill .ec-pill-text {
        display: block;
        line-height: 1.3;
    }
}