/* pxvod admin — tema oscuro y denso.
   Pensado para escritorio; al final del archivo se adapta a tablet y teléfono. */

:root {
    --bg: #0f1115;
    --panel: #171a21;
    --panel-2: #1d212a;
    --border: #2a2f3a;
    --text: #d9dce3;
    --muted: #8b91a1;
    --accent: #5b9cff;
    --accent-hover: #7bb0ff;
    --danger: #e5484d;
    --danger-bg: #3a1a1c;
    --ok: #3fb950;
    --ok-bg: #16301d;
    --info-bg: #1a2a45;
    --radius: 4px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.45 var(--font);
    color-scheme: dark;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

code {
    font-family: var(--mono);
    font-size: 12px;
    background: var(--panel-2);
    padding: 1px 5px;
    border-radius: var(--radius);
}

h1 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.inline { display: inline; }

/* Barra superior */

.topbar {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    height: 40px;
}

.topbar-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 16px;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--text);
}
.brand:hover { text-decoration: none; color: var(--accent); }

.nav { display: flex; gap: 4px; flex: 1; }
.nav a {
    color: var(--muted);
    padding: 4px 10px;
    border-radius: var(--radius);
}
.nav a:hover { color: var(--text); background: var(--panel-2); text-decoration: none; }
.nav a.active { color: var(--text); background: var(--panel-2); }

.topbar-user { display: flex; align-items: center; gap: 10px; }

/* Página */

.page {
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}
.page-head-actions { display: flex; align-items: center; gap: 8px; }

.count {
    color: var(--muted);
    font-weight: 400;
    font-size: 13px;
    margin-left: 6px;
}

.empty {
    color: var(--muted);
    padding: 40px 0;
    text-align: center;
}

/* Flash */

.flash {
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.flash-ok { background: var(--ok-bg); border-color: var(--ok); }
.flash-error { background: var(--danger-bg); border-color: var(--danger); }
.flash-info { background: var(--info-bg); border-color: var(--accent); }

/* Botones */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--border); text-decoration: none; color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-ghost { background: transparent; }
.btn-danger { background: transparent; border-color: transparent; color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-xs { padding: 2px 7px; font-size: 12px; }
.btn.disabled { opacity: .4; cursor: default; pointer-events: none; }

/* Formularios */

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
}
input:disabled { color: var(--muted); }
textarea { resize: vertical; }

.search { display: flex; gap: 6px; align-items: center; }
.search input { width: 260px; }

.form fieldset {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px 14px;
    margin: 0 0 12px;
    background: var(--panel);
}
.form legend {
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 0 6px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px 14px;
}
.grid .span-2 { grid-column: span 2; }
.grid .span-4 { grid-column: span 4; }

label { display: flex; flex-direction: column; gap: 3px; }
label > span { color: var(--muted); font-size: 12px; }
label > span b { color: var(--danger); font-weight: 600; }
label small { font-size: 11px; }
label.has-error input, label.has-error select, label.has-error textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: 12px; }

.actions { display: flex; gap: 8px; margin-top: 8px; }

/* Login */

.login-box {
    max-width: 340px;
    margin: 80px auto;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px 24px 24px;
}
.login-box h1 { margin-bottom: 14px; }
.login-box form { display: flex; flex-direction: column; gap: 10px; }

/* Tabla */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
}

.table {
    width: 100%;
    border-collapse: collapse;
}
.table th, .table td {
    padding: 5px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.table th {
    color: var(--muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--panel-2);
    white-space: nowrap;
}
.table tbody tr:hover { background: var(--panel-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions-col { text-align: right; white-space: nowrap; width: 1%; }
.table .actions-col form { margin-left: 2px; }

.title-link { color: var(--text); font-weight: 500; }
.title-link:hover { color: var(--accent); }

.tag {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--panel-2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--muted);
}

.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
}

/* Ingesta y cola */

.badge {
    display: inline-block;
    min-width: 16px;
    padding: 0 5px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 12px;
}
.tabs a {
    color: var(--muted);
    padding: 6px 12px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }
.tabs .count { margin-left: 4px; }

.section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
    margin: 18px 0 6px;
}

.ingest-summary {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 16px;
}
.pill {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--panel-2);
    font-size: 12px;
}
.pill-ok { border-color: var(--ok); color: var(--ok); }
.pill-error { border-color: var(--danger); color: var(--danger); }

.text-error { color: var(--danger); }
.small { font-size: 12px; }

/* Confirmación de candidatos */

.file-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.file-card.with-poster { flex-direction: row; gap: 14px; align-items: flex-start; }
.file-card .guess { margin-top: 4px; }
.file-card .guess strong { margin: 0 4px; }
.show-poster { width: 60px; border-radius: var(--radius); flex: none; }

