/* css/tracker.css */

/* ==========================================
   APP: TRACKER DE SERIES PANORÁMICO
   ========================================== */
.tracker-full-layout { position: absolute; inset: 0; background: var(--bg-workspace); z-index: 40; display: flex; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.tracker-full-layout.active { opacity: 1; pointer-events: auto; }

/* SIDEBAR FIJO E INAMOVIBLE */
.tracker-sidebar { width: 250px; min-width: 250px; flex-shrink: 0; background: var(--sidebar-bg); backdrop-filter: blur(20px); border-right: 1px solid var(--glass-border); padding: 30px 20px; display: flex; flex-direction: column; gap: 15px; }
.tracker-tab { display: flex; align-items: center; gap: 10px; background: transparent; border: none; color: var(--text-dim); text-align: left; padding: 12px 15px; border-radius: 12px; font-size: 1.05rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.tracker-tab svg { fill: currentColor; }
.tracker-tab:hover { color: var(--text-pure); background: rgba(128,128,128,0.05); }
.tracker-tab.active { background: var(--accent-glow); color: var(--text-pure); border-left: 3px solid var(--accent-electric); border-radius: 0 12px 12px 0; }
.add-show-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1rem; font-weight: 800; padding: 15px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); transition: 0.3s; margin-top: auto;}
.add-show-btn svg { fill: currentColor; }
.add-show-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 25px rgba(0,0,0,0.3); }

/* ÁREA PRINCIPAL */
.tracker-main-area { flex-grow: 1; padding: 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; align-items: center;}

