/* ELCROSSAPP — panel más limpio (AdminLTE, mismo sistema) */
:root {
    --ec-bg: #0f1419;
    --ec-bg-2: #141b22;
    --ec-card: #1a222d;
    --ec-card-soft: #1e2733;
    --ec-card-grad: linear-gradient(165deg, #232830 0%, #1a1f26 55%, #151a20 100%);
    --ec-card-grad-soft: linear-gradient(165deg, #262c35 0%, #1c222b 60%, #171c24 100%);
    --ec-line: rgba(255, 255, 255, 0.08);
    --ec-line-soft: rgba(255, 255, 255, 0.05);
    --ec-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    --ec-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.22);
    --ec-txt: #eef1f5;
    --ec-muted: #9aa3b2;
    --ec-naranja: #ff7700;
    --ec-on-naranja: #111111;
    --ec-naranja-dim: rgba(255, 119, 0, .18);
    --ec-naranja-wash: rgba(255, 119, 0, .10);
    --ec-side: #0c1116;
    --ec-ok: #34d399;
    --ec-bad: #f87171;
    --ec-radius: 16px;
    --ec-font: "Plus Jakarta Sans", system-ui, sans-serif;
    --ec-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
}

body.dark-mode,
body.elcross-app,
body.login-page,
body.register-page {
    font-family: var(--ec-font) !important;
}

body.dark-mode,
body.elcross-app,
.content-wrapper,
.main-footer {
    background-color: var(--ec-bg) !important;
    color: var(--ec-txt);
}

.content-wrapper {
    padding: 16px 16px 32px !important;
    background-color: var(--ec-bg) !important;
    background-image:
        radial-gradient(900px 420px at 100% -8%, var(--ec-naranja-wash), transparent 60%),
        linear-gradient(180deg, #121820 0%, var(--ec-bg) 40%, #0d1218 100%) !important;
}

.content-header {
    padding: 14px 0 12px !important;
}
.content-header h1,
.content-header h1.text-warning,
.content-header .h1,
.content-header .h3,
.ec-page-title,
h1.ec-page-title,
h2.ec-page-title {
    font-family: var(--ec-font-display) !important;
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.035em;
    line-height: 1.15;
}
.content-header h1,
.content-header h1.text-warning,
.content-header .h1,
.content-header .h3 {
    font-family: var(--ec-font-display) !important;
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.035em;
}

/* Subtítulo debajo del título: chico, quieto, una línea */
.ec-page-lead {
    font-family: var(--ec-font) !important;
    color: #9ca3af !important;
    font-size: .82rem !important;
    font-weight: 500 !important;
    line-height: 1.35;
    margin: .25rem 0 0 !important;
    max-width: 36rem;
    letter-spacing: 0;
}
.ec-section-title {
    font-family: var(--ec-font-display) !important;
    color: #fff !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
    margin: 0 !important;
}
.ec-section-meta {
    font-family: var(--ec-font) !important;
    color: #9ca3af !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    margin-top: .2rem !important;
    letter-spacing: 0;
}
.ec-hint {
    font-family: var(--ec-font) !important;
    color: #9ca3af !important;
    font-size: .78rem !important;
    font-weight: 500 !important;
    line-height: 1.35;
    margin-bottom: .75rem !important;
}

/* Cards de ficha: tono suave del color del box */
.ec-card-box {
    background:
        linear-gradient(165deg, var(--ec-naranja-wash, rgba(255,119,0,.10)) 0%, transparent 42%),
        var(--ec-card-grad-soft, #1c222b) !important;
    border: 1px solid color-mix(in srgb, var(--ec-naranja, #ff7700) 22%, rgba(255,255,255,.08)) !important;
    border-radius: var(--ec-radius, 16px) !important;
    overflow: hidden;
    box-shadow: var(--ec-shadow-soft, 0 4px 16px rgba(0,0,0,.22)) !important;
}
.ec-card-box__head {
    background: transparent !important;
    border-bottom: 1px solid color-mix(in srgb, var(--ec-naranja, #ff7700) 18%, rgba(255,255,255,.06)) !important;
    box-shadow: inset 3px 0 0 var(--ec-naranja, #ff7700);
    padding: .9rem 1.1rem;
}
.ec-card-box .card-body {
    background: transparent !important;
}
.ec-card-box .list-group-item {
    background: transparent !important;
}
.brand-text,
.brand-link .brand-text,
.ec-box-splash__nombre,
.ec-login-brand__nombre,
.card-title,
.modal-title {
    font-family: var(--ec-font-display) !important;
    letter-spacing: -0.02em;
}
.ec-kpi b,
.ec-mcard__title {
    font-family: var(--ec-font-display) !important;
    letter-spacing: -0.02em;
}
.ec-alumno-card__nombre {
    font-family: var(--ec-font-display) !important;
    font-size: 1.02rem;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: -0.025em;
    line-height: 1.25;
}
.ec-alumno-card__meta {
    font-family: var(--ec-font) !important;
    font-size: .78rem;
    font-weight: 500;
    color: var(--ec-muted, #9aa3b2) !important;
    line-height: 1.35;
    margin-top: 2px;
}
.nav-sidebar .nav-header {
    font-family: var(--ec-font) !important;
}
/* Títulos de pantalla: blanco sólido; el acento queda solo en íconos / detalles */
.content-header h1 .text-warning,
.content-header h2 .text-warning,
.ec-page-title .text-warning,
h2.ec-page-title .text-warning,
h1.text-warning.text-uppercase,
h2.text-warning.text-uppercase {
    color: #ffffff !important;
}
.content-header h1 > i.text-warning,
.content-header h2 > i.text-warning,
.ec-page-title > i.text-warning,
h2.ec-page-title > i.text-warning {
    color: var(--ec-naranja) !important;
}

.main-header.navbar,
.main-header.navbar-dark {
    background: var(--ec-bg-2) !important;
    border-bottom: 2px solid var(--ec-naranja) !important;
}

.main-sidebar,
.main-sidebar .brand-link,
.sidebar {
    background: var(--ec-side) !important;
    border-right: 1px solid var(--ec-line);
}
.main-sidebar {
    box-shadow: inset 3px 0 0 var(--ec-naranja);
}

.brand-link {
    border-bottom: 2px solid var(--ec-naranja) !important;
}
.brand-link .brand-image {
    opacity: 1 !important;
    box-shadow: none !important;
}

/* Logo del box en sidebar: sin recorte circular ni fondo forzado */
.ec-sidebar-brand-logo {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 15px;
    padding: 0;
    object-fit: contain;
    object-position: center;
    background: transparent;
    border: none;
    border-radius: 0;
    box-sizing: border-box;
}
.ec-sidebar-brand-logo--sm {
    width: 33px;
    height: 33px;
    margin: 0 0.5rem 0 0;
    padding: 0;
}
.brand-text,
.brand-link {
    color: #fff !important;
    font-weight: 800 !important;
}

/* Paginación oscura (Bootstrap) — evita el template Tailwind roto sin estilos */
.ec-alumnos-pager {
    padding-top: 14px;
    padding-bottom: 14px;
}
.ec-alumnos-pager-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}
.ec-alumnos-pager__label {
    color: #9ca3af;
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ec-alumnos-pager__info {
    flex: 0 0 100%;
    text-align: center;
    color: #6b7280 !important;
}
@media (min-width: 768px) {
    .ec-alumnos-pager__info {
        flex: 0 0 auto;
        text-align: left;
    }
}
.ec-alumnos-pager .pagination {
    margin-bottom: 0;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.ec-alumnos-pager .page-link {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #e5e7eb;
    min-width: 38px;
    text-align: center;
    border-radius: 8px !important;
    margin-left: 0;
}
.ec-alumnos-pager .page-item.active .page-link {
    background: var(--ec-naranja, #ff7700);
    border-color: var(--ec-naranja, #ff7700);
    color: var(--ec-on-naranja, #111);
    font-weight: 800;
}
.ec-alumnos-pager .page-item.disabled .page-link {
    background: transparent;
    border-color: rgba(255, 255, 255, .06);
    color: #6b7280;
}
.ec-alumnos-pager .page-link:hover {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.nav-sidebar .nav-header {
    color: var(--ec-naranja) !important;
    font-size: .7rem !important;
    letter-spacing: .08em;
    padding: .85rem 16px .35rem !important;
}
.nav-sidebar .nav-link {
    color: #c5ccd6 !important;
    border-radius: 10px !important;
    margin: 3px 8px !important;
    padding: .55rem 1rem !important;
}
.sidebar > nav {
    padding-top: .55rem !important;
    padding-bottom: .75rem !important;
}
.nav-sidebar .nav-link:hover {
    background: rgba(255,255,255,.04) !important;
    color: #fff !important;
}
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-item > .nav-link.active {
    background: var(--ec-naranja-dim) !important;
    color: var(--ec-naranja) !important;
    font-weight: 700;
}
.nav-sidebar .nav-link.active .nav-icon,
.nav-sidebar .nav-link:hover .nav-icon {
    color: var(--ec-naranja) !important;
}

.card,
.card.bg-dark,
.card.card-outline {
    background: var(--ec-card-grad) !important;
    border: 1px solid var(--ec-line) !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: var(--ec-shadow) !important;
}
.card.border-secondary,
.card.border-0,
.modal-content.border-secondary {
    border: 1px solid var(--ec-line) !important;
}
.modal-content {
    background: var(--ec-card-grad) !important;
    border: 1px solid var(--ec-line) !important;
    box-shadow: var(--ec-shadow) !important;
}
.card-header,
.card-header.border-secondary,
.card-footer.border-secondary,
.modal-header.border-secondary,
.modal-footer.border-secondary {
    background: transparent !important;
    border-bottom: 1px solid var(--ec-line-soft) !important;
    border-top: 0 !important;
    color: var(--ec-txt) !important;
    padding: 1rem 1.15rem !important;
}
.card-footer,
.card-footer.border-secondary {
    border-top: 1px solid var(--ec-line-soft) !important;
    border-bottom: 0 !important;
}
.card-body {
    padding: 1.15rem 1.2rem !important;
}
.card-title,
.card-header .card-title {
    color: #ffffff !important;
    font-weight: 700;
}
.text-warning,
.text-orange {
    color: var(--ec-naranja) !important;
}

/*
 * Titulo de un campo de formulario. Va en gris claro a proposito: si usa el color del
 * box compite con los botones y los datos importantes, que son los que tienen que
 * llamar la atencion primero.
 */
.ec-label {
    color: rgba(255, 255, 255, .72) !important;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .2px;
    margin-bottom: .35rem;
}
.card-header .card-title.text-warning,
.card-title.text-warning,
.card-header h5.text-warning,
.card-header .text-warning {
    color: #ffffff !important;
    font-weight: 700;
}
.card-header h5.text-warning > i.text-warning,
.card-header .card-title > i.text-warning {
    color: var(--ec-naranja) !important;
}
.card-orange.card-outline,
.card-outline.card-orange,
.border-warning {
    border-color: var(--ec-line) !important;
}
.card-orange.card-outline {
    border-top: 0 !important;
    box-shadow: var(--ec-shadow), inset 3px 0 0 var(--ec-naranja) !important;
}

.small-box {
    background: var(--ec-card-grad-soft) !important;
    color: var(--ec-txt) !important;
    border: 1px solid var(--ec-line) !important;
    border-radius: var(--ec-radius) !important;
    box-shadow: var(--ec-shadow-soft) !important;
    margin-bottom: 0 !important;
}
.small-box .inner h3 {
    font-weight: 800;
    font-size: 1.85rem;
    color: var(--ec-naranja) !important;
}
.small-box .inner p {
    color: var(--ec-muted) !important;
    font-size: .9rem;
}
.small-box .icon {
    opacity: .07 !important;
    color: #fff !important;
}
.small-box.bg-info .inner h3,
.small-box.bg-primary .inner h3 { color: var(--ec-naranja) !important; }
.small-box.bg-success .inner h3 { color: var(--ec-ok) !important; }
.small-box.bg-danger .inner h3 { color: var(--ec-bad) !important; }
.small-box.bg-warning .inner h3 { color: var(--ec-naranja) !important; }

.ec-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 28px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.ec-kpi {
    background: var(--ec-card-grad-soft);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    padding: 20px 16px;
    text-align: center;
    box-shadow: var(--ec-shadow-soft);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.ec-kpi b {
    display: block;
    font-size: 1.8rem;
    line-height: 1.15;
    color: var(--ec-naranja);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.ec-kpi b.ec-kpi__money {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.ec-kpi span { color: var(--ec-muted); font-size: .9rem; }
.ec-kpi.is-ok b { color: var(--ec-ok); }
.ec-kpi.is-bad b { color: var(--ec-bad); }
@media (max-width: 575.98px) {
    .ec-kpis { gap: 6px; margin-bottom: 18px; }
    .ec-kpi { padding: 12px 6px; }
    .ec-kpi b { font-size: clamp(.72rem, 3.6vw, 1rem); }
    .ec-kpi b.ec-kpi__money { font-size: clamp(.68rem, 3.4vw, .92rem); }
    .ec-kpi span { font-size: .62rem; line-height: 1.15; }
}

/* Aire en pantallas densas (Caja, Alumnos, listados) */
.elcross-app .container-fluid {
    padding-left: 16px;
    padding-right: 16px;
}
@media (min-width: 768px) {
    .elcross-app .container-fluid {
        padding-left: 22px;
        padding-right: 22px;
    }
}
.elcross-app .card + .card,
.elcross-app .ec-kpis + .card,
.elcross-app .alert + .card {
    margin-top: 4px;
}
.elcross-app .card.mb-4 { margin-bottom: 1.5rem !important; }
.elcross-app .card-header {
    padding: 1rem 1.15rem;
}
.elcross-app .card-body {
    padding: 1.15rem 1.15rem;
}
.elcross-app .form-group {
    margin-bottom: 1.15rem;
}
.elcross-app .form-group label {
    margin-bottom: .4rem;
}
.elcross-app .table td,
.elcross-app .table-dark td,
.elcross-app .table-dark th {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.elcross-app .select2-results__option {
    padding: 10px 14px !important;
}
.elcross-app .select2-container--default .select2-selection--single {
    height: 44px !important;
}
.elcross-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
    padding-left: 14px !important;
}
.elcross-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
}
.elcross-app select.form-control {
    padding-top: .65rem;
    padding-bottom: .65rem;
}

.table,
.table-dark {
    background: transparent !important;
    color: var(--ec-txt) !important;
}
.table thead th,
.table-dark thead th {
    border-bottom: 1px solid var(--ec-line-soft) !important;
    border-top: 0 !important;
    color: var(--ec-muted) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: .04em;
    background: transparent !important;
}
.table td,
.table-dark td,
.table-dark th {
    border-color: var(--ec-line-soft) !important;
    background: transparent !important;
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
}
.table-hover tbody tr:hover,
.table-dark.table-hover tbody tr:hover {
    background: rgba(255,255,255,.03) !important;
}
.table-striped tbody tr:nth-of-type(odd),
.table-dark.table-striped tbody tr:nth-of-type(odd) {
    background: transparent !important;
}

.badge-success { background: rgba(52, 211, 153, .18) !important; color: var(--ec-ok) !important; }
.badge-danger { background: rgba(248, 113, 113, .18) !important; color: var(--ec-bad) !important; }
.badge-warning { background: var(--ec-naranja-dim) !important; color: var(--ec-naranja) !important; }
.badge-info { background: rgba(96, 165, 250, .16) !important; color: #93c5fd !important; }
.badge-secondary { background: #2a3444 !important; color: #cbd5e1 !important; }

.btn-warning,
.btn-orange,
.btn-outline-orange,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.dark-mode .btn-warning,
.dark-mode .btn-warning:hover,
.dark-mode .btn-warning:focus,
.dark-mode .btn-warning:not(:disabled):not(.disabled).active,
.dark-mode .btn-warning.active,
.show > .dark-mode .btn-warning.dropdown-toggle {
    background: var(--ec-naranja) !important;
    border-color: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.btn-outline-orange {
    background: transparent !important;
    color: var(--ec-naranja) !important;
}
.dark-mode .btn-warning.text-dark,
.dark-mode .btn-warning .text-dark {
    color: var(--ec-on-naranja, #111) !important;
}
.btn-outline-orange {
    background: transparent !important;
    color: var(--ec-naranja) !important;
}
.btn-outline-orange:hover {
    background: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
}
.btn-primary {
    background: var(--ec-naranja) !important;
    border-color: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
    font-weight: 700 !important;
}

/* Pestañas de días: si el acento es amarillo, letra negra (AdminLTE dark las pone grises/blancas). */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.dark-mode .nav-pills .nav-link.active,
.dark-mode .nav-pills .show > .nav-link,
.dark-mode .nav-pills .nav-link.btn-warning.active {
    background-color: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
}
.nav-pills .nav-link.active *,
.nav-pills .show > .nav-link *,
.dark-mode .nav-pills .nav-link.active *,
.dark-mode .nav-pills .show > .nav-link * {
    color: inherit !important;
}
.nav-pills .nav-link.active .text-dark,
.nav-pills .nav-link.active .text-muted,
.nav-pills .nav-link.active small,
.nav-pills .nav-link.active span,
.dark-mode .nav-pills .nav-link.active .text-dark,
.dark-mode .nav-pills .nav-link.active .text-muted,
.dark-mode .nav-pills .nav-link.active small,
.dark-mode .nav-pills .nav-link.active span,
.dark-mode .nav-pills .nav-link.active.text-dark {
    color: inherit !important;
}
.btn-secondary,
.btn-default {
    background: #1f2937 !important;
    border-color: var(--ec-line) !important;
    color: #fff !important;
}

/* —— Ritmo único de botones (Caja, Alumnos, modales) —— */
.elcross-app .btn {
    border-radius: 10px !important;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.2;
    min-height: 42px;
    padding: .55rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
}
.elcross-app .btn.btn-sm {
    min-height: 36px;
    padding: .4rem .75rem;
    font-size: .82rem;
    font-weight: 700;
}
.elcross-app .btn.btn-lg {
    min-height: 48px;
    padding: .7rem 1.2rem;
}
.elcross-app .btn-outline-secondary,
.elcross-app .btn-outline-light,
.elcross-app .btn-outline-warning,
.elcross-app .btn-outline-danger,
.elcross-app .btn-outline-info,
.elcross-app .btn-outline-success {
    border-width: 1px;
    background: transparent !important;
}
.elcross-app .btn-outline-secondary {
    border-color: rgba(255,255,255,.18) !important;
    color: #e5e7eb !important;
}
.elcross-app .btn-outline-secondary:hover {
    background: rgba(255,255,255,.06) !important;
    border-color: rgba(255,255,255,.28) !important;
    color: #fff !important;
}
.elcross-app .btn-outline-light {
    border-color: rgba(255,255,255,.22) !important;
    color: #f3f4f6 !important;
}
.elcross-app .btn-outline-light:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
.elcross-app .btn-outline-warning {
    border-color: var(--ec-naranja) !important;
    color: var(--ec-naranja) !important;
}
.elcross-app .btn-outline-warning:hover {
    background: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
}
.elcross-app .btn-success,
.elcross-app .btn-info {
    font-weight: 700 !important;
    border-radius: 10px !important;
}

/* Grupos de acciones: mismo gap en cards, footers y modales */
.elcross-app .card-footer {
    padding: .9rem 1.15rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.elcross-app .card-footer.text-right {
    justify-content: flex-end;
}
.elcross-app .modal-footer {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    padding: .85rem 1rem;
}
.elcross-app .modal-footer .btn {
    margin: 0;
}
.elcross-app .ec-mcard__actions {
    justify-content: flex-start;
}
.elcross-app .ec-mcard__actions .ec-acciones {
    width: 100%;
}
.elcross-app .ec-acciones.justify-content-end {
    justify-content: flex-end;
}
.elcross-app .ec-acciones .ec-icon-btn {
    /* same size as alumnos: override .btn flex rules if any */
    flex: 0 0 36px;
}

.btn-danger.btn-sm {
    border-radius: 10px;
}
.main-header .btn-danger.btn-sm {
    background: transparent !important;
    border: 1px solid var(--ec-line) !important;
    color: #e5e7eb !important;
    font-weight: 600;
}
.main-header .btn-danger.btn-sm:hover {
    border-color: var(--ec-bad) !important;
    color: var(--ec-bad) !important;
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.form-control.bg-black,
.form-control.border-secondary {
    background: #0c1116 !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    color: #fff !important;
    border-radius: 12px !important;
    min-height: 44px;
    padding: .65rem .9rem !important;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--ec-naranja) !important;
    box-shadow: 0 0 0 3px var(--ec-naranja-dim) !important;
}
.input-group-text {
    background: #0c1116 !important;
    border-color: var(--ec-line) !important;
    color: var(--ec-muted) !important;
}

.list-group-item {
    background: transparent !important;
    border-color: var(--ec-line-soft) !important;
    color: var(--ec-txt) !important;
    padding: .9rem 1rem !important;
}

.alert {
    border-radius: 14px !important;
    border: 1px solid var(--ec-line) !important;
    box-shadow: var(--ec-shadow-soft) !important;
}
.alert-danger {
    background: linear-gradient(165deg, rgba(248, 113, 113, .22) 0%, rgba(248, 113, 113, .10) 100%) !important;
    color: #fecaca !important;
    border-color: rgba(248, 113, 113, .22) !important;
}
.alert-success {
    background: linear-gradient(165deg, rgba(52, 211, 153, .22) 0%, rgba(52, 211, 153, .10) 100%) !important;
    color: #a7f3d0 !important;
    border-color: rgba(52, 211, 153, .22) !important;
}
.alert-warning {
    background: linear-gradient(165deg, rgba(255, 119, 0, .22) 0%, rgba(255, 119, 0, .08) 100%) !important;
    color: #ffd8b0 !important;
    border-color: rgba(255, 119, 0, .22) !important;
}
.alert-info {
    background: linear-gradient(165deg, rgba(96, 165, 250, .20) 0%, rgba(96, 165, 250, .08) 100%) !important;
    color: #bfdbfe !important;
    border-color: rgba(96, 165, 250, .20) !important;
}

.dropdown-menu {
    background: var(--ec-card) !important;
    border: 1px solid var(--ec-line) !important;
    color: var(--ec-txt) !important;
}
.dropdown-item { color: var(--ec-txt) !important; }
.dropdown-item:hover { background: rgba(255,255,255,.05) !important; }

.login-page,
.register-page {
    background: var(--ec-bg) !important;
}
.login-box .card,
.login-card-body,
.register-card-body {
    background: var(--ec-card) !important;
    border: 1px solid var(--ec-line) !important;
    border-radius: var(--ec-radius) !important;
}

.info-box {
    background: var(--ec-card) !important;
    color: var(--ec-txt) !important;
    border: 1px solid var(--ec-line) !important;
    box-shadow: none !important;
    border-radius: var(--ec-radius) !important;
}

/* Campanita: más grande, naranja fijo, número que se ve */
#navCampanita .campanita-toggle {
    position: relative;
    padding-right: 1.15rem !important;
}
#navCampanita .campanita-icon {
    color: #ff7700 !important;
    font-size: 1.45rem;
    line-height: 1;
}
.campanita-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 2;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 5px;
    border-radius: 999px;
    background: #ef4444 !important;
    color: #fff !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    line-height: 1.15rem;
    text-align: center;
    box-shadow: 0 0 0 2px #141b22;
}
.campanita-badge.is-on {
    animation: campanitaPulse 1.7s ease-in-out infinite;
}
.campanita-item {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    white-space: normal;
    cursor: pointer;
}
.campanita-link {
    color: inherit;
    display: block;
    min-width: 0;
}
.campanita-link:hover .dropdown-item-title {
    text-decoration: underline;
}
.campanita-leida {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: #22c55e;
    color: #052e16;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.campanita-leida:hover,
.campanita-leida:focus {
    background: #16a34a;
    color: #052e16;
    outline: none;
}
.campanita-leida.is-done {
    background: transparent;
    color: #6b7280;
    cursor: default;
}
@keyframes campanitaPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* Formulario turnos (alta/edición) — contraste legible en celu */
.ec-turno-form .ec-turno-label {
    display: block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fbbf24 !important;
    margin-bottom: 6px;
}
.ec-turno-input,
.ec-turno-form select.ec-turno-input,
.ec-turno-form .ec-hora-picker__part {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    background: #2a3444 !important;
    border: 1px solid #4b5563 !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}
.ec-turno-input::placeholder {
    color: #b8c0cc !important;
    opacity: 1;
    -webkit-text-fill-color: #b8c0cc;
    font-weight: 500;
}
.ec-turno-input:focus,
.ec-turno-form select.ec-turno-input:focus {
    border-color: var(--ec-naranja, #ff7700) !important;
    box-shadow: 0 0 0 3px var(--ec-naranja-dim, rgba(255, 119, 0, .25)) !important;
    outline: none;
}
.ec-turno-form select.ec-turno-input option,
.ec-turno-form .ec-hora-picker__part option {
    background: #1a1d24;
    color: #fff;
}
.ec-turno-hint {
    font-size: .78rem;
    color: #9aa3b2;
    line-height: 1.35;
}
.ec-hora-picker {
    display: flex;
    align-items: center;
    gap: 8px;
}
.ec-hora-picker__part {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
.ec-hora-picker__sep {
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}
.ec-turno-input-group .ec-turno-input-addon {
    background: #2a3444 !important;
    border: 1px solid #4b5563 !important;
    border-right: 0 !important;
    color: #fff !important;
    min-height: 48px;
}
.ec-turno-input--group {
    border-radius: 0 10px 10px 0 !important;
}
.ec-turno-input-group .ec-turno-input--group {
    border-left: 0 !important;
}
/* Evitar autofill gris/oscuro en Android */
.ec-turno-form input:-webkit-autofill,
.ec-turno-form input:-webkit-autofill:hover,
.ec-turno-form input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    box-shadow: 0 0 0 1000px #2a3444 inset !important;
    transition: background-color 9999s ease-out;
}

/*
 * Botones de accion de una fila (ver, editar, borrar).
 *
 * Mismos valores que .turno-icon-btn de la grilla de turnos, que es el criterio que ya
 * usaba la app y el que se ve mejor: fondo transparente, sin borde y el icono gris que
 * se aclara al pasar por encima. Antes cada seccion elegia su color: en la lista de
 * atletas eran tres rellenos distintos (azul, acento y rojo) y en WODs los mismos
 * colores con contorno. Tres botones gritando a la vez no dicen cual importa.
 */
.ec-acciones {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ec-acciones form {
    margin: 0;
    display: inline-flex;
}
.ec-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    box-shadow: none;
    color: #d1d5db;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, transform .15s ease, border-color .15s ease;
}
.ec-icon-btn i {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
}
.ec-icon-btn:hover,
.ec-icon-btn:focus {
    color: #fff;
    background: rgba(255, 255, 255, .06);
    outline: none;
    text-decoration: none;
}
.ec-icon-btn:active {
    color: #fff;
    background: rgba(255, 255, 255, .1);
    transform: scale(.96);
}
/* El unico que se pinta, y solo al tocarlo, porque no se puede deshacer. */
.ec-icon-btn--peligro:hover,
.ec-icon-btn--peligro:focus {
    color: #f87171;
    background: rgba(248, 113, 113, .12);
}

/* Modo espectador (SuperAdmin) — cuadrado naranja, solo ícono */
.ec-espectador {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.ec-espectador__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #ff7700;
    color: #111;
    line-height: 1;
    cursor: pointer;
}
.ec-espectador__pill:hover,
.ec-espectador__pill:focus {
    background: #ff8a1f;
    color: #111;
    outline: none;
}
.ec-espectador__pill i {
    font-size: .95rem;
}

/* Instagram ELCROSSAPP en navbar */
.ec-ig-nav {
    color: #e1306c !important;
    font-size: 1.15rem;
    padding-left: .55rem !important;
    padding-right: .55rem !important;
}
.ec-ig-nav:hover {
    color: #ff77a0 !important;
}
/* "Seguinos" al lado del ícono, solo para atletas. Chiquito y en pastilla, para que
   invite sin pelearle el lugar a la campanita en pantallas angostas. */
.ec-ig-nav--seguinos {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    padding-left: .45rem !important;
    padding-right: .5rem !important;
}
.ec-ig-nav__texto {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    color: #fff;
    background: rgba(225, 48, 108, 0.16);
    border: 1px solid rgba(225, 48, 108, 0.45);
    white-space: nowrap;
}
.ec-ig-nav--seguinos:hover .ec-ig-nav__texto {
    background: rgba(225, 48, 108, 0.3);
    border-color: rgba(255, 119, 160, 0.7);
}
@media (max-width: 359px) {
    /* En pantallas muy angostas queda solo el ícono, para no romper la barra. */
    .ec-ig-nav__texto { display: none; }
}

/* Switch ON/OFF de push al lado de la campanita */
#pushSwitchNav {
    margin-right: 2px;
}
.ec-push-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 4px 6px;
    cursor: pointer;
    user-select: none;
}
.ec-push-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ec-push-track {
    position: relative;
    width: 36px;
    height: 20px;
    border-radius: 999px;
    background: #3a4553;
    border: 1px solid rgba(255,255,255,.12);
    transition: background .18s ease, border-color .18s ease;
    flex-shrink: 0;
}
.ec-push-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #d1d5db;
    transition: transform .18s ease, background .18s ease;
}
.ec-push-switch input:checked + .ec-push-track {
    background: #ff7700;
    border-color: #ff7700;
}
.ec-push-switch input:checked + .ec-push-track::after {
    transform: translateX(16px);
    background: #111;
}
.ec-push-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #9ca3af;
    min-width: 1.6rem;
}
#pushSwitchNav.is-on .ec-push-label {
    color: #ff7700;
}
#pushSwitchNav.is-unavailable {
    opacity: .55;
}
#pushSwitchNav.is-unavailable .ec-push-switch {
    cursor: not-allowed;
}
@media (max-width: 420px) {
    .ec-push-label { min-width: auto; font-size: .62rem; }
}


/* Mi Progreso (atleta) */
.pg {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 88px;
}
.pg-head { margin-bottom: 12px; }
.pg-head--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.pg-title {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}
.pg-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    border-radius: 12px;
    background: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
    font-weight: 800;
    text-decoration: none !important;
}
.pg-cta--inline {
    width: auto;
    min-height: 40px;
    padding: 0 14px;
    flex-shrink: 0;
}
.pg-cta--desktop { display: none; }
@media (min-width: 768px) {
    .pg-cta--desktop { display: inline-flex; }
    .pg-fab { display: none !important; }
}
.pg-cta:hover { filter: brightness(1.08); color: var(--ec-on-naranja, #111) !important; }

.pg-atajos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.pg-atajos:has(> :only-child) {
    grid-template-columns: 1fr;
}
.pg-atajo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none !important;
    font-size: .88rem;
    font-weight: 800;
    color: #fff !important;
    background: linear-gradient(165deg, #262c35 0%, #1c222b 60%, #171c24 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.pg-atajo i {
    color: var(--ec-naranja, #ff7700);
    font-size: .95rem;
}
.pg-atajo:active {
    transform: scale(.98);
}

.pg-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    overflow: hidden;
    margin: 0 0 20px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0c1116;
}
.pg-tabs--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: transparent;
    color: #9ca3af;
    padding: 13px 6px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.pg-tabs--4 .pg-tab {
    font-size: .62rem;
    letter-spacing: .04em;
    padding: 12px 4px;
}
.pg-calc-note {
    margin: 4px 2px 0;
    font-size: .78rem;
    color: #9ca3af;
    line-height: 1.4;
}
.pg-calc-note strong { color: #e5e7eb; }
.pg-tab:last-child { border-right: 0; }
.pg-tab.is-on {
    background: var(--ec-naranja, #ff7700);
    color: var(--ec-on-naranja, #111);
}
.pg-tab:focus { outline: none; }
.pg-tab:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.pg-panel { display: none; }
.pg-panel.is-on { display: block; }
.pg-sec-label {
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
}

.pg-widgets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.pg-widget {
    background: var(--ec-card);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    padding: 16px 14px 14px;
}
.pg-widget__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ec-muted);
    margin-bottom: 6px;
}
.pg-widget__num {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.05;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pg-widget__num span {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ec-muted);
    margin-left: 4px;
}
.pg-widget__num--sm { font-size: 1.45rem; }
.pg-widget__lift {
    margin-top: 4px;
    font-weight: 700;
    color: var(--ec-naranja);
    font-size: .92rem;
}
.pg-trophy { margin-right: 4px; }
.pg-widget__meta {
    margin-top: 4px;
    font-size: .78rem;
    color: var(--ec-muted);
}
.pg-card {
    background: var(--ec-card);
    border: 1px solid var(--ec-line);
    border-radius: var(--ec-radius);
    padding: 18px 16px;
    margin-bottom: 16px;
}
.pg-card--list { padding: 16px 12px 12px; }
.pg-card__title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ec-naranja);
    margin-bottom: 14px;
    padding: 0 2px;
}
.pg-card__hint {
    margin: -6px 0 14px;
    font-size: .82rem;
    color: var(--ec-muted);
    line-height: 1.35;
}
.pg-calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.pg-calc__field { min-width: 0; }
.pg-calc__label {
    display: block;
    margin: 0 0 6px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
}
.pg-calc .form-control { min-height: 48px; }
.pg-calc__btn,
.pg-calc .pg-btn-primary {
    grid-column: 1 / -1;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: var(--ec-naranja);
    color: var(--ec-on-naranja, #111);
    font-weight: 800;
    white-space: nowrap;
    width: 100%;
    margin-top: 0;
}
.pg-chart {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 6px;
    align-items: stretch;
}
.pg-chart__y {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--ec-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pg-chart svg {
    width: 100%;
    height: 180px;
    display: block;
    overflow: visible;
}
.pg-chart__wave {
    filter: drop-shadow(0 0 6px rgba(255, 119, 0, .35));
}
.pg-chart__dot {
    filter: drop-shadow(0 0 4px rgba(255, 119, 0, .45));
}
.pg-chart__val {
    paint-order: stroke fill;
    stroke: #0f1419;
    stroke-width: 3px;
    stroke-linejoin: round;
}
.pg-chart__dates {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    padding: 0 4px;
    color: var(--ec-muted);
    font-size: .7rem;
}
.pg-chart__dates.is-one { justify-content: center; }
.pg-empty {
    text-align: center;
    color: var(--ec-muted);
    padding: 18px 8px;
    font-size: .9rem;
}
.pg-btn-primary {
    display: block;
    width: 100%;
    margin-top: 12px;
    min-height: 46px;
    border: 0;
    border-radius: 12px;
    background: var(--ec-naranja, #ff7700);
    color: var(--ec-on-naranja, #111);
    font-weight: 800;
    font-size: .95rem;
}
.pg-fab {
    position: fixed;
    right: 16px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 1030;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--ec-naranja, #ff7700);
    color: var(--ec-on-naranja, #111) !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    font-weight: 800;
    font-size: .62rem;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.pg-fab i { font-size: 1.1rem; line-height: 1; }
.pg-flash {
    background: rgba(34, 197, 94, .15);
    color: #86efac;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: .9rem;
    font-weight: 700;
}
.pg-modal {
    background: #1a222d;
    color: #e5e7eb;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
}
.pg-modal .modal-header,
.pg-modal .modal-footer {
    padding: 14px 16px;
}
.pg-modal .modal-title { color: #fff; }
.pg-modal .close { opacity: .7; text-shadow: none; }
.pg-modal .close:hover { opacity: 1; }
.pg-pcts { margin-top: 14px; }
.pg-pcts__hero {
    text-align: center;
    padding: 14px 12px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: rgba(255, 119, 0, 0.1);
    border: 1px solid rgba(255, 119, 0, 0.28);
}
.pg-pcts__hero-label {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ec-naranja, #ff7700);
    margin-bottom: 4px;
}
.pg-pcts__hero-num {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.pg-pcts__hero-num span {
    font-size: 1rem;
    font-weight: 700;
    color: #9ca3af;
    margin-left: 6px;
}
.pg-pcts__rm {
    text-align: center;
    margin-bottom: 10px;
    color: var(--ec-muted);
}
.pg-pcts__rm b { color: #fff; font-size: 1.15rem; }
.pg-pcts__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}
.pg-pcts__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ec-line);
    border-radius: 10px;
    padding: 8px 12px;
    color: var(--ec-muted);
    font-size: .85rem;
}
.pg-pcts__row strong { color: #fff; font-variant-numeric: tabular-nums; }
.pg-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--ec-line);
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
}
.pg-item:last-child { margin-bottom: 0; }
.pg-item__main { flex: 1; min-width: 0; }
.pg-item__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pg-item__kg {
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.pg-tag {
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .04em;
    border-radius: 999px;
    padding: 3px 8px;
}
.pg-tag.is-rm { background: rgba(255,119,0,.18); color: var(--ec-naranja); }
.pg-tag.is-peso { background: rgba(56,189,248,.16); color: #7dd3fc; }
.pg-tag.is-wod { background: rgba(167,139,250,.18); color: #c4b5fd; }
.pg-item__kg--sm { font-size: 1rem; }
.pg-wod { margin-top: 4px; }
.pg-wod__label {
    display: block;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #fdba74;
    margin: 10px 0 6px;
}
.pg-wod__select,
.pg-wod__area {
    background: #111827 !important;
    color: #e5e7eb !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    min-height: 44px;
}
.pg-wod__area { min-height: 110px; resize: vertical; }
.pg-wod__grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 8px;
}
.pg-wod__grid--2 {
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 420px) {
    .pg-wod__grid,
    .pg-wod__grid--2 { grid-template-columns: 1fr; }
}
.wod-resultado {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 575.98px) {
    .wod-resultado { grid-template-columns: 1fr; }
}
.wod-resultado__opt {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.03);
    cursor: pointer;
    color: #e5e7eb;
}
.wod-resultado__opt input {
    margin-top: 3px;
}
.wod-resultado__opt strong {
    display: block;
    font-size: .9rem;
}
.wod-resultado__opt small {
    display: block;
    color: #9ca3af;
    font-size: .75rem;
    line-height: 1.3;
    margin-top: 2px;
}
.wod-resultado__opt:has(input:checked) {
    border-color: var(--ec-naranja, #ff7700);
    background: var(--ec-naranja-wash, rgba(255,119,0,.1));
}
.pg-wod__hint {
    margin: 4px 0 0;
    font-size: .75rem;
    color: #9ca3af;
    line-height: 1.35;
}
.pg-wod__btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    background: var(--ec-naranja, #ff7700);
    border: 0;
    color: var(--ec-on-naranja, #111);
    font-weight: 800;
    padding: 11px 14px;
    border-radius: 12px;
    min-height: 46px;
}
.pg-wod__hist { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.pg-wod__hist-title {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 8px;
}
.pg-wod__preview {
    margin-top: 6px;
    color: #d1d5db;
    font-size: .88rem;
    white-space: pre-wrap;
    line-height: 1.4;
}
.pg-wod-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--ec-line);
    border-radius: 14px;
    padding: 12px 12px 12px 14px;
    margin-bottom: 10px;
}
.pg-wod-row:last-child { margin-bottom: 0; }
.pg-wod-row__marca {
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 42%;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--ec-naranja, #ff7700);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.pg-wod-row__info {
    flex: 1;
    min-width: 0;
}
.pg-wod-row__title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.25;
}
.pg-wod-row__meta {
    margin-top: 3px;
    font-size: .78rem;
    color: var(--ec-muted, #9aa3b2);
}
.pg-wod-row__del { flex-shrink: 0; }
.pg-item__meta { margin-top: 2px; font-size: .8rem; color: var(--ec-muted); }
.pg-item__acts { display: flex; gap: 6px; flex-shrink: 0; }
.pg-iconbtn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #2a3444;
    border-radius: 10px;
    background: transparent;
    color: #5c6573;
    padding: 0;
    text-decoration: none !important;
}
.pg-iconbtn:hover { color: #d1d5db; border-color: #6b7280; }
.pg-iconbtn.is-del:hover { color: #f87171; border-color: #f87171; }
@media (hover: hover) and (pointer: fine) {
    .pg-item__acts { opacity: 0; transition: opacity .15s ease; }
    .pg-item:hover .pg-item__acts,
    .pg-item:focus-within .pg-item__acts { opacity: 1; }
}

@media (max-width: 575.98px) {
    .pg-widget__num { font-size: 1.45rem; }
    .pg-calc { grid-template-columns: 1fr 1fr; }
    .pg-calc__btn,
    .pg-calc .pg-btn-primary { grid-column: 1 / -1; }
}

/* Apariencia del box */
.ap-file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
.ap-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 16px;
    border: 1.5px dashed var(--ec-line);
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    cursor: pointer;
    margin: 0;
}
.ap-drop:hover { border-color: var(--ec-naranja); }
.ap-drop__preview {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f1419;
    border: 1px solid var(--ec-line);
}
.ap-drop__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ap-drop__icon { font-size: 1.6rem; color: var(--ec-muted); }
.ap-drop__cta { font-weight: 700; color: #fff; }
.ap-drop__name { font-size: .78rem; color: var(--ec-muted); text-align: center; }
.ap-presets {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 8px;
}
.ap-preset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: inherit;
}
.ap-swatch {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #2a3444;
    display: block;
}
.ap-preset.is-on .ap-swatch {
    box-shadow: 0 0 0 3px #0f1419, 0 0 0 6px #fff;
}
.ap-preset__name {
    font-size: .72rem;
    color: var(--ec-muted);
    line-height: 1.2;
    text-align: center;
    min-height: 1.7em;
}
.ap-hex {
    display: flex;
    align-items: stretch;
    max-width: 240px;
    border: 1px solid var(--ec-line);
    border-radius: 12px;
    overflow: hidden;
    background: #0f1419;
}
.ap-hex__swatch {
    width: 52px;
    margin: 0;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
}
.ap-hex__swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: 0;
    padding: 0;
}
.ap-hex__input {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .04em;
}
.ap-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ec-line);
    color: var(--ec-muted);
    font-size: .88rem;
}
.ap-note i { color: var(--ec-naranja); margin-top: 3px; }
.ap-note p { margin: 0; }

@media (min-width: 576px) {
    .ap-presets { grid-template-columns: repeat(8, 1fr); }
}

/* Constructor de WOD */
.wod-builder .card-body {
    padding: 12px 14px 10px;
}
.wod-builder .card-header {
    padding: 10px 14px;
}
.wod-builder .form-group {
    margin-bottom: 0.65rem;
}
.wod-builder hr.border-secondary {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.wod-builder__pizarra {
    background-color: #1a1c1e !important;
    color: #ffc107 !important;
    font-family: 'Courier New', monospace !important;
    font-size: 1.05rem !important;
    line-height: 1.4 !important;
    min-height: 280px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.wod-builder__pizarra-wrap {
    margin-top: 4px;
}
.wod-alcance-btns {
    gap: 6px;
}
.wod-alcance-btns > .btn {
    padding: 0.28rem 0.6rem;
    font-size: 0.82rem;
    line-height: 1.25;
    min-height: 34px;
}
.wod-smart {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}
.wod-smart__row {
    display: grid;
    grid-template-columns: 72px auto;
    gap: 8px;
}
.wod-smart__add {
    white-space: nowrap;
    min-width: 0;
    width: auto !important;
    padding-left: 12px;
    padding-right: 12px;
}
.wod-add-ex {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: stretch;
}
.wod-add-ex__qty {
    display: grid;
    grid-template-columns: 84px 40px;
    gap: 8px;
}
.wod-add-ex__qty .btn {
    min-width: 40px;
    padding-left: 0;
    padding-right: 0;
}
.wod-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.wod-footer .btn {
    min-height: 36px;
}
.wod-footer__save {
    margin-left: auto;
    min-width: 140px;
}

@media (max-width: 991.98px) {
    .wod-builder form > .card-footer {
        position: sticky;
        bottom: calc(68px + env(safe-area-inset-bottom, 0px));
        z-index: 1020;
        background: rgba(12, 16, 22, 0.96) !important;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.35);
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .wod-builder .wod-footer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: stretch;
    }
    .wod-builder .wod-footer .btn {
        width: 100%;
        margin: 0;
        min-height: 40px;
    }
    .wod-builder .wod-footer__save {
        grid-column: 1 / -1;
        margin-left: 0;
        min-height: 42px;
    }
}

@media (min-width: 992px) {
    .wod-builder form > .card-footer {
        position: sticky;
        bottom: 0;
        z-index: 1020;
        background: rgba(12, 16, 22, 0.98) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
    }
}
.ej-check, #checkTodos {
    width: 18px;
    height: 18px;
}

@media (max-width: 767.98px) {
    .content-wrapper { padding-bottom: 24px !important; }
    body.ec-mobile-nav .content-wrapper {
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .content-header h1 { font-size: 1.15rem !important; }
    .btn, .form-control, select.form-control { min-height: 38px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .main-sidebar { padding-top: env(safe-area-inset-top); }

    .wod-builder .card-body { padding: 10px 10px 8px; }
    .wod-builder__back { width: 100%; }
    .wod-builder__pizarra {
        min-height: 220px;
        font-size: 1rem !important;
    }
    .wod-alcance-btns > .btn {
        min-height: 36px;
        font-size: 0.78rem;
        padding: 0.25rem 0.45rem;
    }
    .wod-smart { grid-template-columns: 1fr; }
    .wod-smart__row { grid-template-columns: 1fr auto; }
    .wod-add-ex { grid-template-columns: 1fr; }
    .wod-add-ex__qty { grid-template-columns: 1fr 44px; }
    .wod-add-ex .select2-container { width: 100% !important; }
    .wod-builder .btn-group .btn { min-height: 36px; flex: 1; padding-left: 4px; padding-right: 4px; font-size: .75rem; }

    .ej-page .btn { margin-bottom: 6px; }
    .ej-check, #checkTodos { width: 22px; height: 22px; }
    #tablaEjercicios th:nth-child(3),
    #tablaEjercicios td:nth-child(3) { display: none; }
}
@media (display-mode: standalone) {
    body { padding-top: env(safe-area-inset-top); }
}
/* —— Pulida estética global (PWA / celular) —— */
.modal-title,
.modal-title.text-warning,
.modal-header h5,
.modal-header .modal-title {
    color: #ffffff !important;
    font-weight: 700;
}
.modal-title > i.text-warning,
.modal-header h5 > i.text-warning {
    color: var(--ec-naranja) !important;
}
.modal-content {
    border: 0 !important;
    border-radius: var(--ec-radius) !important;
    background: var(--ec-card) !important;
}
.modal-body { padding: 1.15rem 1.25rem !important; }

/* Textos de ayuda: un solo tono, sin “cruzados” de color */
.content-wrapper .text-muted strong,
.content-wrapper small.text-muted strong,
.content-wrapper p.text-muted strong,
.grilla-tip strong,
.mibox-card__top span strong {
    color: #d1d5db !important;
    font-weight: 700;
}
.content-wrapper .alert .text-muted,
.content-wrapper .alert strong + .text-muted {
    color: #9aa3b2 !important;
}

/* Separadores y hr más suaves */
hr.border-secondary,
.border-bottom.border-secondary,
.border-top.border-secondary {
    border-color: var(--ec-line-soft) !important;
}

/* Inputs con clase hard-coded */
.form-control.bg-dark,
input.bg-black,
select.bg-black,
textarea.bg-black {
    background: #0c1116 !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

/* Cards de plan / membresía: título blanco */
.card-header h5.text-warning.text-uppercase,
.card-header h5.mb-0.text-warning {
    color: #ffffff !important;
}

/* Espacio entre bloques en pantallas fluid */
.container-fluid.pt-3,
.container-fluid.pt-3.pt-md-4,
.container-fluid.pt-3.pb-4 {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Salir en el menú (debajo de Configuración / al final del rol) */
.ec-sidebar-logout__link {
    color: #fca5a5 !important;
}
.ec-sidebar-logout__link:hover,
.ec-sidebar-logout__link:focus {
    background: rgba(248, 113, 113, .12) !important;
    color: #fecaca !important;
}
.ec-sidebar-logout__link .nav-icon {
    color: #f87171 !important;
}

/* Profundidad en pantallas mobile-first (Hoy / Reservar / Mi box / WOD) */
.hoy-kpi,
.hoy-clase,
.hoy-vacio,
.hoy-atajos a,
.dia,
.slot,
.mibox-card,
.wod-card,
.wod-mini,
.ec-alumno-card,
.turno-vacio {
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Pizarra del WOD (show + atleta): tipografía grande y legible */
.wod-board {
    text-align: left !important;
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.7;
    color: #ffc107;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
.wod-board__line {
    text-align: left !important;
    min-height: 1.65em;
    word-break: normal;
    overflow-wrap: anywhere;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.wod-ej-link {
    color: #93c5fd !important;
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 800;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    text-transform: uppercase;
}
.wod-ej-link:hover {
    color: #bfdbfe !important;
}
/* Títulos de bloque dentro del texto (fuerza/metcon): leve, no compiten con la cabecera */
.wod-board__line--title {
    margin-top: .45em;
    margin-bottom: .25em;
    color: #f3f4f6 !important;
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
    font-size: 1.02em;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.4;
    opacity: .95;
}
.wod-board__line--title:first-child {
    margin-top: 0;
}
/* Cabecera de pantalla WOD (atleta): impacto visual principal */
.wod-atleta__head h1,
.wod-atleta__head p {
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif !important;
    color: #fff !important;
    font-weight: 800 !important;
    text-transform: uppercase;
}
.wod-card h2,
.wod-show .card-header h5 {
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.wod-ej-link {
    color: #93c5fd !important;
    font-family: "Outfit", "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 800;
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}
.wod-ej-link:hover {
    color: #bfdbfe !important;
}
.wod-show__body {
    background: #0a0a0a !important;
    padding: 1rem 1.1rem !important;
    text-align: left !important;
}
.wod-show__notas {
    margin-top: 1rem;
    padding: 10px 12px;
    border-left: 3px solid var(--ec-naranja, #ff7700);
    background: rgba(255, 255, 255, 0.03);
}
.wod-show__notas span {
    display: block;
    color: var(--ec-naranja, #ff7700);
    font-weight: 800;
    font-size: .72rem;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.wod-show__notas p {
    margin: 0;
    color: #d1d5db;
    white-space: pre-wrap;
    font-size: .92rem;
}
@media (max-width: 767.98px) {
    .wod-board { font-size: 1.38rem; line-height: 1.75; }
    .wod-board__line--title { font-size: 1.02em; letter-spacing: .02em; }
    .wod-ej-link { white-space: normal; }
}
.hoy-kpi,
.hoy-clase,
.hoy-vacio,
.hoy-atajos a,
.dia:not(.on),
.slot:not(.mio):not(.espera),
.mibox-card,
.wod-card,
.wod-mini,
.ec-alumno-card,
.turno-vacio {
    background: linear-gradient(165deg, #262c35 0%, #1c222b 60%, #171c24 100%) !important;
}
.dia.on {
    box-shadow: 0 8px 24px var(--ec-naranja-dim, rgba(219, 39, 119, 0.25)) !important;
}
.slot.mio,
.slot.espera {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* CTA y pestañas: siempre el acento del box (--ec-naranja), no el primary violeta de AdminLTE */
.content-wrapper .btn-warning,
.content-header .btn-warning,
#semanaTab.nav-pills .nav-link.active,
#semanaTab.nav-pills .show > .nav-link {
    background-color: var(--ec-naranja) !important;
    border-color: var(--ec-naranja) !important;
    color: var(--ec-on-naranja, #111) !important;
}
#semanaTab.nav-pills .nav-link:not(.active) {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #9ca3af !important;
}
#semanaTab.nav-pills .nav-link:not(.active) * {
    color: inherit !important;
}