/* Botones */
.fab-btn { position: fixed; bottom: 80px; right: calc(50% - 200px); width: 56px; height: 56px; border-radius: 50%; background-color: #5ac8fa; color: black; border: none; font-size: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0,0,0,0.5); cursor: pointer; z-index: 90; }
@media(max-width: 450px) { .fab-btn { right: 20px; } } 

.btn-add-pill { background-color: #1c1c1e; color: #5ac8fa; border: 1px solid #5ac8fa; padding: 6px 14px; border-radius: 20px; font-weight: bold; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px;}
.btn-delete-action { background-color: transparent; color: #ff453a; border: none; cursor: pointer; }
.btn-icon-action { background-color: transparent; color: #5ac8fa; border: none; cursor: pointer; display: inline-flex; margin-right: 10px;}
.btn-secondary { width: 100%; background-color: #2c2c2e; color: #5ac8fa; border: 1px dashed #5ac8fa; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn-cancel { background-color: #2c2c2e; color: #ff453a; } 
.btn-save { background-color: #5ac8fa; color: #000000; }

.search-container { position: relative; margin-bottom: 10px; }
.search-container input { width: 100%; background-color: #1c1c1e; border: none; padding: 12px 12px 12px 40px; border-radius: 10px; color: white; font-size: 16px; }
.search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #8e8e93; font-size: 20px; }

/* Filter Chips */
.filter-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 10px; white-space: nowrap; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.chip-select { background-color: #2c2c2e; color: white; border: none; padding: 8px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; outline: none; appearance: none; cursor: pointer; }

/* Tarjetas */
.list-container { display: flex; flex-direction: column; gap: 4px; }
.item-card { background-color: #000000; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #1c1c1e; cursor: pointer; }
.item-main { display: flex; align-items: center; gap: 15px; }
.item-avatar { width: 48px; height: 48px; border-radius: 8px; background: #1c1c1e; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; color: #5ac8fa; font-weight: bold; flex-shrink: 0;}
.item-details { display: flex; flex-direction: column; gap: 2px; }
.item-tag { font-size: 11px; text-transform: uppercase; color: #5ac8fa; font-weight: 700; }
.item-title { font-size: 17px; font-weight: 600; color: white; }
.item-sub { font-size: 14px; color: #8e8e93; }

/* Animación y Modales */
@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal { 
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.6); 
    justify-content: center; align-items: flex-end; 
    padding-bottom: 65px; /* Empuja el fondo del modal justo por encima del Tab Bar */
}

/* Z-Index súper altos para ganarle al Tab Bar (500) */
.layer-200 { z-index: 1200; } 
.layer-300 { z-index: 1300; } 
.layer-400 { z-index: 1400; }

.modal-content.b-sheet { 
    background-color: #1c1c1e; padding: 24px; 
    border-top-left-radius: 20px; border-top-right-radius: 20px; 
    width: 100%; max-width: 450px; max-height: 85vh; overflow-y: auto; 
    animation: slideUp 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-content.full-height-mobile { max-height: 92vh !important; display: flex; flex-direction: column; }
.tall-scroll { flex: 1; overflow-y: auto; margin-bottom: 10px; }

.modal-content input[type="text"], .modal-content input[type="url"], .modal-content input[type="date"], .modal-content textarea, .modal-content select { width: 100%; background-color: #2c2c2e; border: none; padding: 12px; border-radius: 8px; color: white; margin-bottom: 14px; font-size: 16px; }
.modal-content textarea { height: 70px; resize: none; }
.modal-buttons { display: flex; justify-content: space-between; gap: 12px; }
.modal-buttons button { flex: 1; padding: 12px; border-radius: 10px; font-weight: bold; border: none; cursor: pointer; font-size: 15px; }

/* Pills y Selectores Internos */
.input-label { font-size: 13px; color: #8e8e93; margin-bottom: 8px; display: block; margin-top: 10px; text-transform: uppercase; font-weight: bold; }
.pills-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pill-button { background-color: #2c2c2e; color: #ffffff; padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; border: none; cursor: pointer; transition: all 0.2s; }
.pill-button.active { background-color: #1f3e4d; color: #5ac8fa; border: 1px solid #5ac8fa; }
.add-category-row { display: flex; gap: 8px; margin-bottom: 16px; }
.add-category-row input { margin: 0 !important; }
.select-member-row { background-color: #2c2c2e; padding: 14px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.select-member-row.selected { border: 2px solid #5ac8fa; background-color: #1f3e4d; }
.asignaciones-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.asig-item { background-color: #2c2c2e; padding: 10px 14px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; }
.check-item { display: flex; align-items: center; justify-content: space-between; background: #2c2c2e; padding: 14px; border-radius: 8px; margin-bottom: 8px; font-size:15px;}

.step { display: none; } .step.active { display: block; }
.sub-list-container { display: flex; flex-direction: column; margin-top: 10px; }

/* Detalles e Incrustaciones */
.yt-embed { width: 100%; aspect-ratio: 1 / 1; border: none; border-radius: 12px; margin-bottom: 15px; background: #1c1c1e; }
.detail-header { border-bottom: 1px solid #1c1c1e; padding-bottom: 15px; margin-bottom: 15px; }
.detail-title { font-size: 26px; font-weight: 700; margin: 0; }
.detail-artist { font-size: 16px; color: #8e8e93; margin: 4px 0 10px 0; }
.detail-badge { display: inline-block; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; text-transform: uppercase; }
.badge-lista { background-color: #34c759; color: black; } .badge-ensayar { background-color: #ff9500; color: black; } .badge-sin { background-color: #8e8e93; color: white; }
.detail-section { margin-top: 20px; }
.detail-section h4 { color: #5ac8fa; margin-bottom: 8px; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.member-tag-small { background: #2c2c2e; color: #aaa; padding: 2px 6px; border-radius: 4px; font-size: 11px; margin-right: 4px; display: inline-flex; align-items: center; gap: 4px;}