.search-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 12px;
}
.search-bar label { flex: 1; }
.search-bar label.narrow { flex: 0 0 130px; }
.search-bar .btn { height: 28px; }

.candidates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 10px;
}
.candidate {
    display: flex;
    gap: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px;
}
.candidate-poster { flex: none; width: 92px; }
.candidate-poster img { width: 92px; border-radius: var(--radius); display: block; }
.no-poster {
    width: 92px;
    height: 138px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--muted);
    background: var(--panel-2);
    border-radius: var(--radius);
    font-size: 11px;
}
.candidate-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.candidate-title { font-weight: 600; font-size: 14px; }
.candidate-overview { margin: 4px 0 8px; color: var(--text); font-size: 12px; line-height: 1.4; flex: 1; }

.table.episodes .still-cell { width: 1%; }
.table.episodes .still { width: 80px; border-radius: var(--radius); display: block; }
.table.episodes tr.preselected { background: var(--info-bg); }
.table.episodes tr.owned { opacity: .5; }
.table.episodes label { display: inline; cursor: pointer; }

.url-cell { min-width: 320px; }
.url-cell input { font-family: var(--mono); font-size: 11px; padding: 3px 6px; }
.copy-row { display: flex; gap: 6px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; }
.copy-row .btn { flex: 0 0 auto; }
tr.revoked td { opacity: .55; }

.thumb-cell { width: 1%; padding-top: 3px !important; padding-bottom: 3px !important; }
.thumb { height: 34px; border-radius: 2px; display: block; max-width: 70px; object-fit: contain; }

/* Canales */

.inline-check {
    display: inline-flex;
    /* label trae flex-direction: column del bloque de formularios. */
    flex-direction: row;
    align-items: center;
    gap: 6px;
    color: var(--text);
    font-size: 12px;
    cursor: pointer;
}
.inline-check input[type="checkbox"] { margin: 0; }
.inline-check select { width: auto; }
label.checkbox > span { margin-bottom: 2px; }

.select-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    position: sticky;
    top: 0;
    z-index: 2;
}

#picktable td { padding-top: 3px; padding-bottom: 3px; }

/* Filtros de la biblioteca */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.filter-bar label { flex: 0 0 auto; min-width: 140px; }
.filter-bar label.grow { flex: 1 1 220px; min-width: 180px; }
.filter-actions { display: flex; align-items: center; gap: 6px; }

/* La etiqueta de calidad es una cadena técnica: se lee mejor monoespaciada. */
.tag-quality { font-family: var(--mono); color: var(--text); }

.table .check-col { width: 1%; padding-right: 0; }
.table .check-col input { margin: 0; }

/* Renombrar en línea: el campo no debe empujar al resto de la tabla. */
.rename-form { max-width: 300px; }

/* Título de sección con una acción a la derecha. */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.section-head .btn { margin-bottom: 6px; }

/* Renumerar: campos de número cortos, el vistazo previo se lleva el ancho. */
.table.renumber .ep-input { width: 72px; text-align: right; }
.table.renumber .filename { min-width: 0; margin-top: 2px; }
.episode-range { margin-top: 10px; }
.episode-range label.narrow { flex-basis: 280px; }

/* ---------------------------------------------------------------------------
   Tablet: lo que estaba en cuatro columnas baja a dos y lo ancho deja de
   forzar scroll horizontal.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {
    .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid .span-4 { grid-column: span 2; }

    .candidates { grid-template-columns: 1fr; }

    .search input { width: 100%; }
    .search { flex: 1; }

    .url-cell { min-width: 0; }
    .filename { min-width: 0; }
}

/* ---------------------------------------------------------------------------
   Teléfono: una sola columna, y las tablas dejan de ser tablas. Una tabla de
   nueve columnas en 375 px solo se puede leer arrastrando, así que cada fila
   se vuelve una tarjeta apilada. Las celdas con data-label se etiquetan solas.
   --------------------------------------------------------------------------- */

