/* =====================================================================
   STYLE.CSS — Acortador de Videos con Anuncios
   Dark mode por defecto, light mode con data-theme="light"
   ===================================================================== */

/* ── Variables de tema ─────────────────────────────────────────────── */
:root {
    /* Colores primarios */
    --accent:          #6C63FF;
    --accent-hover:    #5A52E0;
    --accent-light:    rgba(108, 99, 255, 0.15);
    --danger:          #FF4D6D;
    --success:         #2DD4BF;
    --warning:         #F59E0B;
    --info:            #3B82F6;

    /* Tipografía */
    --font-sans:       system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:       'Cascadia Code', 'Fira Code', 'Courier New', monospace;

    /* Radios */
    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  18px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,.4);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.5);

    /* Transición global */
    --transition: 0.2s ease;
}

/* ── Tema OSCURO (por defecto) ─────────────────────────────────────── */
[data-theme="dark"], :root {
    --bg:            #0F0F13;
    --bg-surface:    #1A1A24;
    --bg-elevated:   #242433;
    --bg-hover:      #2E2E42;
    --border:        rgba(255,255,255,.08);
    --border-focus:  var(--accent);
    --text:          #E8E8F0;
    --text-muted:    #8888A8;
    --text-faint:    #55556A;
    --header-bg:     rgba(15,15,19,.85);
    --player-bg:     #000;
    --tag-bg:        rgba(108,99,255,.12);
    --tag-color:     #A09BFF;
}

/* ── Tema CLARO ────────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg:            #F4F4F8;
    --bg-surface:    #FFFFFF;
    --bg-elevated:   #F0F0F7;
    --bg-hover:      #E8E8F2;
    --border:        rgba(0,0,0,.1);
    --border-focus:  var(--accent);
    --text:          #1A1A2E;
    --text-muted:    #6666888;
    --text-faint:    #AAAABB;
    --header-bg:     rgba(244,244,248,.9);
    --player-bg:     #000;
    --tag-bg:        rgba(108,99,255,.1);
    --tag-color:     var(--accent);
    --shadow-sm:     0 1px 3px rgba(0,0,0,.1);
    --shadow-md:     0 4px 16px rgba(0,0,0,.12);
    --shadow-lg:     0 8px 32px rgba(0,0,0,.15);
}

/* ── Reset y base ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family:      var(--font-sans);
    background-color: var(--bg);
    color:            var(--text);
    line-height:      1.6;
    min-height:       100vh;
    transition:       background-color var(--transition), color var(--transition);
}

a {
    color:           var(--accent);
    text-decoration: none;
    transition:      color var(--transition), opacity var(--transition);
}
a:hover { opacity: 0.85; }

code {
    font-family:      var(--font-mono);
    font-size:        0.875em;
    background:       var(--bg-elevated);
    color:            var(--accent);
    padding:          2px 6px;
    border-radius:    var(--radius-sm);
}

/* ── Layout ────────────────────────────────────────────────────────── */
.container {
    max-width:   1200px;
    margin-inline: auto;
    padding-inline: 20px;
}
.container-narrow {
    max-width: 860px;
}

/* ── HEADER ────────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.header-inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          60px;
}

.logo {
    display:     flex;
    align-items: center;
    gap:         8px;
    color:       var(--text);
    font-weight: 700;
    font-size:   1.2rem;
}
.logo:hover { opacity: .8; }
.logo-icon  { font-size: 1.4rem; }

.header-nav {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* ── BOTONES ────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         10px 20px;
    border-radius:   var(--radius-md);
    font-size:       0.9rem;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    transition:      background var(--transition), transform var(--transition), opacity var(--transition);
    text-decoration: none;
    white-space:     nowrap;
}
.btn:active  { transform: scale(0.97); }
.btn:disabled {
    opacity: 0.45;
    cursor:  not-allowed;
    pointer-events: none;
}

.btn-primary {
    background: var(--accent);
    color:      #fff;
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-secondary {
    background: var(--bg-elevated);
    color:      var(--text);
    border:     1px solid var(--border);
}
.btn-secondary:hover { background: var(--bg-hover); color: var(--text); }

.btn-ghost {
    background: transparent;
    color:      var(--text-muted);
    border:     1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg-elevated); color: var(--text); }

.btn-sm {
    padding:   6px 12px;
    font-size: 0.82rem;
}

.btn-icon {
    background: transparent;
    border:     1px solid var(--border);
    border-radius: var(--radius-md);
    padding:    8px 10px;
    cursor:     pointer;
    font-size:  1rem;
    color:      var(--text);
    transition: background var(--transition);
}
.btn-icon:hover { background: var(--bg-elevated); }

/* Modo claro: ocultar luna; oscuro: ocultar sol */
[data-theme="dark"]  .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: none; }

