:root {
    --concrete: #E9E6E0;
    --card: #FFFFFF;
    --steel: #12161B;
    --steel-2: #1D242C;
    --ink: #171B20;
    --muted: #6A7078;
    --line: #D8D4CC;
    --line-2: #EDEAE4;
    --p-red: #C8352B;
    --p-blue: #1E4FA8;
    --p-yellow: #D9A017;
    --p-green: #2C8B52;
    --p-white: #DEDBD4;
    --p-steel: #868D96;
    --ok: #2C8B52;
    --warn: #D9A017;
    --disp: 'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
    --body: 'Inter',system-ui,-apple-system,sans-serif;
    --mono: 'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
    --r: 10px;
    --shadow: 0 1px 2px rgba(18,22,27,.06),0 8px 24px -12px rgba(18,22,27,.18);
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html, body {
    margin: 0;
    padding: 0
}

body {
    background: var(--concrete);
    color: var(--ink);
    font-family: var(--body);
    font-size: 15px;
    line-height: 1.5;
    padding-bottom: 104px;
    background-image: linear-gradient(rgba(18,22,27,.028) 1px,transparent 1px), linear-gradient(90deg,rgba(18,22,27,.028) 1px,transparent 1px);
    background-size: 22px 22px;
}

h1, h2, h3 {
    font-family: var(--disp);
    font-weight: 700;
    letter-spacing: .01em;
    margin: 0;
    line-height: 1.05
}

h1 {
    font-size: 30px;
    text-transform: uppercase
}

h2 {
    font-size: 22px;
    text-transform: uppercase
}

h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .04em
}

.eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted)
}

.num {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: 0;
    background: none;
    color: inherit
}

input, select {
    font-family: inherit;
    font-size: 16px;
    color: inherit
}

.wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 14px
}

/* ---------- barra superior ---------- */
.top {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--steel);
    color: #EFEDE9;
    border-bottom: 3px solid var(--p-blue)
}

    .top .wrap {
        display: flex;
        align-items: center;
        gap: 10px;
        height: 56px
    }

.mark {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--disp);
    font-size: 21px;
    text-transform: uppercase;
    letter-spacing: .08em
}

    .mark i {
        display: block;
        width: 9px;
        height: 26px;
        border-radius: 2px;
        background: var(--p-red);
        box-shadow: 13px 0 0 var(--p-yellow),26px 0 0 var(--p-blue);
        margin-right: 26px
    }

.top .meta {
    margin-left: auto;
    text-align: right;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9AA3AE;
    line-height: 1.35
}

    .top .meta b {
        color: #EFEDE9;
        font-weight: 500
    }

/* ---------- tarjetas ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--shadow);
    margin: 12px 0;
    overflow: hidden
}

.card-h {
    padding: 13px 15px;
    border-bottom: 1px solid var(--line-2);
    display: flex;
    align-items: center;
    gap: 10px
}

.card-b {
    padding: 15px
}

.sec {
    margin: 22px 0 10px;
    display: flex;
    align-items: baseline;
    gap: 10px
}

    .sec .rule {
        flex: 1;
        height: 1px;
        background: var(--line)
    }

/* ---------- botones ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 8px;
    font-family: var(--disp);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    background: var(--steel);
    color: #F4F2EC;
    transition: transform .08s,filter .15s
}

    .btn:active {
        transform: translateY(1px)
    }

    .btn:disabled {
        opacity: .4;
        cursor: not-allowed
    }

    .btn.primary {
        background: var(--p-blue)
    }

    .btn.ghost {
        background: transparent;
        border: 1.5px solid var(--line);
        color: var(--ink)
    }

    .btn.wide {
        width: 100%
    }

    .btn.sm {
        padding: 7px 11px;
        font-size: 13.5px
    }

.icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 15px;
    background: #fff
}

    .icon-btn:active {
        background: var(--line-2)
    }

/* ---------- chips / tags ---------- */
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.chip {
    padding: 8px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    font-size: 13.5px;
    font-weight: 500;
    transition: .12s
}

    .chip:active {
        transform: scale(.97)
    }

    .chip[aria-pressed="true"], .chip[aria-pressed=""] {
        background: var(--steel);
        color: #F4F2EC;
        border-color: var(--steel)
    }