@media (max-width: 640px) {
    html, body { font-size: 14px; }

    /* Barra superior: marca e identidad arriba, navegación debajo, deslizable. */
    .topbar { height: auto; }
    .topbar-inner {
        flex-wrap: wrap;
        padding: 6px 10px;
        gap: 6px 10px;
        height: auto;
    }
    .brand { order: 1; }
    .topbar-user { order: 2; margin-left: auto; }
    .nav {
        order: 3;
        flex: 0 0 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .nav::-webkit-scrollbar { display: none; }
    .nav a { white-space: nowrap; padding: 6px 10px; }

    .page { padding: 10px; }

    .page-head { flex-wrap: wrap; gap: 8px; }
    .page-head h1 { flex: 1 0 100%; }
    .page-head-actions { flex-wrap: wrap; width: 100%; gap: 6px; }
    .page-head-actions .btn { flex: 1 1 auto; justify-content: center; }
    .page-head-actions form.search { flex: 1 0 100%; }

    /* Un dedo necesita más blanco que un puntero. */
    .btn { padding: 8px 14px; }
    .btn-sm { padding: 7px 12px; }
    .btn-xs { padding: 6px 10px; font-size: 12px; }

    /* 16 px evita que iOS haga zoom al enfocar un campo. */
    input[type="text"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px;
        padding: 8px;
    }
    input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

    .grid { grid-template-columns: 1fr; gap: 12px; }
    .grid .span-2, .grid .span-4 { grid-column: span 1; }

    /* En una sola columna el campo que importa debe quedar arriba, no al final
       de la fila donde lo dejaba la retícula de escritorio. */
    .grid .field-name { order: -2; }
    .grid .field-primary { order: -1; }

    .form fieldset { padding: 8px 10px 12px; }
    .actions { flex-wrap: wrap; }
    .actions .btn { flex: 1 1 auto; justify-content: center; }

    .login-box { margin: 32px auto; max-width: 100%; }

    .search-bar { flex-wrap: wrap; }
    .search-bar label, .search-bar label.narrow { flex: 1 0 100%; }
    .search-bar .btn { height: auto; width: 100%; justify-content: center; }

    .filter-bar label, .filter-bar label.grow { flex: 1 0 100%; min-width: 0; }
    .filter-actions { width: 100%; }
    .filter-actions .btn { flex: 1 1 auto; justify-content: center; }

    .table.renumber .ep-input { width: 100%; text-align: left; }

    /* La casilla del lote encabeza la tarjeta; sin etiqueta, se explica sola. */
    .table .check-col { padding: 0 0 4px; }
    .table .check-col::before { content: none; }

    .select-bar { flex-wrap: wrap; gap: 10px; position: static; }

    .file-card.with-poster { flex-direction: column; }
    .show-poster { width: 90px; }

    .tabs { overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { white-space: nowrap; }

    /* --- Tablas como tarjetas --- */

    .table-wrap {
        border: 0;
        background: none;
        border-radius: 0;
        overflow: visible;
    }
    .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
    .table thead { display: none; }
    .table tr {
        background: var(--panel);
        border: 1px solid var(--border);
        border-radius: var(--radius);
        margin-bottom: 8px;
        padding: 8px 10px;
    }
    .table tbody tr:hover { background: var(--panel); }
    .table tbody tr:last-child td { border-bottom: 0; }
    .table td {
        border: 0;
        padding: 2px 0;
        text-align: left;
        width: auto;
    }
    .table td:empty { display: none; }
    .table .num { text-align: left; }
    .table td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--muted);
    }

    /* La columna de acciones se vuelve la barra de botones de la tarjeta. */
    .table .actions-col {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: auto;
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }
    .table .actions-col::before { content: none; }
    .table .actions-col form { margin: 0; }
    .table .actions-col .btn { flex: 1 1 auto; justify-content: center; }

    .thumb-cell { padding: 0 0 6px !important; }
    .thumb { height: 48px; max-width: 110px; }

    /* Filas para marcar: la casilla va pegada al nombre, no encima. El orden
       visual se reacomoda para que lo primero que se lee sea qué se marca. */
    #picktable tr, .table.episodes tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 10px;
    }
    #picktable tr > td, .table.episodes tr > td {
        flex: 1 1 100%;
        order: 5;
    }
    #picktable tr > td:first-child, .table.episodes tr > td:first-child {
        flex: 0 0 auto;
        order: 1;
        padding: 0;
    }
    /* En picktable la columna 3 es el nombre; en episodes, la 2 es el número
       de episodio y la 4 el título. */
    #picktable tr > td:nth-child(3),
    .table.episodes tr > td:nth-child(2),
    .table.episodes tr > td:nth-child(4) {
        flex: 1 1 auto;
        order: 2;
        font-weight: 600;
    }
    #picktable tr > td:nth-child(2) { flex: 0 0 auto; order: 3; }
    .table.episodes tr > td:nth-child(3) { order: 4; }

    .table.episodes .still { width: 100%; max-width: 220px; }
    .table.episodes .still-cell { flex: 1 1 100%; }

    .candidate { flex-direction: column; }
    .candidate-poster, .candidate-poster img, .no-poster { width: 100%; }
    .no-poster { height: 90px; }

    .ingest-summary { gap: 6px 10px; }
    .pager { gap: 8px; }
}
.filename { font-family: var(--mono); font-size: 12px; word-break: break-all; min-width: 280px; }
.filename .muted { font-family: var(--font); }
.form textarea[name="text"] { font-family: var(--mono); font-size: 12px; }