/* ── HERO / UPLOAD ──────────────────────────────────────────────────── */
.hero-section {
    padding: 60px 0 40px;
}

.hero-text {
    text-align:   center;
    margin-bottom: 32px;
}
.hero-text h1 {
    font-size:     clamp(1.8rem, 4vw, 2.8rem);
    font-weight:   800;
    line-height:   1.2;
    margin-bottom: 12px;
}
.accent { color: var(--accent); }

.hero-subtitle {
    font-size:  1.05rem;
    color:      var(--text-muted);
    max-width:  600px;
    margin-inline: auto;
}

/* ── Alertas ─────────────────────────────────────────────────────────── */
.alert {
    display:       flex;
    gap:           10px;
    align-items:   flex-start;
    padding:       12px 16px;
    border-radius: var(--radius-md);
    font-size:     0.88rem;
    margin-bottom: 16px;
    line-height:   1.5;
}
.alert-info  { background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.3); color: #93C5FD; }
.alert-error { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.3); color: #FCA5A5; }

[data-theme="light"] .alert-info  { color: #1D4ED8; }
[data-theme="light"] .alert-error { color: #B91C1C; }

/* ── Upload Card ─────────────────────────────────────────────────────── */
.upload-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-xl);
    padding:       28px;
    max-width:     680px;
    margin-inline: auto;
    box-shadow:    var(--shadow-md);
}

/* Drop Zone */
.drop-zone {
    border:        2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding:       48px 20px;
    text-align:    center;
    cursor:        pointer;
    transition:    border-color var(--transition), background var(--transition);
    position:      relative;
    overflow:      hidden;
}
.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--accent);
    background:   var(--accent-light);
}
.drop-zone:focus {
    outline:      2px solid var(--accent);
    outline-offset: 3px;
}

.drop-input {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    opacity:    0;
    cursor:     pointer;
}

.drop-icon    { font-size: 3rem; margin-bottom: 12px; display: block; }
.drop-title   { font-size: 1.15rem; font-weight: 700; margin-bottom: 4px; }
.drop-subtitle { color: var(--text-muted); font-size: 0.9rem; }
.drop-formats  { font-size: 0.78rem; color: var(--text-faint); margin-top: 8px; }

/* File Info */
.file-info { margin-top: 14px; }
.file-info-inner {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--bg-elevated);
    border-radius: var(--radius-md);
    padding:       10px 14px;
}
.file-icon    { font-size: 1.4rem; }
.file-details { flex: 1; min-width: 0; }
.file-name    { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size    { display: block; font-size: 0.8rem; color: var(--text-muted); }
.btn-remove-file {
    background:    none;
    border:        none;
    color:         var(--text-muted);
    cursor:        pointer;
    font-size:     1rem;
    padding:       4px 8px;
    border-radius: var(--radius-sm);
    transition:    background var(--transition);
}
.btn-remove-file:hover { background: rgba(255,77,109,.15); color: var(--danger); }

/* Upload Options */
.upload-options {
    margin: 16px 0;
}
.option-label {
    display:     flex;
    align-items: center;
    gap:         12px;
    font-size:   0.9rem;
    color:       var(--text-muted);
}
.select-input {
    background:    var(--bg-elevated);
    border:        1px solid var(--border);
    color:         var(--text);
    border-radius: var(--radius-md);
    padding:       8px 12px;
    font-size:     0.9rem;
    cursor:        pointer;
    flex:          1;
    max-width:     240px;
}
.select-input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Upload button */
.btn-upload {
    width:     100%;
    justify-content: center;
    padding:   14px;
    font-size: 1rem;
    margin-top: 8px;
}

/* ── Progress Bar ────────────────────────────────────────────────────── */
.progress-wrapper {
    margin-top: 20px;
}
.progress-header {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   8px;
    font-size:       0.88rem;
    color:           var(--text-muted);
}
.progress-bar-track {
    height:        8px;
    background:    var(--bg-elevated);
    border-radius: var(--radius-full);
    overflow:      hidden;
    position:      relative;
}
.progress-bar-fill {
    height:        100%;
    background:    linear-gradient(90deg, var(--accent), #A78BFA);
    border-radius: var(--radius-full);
    width:         0%;
    transition:    width 0.3s ease;
}
.progress-speed {
    font-size:  0.78rem;
    color:      var(--text-faint);
    margin-top: 6px;
    text-align: right;
}

/* Upload Result */
.upload-result {
    margin-top: 16px;
}
.result-success {
    background:    rgba(45,212,191,.1);
    border:        1px solid rgba(45,212,191,.3);
    border-radius: var(--radius-md);
    padding:       16px;
}
.result-error {
    background:    rgba(255,77,109,.1);
    border:        1px solid rgba(255,77,109,.3);
    border-radius: var(--radius-md);
    padding:       16px;
    color:         #FCA5A5;
}
.result-title { font-weight: 700; margin-bottom: 8px; }
.result-clips-list { list-style: none; margin-top: 10px; }
.result-clips-list li {
    display:       flex;
    align-items:   center;
    gap:           8px;
    padding:       6px 0;
    border-bottom: 1px solid var(--border);
    font-size:     0.88rem;
}
.result-clips-list li:last-child { border-bottom: none; }
.result-clip-link { color: var(--accent); }
.result-clip-link:hover { text-decoration: underline; }

/* ── Stats ──────────────────────────────────────────────────────────── */
.stats-section {
    padding: 24px 0 32px;
}
.stats-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap:                   16px;
}
.stat-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-lg);
    padding:       20px;
    text-align:    center;
    transition:    border-color var(--transition), box-shadow var(--transition);
}
.stat-card:hover {
    border-color: var(--accent);
    box-shadow:   var(--shadow-sm);
}
.stat-number {
    display:     block;
    font-size:   2rem;
    font-weight: 800;
    color:       var(--accent);
    line-height: 1;
    margin-bottom: 6px;
}
.stat-label { font-size: 0.82rem; color: var(--text-muted); }

/* ── Clips Section ──────────────────────────────────────────────────── */
.clips-section {
    padding-bottom: 60px;
}
.section-header {
    display:       flex;
    align-items:   center;
    gap:           12px;
    margin-bottom: 24px;
}
.section-header h2 { font-size: 1.5rem; font-weight: 700; }

.badge {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    border-radius: var(--radius-full);
    font-size:     0.78rem;
    font-weight:   600;
}
.badge-count {
    background: var(--accent-light);
    color:      var(--accent);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding:    80px 20px;
    color:      var(--text-muted);
}
.empty-icon { font-size: 4rem; margin-bottom: 16px; display: block; }
.empty-state h3 { font-size: 1.2rem; margin-bottom: 8px; }

/* Video group card */
.videos-list {
    display:        flex;
    flex-direction: column;
    gap:            28px;
}

.video-group-card {
    background:    var(--bg-surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow:      hidden;
}

.video-group-header {
    padding:         16px 20px;
    border-bottom:   1px solid var(--border);
    background:      var(--bg-elevated);
}
.video-original-name {
    font-size:     1rem;
    font-weight:   600;
    margin-bottom: 8px;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.video-meta-tags { display: flex; flex-wrap: wrap; gap: 8px; }

.tag {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    background:    var(--tag-bg);
    color:         var(--tag-color);
    border-radius: var(--radius-full);
    font-size:     0.76rem;
    font-weight:   500;
}

/* Clips grid */
.clips-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   1px;
    background:            var(--border);
}

.clip-card {
    background: var(--bg-surface);
    padding:    16px;
    transition: background var(--transition);
}
.clip-card:hover { background: var(--bg-elevated); }
.clip-missing    { opacity: 0.6; }

.clip-thumbnail {
    position:      relative;
    background:    var(--bg-elevated);
    border-radius: var(--radius-md);
    height:        100px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: 12px;
    overflow:      hidden;
}
.clip-number    { position: absolute; top: 8px; left: 8px; font-size: 0.72rem; font-weight: 700; color: var(--text-faint); }
.clip-play-icon { font-size: 2.5rem; color: var(--accent); opacity: 0.7; }
.clip-missing-badge {
    position:  absolute;
    bottom:    6px;
    font-size: 0.7rem;
    color:     var(--warning);
}

.clip-url-row {
    display:       flex;
    gap:           6px;
    margin-bottom: 8px;
}
.clip-url-input {
    flex:          1;
    background:    var(--bg-elevated);
    border:        1px solid var(--border);
    color:         var(--text-muted);
    border-radius: var(--radius-sm);
    padding:       6px 10px;
    font-size:     0.78rem;
    font-family:   var(--font-mono);
    min-width:     0;
}
.btn-copy {
    background:    var(--bg-elevated);
    border:        1px solid var(--border);
    border-radius: var(--radius-sm);
    padding:       6px 10px;
    cursor:        pointer;
    font-size:     0.88rem;
    transition:    background var(--transition), transform 0.1s;
}
.btn-copy:hover  { background: var(--accent-light); }
.btn-copy:active { transform: scale(0.9); }

.clip-meta-row {
    display:       flex;
    flex-wrap:     wrap;
    gap:           8px;
    margin-bottom: 10px;
}
.clip-meta-item { font-size: 0.78rem; color: var(--text-muted); }

.btn-watch {
    display:      flex;
    justify-content: center;
    padding:      8px;
    font-size:    0.85rem;
}

.no-clips-msg { padding: 20px; color: var(--text-muted); font-size: 0.9rem; }

/* ── WATCH PAGE ─────────────────────────────────────────────────────── */
.watch-page {
    background: var(--bg);
}

.watch-main {
    padding: 32px 0 60px;
}

/* Watch header */
.watch-header {
    margin-bottom: 16px;
}
.watch-title {
    font-size:   1.4rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    gap:         10px;
    flex-wrap:   wrap;
}
.watch-clip-badge {
    font-size:   0.7rem;
    padding:     3px 10px;
    background:  var(--accent-light);
    color:       var(--accent);
    border-radius: var(--radius-full);
    font-weight: 600;
}
.watch-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.watch-meta-item { font-size: 0.85rem; color: var(--text-muted); }

/* ── Video Player ────────────────────────────────────────────────────── */
.player-wrapper {
    position:      relative;
    background:    var(--player-bg);
    border-radius: var(--radius-xl);
    overflow:      hidden;
    box-shadow:    var(--shadow-lg);
    aspect-ratio:  16/9;
    user-select:   none;
}

.video-player {
    width:      100%;
    height:     100%;
    display:    block;
    object-fit: contain;
}
/* Ocultar controles nativos (usamos los nuestros) */
.video-player::-webkit-media-controls { display: none !important; }
.video-player { -webkit-media-controls: none; }

/* Ad Overlay */
.ad-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 50%);
    display:        flex;
    flex-direction: column;
    justify-content: space-between;
    align-items:    flex-start;
    padding:        14px 16px;
    pointer-events: none;
    transition:     opacity 0.5s ease;
    z-index:        10;
}
.ad-overlay.hidden { opacity: 0; pointer-events: none; }

.ad-badge {
    background:    rgba(255,165,0,.9);
    color:         #000;
    font-size:     0.68rem;
    font-weight:   700;
    padding:       3px 8px;
    border-radius: var(--radius-sm);
    letter-spacing: 0.08em;
    pointer-events: none;
}