.tag {
    display: inline-block;
    padding: 2.5px 7px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .09em;
    text-transform: uppercase;
    border: 1px solid var(--line);
    color: var(--muted);
    background: #FAF9F7
}

    .tag.maq {
        border-color: #B9CBE8;
        color: var(--p-blue);
        background: #EFF4FC
    }

    .tag.lib {
        border-color: #E5C58C;
        color: #8A6512;
        background: #FCF7EA
    }

    .tag.pc {
        border-color: #A9D6BB;
        color: var(--p-green);
        background: #EEF8F1
    }

    .tag.band {
        border-color: #E0B3AE;
        color: var(--p-red);
        background: #FCF0EF
    }

/* ---------- barra de placas (elemento firma) ---------- */
.bar-viz {
    display: flex;
    align-items: center;
    height: 34px;
    gap: 1px;
    margin: 8px 0 2px
}

    .bar-viz .sleeve {
        flex: 1;
        height: 5px;
        background: linear-gradient(var(--p-steel),#5F666E);
        border-radius: 2px
    }

    .bar-viz .plate {
        border-radius: 2px;
        border: 1px solid rgba(0,0,0,.25);
        flex: none
    }

    .bar-viz .knurl {
        width: 16px;
        height: 9px;
        background: repeating-linear-gradient(90deg,#6E757D 0 1px,#9AA1A9 1px 2px);
        border-radius: 2px
    }

.plate-legend {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .04em
}

/* ---------- ejercicio / logger ---------- */
.ex {
    border-bottom: 1px solid var(--line-2)
}

    .ex:last-child {
        border-bottom: 0
    }

.ex-h {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    width: 100%;
    text-align: left
}

.ex-n {
    width: 27px;
    height: 27px;
    flex: none;
    border-radius: 6px;
    background: var(--concrete);
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 11.5px;
    font-weight: 600
}

.ex.done .ex-n {
    background: var(--ok);
    color: #fff
}

.ex-t {
    flex: 1;
    min-width: 0
}

    .ex-t .nm {
        font-weight: 600;
        font-size: 14.5px;
        line-height: 1.25
    }

    .ex-t .pr {
        font-family: var(--mono);
        font-size: 11.5px;
        color: var(--muted);
        margin-top: 2px
    }

.ex-body {
    padding: 0 15px 15px;
    background: #FBFAF8;
    border-top: 1px dashed var(--line)
}

.setrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line-2)
}

    .setrow:last-of-type {
        border-bottom: 0
    }

    .setrow .sn {
        width: 22px;
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted)
    }

.stepper {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    flex: 1
}

    .stepper button {
        width: 34px;
        height: 38px;
        font-size: 17px;
        color: var(--muted);
        flex: none
    }

        .stepper button:active {
            background: var(--line-2)
        }

    .stepper input {
        width: 100%;
        min-width: 0;
        border: 0;
        text-align: center;
        height: 38px;
        font-family: var(--mono);
        font-weight: 600;
        font-size: 15px;
        background: transparent
    }

        .stepper input:focus {
            outline: none;
            background: #FFFBEA
        }

    .stepper .u {
        font-family: var(--mono);
        font-size: 10px;
        color: var(--muted);
        padding-right: 8px
    }

.tick {
    width: 40px;
    height: 38px;
    flex: none;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    color: var(--muted)
}

    .tick.on {
        background: var(--ok);
        border-color: var(--ok);
        color: #fff
    }

.hint {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin: 9px 0 3px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.pill {
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--concrete);
    font-size: 10.5px
}

    .pill.up {
        background: #EAF6EF;
        color: var(--ok)
    }

    .pill.pr {
        background: #FBEDEC;
        color: var(--p-red);
        font-weight: 600
    }

/* ---------- navegación ---------- */
.nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--steel);
    padding-bottom: env(safe-area-inset-bottom)
}

    .nav .wrap {
        display: flex;
        padding: 0
    }

    .nav button {
        flex: 1;
        padding: 9px 2px 11px;
        color: #818B96;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: .08em;
        text-transform: uppercase;
        border-top: 3px solid transparent
    }

        .nav button .g {
            font-size: 17px;
            line-height: 1
        }

        .nav button[aria-current="true"] {
            color: #fff;
            border-top-color: var(--p-yellow)
        }

/* ---------- cronómetro ---------- */
.timer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom));
    z-index: 45;
    background: var(--steel-2);
    color: #fff;
    transform: translateY(120%);
    transition: transform .25s
}

    .timer.on {
        transform: none
    }

    .timer .wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 9px 14px
    }

    .timer .t {
        font-family: var(--mono);
        font-size: 23px;
        font-weight: 600;
        letter-spacing: .02em
    }

    .timer .lbl {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: #98A2AE
    }

    .timer .fill {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        background: rgba(217,160,23,.22);
        transition: width 1s linear
    }

    .timer .wrap {
        position: relative;
        z-index: 2
    }

/* ---------- gráficos / progreso ---------- */
.grid-weeks {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(13px,1fr));
    gap: 4px
}

.dot {
    aspect-ratio: 1;
    border-radius: 3px;
    background: var(--line-2);
    border: 1px solid var(--line)
}

    .dot.d1 {
        background: #BFD3EF;
        border-color: #9DBBE4
    }

    .dot.d2 {
        background: #6E97D6;
        border-color: #5580C4
    }

    .dot.d3 {
        background: var(--p-blue);
        border-color: #17408A
    }

.stat {
    display: flex;
    gap: 14px;
    flex-wrap: wrap
}

    .stat > div {
        flex: 1;
        min-width: 88px
    }

    .stat .v {
        font-family: var(--mono);
        font-size: 25px;
        font-weight: 600;
        line-height: 1
    }

    .stat .k {
        font-family: var(--mono);
        font-size: 9.5px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 5px
    }

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

    .empty .g {
        font-size: 30px;
        opacity: .35;
        display: block;
        margin-bottom: 8px
    }

/* ---------- hoja modal ---------- */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: none
}

    .sheet.on {
        display: block
    }

    .sheet .scrim {
        position: absolute;
        inset: 0;
        background: rgba(18,22,27,.5)
    }

    .sheet .panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        max-height: 86vh;
        overflow: auto;
        background: var(--concrete);
        border-radius: 16px 16px 0 0;
        padding-bottom: 24px;
        animation: up .22s ease
    }

@keyframes up {
    from {
        transform: translateY(30px);
        opacity: .4
    }
}

.sheet .ph {
    position: sticky;
    top: 0;
    background: var(--concrete);
    padding: 14px 15px 10px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 2
}

.grab {
    width: 34px;
    height: 4px;
    border-radius: 3px;
    background: var(--line);
    margin: 8px auto 0
}

.opt {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-bottom: 1px solid var(--line-2);
    width: 100%;
    text-align: left;
    background: #fff
}

    .opt:active {
        background: var(--line-2)
    }

    .opt.cur {
        background: #F3F7FD;
        box-shadow: inset 3px 0 0 var(--p-blue)
    }

/* ---------- utilidades ---------- */
.row {
    display: flex;
    align-items: center;
    gap: 10px
}

.between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.mut {
    color: var(--muted)
}

.sm {
    font-size: 13px
}

.xs {
    font-size: 11.5px
}

.mono {
    font-family: var(--mono)
}

.hide {
    display: none !important
}

.phase {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    margin-right: 6px
}

.ph1 {
    background: var(--p-green)
}

.ph2 {
    background: var(--p-blue)
}

.ph3 {
    background: var(--p-red)
}

.phD {
    background: var(--p-yellow)
}

a {
    color: var(--p-blue)
}

:focus-visible {
    outline: 2.5px solid var(--p-yellow);
    outline-offset: 2px
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

@media (min-width:720px) {
    .nav .wrap {
        max-width: 760px
    }

    .timer {
        bottom: 14px;
        left: auto;
        right: 14px;
        width: 340px;
        border-radius: 12px;
        overflow: hidden
    }
}

/* ---------- añadidos de la versión Blazor ---------- */
.arranque {
    min-height: 70vh;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    color: var(--muted)
}

    .arranque .mark {
        color: var(--ink);
        font-size: 30px
    }

        .arranque .mark i {
            background: var(--p-red);
            box-shadow: 13px 0 0 var(--p-yellow),26px 0 0 var(--p-blue)
        }

.nav a {
    flex: 1;
    padding: 9px 2px 11px;
    color: #818B96;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-top: 3px solid transparent;
    text-decoration: none
}

    .nav a .g {
        font-size: 17px;
        line-height: 1
    }

    .nav a.active {
        color: #fff;
        border-top-color: var(--p-yellow)
    }

.aviso {
    margin: 12px 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: #FBEDEC;
    border: 1px solid #E0B3AE;
    color: #8A2C22;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    gap: 10px
}

    .aviso.ok {
        background: #EAF6EF;
        border-color: #A9D6BB;
        color: #1F6B3E
    }

    .aviso .link {
        margin-left: auto;
        text-decoration: underline;
        font-size: 12.5px;
        color: inherit
    }

.grid-v {
    display: grid;
    gap: 8px
}

.chip.bloque {
    text-align: left;
    border-radius: 8px;
    padding: 12px
}

.acciones-pie {
    margin: 14px 0 26px;
    display: grid;
    gap: 9px
}

.acciones {
    margin-top: 12px;
    gap: 8px;
    flex-wrap: wrap
}

.big {
    font-family: var(--mono);
    font-size: 23px;
    font-weight: 600;
    line-height: 1
}

.ta-r {
    text-align: right
}

.ta-c {
    text-align: center
}

.tag.falta {
    border-color: #E0B3AE;
    color: var(--p-red);
    background: #FCF0EF
}

.hint.alerta {
    color: var(--p-red)
}

.alerta {
    color: var(--p-red) !important
}

.stepper.reps {
    max-width: 132px
}

.stepper input[type=number] {
    -moz-appearance: textfield
}

.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.btn.ghost.claro {
    border-color: #3A444F;
    color: #fff
}

.btn.amarillo {
    background: var(--p-yellow);
    color: #12161B
}

h1 {
    font-size: 22px;
    text-transform: uppercase
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 80;
    background: #12161B;
    color: #F4F2EC;
    padding: 12px 16px;
    font-size: 14px;
    box-shadow: 0 -4px 20px rgba(0,0,0,.3)
}

    #blazor-error-ui .reload, #blazor-error-ui .dismiss {
        color: var(--p-yellow);
        margin-left: 10px;
        cursor: pointer;
        text-decoration: underline
    }

/* ---------- ajustes ---------- */
.mb {
    margin-bottom: 15px
}

.mt {
    margin-top: 15px
}

.sep {
    border: 0;
    border-top: 1px solid var(--line-2);
    margin: 13px 0
}

.btn.peligro {
    color: var(--p-red);
    border-color: #E0B3AE
}

.btn.sm.peligro:not(.ghost) {
    background: var(--p-red);
    color: #fff;
    border-color: var(--p-red)
}

.archivo {
    display: block;
    width: 100%;
    font-size: 13px;
    padding: 11px;
    border: 1.5px dashed var(--line);
    border-radius: 8px;
    background: #FBFAF8;
    color: var(--muted)
}

    .archivo::file-selector-button {
        font-family: var(--disp);
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: 13.5px;
        padding: 7px 12px;
        margin-right: 10px;
        border: 0;
        border-radius: 6px;
        background: var(--steel);
        color: #F4F2EC;
        cursor: pointer
    }

.card-b .eyebrow {
    margin-bottom: 7px;
    display: block
}

/* ---------- biblioteca y formulario ---------- */
.busca {
    width: 100%;
    padding: 11px;
    border: 1.5px solid var(--line);
    border-radius: 8px;
    margin-bottom: 11px
}

    .busca:focus {
        outline: none;
        border-color: var(--p-blue)
    }

.campo {
    display: block;
    margin-bottom: 15px
}

    .campo .eyebrow {
        display: block;
        margin-bottom: 5px
    }

    .campo input, .campo textarea {
        width: 100%;
        padding: 11px;
        border: 1.5px solid var(--line);
        border-radius: 8px;
        font-size: 16px;
        font-family: var(--body);
        resize: vertical
    }

        .campo input:focus, .campo textarea:focus {
            outline: none;
            border-color: var(--p-blue)
        }

    .campo .xs {
        display: block;
        margin-top: 5px
    }

.tag.mio {
    border-color: #B9CBE8;
    color: var(--p-blue);
    background: #EFF4FC;
    margin-left: 6px
}

.ex.archivado {
    opacity: .55
}

    .ex.archivado .nm {
        text-decoration: line-through;
        text-decoration-thickness: 1px
    }

/* ---------- pantalla Plan ---------- */
.leyenda {
    display: inline-flex;
    align-items: center;
    margin-right: 4px
}

.semanas {
    display: grid;
    gap: 5px
}

.fila-semana {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent
}

    .fila-semana.actual {
        background: #F3F7FD;
        border-color: #BBD0EE
    }

.sem-n {
    width: 26px
}

.d-block {
    display: block
}

