/*
 * El panel de administración.
 *
 * Sobrio a propósito: aquí se cambian precios y se mueve dinero de otras personas, y una
 * pantalla que parece un juego invita a tocar. Lo único de color es el aviso de arriba y el
 * botón que confirma.
 *
 * Se maqueta para pantalla ancha porque es donde se usa —esto se abre desde un ordenador,
 * no entre partida y partida— pero cabe en un móvil: las filas se apilan y las tablas se
 * desplazan de lado dentro de su caja, nunca la página.
 */
.admin {
    max-width: 68rem;
    margin: 0 auto;
    padding: var(--space-4) var(--space-3) var(--space-6);
}

.admin-cabeza h1 { margin: 0 0 .25rem; font-size: 1.5rem; }

.admin-aviso {
    margin: 0 0 var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-inline-start: 3px solid #e8ae1e;
    border-radius: .35rem;
    background: rgb(255 213 88 / .12);
    font-size: .82rem;
    line-height: 1.45;
}

.admin-pestanas {
    display: flex;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    border-bottom: 1px solid var(--border, rgb(0 0 0 / .1));
}

.admin-pestana {
    padding: var(--space-2) var(--space-3);
    /* Alto de dedo: esto también se abre desde el móvil. */
    min-height: 2.75rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.admin-pestana.activa { border-bottom-color: currentColor; }

.admin-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.admin-barra h2 { margin: 0; font-size: 1.05rem; }

.admin-buscar {
    flex: 1 1 14rem;
    max-width: 24rem;
    /* 16 px justos: por debajo, el móvil hace zoom solo al enfocar y no hay evento que
       interceptar. Es el fallo de zoom que no se arregla desde JavaScript. */
    font-size: 16px;
    padding: var(--space-2);
    border: 1px solid var(--border, rgb(0 0 0 / .15));
    border-radius: .5rem;
    background: var(--surface, transparent);
    color: inherit;
}

.admin-nota { margin: var(--space-2) 0; font-size: .8rem; color: var(--text-soft, inherit); opacity: .85; }

.admin-lista { display: grid; gap: var(--space-2); }

.admin-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--border, rgb(0 0 0 / .12));
    border-radius: var(--radius, .75rem);
    background: var(--surface, transparent);
}

.admin-pack.retirado { opacity: .55; }

.admin-campo { display: grid; gap: .2rem; flex: 1 1 8rem; }
.admin-campo.corto { flex: 0 0 5.5rem; }
.admin-campo span { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

.admin-campo input {
    font-size: 16px;
    padding: .45rem .5rem;
    border: 1px solid var(--border, rgb(0 0 0 / .15));
    border-radius: .4rem;
    background: transparent;
    color: inherit;
    width: 100%;
}

.admin-check { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; }
.admin-fila-acciones { display: flex; gap: var(--space-1); margin-inline-start: auto; }

/* ── Cuentas ── */

.admin-usuario { align-items: center; }
.admin-usuario-quien { flex: 1 1 16rem; display: grid; gap: .1rem; }
.admin-usuario-quien small { font-size: .72rem; opacity: .75; }
.admin-usuario-saldo { flex: 0 0 auto; font-size: 1.05rem; font-weight: 800; }

.admin-usuario-ajuste { display: flex; flex-wrap: wrap; gap: var(--space-1); flex: 1 1 20rem; }

.admin-usuario-ajuste input {
    font-size: 16px;
    padding: .45rem .5rem;
    border: 1px solid var(--border, rgb(0 0 0 / .15));
    border-radius: .4rem;
    background: transparent;
    color: inherit;
}

.admin-usuario-ajuste input[name="delta"] { flex: 0 0 6rem; }
.admin-usuario-ajuste input[name="note"] { flex: 1 1 9rem; min-width: 0; }

.admin-marca {
    justify-self: start;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-marca.admin { background: rgb(90 140 255 / .2); color: #3a63c8; }
.admin-marca.aviso { background: rgb(255 120 90 / .18); color: #b7442a; }

/* ── Partidas ── */

.admin-partida {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr;
    gap: var(--space-2);
    align-items: center;
    text-align: start;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.admin-partida:hover { border-color: #e8ae1e; }
.admin-partida-juego { font-weight: 800; }
.admin-partida-dato { font-size: .8rem; opacity: .8; }
.admin-partida-fecha { font-size: .78rem; opacity: .65; text-align: end; }

.admin-ficha { text-align: start; }
.admin-ficha h3 { margin: var(--space-3) 0 .3rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }

/* Las tablas se desplazan dentro de su caja. La página nunca. */
.admin-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: .82rem;
    display: block;
    overflow-x: auto;
}

.admin-tabla th, .admin-tabla td { padding: .3rem .5rem; text-align: start; white-space: nowrap; }
.admin-tabla tr + tr { border-top: 1px solid var(--border, rgb(0 0 0 / .08)); }
.admin-tabla th { font-weight: 700; }

/* El resumen archivado, tal cual se guardó. No es bonito y no pretende serlo: el día que
   algo no cuadre es lo único que sirve. */
.admin-crudo {
    max-height: 16rem;
    overflow: auto;
    margin: 0;
    padding: var(--space-2);
    border-radius: .5rem;
    background: rgb(0 0 0 / .06);
    font-size: .72rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
}

:root[data-theme="oscuro"] .admin-crudo { background: rgb(255 255 255 / .06); }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .admin-crudo { background: rgb(255 255 255 / .06); }
}