/**
 * NC Podcast Transcript Search - search.css
 * Version: 3.0
 *
 * Estilos deliberadamente neutros: el buscador hereda tipografía y colores
 * del sitio (Elementor), y el acento se controla con --nc-pts-accent
 * desde el widget. Default: naranja SoundCloud, coherente con el player.
 */

.nc-pts {
    --nc-pts-accent: #ff5500;
}

/* --- Formulario --- */
.nc-pts-form { margin-bottom: 12px; }

.nc-pts-inputwrap { position: relative; }

.nc-pts-input {
    width: 100%;
    padding: 12px 24px 12px 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    font-size: 1.05em;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.nc-pts-input:focus {
    outline: none;
    border-color: var(--nc-pts-accent);
}

.nc-pts-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 1.4em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    padding: 4px 8px;
}
.nc-pts-clear:hover,
.nc-pts-clear:focus-visible { opacity: 1; }

.nc-pts-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.nc-pts-modes,
.nc-pts-scope {
    display: flex;
    gap: 18px;
    font-size: 0.9em;
    opacity: 0.85;
}
.nc-pts-scope { gap: 12px; }
.nc-pts-modes label,
.nc-pts-scope label { cursor: pointer; white-space: nowrap; }
.nc-pts-modes input,
.nc-pts-scope input { accent-color: var(--nc-pts-accent); margin-right: 4px; }

.nc-pts-status {
    font-size: 0.9em;
    opacity: 0.75;
    min-height: 1.4em;
    margin-bottom: 10px;
}

.nc-pts-locked {
    padding: 16px;
    border: 1px dashed rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    text-align: center;
    opacity: 0.85;
}

/* --- Resultados --- */
.nc-pts-episode {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}

.nc-pts-ep-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nc-pts-ep-badge {
    background: var(--nc-pts-accent);
    color: #fff;
    font-size: 0.78em;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 99px;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* Colores por podcast, configurables desde la pestaña Estilo del widget.
   Sin configurar, heredan el color de acento general con texto blanco. */
.nc-pts-badge-CC {
    background: var(--nc-pts-badge-cc-bg, var(--nc-pts-accent));
    color: var(--nc-pts-badge-cc-text, #fff);
}
.nc-pts-badge-HT {
    background: var(--nc-pts-badge-ht-bg, var(--nc-pts-accent));
    color: var(--nc-pts-badge-ht-text, #fff);
}
.nc-pts-badge-MEM {
    background: var(--nc-pts-badge-mem-bg, var(--nc-pts-accent));
    color: var(--nc-pts-badge-mem-text, #fff);
}

.nc-pts-ep-title { font-weight: 600; flex: 1; min-width: 140px; }
.nc-pts-ep-date { font-size: 0.85em; opacity: 0.65; }

.nc-pts-ep-count {
    font-size: 0.8em;
    font-weight: 700;
    opacity: 0.6;
    border: 1px solid currentColor;
    border-radius: 99px;
    padding: 1px 8px;
}

.nc-pts-matches {
    list-style: none;
    margin: 0;
    padding: 6px 0;
}

.nc-pts-matches li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 14px;
}
.nc-pts-matches li + li { border-top: 1px dashed rgba(0, 0, 0, 0.07); }

.nc-pts-time {
    flex-shrink: 0;
    border: 1px solid var(--nc-pts-accent);
    color: var(--nc-pts-accent);
    background: transparent;
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 0.85em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.nc-pts-time:hover,
.nc-pts-time.is-active {
    background: var(--nc-pts-accent);
    color: #fff;
}
/* El foco de teclado se indica con outline, NO con el relleno: si compartiera
   estilo con .is-active, un botón enfocado parecería un segundo activo */
.nc-pts-time:focus-visible {
    outline: 2px solid var(--nc-pts-accent);
    outline-offset: 2px;
}

.nc-pts-fragment { line-height: 1.5; }
.nc-pts-fragment mark {
    background: color-mix(in srgb, var(--nc-pts-accent) 25%, transparent);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}

.nc-pts-player:not(:empty) { padding: 10px 14px 14px; }
.nc-pts-sc-iframe { border: none; border-radius: 6px; }

.nc-pts-nosource {
    font-size: 0.9em;
    opacity: 0.7;
    font-style: italic;
}

@media (max-width: 600px) {
    .nc-pts-matches li { flex-direction: column; gap: 4px; }
}

/* --- Player de Spotify --- */
.nc-pts-sp-hint {
    font-size: 0.78em;
    opacity: 0.6;
    margin-top: 6px;
    font-style: italic;
}