/* =====================================================
   Google Calendar Events — Estilos del plugin
   ===================================================== */

:root {
    --gce-primary:     #1a73e8;
    --gce-primary-dk:  #1557b0;
    --gce-accent:      #ea4335;
    --gce-today-bg:    #e8f0fe;
    --gce-today-bd:    #1a73e8;
    --gce-past-op:     0.55;
    --gce-radius:      12px;
    --gce-radius-sm:   6px;
    --gce-shadow:      0 2px 12px rgba(0,0,0,.08);
    --gce-font:        inherit;
    --gce-gray-100:    #f8f9fa;
    --gce-gray-200:    #e8eaed;
    --gce-gray-500:    #80868b;
    --gce-gray-800:    #202124;
    --gce-date-bg:     #f1f3f4;
}

/* ── Contenedor principal ── */
.gce-wrapper {
    font-family: var(--gce-font);
    max-width: 720px;
   /* margin: 0 auto 2rem;*/
    padding: 0;
    color: var(--gce-gray-800);
    /*width: 366px;*/
    background: #91acfa;
    border-radius: 12px;

    padding-left: 32px;
    padding-top: 20px;
}

/* ── Cabecera ── */
.gce-header {
    display: flex;
    align-items: center;
    
   /* margin-bottom: 20px;*/
    padding-bottom: .75rem;
    /*border-bottom: 2px solid var(--gce-gray-200);*/
    justify-content: space-between;
    padding: 10px 10px 0px 10px;
    margin-left:10px;
}

.gce-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: .5rem;
    color: white !important;
}

.gce-event-title a{

    color: white !important;
}

.gce-month {
    color: white !important;
}

/* ── Botón refresh ── */
.gce-refresh-btn {
    background: none;
    border: 1px solid var(--gce-gray-200);
    border-radius: var(--gce-radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    color: var(--gce-gray-500);
    display: flex;
    align-items: center;
    transition: all .2s ease;
}

.gce-refresh-btn:hover {
    background: var(--gce-gray-100);
    color: var(--gce-primary);
    border-color: var(--gce-primary);
}

.gce-refresh-btn.gce-spinning svg {
    animation: gce-spin .8s linear infinite;
}

@keyframes gce-spin {
    to { transform: rotate(360deg); }
}

/* ── Lista de eventos ── */
.gce-events-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ── Ítem individual ── */
.gce-event-item {
    display: flex;
    gap: 1rem;

    
    transition: box-shadow .2s ease, transform .15s ease;
    position: relative;
    /*box-shadow: var(--gce-shadow);
    background: #fff;
    border: 1px solid var(--gce-gray-200);
    border-radius: var(--gce-radius);
    padding: 1rem 1.25rem;*/
}
/*
.gce-event-item:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    transform: translateY(-1px);
}*/

/* Pasados */
.gce-event-item.gce-past {
    display: none;
    /*opacity: var(--gce-past-op);*/
}

/* Hoy */
.gce-event-item.gce-today {
   /* background: var(--gce-today-bg);
    border-color: var(--gce-today-bd);
    border-left: 4px solid var(--gce-today-bd);*/
}

/* ── Bloque de fecha lateral ── */
.gce-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    background: #1e1c43;/*var(--gce-date-bg)*/;
    border-radius: var(--gce-radius-sm);
    padding: .5rem .4rem;
    text-align: center;
    line-height: 1.1;
    flex-shrink: 0;
    height: 82px;
}

.gce-event-day {
    font-size: 1.65rem;
    font-weight: 800;
    color: white;
    display: block;
}

.gce-event-month {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: white;
    font-weight: 600;
    display: block;
}

.gce-today .gce-event-date {
    background: var(--gce-primary);
}

.gce-today .gce-event-day,
.gce-today .gce-event-month {
    color: #fff;
}

/* ── Cuerpo del evento ── */
.gce-event-body {
    flex: 1;
    min-width: 0;
}

.gce-event-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .3rem;
}

.gce-event-time {
    font-size: .8rem;
    color: #1e1c43;
}

/* ── Badges ── */
.gce-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 4px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 15px;
}

.gce-badge--today {
    background: var(--gce-primary);
    color: #fff;
}

.gce-badge--allday {
    /*background: var(--gce-gray-200);*/
    color: #1e1c43;
}

/* ── Título del evento ── */
.gce-event-title {
    margin: 0 0 .3rem;
    /*font-size: 1rem;*/
    font-weight: 600;
    color: var(--gce-gray-800);
    line-height: 1.35;
   /* white-space: nowrap;*/
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px !important;
}

.gce-event-title a {
    color: var(--gce-primary);
    text-decoration: none;
}

.gce-event-title a:hover {
    text-decoration: underline;
}

/* ── Ubicación ── */
.gce-event-location {
    margin: 0 0 .25rem;
    font-size: .82rem;
    color: var(--gce-gray-500);
}

/* ── Descripción ── */
.gce-event-description {
    margin-top: .4rem;
    font-size: .85rem;
    color: var(--gce-gray-500);
    line-height: 1.5;
    border-top: 1px dashed var(--gce-gray-200);
    padding-top: .4rem;
}

/* ── Conteo ── */
.gce-count {
    margin: 1rem 0 0;
    font-size: .8rem;
    color: var(--gce-gray-500);
    text-align: right;
}

/* ── Estado vacío / error ── */
.gce-empty,
.gce-error {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 2rem;
    background: var(--gce-gray-100);
    border: 1px dashed var(--gce-gray-200);
    border-radius: var(--gce-radius);
    color: var(--gce-gray-500);
}

.gce-error {
    border-color: #fad2cf;
    background: #fce8e6;
    color: var(--gce-accent);
}

.gce-empty p,
.gce-error p {
    margin: 0;
    font-size: .92rem;
}

/* ── Aviso AJAX ── */
.gce-notice {
    margin-top: .75rem;
    padding: .6rem 1rem;
    border-radius: var(--gce-radius-sm);
    font-size: .85rem;
}

.gce-notice--hidden { display: none; }
.gce-notice--success { background: #e6f4ea; color: #137333; }
.gce-notice--error   { background: #fce8e6; color: var(--gce-accent); }

.cont-gce-link {
  padding:15px;  
}

.gce-calendar-btn {

    color: white !important;
    font-size: 18px;
    font-weight: bold;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .gce-event-item { gap: .6rem; padding: .8rem 1rem; }
    .gce-event-date { min-width: 44px; }
    .gce-event-day  { font-size: 1.35rem; }
    .gce-event-title { font-size: .95rem; }
}