/* css/perfil.css — la página /perfil. T3 de la cuenta, 06/10/2026.

   Sale de las pantallas de Stitch (05/10) con los tokens de styles.css. Va aparte para que
   solo la baje quien entra a /perfil. Todas las clases empiezan con pf-.

   Celular: una columna. Desde 900 px: la cabecera a lo ancho y dos columnas
   (izquierda, lo de los desafíos y «Para cerrar»; derecha, tu progreso y tu club).

   El naranja es el color propio de los desafíos (PF, 05/10): --color-desafio, en
   styles.css. Se usa SOLO en lo que es de los desafíos. */

.pf [hidden] { display: none !important; }

.pf {
    max-width: 1120px;
    display: grid;
    gap: 16px;
    align-content: start;
}

/* ---------------------------------------------------------------- la tarjeta de la cuenta
   Entrar, salir y borrar: la dibuja cuenta-ui.js con las clases cta- de cuenta.css,
   pensadas para la hoja que sube. Acá es una tarjeta en la página. */
.pf-cuenta.cta-hoja {
    width: 100%;
    max-width: 480px;
    max-height: none;
    overflow: visible;
    margin: 8px auto 0;
    padding: 24px 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* ---------------------------------------------------------------- la página */
.pf-pagina { display: grid; gap: 16px; }

.pf-rotulo {
    margin: 0;
    font-family: var(--font-datos);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
.pf-titulo {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
}
.pf-nota { margin: 0; font-size: 14px; line-height: 1.45; color: var(--color-text-secondary); }
.pf-nota b { color: var(--color-text-primary); }
.pf-num { font-family: var(--font-datos); font-variant-numeric: tabular-nums; }

.pf-aviso {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-button);
    background: rgba(245, 158, 11, 0.1);
}

/* El cartel de «Quiero uno de mi club» (14/10/2026). Verde: no es un error. */
.pf-aviso-club {
    margin: 0 0 12px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-primary);
    border: 1px solid rgba(var(--color-accent-rgb), .5);
    border-radius: var(--radius-button);
    background: rgba(var(--color-accent-rgb), .08);
}

.pf-bloque {
    position: relative;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
}
.pf-solo { max-width: 480px; margin: 8px auto 0; width: 100%; }

.pf-barra {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    overflow: hidden;
}
.pf-barra i { display: block; height: 100%; border-radius: inherit; }

.pf-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-on-action);
    background: var(--color-action);
    border: 0;
    border-radius: var(--radius-button);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.pf-boton:hover { background: var(--color-action-hover); }
.pf-boton:focus-visible, .pf-secundario:focus-visible, .pf-borrar:focus-visible,
.pf-ficha a:focus-visible, .pf-tambien a:focus-visible {
    outline: 2px solid var(--color-text-primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- cabecera */
.pf-cab {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 4px 0;
    min-width: 0;
}
.pf-escudo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--color-surface-elevated);
    border: 2px solid var(--color-accent);
    font-family: var(--font-datos);
    font-weight: 800;
    font-size: 18px;
    color: var(--color-accent);
}
.pf-escudo.con-img { background: transparent; border-color: transparent; }
.pf-escudo img { width: 64px; height: 64px; object-fit: contain; }
.pf-cab-txt { flex: 1 1 auto; min-width: 0; }
.pf-apodo {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}
.pf-cab-sub { margin: 2px 0 0; font-size: 14px; color: var(--color-text-secondary); }
.pf-cab-sub b { color: var(--color-text-primary); font-weight: 700; }
.pf-desde { font-family: var(--font-datos); font-size: 12px; }
.pf-cab-editar { display: none; }

/* ---------------------------------------------------------------- desafíos (muy pronto) */
.pf-pronto {
    border-color: var(--color-desafio);
    border-style: dashed;
    background: linear-gradient(160deg, rgba(249, 115, 22, 0.08), var(--color-surface) 60%);
}
.pf-pronto .pf-rotulo { color: var(--color-desafio); }

/* ---------------------------------------------------------------- para cerrar */
.pf-cerrar-fila { display: flex; align-items: center; gap: 12px; }
.pf-cerrar-txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }

/* ---------------------------------------------------------------- tu progreso */
.pf-prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pf-pct { font-size: 32px; font-weight: 800; line-height: 1.25; color: var(--color-accent); }
.pf-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pf-dato {
    display: grid;
    gap: 2px;
    align-content: start;
    padding: 10px 8px;
    text-align: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
}
.pf-dato b { font-size: 20px; font-weight: 800; line-height: 1.25; }
.pf-dato span { font-size: 12px; line-height: 1.3; color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- tu club */
/* La página del club (14/10/2026): la ficha es la de styles.css (.club-ficha). */
.pf-pagina-club { margin: 0 0 12px; max-width: 300px; }
.pf-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pf-ficha a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 12px;
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
}
.pf-ficha.hecha a { color: var(--color-text-primary); border-color: var(--color-success-strong); }
.pf-marca { font-family: var(--font-datos); font-weight: 800; color: var(--color-text-muted); }
.pf-ficha.hecha .pf-marca { color: var(--color-success-strong); }
.pf-tambien a {
    color: var(--color-text-primary);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- acciones */
.pf-acciones { display: grid; gap: 4px; padding-top: 4px; }
.pf-ancho { width: 100%; min-height: 52px; }
.pf-secundario, .pf-borrar {
    min-height: 44px;
    font: inherit;
    font-size: 14px;
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
    cursor: pointer;
}
.pf-borrar { font-size: 13px; color: var(--color-error); }
.pf-borrar:hover, .pf-secundario:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- escritorio */
.pf-grilla { display: grid; gap: 16px; }
.pf-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* PF (12/10): sin «Para cerrar»; el progreso y tu club van parejos (misma altura). */

@media (min-width: 900px) {
    .pf-cab { padding: 20px 24px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
    .pf-apodo { font-size: 34px; }
    .pf-cab-editar { display: inline-flex; }
    .pf-grilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
    .pf-grilla.pf-grilla-uno { grid-template-columns: minmax(0, 1fr); }
    .pf-acciones { display: flex; justify-content: flex-end; gap: 16px; }
    .pf-acciones .pf-ancho { display: none; }
}

/* ---------------------------------------------------------------- T3b: lo que viene del servidor */
.pf-lugar {
    margin: 0;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
}
.pf-lugar b { color: var(--color-text-primary); }
.pf-pedido { display: grid; gap: 8px; }
.pf-pedir {
    min-height: 44px;
    padding: 0 16px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    color: var(--color-accent);
    background: transparent;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-button);
    cursor: pointer;
}
.pf-pedir:disabled { opacity: 0.6; cursor: default; }
.pf-pedir:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 2px; }

/* ---------------------------------------------------------------- el desafío (D4, 07/10/2026)
   Lleva a /desafio. Naranja: es del desafío (PF, 07/10). */
.pf-desafio {
    border-color: rgba(249, 115, 22, 0.45);
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.14), var(--color-surface) 70%);
}
.pf-desafio .pf-rotulo { color: var(--color-desafio); }
.pf-boton.pf-boton-desafio { background: var(--color-desafio); color: #1a0d03; justify-self: start; }

/* El desafío de lado a lado, con sus tres tablas (D6, 08/10/2026; css/tablas-desafio.css). */
.pf-desafio { gap: 16px; }
.pf-desafio-cab { display: grid; gap: 12px; }
.pf-desafio-txt { display: grid; gap: 4px; min-width: 0; }
.pf-desafio-titulo { font-size: 26px; }
@media (min-width: 900px) {
    .pf-desafio-cab { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
    .pf-desafio-titulo { font-size: 30px; }
}
.pf-desafio-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
@media (min-width: 900px) { .pf-desafio-botones { flex-direction: column; align-items: stretch; } }
.pf-actualizar {
    min-height: 44px; padding: 0 16px; border-radius: var(--radius-button);
    border: 1px solid var(--color-border); background: transparent;
    color: var(--color-text-secondary); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.pf-actualizar:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }
.pf-actualizar:disabled { opacity: 0.6; cursor: default; }
/* La cuenta regresiva del desafío (D6, 08/10/2026), como la de /desafio. */
.pf-reloj-caja { display: grid; gap: 6px; margin-top: 8px; max-width: 420px; }
.pf-reloj-rotulo { font-family: var(--font-datos); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); }
.pf-reloj { display: flex; gap: 8px; }
.pf-reloj div { flex: 1; background: var(--color-surface-elevated); border: 1px solid var(--color-border); border-radius: 12px; padding: 8px 0 6px; text-align: center; display: grid; gap: 3px; }
.pf-reloj b { font-size: 24px; line-height: 1.25; color: var(--color-desafio); }
.pf-reloj span { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }