/* --- GRID RESPONSIVO (MÓVIL BASE) --- */
.ccc-grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 12px; margin: 20px 0; 
}
.ccc-grid-item { 
    background: #f9f9f9; padding: 15px; text-align: center; border-radius: 8px; 
    text-decoration: none !important; color: #333; border: 1px solid #ddd;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: 0.2s;
}
.ccc-grid-item:hover { transform: translateY(-3px); background: #eee; }
.ccc-grid-item .dashicons { font-size: 32px; width: 32px; height: 32px; color: #0073aa; margin-bottom: 8px; }
.ccc-grid-item h3 { font-size: 16px; margin: 0; font-weight: 700; line-height: 1.2; }
.ccc-grid-tiempos .ccc-grid-item { background: #fffbe6; border-color: #f1c40f; }

/* --- CANTO Y ACORDES --- */
#ccc-letra-body { line-height: 3.5 !important; margin-top: 20px; font-family: sans-serif; font-size: 18px; }
.ccc-acorde { 
    display: inline-block !important; width: 0 !important; overflow: visible !important;
    white-space: nowrap !important; position: relative !important; top: -1.3em !important;
    color: #28a745 !important; font-weight: 800 !important; font-size: 0.9em !important;
}

/* --- TABLET Y PANTALLAS GRANDES (>768px) --- */
@media (min-width: 768px) {
    /* Grid Gigante */
    .ccc-grid-container { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 25px; }
    .ccc-grid-item { padding: 40px 20px; }
    .ccc-grid-item .dashicons { font-size: 55px; width: 55px; height: 55px; margin-bottom: 15px; }
    .ccc-grid-item h3 { font-size: 24px; }
    
    /* Letra Gigante para Atril */
    #ccc-letra-body { 
        font-size: 26px !important; /* TAMAÑO TABLET */
        width: 90%; margin: 30px auto; 
    }
    .ccc-acorde { font-size: 1em !important; top: -1.4em !important; }
}

/* --- UI HERRAMIENTAS --- */
.ccc-sticky-toolbar { position:sticky; top:0; z-index:100; background:#fff; padding:10px; border-bottom:2px solid #eee; }
.ccc-tools-top { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; margin-bottom:10px; }
.ccc-group { background:#f0f0f0; padding:5px; border-radius:5px; display:flex; align-items:center; gap:5px; }
.ccc-group button { border:1px solid #ccc; background:white; cursor:pointer; padding:5px 10px; font-weight:bold; }
.ccc-btn-add { width:100%; background:#0073aa; color:white; border:none; padding:12px; border-radius:5px; cursor:pointer; display:flex; justify-content:center; gap:5px; font-size:16px; font-weight: bold; }

/* --- UI LISTA Y VARIOS --- */
.ccc-slot { border:1px dashed #ccc; padding:10px; margin-bottom:10px; border-radius:5px; background:#fff; }
.ccc-slot.filled { border:1px solid #28a745; background:#f0fff4; }
.ccc-slot-link { font-size:1.2em; color:#0073aa; font-weight:bold; display:block; }
.ccc-btn-reset { background:#d9534f; color:white; border:none; padding:8px; border-radius:4px; cursor:pointer; margin-bottom:10px; }
.ccc-meta-header { margin-bottom:10px; font-size:0.85em; }
.ccc-badge-momento { background:#0073aa; color:white; padding:4px 8px; border-radius:4px; margin-right:5px; }
.ccc-badge-tiempo { background:#666; color:white; padding:4px 8px; border-radius:4px; }
.ccc-modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; display:flex; justify-content:center; align-items:center; }
.ccc-modal { background:white; padding:20px; border-radius:8px; width:90%; max-width:300px; text-align:center; }
.ccc-modal button { margin:5px 0; padding:12px; width:100%; background:#f0f0f0; border:1px solid #ddd; }
#ccc-nav-flotante { position:fixed; bottom:20px; right:20px; z-index:999; }
.ccc-btn-next { background:#28a745; color:white; padding:15px 25px; border-radius:50px; text-decoration:none; box-shadow:0 4px 10px rgba(0,0,0,0.3); font-weight:bold; display:flex; align-items:center; gap:10px; }
.single-canto .entry-meta, .single-canto .post-meta, .single-canto .byline, .archive .entry-summary { display: none !important; }