/* TARJETA PANORÁMICA EXACTA: Altura 210px inamovible */
.show-card { 
    background: var(--glass-panel); 
    border: 1px solid var(--glass-border); 
    border-radius: 20px; 
    display: flex; 
    flex-direction: row; 
    height: 210px; 
    min-height: 210px;
    max-height: 210px;
    width: 100%; 
    max-width: 1000px; 
    overflow: hidden; 
    transition: 0.3s; 
    position: relative; 
}
.show-card:hover { transform: translateX(5px); border-color: var(--accent-electric); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
.show-poster { width: 140px; min-width: 140px; height: 100%; object-fit: cover; border-right: 1px solid var(--glass-border); }

/* CONTENEDOR DE DETALLES: Flexbox estricto para no ocultar botones */
.show-details { 
    padding: 15px 20px; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
    min-width: 0; 
    height: 100%;
}

/* ==========================================
   SMART BADGES (Etiquetas Estéticas - Respetan Themes)
   ========================================== */
.media-badge { 
    position: absolute; 
    top: 15px; 
    right: 15px; 
    background: var(--bg-deep); /* Absorbe el fondo principal del tema actual */
    backdrop-filter: blur(10px); 
    padding: 5px 12px; 
    border-radius: 8px; 
    font-size: 0.75rem; 
    font-weight: 900; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    display: flex; 
    align-items: center; 
    gap: 6px; 
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* Badge Viendo (Mantiene el verde para denotar actividad/play) */
.badge-viendo { color: #22c55e; border: 1px solid #22c55e; }
.badge-viendo svg { fill: #22c55e; }

/* Badge Serie (Absorbe el color de acento del tema: Rosa en Kitty, Amarillo en Batman) */
.badge-serie { color: var(--accent-electric); border: 1px solid var(--accent-electric); }
.badge-serie svg { fill: var(--accent-electric); }

/* Badge Película (Absorbe el color de texto primario: Púrpura en Kitty, Blanco en Batman) */
.badge-movie { color: var(--text-pure); border: 1px solid var(--text-pure); }
.badge-movie svg { fill: var(--text-pure); }

/* ========================================== */

/* TÍTULO Y TEXTOS */
.show-header { margin-bottom: 2px; width: 100%; padding-right: 150px; } 
.show-header h4 { font-size: 1.4rem; color: var(--text-pure); margin: 0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.static-counter { font-size: 1.1rem; font-weight: 900; color: var(--text-pure); letter-spacing: 1px;}

/* EDICIÓN Y ESTRELLAS */
.date-watched { font-size: 0.85rem; color: var(--text-dim); font-style: italic; display: flex; align-items: center; min-height: 24px; margin-bottom: 2px;}
.tracker-inline-input { background: transparent; border: none; border-bottom: 1px solid var(--accent-electric); color: var(--accent-electric); font-family: 'Outfit', sans-serif; font-size: 0.9rem; font-weight: bold; outline: none; padding: 0 5px; width: 130px; height: 24px;}
.tracker-inline-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
[data-theme="hellokitty"] .tracker-inline-input::-webkit-calendar-picker-indicator { filter: none; }

.rating-container { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.rating-row { display: flex; align-items: center; font-size: 0.85rem; color: var(--text-pure); gap: 10px;}
.rating-label { font-weight: bold; width: 60px; color: var(--text-dim);}
.star-rating-box { display: flex; gap: 4px; }
.star-svg { width: 16px; height: 16px; fill: rgba(128,128,128,0.3); transition: 0.2s; }
.star-svg.filled { fill: #facc15; }

.show-card.is-editing .star-svg { cursor: pointer; }
.show-card.is-editing .star-rating-box:hover .star-svg { fill: rgba(128,128,128,0.3); } 
.show-card.is-editing .star-svg:hover, .show-card.is-editing .star-svg:hover ~ .star-svg { fill: rgba(128,128,128,0.3); } 
.show-card.is-editing .star-rating-box:hover .star-svg:not(:hover):not(:hover ~ .star-svg) { fill: #facc15; } 

.show-card:not(.is-editing) .edit-only { display: none !important; }
.show-card.is-editing .static-only { display: none !important; }
.show-card.is-editing { border-color: var(--accent-electric); box-shadow: 0 0 20px var(--accent-glow); }

/* CONTADORES EN VIENDO / EDICIÓN */
.show-controls { display: flex; gap: 15px; align-items: center; margin: 5px 0;}
.control-group { display: flex; align-items: center; gap: 8px; }
.control-group label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; font-weight: bold;}
.number-stepper { display: flex; align-items: center; background: rgba(128,128,128,0.1); border-radius: 8px; padding: 2px; height: 28px; }
.number-stepper button { background: none; border: none; color: var(--text-pure); width: 24px; height: 24px; cursor: pointer; border-radius: 6px; transition: 0.2s; display: flex; align-items: center; justify-content: center;}
.number-stepper button:hover { background: rgba(128,128,128,0.2); }
.number-stepper button svg { pointer-events: none; } /* VITAL: Evita bugs de click en el vector */
.number-stepper span { font-weight: 900; font-size: 1rem; width: 26px; text-align: center; color: var(--text-pure); }

/* BOTONES DE ACCIÓN INFERIORES */
.action-buttons-row { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 5px; width: 100%; gap: 10px;}
.btn-outline { padding: 6px 14px; font-size: 0.8rem; border: 1px solid var(--accent-electric); color: var(--text-pure); border-radius: 8px; background: rgba(99, 102, 241, 0.15); cursor: pointer; transition: 0.2s; font-weight: bold; display: flex; align-items: center; gap: 6px;}
.btn-outline svg { fill: currentColor; pointer-events: none; } 
.btn-outline:hover { background: var(--accent-electric); color: #fff; }

.icon-actions-group { display: flex; gap: 8px; margin-left: auto;}
.action-icon-btn { background: rgba(128,128,128,0.1); border: 1px solid transparent; width: 34px; height: 34px; border-radius: 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; color: var(--text-dim); }
.action-icon-btn svg { fill: currentColor; pointer-events: none;}
.action-icon-btn:hover { background: rgba(128,128,128,0.2); color: var(--text-pure); border-color: var(--glass-border); }
.action-icon-btn.danger:hover { background: rgba(239,68,68,0.2); color: #ef4444; border-color: rgba(239,68,68,0.5); }
.action-icon-btn.success:hover { background: rgba(34,197,94,0.2); color: #22c55e; border-color: rgba(34,197,94,0.5); }
.action-icon-btn.accent { color: var(--accent-electric); background: var(--accent-glow); }
.action-icon-btn.accent:hover { background: var(--accent-electric); color: #fff; }

/* MODAL BUSCADOR API (BLINDADO PARA IMÁGENES) */
.search-media-box { max-width: 800px !important; padding: 40px !important; display: flex; flex-direction: column; gap: 20px; width: 90%;}
.search-media-header { display: flex; flex-direction: column; align-items: center; }
.search-bar-container { display: flex; gap: 10px; width: 100%; margin-top: 15px; }
.search-bar-container input { font-size: 1.2rem; padding: 15px 25px; border-radius: 30px; }
.search-action-btn { width: auto; padding: 15px 30px; border-radius: 30px; font-size: 1.1rem; margin: 0; }

.search-results-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); 
    gap: 15px; 
    max-height: 50vh; 
    overflow-y: auto; 
    padding: 10px; 
    width: 100%;
}
.api-result-card { 
    background: rgba(0,0,0,0.2); 
    border: 1px solid var(--glass-border); 
    border-radius: 12px; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    transition: 0.2s; 
    width: 100%; 
    min-width: 0; 
}
.api-result-card:hover { transform: scale(1.02); border-color: var(--accent-electric); }
.api-result-poster { width: 100%; height: 200px; max-height: 200px; object-fit: cover; display: block; border-bottom: 1px solid var(--glass-border);}
.api-result-info { padding: 10px; display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.api-result-info h4 { font-size: 0.95rem; color: var(--text-pure); margin: 0; line-height: 1.2; }
.api-result-year { font-size: 0.75rem; color: var(--text-dim); }
.add-result-btn { margin-top: auto; padding: 8px; font-size: 0.8rem; border-radius: 8px; }