.mt-chip {
    display: block;
    margin-top: 5px
}

.ml {
    margin-left: 4px
}

/* ---------- pantalla Progreso ---------- */
.barras {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 96px
}

.barra-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%
}

.barra {
    background: var(--p-blue);
    border-radius: 3px 3px 0 0;
    min-height: 4px
}

.record-v {
    font-weight: 600
}

/* ---------- login ---------- */
.login-wrap {
    min-height: calc(100vh - 168px);
    display: grid;
    place-items: center;
    padding: 20px 14px
}

.login-card {
    width: 100%;
    max-width: 360px
}

.login-mark {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--disp);
    font-size: 26px;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 2px;
    justify-content: center
}

    .login-mark i {
        display: block;
        width: 9px;
        height: 26px;
        border-radius: 2px;
        background: var(--p-red);
        box-shadow: 13px 0 0 var(--p-yellow),26px 0 0 var(--p-blue);
        margin-right: 26px
    }

.login-card .mut.mb {
    text-align: center
}

/* ---------- chip de usuario en el header ---------- */
.usuario-chip {
    margin-left: auto;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    color: #EFEDE9
}

    .usuario-chip .link {
        color: #9AA3AE;
        text-decoration: underline;
        font-size: 11px
    }

/* ---------- pie de página ---------- */
.pie {
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--muted)
}

    .pie b {
        color: var(--ink);
        font-weight: 600
    }

    /* Con sesión y menú visibles, el pie se ancla justo encima del menú fijo
   (misma referencia de 62px que ya usa el cronómetro de descanso) — así
   se ve siempre, sin scroll, igual que el propio menú. */
    .pie.fija {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(62px + env(safe-area-inset-bottom));
        z-index: 45;
        margin-top: 0;
        background: var(--concrete);
        padding: 8px 14px;
        border-top: 1px solid var(--line);
    }

.wrap.con-pie-fijo {
    padding-bottom: 56px
}

/* ---------- técnica inline (sin salir de la app) ---------- */
.tecnica-inline {
    display: flex;
    gap: 6px;
    margin: 8px 0 2px;
    flex-wrap: wrap
}

    .tecnica-inline img {
        width: 100px;
        height: 100px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid var(--line);
        background: var(--concrete);
    }

/* ---------- lista de compras ---------- */
.lista-compras {
    margin: 0;
    padding-left: 20px
}

    .lista-compras li {
        font-size: 13.5px;
        line-height: 1.9;
        color: var(--ink)
    }

/* ---------- ajuste calórico por tendencia ---------- */
.tag-aumentar {
    background: #E9F5EC;
    color: #1E7B34;
    border-color: #BEE3C6
}

.tag-reducir {
    background: #FCEBEA;
    color: #B3261E;
    border-color: #F3C6C3
}

.tag-mantener {
    background: #EEF1F4;
    color: #4A5568;
    border-color: var(--line)
}

/* ---------- fila de acciones de usuario (AdminUsuarios) ---------- */
/* .ex-h ya trae su propio padding lateral; esta fila quedó fuera de ese
   contenedor a propósito (para poder bajar de línea en celular), así que
   necesita el mismo padding repetido, más un poco abajo para respirar. */
.acciones-usuario {
    padding: 0 15px 12px
}

/* Entrenadores, planes manuales y agenda */
.tabla-scroll { overflow-x: auto; }
.datos-tabla { width:100%; border-collapse:collapse; margin:12px 0; text-align:left; }
.datos-tabla th,.datos-tabla td { padding:12px 8px; border-bottom:1px solid var(--line, #ddd); vertical-align:top; }
.datos-tabla .btn { margin:3px; }
.manual-campos { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:12px; }
.manual-campos input { width:100%; box-sizing:border-box; }
.manual-ejercicio { padding:14px 0; border-bottom:1px solid var(--line,#ddd); margin-bottom:12px; }
.campo select,.campo textarea { width:100%; padding:10px; box-sizing:border-box; font:inherit; }
.campo textarea { min-height:80px; }
.usuario-chip { flex-wrap:wrap; }
.nav .wrap { overflow-x:auto; }

/* El descanso permanece encima del menú, incluso cuando ocupa varias filas. */
.timer { bottom: calc(var(--placa-nav-height, 62px) + 10px); transform: none; box-shadow: 0 4px 24px #0006; border-radius: 12px; overflow: hidden; }
.timer .wrap { flex-wrap: nowrap; }
.timer-tiempo { flex: 1; min-width: 90px; }
.timer .t { font-size: 30px; line-height: 1.2; white-space: nowrap; }
.timer .fill { pointer-events: none; }
@media (max-width:719px) { .timer { left: 8px; right: 8px; } }

.agenda-toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.agenda-scroll { overflow-x:auto; margin:20px 0; }
.agenda-semana { display:grid; grid-template-columns:repeat(7,minmax(140px,1fr)); min-width:980px; gap:8px; }
.agenda-dia { padding:10px; border:1px solid var(--line,#39414c); border-radius:12px; min-height:230px; }
.agenda-hoy { border-color:var(--p-yellow,#dfa619); }
.agenda-cabecera { display:flex; flex-direction:column; gap:4px; width:100%; color:inherit; background:transparent; border:0; padding:8px; text-align:left; }
.agenda-evento { display:flex; flex-direction:column; gap:5px; width:100%; border:0; border-left:4px solid #557fdb; border-radius:6px; padding:10px; margin:10px 0; text-align:left; color:#fff; background:#23334d; overflow-wrap:anywhere; }
.agenda-evento.disponible { background:#183c30; border-color:#62c296; }
.agenda-evento.bloqueada { background:#49292e; border-color:#e17c7c; }
.agenda-evento.pendiente { background:#45391e; border-color:#edc75d; }
.agenda-vacio { font-size:12px; color:#a1a9b4; padding:8px; }
.agenda-detalle { border-bottom:1px solid #46505c; padding:15px 0; }
.texto-notas { white-space:pre-wrap; }

/* Calendario: mes con casillas; semana y día con una escala de media hora. */
.wrap.agenda-wrap{max-width:1440px}.usuarios-icono{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.calendario{background:#fff;color:#202124;border:1px solid #dadce0;border-radius:16px;overflow:hidden;margin-bottom:24px}.cal-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:18px}.cal-toolbar h2{font-size:22px;font-weight:500;margin:0 auto 0 10px;text-transform:capitalize}.cal-toolbar select,.cal-toolbar input{width:auto;background:white;color:#202124;border:1px solid #dadce0;border-radius:8px;padding:9px}.cal-btn{border:1px solid #dadce0;border-radius:8px;padding:8px 14px;background:white;color:#202124;font-size:16px;cursor:pointer}.cal-btn:hover{background:#f1f3f4}.cal-leyenda{font-size:12px;color:#5f6368;padding:0 18px 12px;margin:0}.cal-leyenda .libre{color:#137333}.cal-leyenda .ocupado{color:#b3261e}.cal-leyenda .pendiente{color:#946200}.cal-leyenda .confirmado{color:#1967d2}.cal-cargando{padding:16px}.cal-mes{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}.cal-nombre{text-align:center;font-size:12px;padding:10px;border-bottom:1px solid #dadce0;color:#5f6368}.cal-celda{position:relative;min-height:130px;padding:6px;border-right:1px solid #dadce0;border-bottom:1px solid #dadce0}.cal-celda.otro-mes{background:#f7f8fa;color:#92979c}.cal-numero{display:block;margin:0 auto 6px;border:0;border-radius:50%;background:transparent;color:inherit;width:28px;height:28px;cursor:pointer}.hoy{background:#1a73e8!important;color:white!important;border-radius:50%}.cal-evento{display:block;width:100%;text-align:left;font-size:11px;border:0;border-radius:5px;padding:4px 6px;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.cal-agregar{border:0;border-radius:50%;background:#f1f3f4;color:#5f6368;width:24px;height:24px;cursor:pointer}.cal-scroll{overflow:auto;max-height:650px}.cal-horaria{display:grid;grid-template-columns:60px repeat(var(--dias),minmax(115px,1fr));min-width:870px}.cal-horaria.un-dia{min-width:0;grid-template-columns:60px minmax(180px,1fr)}.cal-corner,.cal-dia-titulo{position:sticky;top:0;z-index:3;background:white;border:0;border-bottom:1px solid #dadce0;padding:8px;color:#5f6368;font-size:12px;text-align:center}.cal-dia-titulo{cursor:pointer}.cal-dia-titulo b{display:block;font-size:24px;font-weight:500;width:38px;line-height:38px;margin:auto}.cal-horas{position:relative;height:1440px;font-size:10px;color:#5f6368}.cal-horas span{position:absolute;right:8px}.cal-columna{position:relative;height:1440px;border-left:1px solid #dadce0}.cal-tramo{position:absolute;left:0;width:100%;height:30px;border:0;border-bottom:1px solid #eef0f2;background:white;cursor:pointer;padding:0}.cal-tramo:nth-child(even){border-bottom-color:#dadce0}.cal-tramo:hover{background:#e8f0fe}.cal-bloque{position:absolute;left:2px;right:3px;border:1px solid white;border-radius:6px;z-index:1;text-align:left;overflow:hidden;padding:3px 6px;cursor:pointer;font-size:12px;display:flex;flex-direction:column;gap:2px}.cal-bloque span,.cal-bloque small{font-size:10px}.cal-bloque.disponible,.cal-evento.disponible{background:#ceead6;color:#0d572a}.cal-bloque.bloqueada,.cal-evento.bloqueada{background:#fce8e6;color:#a50e0e}.cal-bloque.pendiente,.cal-evento.pendiente{background:#feefc3;color:#775000}.cal-bloque.confirmada,.cal-evento.confirmada{background:#d2e3fc;color:#174ea6}
@media(max-width:650px){.cal-toolbar{padding:10px;gap:5px}.cal-toolbar h2{font-size:17px}.cal-toolbar select,.cal-toolbar input{padding:6px;font-size:12px}.cal-celda{padding:3px;min-height:100px}.cal-evento{font-size:10px;padding:3px}.cal-leyenda{font-size:10px;padding:0 10px 10px}.cal-numero{width:24px;height:24px}.nav .wrap{overflow-x:auto;justify-content:flex-start}.nav a{min-width:65px;flex:1 0 auto}}

/* Diálogos y bandeja de notificaciones */
.placa-modal{position:fixed;inset:0;margin:auto;border:1px solid #dce2eb;border-radius:24px;padding:32px;width:min(480px,calc(100% - 32px));max-height:85dvh;overflow:auto;box-shadow:0 24px 90px #16233b45;background:#fff;color:#182438;text-align:center;font:inherit}.placa-modal::backdrop{background:#15223970;backdrop-filter:blur(5px)}.placa-modal h2{margin:16px 0 12px;font-size:24px}.placa-modal p{line-height:1.65}.placa-modal .campo{text-align:left}.modal-insignia{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;margin:auto;font-size:32px;font-weight:700}.modal-insignia.exito{background:#dff4e9;color:#17845b}.modal-insignia.error{background:#fff0dc;color:#a46011}.placa-modal .btn{margin-top:12px}.campana{position:relative;background:transparent;border:0;padding:8px;color:inherit;cursor:pointer}.campana svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}.campana .contador{position:absolute;right:0;top:0;background:#d63747;color:#fff;border-radius:20px;min-width:18px;padding:2px;font-size:10px}.notificaciones-modal{text-align:left;width:min(620px,calc(100% - 32px))}.notificacion{padding:16px 0;border-bottom:1px solid #e5eaf0}.notificacion.no-leida{border-left:3px solid #b88720;padding-left:12px}.notificacion p{margin:8px 0}.notificacion small{color:#6b7484}.modal-acciones{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* Cuenta: nombre encima de una fila compacta de acciones. */
.top .usuario-chip{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;flex-wrap:nowrap;gap:5px;margin-left:auto;min-width:0;max-width:60%;padding:4px 0;align-self:center}
.usuario-nombre{font-size:12px;font-weight:600;line-height:1.35;color:#f1f3f6;max-width:100%;overflow-wrap:anywhere;text-align:right}
.usuario-acciones{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:nowrap}
.usuario-acciones .campana,.usuario-salir{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:5px 9px;border:1px solid #ffffff35;border-radius:8px;background:#ffffff08;color:#f1f3f6;cursor:pointer;font:inherit;font-size:12px;line-height:1;text-decoration:none}
.usuario-acciones .campana:hover,.usuario-salir:hover{background:#ffffff20;border-color:#ffffff70}
.usuario-acciones .campana:focus-visible,.usuario-salir:focus-visible{outline:2px solid var(--p-yellow);outline-offset:3px}
.usuario-acciones .campana svg,.usuario-salir svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.usuario-acciones .campana .contador{right:-5px;top:-6px}
.top .wrap{height:auto;min-height:72px;padding-top:8px;padding-bottom:8px}

.comida-editor,.comida-asignada{border:1px solid var(--line);border-radius:12px;padding:18px;margin:16px 0;background:#faf9f6}.comida-editor .row{align-items:end}.alimento-editor{display:grid;grid-template-columns:2fr 1fr 1fr 2fr auto;gap:10px;align-items:end;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.alimento-editor .campo{min-width:0}.alimento-editor .btn{margin-bottom:16px}.comida-asignada h3{margin-bottom:12px}.cal-tramo:disabled{background:#e6e8ec77;cursor:not-allowed}.cal-evento:disabled,.cal-bloque:disabled{opacity:.55;cursor:not-allowed}@media(max-width:700px){.alimento-editor{grid-template-columns:1fr 1fr}.alimento-editor .campo:first-child,.alimento-editor .campo:nth-child(4){grid-column:1/-1}}

.contador-modal{width:min(500px,calc(100% - 28px))}.contador-modal h2{font-size:22px;line-height:1.3}.contador-tiempo{font-size:clamp(58px,14vw,90px);line-height:1.2;font-weight:700;color:var(--p-blue);margin:24px 0 14px;font-variant-numeric:tabular-nums}.contador-progreso{width:100%;height:10px;accent-color:var(--p-blue)}.serie-inicio{display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border:1px solid var(--p-blue);color:var(--p-blue);background:#eaf1ff;border-radius:8px;min-height:40px;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer}.serie-inicio:disabled{opacity:.4;cursor:default}.setrow{flex-wrap:wrap}.media-modal{width:min(860px,calc(100% - 24px))}.media-imagenes{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}.media-imagenes img{max-width:100%;max-height:55dvh;object-fit:contain;margin:auto;border-radius:12px}.media-video{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;margin:16px 0}.media-modal h2{line-height:1.2}.media-modal .campo{margin-top:16px}

.pwa-aviso{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;padding-bottom:12px;font-size:12px}.pwa-pasos{text-align:left;line-height:1.8;padding-left:22px}.pwa-logo{border-radius:16px}.top{padding-top:env(safe-area-inset-top,0px)}.nav{padding-bottom:env(safe-area-inset-bottom,0px)}body{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))}@media(display-mode:standalone){body{overscroll-behavior-y:contain}}

.serie-duracion{display:flex;align-items:center;gap:6px;font-size:12px}.serie-duracion input{width:70px}.setrow{flex-wrap:wrap}

/* Acciones por usuario: botón compacto y panel fuera del recorte de la tarjeta. */
.menu-usuario { position:relative; flex:none; margin-left:auto; }
.menu-usuario-boton { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); cursor:pointer; list-style:none; }
.menu-usuario-boton::-webkit-details-marker { display:none; }
.menu-usuario-boton svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.menu-usuario-boton:hover, .menu-usuario[open] .menu-usuario-boton { background:var(--concrete); border-color:var(--p-blue); color:var(--p-blue); }
.menu-usuario-boton:focus-visible, .menu-usuario-accion:focus-visible { outline:2px solid var(--p-blue); outline-offset:2px; }
.menu-usuario-panel { position:fixed; z-index:1500; width:min(290px,calc(100vw - 24px)); padding:8px; border:1px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 12px 36px rgba(18,22,27,.22); overflow-y:auto; overscroll-behavior:contain; }
.menu-usuario:not([open]) .menu-usuario-panel { display:none; }
.menu-usuario-titulo { padding:8px 10px 10px; font-size:13px; font-weight:700; color:var(--muted); overflow-wrap:anywhere; }
.menu-usuario-accion { display:flex; align-items:center; gap:11px; width:100%; min-height:42px; padding:10px; border:0; border-radius:7px; background:transparent; color:var(--ink); font:inherit; font-size:14px; text-decoration:none; text-align:left; cursor:pointer; }
.menu-usuario-accion:hover { background:var(--concrete); text-decoration:none; }
.menu-usuario-accion:disabled { opacity:.5; cursor:wait; }
.icono-accion { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.menu-usuario-peligro { color:#c92b35; }
.menu-usuario-peligro:hover { background:#fff0f1; }
.menu-usuario-separador { margin:6px 8px; border-top:1px solid var(--line); }
.menu-usuario-nota { padding:10px; font-size:12px; color:var(--muted); }
.usuarios-admin .ex-h > .ex-t .pr { display:block; overflow-wrap:anywhere; }