.ad-skip-wrapper {
    display:         flex;
    align-items:     center;
    gap:             10px;
    pointer-events:  all;
    align-self:      flex-end;
}
.ad-skip-text {
    font-size:  0.82rem;
    color:      rgba(255,255,255,.85);
    background: rgba(0,0,0,.5);
    padding:    4px 10px;
    border-radius: var(--radius-sm);
}
.btn-skip-ad {
    background:    rgba(255,255,255,.2);
    border:        1px solid rgba(255,255,255,.5);
    color:         #fff;
    padding:       6px 14px;
    border-radius: var(--radius-sm);
    font-size:     0.82rem;
    cursor:        pointer;
    transition:    background var(--transition);
    backdrop-filter: blur(4px);
}
.btn-skip-ad:not(:disabled):hover { background: rgba(255,255,255,.35); }
.btn-skip-ad:disabled { opacity: .5; cursor: not-allowed; }

/* Custom Player Controls */
.player-controls {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(0,0,0,.9));
    padding:    20px 14px 10px;
    opacity:    0;
    transform:  translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index:    9;
}
.player-wrapper:hover .player-controls,
.player-wrapper:focus-within .player-controls {
    opacity:   1;
    transform: translateY(0);
}

/* Progress bar */
.player-progress {
    position:      relative;
    height:        4px;
    background:    rgba(255,255,255,.25);
    border-radius: var(--radius-full);
    margin-bottom: 10px;
    cursor:        pointer;
    transition:    height 0.15s;
}
.player-progress:hover { height: 6px; }

.ad-zone-marker {
    position:      absolute;
    left:          0;
    top:           0;
    height:        100%;
    background:    rgba(255,165,0,.6);
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    pointer-events: none;
    z-index:       1;
}
.player-progress-fill {
    position:      absolute;
    left:          0;
    top:           0;
    height:        100%;
    background:    var(--accent);
    border-radius: var(--radius-full);
    pointer-events: none;
    z-index:       2;
    width:         0%;
}
.player-progress-thumb {
    position:      absolute;
    top:           50%;
    transform:     translateY(-50%) scale(0);
    width:         12px;
    height:        12px;
    background:    #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index:       3;
    transition:    transform 0.15s;
}
.player-progress:hover .player-progress-thumb { transform: translateY(-50%) scale(1); }

/* Control buttons */
.player-buttons {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
}
.player-buttons-left,
.player-buttons-right {
    display:     flex;
    align-items: center;
    gap:         4px;
}

.player-btn {
    background:    none;
    border:        none;
    color:         rgba(255,255,255,.9);
    font-size:     1.1rem;
    cursor:        pointer;
    padding:       4px 8px;
    border-radius: var(--radius-sm);
    transition:    background var(--transition), color var(--transition);
    line-height:   1;
}
.player-btn:hover { background: rgba(255,255,255,.15); color: #fff; }

.volume-slider {
    width:      70px;
    accent-color: var(--accent);
    cursor:     pointer;
}

.player-time {
    font-size:   0.78rem;
    color:       rgba(255,255,255,.7);
    font-family: var(--font-mono);
    padding:     0 6px;
}

/* Player Bunny + pre-roll ad */
.player-bunny {
    position:      relative;
    aspect-ratio:  16/9;
    height:        auto;
    background:    #000;
    border-radius: var(--radius-xl);
    overflow:      hidden;
}
/* Contenedor del anuncio pre-roll */
.ad-container {
    position: absolute;
    inset:    0;
    z-index:  20;
}
.ad-container video {
    width:      100%;
    height:     100%;
    object-fit: contain;
    display:    block;
}
/* Overlay encima del video de anuncio */
.ad-container .ad-overlay {
    position: absolute;
    inset:    0;
    background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 50%);
    display:    flex;
    flex-direction: column;
    justify-content: space-between;
    padding:    14px 16px;
    pointer-events: none;
}
.ad-container .ad-skip-wrapper { pointer-events: all; }
/* Contenedor del clip de Bunny */
.clip-container {
    position: absolute;
    inset:    0;
    z-index:  10;
}
.clip-hidden { display: none; }
.clip-container iframe {
    width:  100%;
    height: 100%;
    border: none;
}

/* ── Watch Info Panel ────────────────────────────────────────────────── */
.watch-info-panel {
    margin-top: 24px;
    display:    flex;
    flex-direction: column;
    gap:        24px;
}

.share-section h3,
.related-clips h3 {
    font-size:     1rem;
    font-weight:   600;
    margin-bottom: 12px;
}

.share-url-row {
    display:       flex;
    gap:           8px;
    margin-bottom: 12px;
}
.share-url-input {
    flex:          1;
    background:    var(--bg-elevated);
    border:        1px solid var(--border);
    color:         var(--text-muted);
    border-radius: var(--radius-md);
    padding:       10px 12px;
    font-family:   var(--font-mono);
    font-size:     0.85rem;
}

.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-share {
    padding:         8px 16px;
    border-radius:   var(--radius-md);
    font-size:       0.82rem;
    font-weight:     600;
    text-decoration: none;
    transition:      opacity var(--transition);
}
.btn-share:hover { opacity: .8; }
.btn-whatsapp  { background: #25D366; color: #fff; }
.btn-twitter   { background: #1DA1F2; color: #fff; }
.btn-facebook  { background: #1877F2; color: #fff; }

/* Related clips */
.related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   10px;
}
.related-clip-card {
    display:       flex;
    align-items:   center;
    gap:           10px;
    background:    var(--bg-surface);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    padding:       10px 12px;
    text-decoration: none;
    color:         var(--text);
    transition:    border-color var(--transition), background var(--transition);
}
.related-clip-card:hover {
    border-color: var(--accent);
    background:   var(--bg-elevated);
    color:        var(--text);
}
.related-clip-thumb    { font-size: 1.5rem; color: var(--accent); }
.related-clip-info     { display: flex; flex-direction: column; gap: 2px; }
.related-clip-time     { font-size: 0.82rem; font-weight: 600; }
.related-clip-views    { font-size: 0.76rem; color: var(--text-muted); }

/* ── Error page ─────────────────────────────────────────────────────── */
.error-page {
    text-align:  center;
    padding:     80px 20px;
    color:       var(--text-muted);
}
.error-icon { font-size: 4rem; margin-bottom: 16px; display: block; }
.error-page h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 10px; }
.error-page p  { margin-bottom: 20px; }

/* ── FOOTER ─────────────────────────────────────────────────────────── */
.site-footer {
    border-top:  1px solid var(--border);
    padding:     24px 0;
    text-align:  center;
    font-size:   0.82rem;
    color:       var(--text-faint);
    line-height: 1.7;
}
.footer-warning { color: var(--text-faint); font-size: 0.78rem; margin-top: 6px; }

/* ── Toast Notifications ─────────────────────────────────────────────── */
.toast-container {
    position:   fixed;
    bottom:     24px;
    right:      24px;
    z-index:    9999;
    display:    flex;
    flex-direction: column-reverse;
    gap:        8px;
    max-width:  320px;
}
.toast {
    background:    var(--bg-elevated);
    border:        1px solid var(--border);
    border-radius: var(--radius-md);
    padding:       12px 16px;
    font-size:     0.88rem;
    box-shadow:    var(--shadow-md);
    animation:     toastIn 0.25s ease;
    display:       flex;
    align-items:   center;
    gap:           8px;
}
.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--danger); }
.toast-info    { border-left: 3px solid var(--info); }

@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
.toast.removing { animation: toastOut 0.25s ease forwards; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .upload-card      { padding: 18px; }
    .drop-zone        { padding: 32px 14px; }
    .stats-grid       { grid-template-columns: repeat(2, 1fr); }
    .clips-grid       { grid-template-columns: 1fr; }
    .player-controls  { padding: 16px 10px 8px; }
    .volume-slider    { width: 50px; }
    .share-buttons    { flex-direction: column; }
    .btn-share        { text-align: center; }
    .watch-title      { font-size: 1.1rem; }
    .hero-text h1     { font-size: 1.6rem; }
}

@media (max-width: 400px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .header-inner { height: 50px; }
    .logo-text  { display: none; }
}

/* ── Scrollbar personalizada (solo Chromium) ─────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-hover); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Focus visible accesible ─────────────────────────────────────────── */
:focus-visible {
    outline:        2px solid var(--accent);
    outline-offset: 3px;
    border-radius:  var(--radius-sm);
}