/*
 * Capa de compatibilidad ProUI/Bootstrap 3 → design system Tailwind (branch prueba-tailwind).
 *
 * Las páginas migradas "en superficie" envuelven su contenido en .proui-compat: conservan su markup
 * y su jQuery, pero las clases viejas (btn, block, table, form-control, grilla row/col-*, label, modal...)
 * se re-estilizan acá con la estética del admin nuevo (Inter, cards blancas, bordes slate, acento salmón).
 * Las páginas reescritas 100% con utilidades Tailwind NO usan el wrapper y no les aplica nada de esto.
 *
 * Reglas globales (fuera de .proui-compat): .hide, .fade, .collapse, .modal*, .tooltip, .alert y
 * .dropdown-menu, porque Bootstrap JS y los plugins las insertan/togglean fuera del wrapper.
 *
 * Paleta: NO se escriben grises ni colores de superficie a mano. Superficies, bordes y texto
 * salen de los tokens semánticos (--color-panel, --color-borde, --color-texto, --color-suave...)
 * que define doc/scripts/tailwind/admin-v2.source.css; con eso estas ~88 páginas congeladas
 * heredan el modo oscuro sin tocar su markup. Quedan en hex solo los colores que son iguales
 * en ambos temas: botones sólidos de marca (#d5705c), themed-background-* y texto blanco sobre ellos.
 */

/* ============================= Globales ============================= */

.hide { display: none !important; }
.show { display: block !important; }
.invisible { visibility: hidden; }
.visible-lt-ie9, .visible-lt-ie10, .hidden-lt-ie9.hidden-lt-ie10 { }

.fade { opacity: 0; transition: opacity .15s linear; }
.fade.in { opacity: 1; }

/* Tailwind define .collapse como visibility:collapse; Bootstrap lo usa como show/hide de paneles */
.collapse { display: none !important; visibility: hidden !important; }
.collapse.in { display: block !important; visibility: visible !important; height: auto !important; }
tr.collapse.in { display: table-row !important; }
.collapsing { display: block !important; visibility: visible !important; height: 0; overflow: hidden; transition: height .25s ease; }

.alert { padding: 12px 16px; border-radius: 12px; margin-bottom: 16px; border: 1px solid transparent; font-size: 14px; }
.alert h4 { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.alert h5 { margin: 4px 0 0; font-size: 13px; font-weight: 400; }
.alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.alert-danger { background: var(--color-error-suave); border-color: var(--color-error-borde); color: var(--color-error); }
.alert-warning { background: var(--color-alerta-suave); border-color: var(--color-alerta-borde); color: var(--color-alerta); }
.alert-info { background: var(--color-info-suave); border-color: var(--color-info-borde); color: var(--color-info); }
.alert-success { background: var(--color-ok-suave); border-color: var(--color-ok-borde); color: var(--color-ok); }
.alert .close { float: right; border: none; background: none; font-size: 20px; line-height: 1; color: inherit; opacity: .5; cursor: pointer; }
.alert .close:hover { opacity: 1; }

.modal { display: none; position: fixed; inset: 0; z-index: 1050; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.modal.in { display: block; }
.modal-dialog { max-width: 540px; margin: 50px auto; padding: 0 16px; position: relative; }
.modal-lg { max-width: 860px; }
.modal-sm { max-width: 380px; }
.modal-content { background: var(--color-panel); border-radius: 16px; box-shadow: 0 20px 50px rgba(15, 23, 42, .35); overflow: hidden; }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--color-borde-suave); display: flex; align-items: center; justify-content: space-between; }
.modal-header .close { order: 2; border: none; background: none; font-size: 22px; line-height: 1; color: var(--color-tenue); cursor: pointer; }
.modal-header .close:hover { color: var(--color-texto); }
.modal-title { font-weight: 700; font-size: 16px; margin: 0; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--color-borde-suave); display: flex; justify-content: flex-end; gap: 8px; }
/* En modales, los form-group con cols (label col-md-4 + campo col-md-8) desperdician un tercio
   del ancho: acá el label va arriba y el campo ocupa toda la fila */
.proui-compat .modal .form-group > [class*="col-"] { width: 100%; }
.proui-compat .modal .control-label { text-align: left; padding-top: 0; margin-bottom: 6px; display: block; }
.modal-backdrop { position: fixed; inset: 0; background: #0f172a; z-index: 1040; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.in { opacity: .5; }
.modal.fade .modal-dialog { transform: translateY(-12px); transition: transform .2s ease-out; }
.modal.in .modal-dialog { transform: none; }
body.modal-open { overflow: hidden; }

.popover { position: absolute; z-index: 1060; max-width: 280px; background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .15); font-size: 13px; display: none; }
.popover.in { display: block; }
.popover-title { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--color-borde-suave); margin: 0; font-size: 13px; }
.popover-content { padding: 10px 14px; }
.popover .arrow { display: none; }

.tooltip { position: absolute; z-index: 1070; font-size: 12px; opacity: 0; transition: opacity .1s; pointer-events: none; }
.tooltip.in { opacity: 1; }
/* width max-content: sin esto, cerca del borde derecho el globo se achica y envuelve letra por letra */
.tooltip-inner { background: #0f172a; color: #fff; padding: 4px 9px; border-radius: 6px; width: max-content; max-width: 240px; text-align: center; }
.tooltip-arrow { display: none; }

.dropdown, .btn-group { position: relative; }
.dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 180px; background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .12); padding: 6px; list-style: none; margin: 4px 0 0; font-size: 13px; }
.open > .dropdown-menu { display: block; }
.dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu > li > a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--color-texto); text-decoration: none; white-space: nowrap; }
.dropdown-menu > li > a:hover { background: var(--color-panel-suave); }
.dropdown-menu .divider { height: 1px; margin: 6px 0; background: var(--color-panel-fuerte); }

/* Datepicker de bootstrap-datepicker (el popup se agrega al body: va global, sin scope) */
.datepicker.dropdown-menu { padding: 10px; min-width: 250px; }
.datepicker table { border-collapse: separate; border-spacing: 2px; }
.datepicker table th, .datepicker table td { text-align: center; padding: 5px 8px; border-radius: 8px; border: none; font-size: 12px; }
.datepicker table th { color: var(--color-suave); font-weight: 600; }
.datepicker th.datepicker-switch { font-weight: 700; color: var(--color-titulo); font-size: 13px; cursor: pointer; }
.datepicker th.prev, .datepicker th.next { cursor: pointer; color: var(--color-tenue); }
.datepicker th.prev:hover, .datepicker th.next:hover, .datepicker th.datepicker-switch:hover { background: var(--color-panel-fuerte); }
.datepicker table td.day { cursor: pointer; color: var(--color-texto); }
.datepicker table td.day:hover { background: var(--color-panel-fuerte); }
.datepicker table td.old, .datepicker table td.new { color: var(--color-tenue); }
.datepicker table td.today { background: var(--color-acento-suave); color: var(--color-acento); font-weight: 700; }
.datepicker table td.active, .datepicker table td.active:hover, .datepicker table td.selected { background: #d5705c !important; color: #fff !important; font-weight: 700; }
.datepicker table td.disabled { color: var(--color-borde); cursor: default; }
.datepicker table td span { display: inline-block; width: 30%; margin: 2px; padding: 8px 0; border-radius: 8px; cursor: pointer; }
.datepicker table td span:hover { background: var(--color-panel-fuerte); }
.datepicker table td span.active { background: #d5705c; color: #fff; }

/* Timepicker (mismo tratamiento) */
.bootstrap-timepicker-widget.dropdown-menu { padding: 10px; }
/* El CSS propio del timepicker vivía en ProUI: sin esto los números del widget no se ven */
.bootstrap-timepicker-widget table { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.bootstrap-timepicker-widget td { text-align: center; }
.bootstrap-timepicker-widget td a { display: inline-block; padding: 4px 10px; color: var(--color-suave); border-radius: 6px; text-decoration: none; }
.bootstrap-timepicker-widget td a:hover { background: var(--color-panel-fuerte); color: var(--color-titulo); }
.bootstrap-timepicker-widget td input { width: 46px; height: 36px; padding: 2px; text-align: center; border: 1px solid var(--color-borde); border-radius: 8px; font-size: 15px; color: var(--color-titulo); background: var(--color-panel); }
.bootstrap-timepicker-widget td span { display: inline-block; min-width: 46px; padding: 4px 0; font-size: 17px; font-weight: 600; color: var(--color-titulo); }
.bootstrap-timepicker-widget .separator { font-weight: 700; color: var(--color-suave); }
.bootstrap-timepicker-widget table td { text-align: center; padding: 4px; }
.bootstrap-timepicker-widget table td input { width: 48px; text-align: center; border: 1px solid var(--color-borde); border-radius: 8px; padding: 6px 0; }
.bootstrap-timepicker-widget table td a { display: inline-block; padding: 6px 10px; border-radius: 8px; color: var(--color-suave); text-decoration: none; border: none; }
.bootstrap-timepicker-widget table td a:hover { background: var(--color-panel-fuerte); border: none; }

/* ====================== Base tipográfica compat ====================== */

.proui-compat { font-size: 14px; color: var(--color-texto); }
.proui-compat h1 { font-size: 24px; font-weight: 700; margin: 0 0 14px; }
.proui-compat h2 { font-size: 19px; font-weight: 700; margin: 0 0 12px; }
.proui-compat h3 { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.proui-compat h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.proui-compat h5 { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.proui-compat p { margin: 0 0 10px; }
.proui-compat hr { border: 0; border-top: 1px solid var(--color-borde); margin: 16px 0; }
.proui-compat a { color: var(--color-link); text-decoration: none; }
.proui-compat a:hover { color: var(--color-link-hover); }
.proui-compat ul, .proui-compat ol { padding-left: 22px; margin: 0 0 10px; }
.proui-compat ul { list-style: disc; }
.proui-compat ol { list-style: decimal; }
.proui-compat strong, .proui-compat b { font-weight: 700; }
.proui-compat small { font-size: 85%; }
.proui-compat .lead { font-size: 16px; color: var(--color-texto); }
.proui-compat img { max-width: 100%; }
.proui-compat .img-responsive { max-width: 100%; height: auto; }
.proui-compat .img-circle { border-radius: 50%; }
.proui-compat .text-muted { color: var(--color-tenue); }
.proui-compat .text-primary { color: var(--color-acento); }
.proui-compat .text-danger { color: var(--color-error); }
.proui-compat .text-success { color: var(--color-ok); }
.proui-compat .text-warning { color: var(--color-alerta); }
.proui-compat .text-info { color: var(--color-info); }
.proui-compat .text-light { color: #fff; }
.proui-compat .themed-color { color: #0ea5e9; }
.proui-compat .themed-color-dark { color: var(--color-titulo); }
.proui-compat .pull-right { float: right; }
.proui-compat .pull-left { float: left; }
.proui-compat .clearfix::after { content: ""; display: table; clear: both; }
.proui-compat .center-block { display: block; margin-left: auto; margin-right: auto; }
.proui-compat .push { margin-bottom: 16px; }
.proui-compat .push-bit { margin-bottom: 10px; }
.proui-compat .well { background: var(--color-panel-suave); border: 1px solid var(--color-borde); border-radius: 12px; padding: 16px; margin-bottom: 16px; }
.proui-compat .caret { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; }

/* ============================ Grilla ============================ */

.proui-compat .row { display: flex; flex-wrap: wrap; margin-left: -12px; margin-right: -12px; }
/* En Bootstrap 3 un hijo del row que NO es col-* es un block de ancho completo (ej: block-full
   en Info de Pago); en el row flex hay que dárselo explícito o se encoge al contenido */
.proui-compat .row > *:not([class*="col-"]) { flex-basis: 100%; min-width: 0; }
.proui-compat [class*="col-xs-"], .proui-compat [class*="col-sm-"],
.proui-compat [class*="col-md-"], .proui-compat [class*="col-lg-"] { position: relative; padding-left: 12px; padding-right: 12px; width: 100%; min-height: 1px; }

.proui-compat .col-xs-1 { width: 8.3333%; } .proui-compat .col-xs-2 { width: 16.6667%; }
.proui-compat .col-xs-3 { width: 25%; } .proui-compat .col-xs-4 { width: 33.3333%; }
.proui-compat .col-xs-5 { width: 41.6667%; } .proui-compat .col-xs-6 { width: 50%; }
.proui-compat .col-xs-7 { width: 58.3333%; } .proui-compat .col-xs-8 { width: 66.6667%; }
.proui-compat .col-xs-9 { width: 75%; } .proui-compat .col-xs-10 { width: 83.3333%; }
.proui-compat .col-xs-11 { width: 91.6667%; } .proui-compat .col-xs-12 { width: 100%; }

@media (min-width: 768px) {
    .proui-compat .col-sm-1 { width: 8.3333%; } .proui-compat .col-sm-2 { width: 16.6667%; }
    .proui-compat .col-sm-3 { width: 25%; } .proui-compat .col-sm-4 { width: 33.3333%; }
    .proui-compat .col-sm-5 { width: 41.6667%; } .proui-compat .col-sm-6 { width: 50%; }
    .proui-compat .col-sm-7 { width: 58.3333%; } .proui-compat .col-sm-8 { width: 66.6667%; }
    .proui-compat .col-sm-9 { width: 75%; } .proui-compat .col-sm-10 { width: 83.3333%; }
    .proui-compat .col-sm-11 { width: 91.6667%; } .proui-compat .col-sm-12 { width: 100%; }
    .proui-compat .col-sm-offset-1 { margin-left: 8.3333%; } .proui-compat .col-sm-offset-2 { margin-left: 16.6667%; }
    .proui-compat .col-sm-offset-3 { margin-left: 25%; } .proui-compat .col-sm-offset-4 { margin-left: 33.3333%; }
    .proui-compat .col-sm-offset-6 { margin-left: 50%; }
}
@media (min-width: 992px) {
    .proui-compat .col-md-1 { width: 8.3333%; } .proui-compat .col-md-2 { width: 16.6667%; }
    .proui-compat .col-md-3 { width: 25%; } .proui-compat .col-md-4 { width: 33.3333%; }
    .proui-compat .col-md-5 { width: 41.6667%; } .proui-compat .col-md-6 { width: 50%; }
    .proui-compat .col-md-7 { width: 58.3333%; } .proui-compat .col-md-8 { width: 66.6667%; }
    .proui-compat .col-md-9 { width: 75%; } .proui-compat .col-md-10 { width: 83.3333%; }
    .proui-compat .col-md-11 { width: 91.6667%; } .proui-compat .col-md-12 { width: 100%; }
    .proui-compat .col-md-offset-1 { margin-left: 8.3333%; } .proui-compat .col-md-offset-2 { margin-left: 16.6667%; }
    .proui-compat .col-md-offset-3 { margin-left: 25%; } .proui-compat .col-md-offset-4 { margin-left: 33.3333%; }
    .proui-compat .col-md-offset-6 { margin-left: 50%; }
}
@media (min-width: 1200px) {
    .proui-compat .col-lg-1 { width: 8.3333%; } .proui-compat .col-lg-2 { width: 16.6667%; }
    .proui-compat .col-lg-3 { width: 25%; } .proui-compat .col-lg-4 { width: 33.3333%; }
    .proui-compat .col-lg-5 { width: 41.6667%; } .proui-compat .col-lg-6 { width: 50%; }
    .proui-compat .col-lg-7 { width: 58.3333%; } .proui-compat .col-lg-8 { width: 66.6667%; }
    .proui-compat .col-lg-9 { width: 75%; } .proui-compat .col-lg-10 { width: 83.3333%; }
    .proui-compat .col-lg-11 { width: 91.6667%; } .proui-compat .col-lg-12 { width: 100%; }
    .proui-compat .col-lg-offset-2 { margin-left: 16.6667%; } .proui-compat .col-lg-offset-3 { margin-left: 25%; }
    .proui-compat .col-lg-offset-4 { margin-left: 33.3333%; }
}

/* La grilla semanal de la agenda (seven-cols de crossfy.css): columnas iguales en desktop.
   Sin esto, las reglas col-md-1 de arriba (8,33%) le ganan por orden de carga.
   Los días sin clases no se renderizan: flex reparte el ancho entre los días visibles. */
@media (min-width: 768px) and (max-width: 991px) {
    .proui-compat .seven-cols .col-md-1, .proui-compat .seven-cols .col-sm-1, .proui-compat .seven-cols .col-lg-1 { width: 100%; }
}
@media (min-width: 992px) {
    .proui-compat .seven-cols { display: flex; }
    .proui-compat .seven-cols .col-md-1, .proui-compat .seven-cols .col-sm-1, .proui-compat .seven-cols .col-lg-1 { flex: 1 1 0; min-width: 0; width: auto; }
}

/* visible-*/hidden-* de Bootstrap 3 */
.proui-compat .visible-xs, .proui-compat .visible-sm, .proui-compat .visible-md, .proui-compat .visible-lg { display: none !important; }
@media (max-width: 767px) {
    .proui-compat .visible-xs { display: block !important; }
    .proui-compat table.visible-xs { display: table !important; }
    .proui-compat tr.visible-xs { display: table-row !important; }
    .proui-compat th.visible-xs, .proui-compat td.visible-xs { display: table-cell !important; }
    .proui-compat .hidden-xs { display: none !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
    .proui-compat .visible-sm { display: block !important; }
    .proui-compat th.visible-sm, .proui-compat td.visible-sm { display: table-cell !important; }
    .proui-compat .hidden-sm { display: none !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .proui-compat .visible-md { display: block !important; }
    .proui-compat th.visible-md, .proui-compat td.visible-md { display: table-cell !important; }
    .proui-compat .hidden-md { display: none !important; }
}
@media (min-width: 1200px) {
    .proui-compat .visible-lg { display: block !important; }
    .proui-compat th.visible-lg, .proui-compat td.visible-lg { display: table-cell !important; }
    .proui-compat .hidden-lg { display: none !important; }
}

/* ============================ Botones ============================ */

.proui-compat .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s; white-space: nowrap; }
.proui-compat .btn:hover { text-decoration: none; }
.proui-compat .btn:focus { outline: none; box-shadow: 0 0 0 3px var(--color-acento-suave); }
.proui-compat .btn.disabled, .proui-compat .btn[disabled] { opacity: .55; cursor: not-allowed; pointer-events: none; }

.proui-compat .btn-default { background: var(--color-panel); border-color: var(--color-borde); color: var(--color-texto); }
.proui-compat .btn-default:hover { background: var(--color-panel-suave); color: var(--color-titulo); }
.proui-compat .btn-primary { background: #d5705c; color: #fff; }
.proui-compat .btn-primary:hover { background: #bf5642; color: #fff; }
.proui-compat .btn-info { background: #0ea5e9; color: #fff; }
.proui-compat .btn-info:hover { background: #0284c7; color: #fff; }
.proui-compat .btn-success { background: #10b981; color: #fff; }
.proui-compat .btn-success:hover { background: #059669; color: #fff; }
.proui-compat .btn-warning { background: #f59e0b; color: #fff; }
.proui-compat .btn-warning:hover { background: #d97706; color: #fff; }
.proui-compat .btn-danger { background: #f43f5e; color: #fff; }
.proui-compat .btn-danger:hover { background: #e11d48; color: #fff; }
.proui-compat .btn-link { background: none; border: none; color: var(--color-link); }
/* Acción destructiva secundaria: borde rojo, sin gritar al mismo volumen que la primaria */
.proui-compat .btn-outline-danger { background: var(--color-panel); border-color: var(--color-error-borde); color: var(--color-error); }
.proui-compat .btn-outline-danger:hover { background: var(--color-error-suave); border-color: var(--color-error); color: var(--color-error); }

.proui-compat .btn-lg, .proui-compat .btn-group-lg > .btn { padding: 10px 18px; font-size: 15px; border-radius: 10px; }
.proui-compat .btn-sm, .proui-compat .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; }
.proui-compat .btn-xs, .proui-compat .btn-group-xs > .btn { padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.proui-compat .btn-block { display: flex; width: 100%; }
.proui-compat .btn-block + .btn-block { margin-top: 6px; }

.proui-compat .btn-group { display: inline-flex; vertical-align: middle; }
.proui-compat .btn-group > .btn { border-radius: 0; }
.proui-compat .btn-group > .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.proui-compat .btn-group > .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.proui-compat .btn-group > .btn + .btn { margin-left: 1px; }

/* ============================ Formularios ============================ */

.proui-compat label { font-weight: 600; margin-bottom: 5px; display: inline-block; font-size: 13px; }
.proui-compat .form-group { margin-bottom: 16px; }
.proui-compat .form-control { display: block; width: 100%; padding: 8px 12px; font-size: 14px; color: var(--color-texto); background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 8px; transition: border-color .15s, box-shadow .15s; }
.proui-compat .form-control:focus { outline: none; border-color: var(--color-acento-borde); box-shadow: 0 0 0 3px var(--color-acento-suave); }
.proui-compat .form-control[disabled], .proui-compat .form-control[readonly] { background: var(--color-panel-suave); color: var(--color-tenue); }
.proui-compat textarea.form-control { min-height: 80px; }
.proui-compat select.form-control { -webkit-appearance: auto; appearance: auto; }
.proui-compat .help-block { display: block; font-size: 12px; color: var(--color-tenue); margin-top: 5px; font-weight: 400; }
.proui-compat .control-label { font-weight: 600; }
/* form-horizontal: en Bootstrap 3 el form-group ES una fila (label al lado del campo).
   Sin esto los col-* del form-group se apilan y el form queda angosto con blanco a la derecha. */
.proui-compat .form-horizontal .form-group { display: flex; flex-wrap: wrap; align-items: flex-start; }
.proui-compat .form-horizontal .control-label { padding-top: 9px; margin-bottom: 0; }
@media (min-width: 768px) { .proui-compat .form-horizontal .control-label { text-align: right; } }
.proui-compat .checkbox, .proui-compat .radio { margin: 8px 0; font-weight: 400; }
.proui-compat .checkbox label, .proui-compat .radio label { font-weight: 400; }
.proui-compat input[type="checkbox"], .proui-compat input[type="radio"] { accent-color: #d5705c; width: 15px; height: 15px; }
.proui-compat .has-error .form-control { border-color: #f43f5e; }
.proui-compat .has-error .help-block, .proui-compat .has-error .control-label { color: var(--color-error); }

.proui-compat .input-group { display: flex; align-items: stretch; width: 100%; }
.proui-compat .input-group .form-control { flex: 1 1 auto; width: 1%; border-radius: 0; }
.proui-compat .input-group > :first-child, .proui-compat .input-group > :first-child .btn:first-child,
.proui-compat .input-group > .form-control:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.proui-compat .input-group > :last-child, .proui-compat .input-group > :last-child .btn:last-child,
.proui-compat .input-group > .form-control:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.proui-compat .input-group-addon { display: flex; align-items: center; padding: 0 12px; background: var(--color-panel-suave); border: 1px solid var(--color-borde); color: var(--color-suave); font-size: 13px; }
.proui-compat .input-group-addon + .form-control { border-left: 0; }
.proui-compat .input-group-btn { display: flex; }
.proui-compat .input-group-btn .btn { border-radius: 0; height: 100%; }
.proui-compat .input-group-lg .form-control { padding: 12px 14px; font-size: 16px; }

/* Switch de ProUI (label.switch > input + span) */
.proui-compat .switch { position: relative; display: inline-block; vertical-align: middle; margin: 0; }
.proui-compat .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.proui-compat .switch span { display: inline-block; width: 44px; height: 24px; background: var(--color-borde); border-radius: 9999px; position: relative; transition: background .15s; cursor: pointer; }
.proui-compat .switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--color-panel); border-radius: 50%; transition: left .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.proui-compat .switch input:checked + span { background: #10b981; }
.proui-compat .switch input:checked + span::after { left: 22px; }

/* ============================ Bloques (panels) ============================ */

.proui-compat .block { background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); margin-bottom: 16px; padding: 16px; }
.proui-compat .block-title { display: flex; flex-wrap: wrap; row-gap: 8px; align-items: center; margin: -16px -16px 16px; padding: 13px 16px; border-bottom: 1px solid var(--color-borde-suave); }
.proui-compat .block-title h1, .proui-compat .block-title h2, .proui-compat .block-title h3,
.proui-compat .block-title h4, .proui-compat .block-title h5 { font-size: 15px; font-weight: 700; margin: 0; }
.proui-compat .block-title .block-options { order: 1; margin-left: auto; float: none; display: flex; gap: 6px; align-items: center; }
.proui-compat .block-content { padding: 0; }
.proui-compat .block-content-full { margin: 0 -16px -16px; }
.proui-compat .block-section { margin-bottom: 16px; }

/* El título de semana de la agenda: el reset de h3 del compat le pisaba los márgenes laterales
   que le da crossfy.css (la flecha de semana siguiente quedaba pegada al texto) */
.proui-compat .crossfy-nav-semana-fila h3 { margin: 0 15px 0 5px; }

/* ============================ Header de página ============================ */

.proui-compat .content-header { margin-bottom: 20px; }
.proui-compat .content-header .header-section h1 { font-size: 24px; font-weight: 700; margin: 0; line-height: 1.3; }
.proui-compat .content-header .header-section h1 i { color: var(--color-tenue); margin-right: 10px; font-size: 26px; vertical-align: -2px; }
.proui-compat .content-header .header-section h1 small { display: inline-block; font-size: 14px; color: var(--color-suave); font-weight: 400; margin-top: 4px; }

/* Header con imagen (home / agenda) */
.proui-compat .content-header-media { position: relative; overflow: hidden; border-radius: 16px; min-height: 190px; margin-bottom: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.proui-compat .content-header-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.proui-compat .content-header-media .header-section { position: relative; z-index: 1; padding: 22px 24px; background: linear-gradient(to top, rgba(15, 23, 42, .78), rgba(15, 23, 42, .12)); }
.proui-compat .content-header-media .header-section h1 { color: #fff; }
.proui-compat .content-header-media .header-section h1 i { color: rgba(255, 255, 255, .7); }
.proui-compat .content-header-media .header-section h1 small { color: rgba(255, 255, 255, .8); }

/* ============================ Tablas ============================ */

.proui-compat .table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.proui-compat .table th { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--color-borde); }
/* break-word (NO anywhere): anywhere colapsa el min-width de las columnas y en mobile
   pulveriza las tablas letra por letra; break-word solo corta palabras imposibles (emails) */
.proui-compat .table td { padding: 10px 12px; border-top: 1px solid var(--color-borde-suave); overflow-wrap: break-word; }
.proui-compat .table-vcenter th, .proui-compat .table-vcenter td { vertical-align: middle; }
.proui-compat .table-striped > tbody > tr:nth-child(odd) { background: var(--color-panel-suave); }
.proui-compat .table-hover > tbody > tr:hover { background: var(--color-panel-suave); }
.proui-compat .table-condensed th, .proui-compat .table-condensed td { padding: 6px 8px; }
.proui-compat .table-bordered th, .proui-compat .table-bordered td { border: 1px solid var(--color-borde); }
.proui-compat .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Columna Acciones pegada al borde derecho visible: en pantallas angostas la tabla scrollea
   horizontal y los botones (lo más usado) quedaban ocultos del otro lado del scroll.
   z-index: los btn-group de las celdas normales son position:relative y sino la taparían. */
.proui-compat .table-responsive th.crossfy-col-acciones,
.proui-compat .table-responsive td.crossfy-col-acciones {
    position: sticky;
    right: 0;
    z-index: 2;
    background: var(--color-panel);
    box-shadow: -8px 0 8px -8px rgba(15, 23, 42, .18);
}
.proui-compat .table-responsive .table-striped > tbody > tr:nth-child(odd) td.crossfy-col-acciones { background: var(--color-panel-suave); }
.proui-compat .table-responsive .table-hover > tbody > tr:hover td.crossfy-col-acciones { background: var(--color-panel-suave); }

/* DataTables (los controles los genera el plugin).
   OJO: el wrapper trae clase form-inline (dt-bootstrap) — NO debe heredar el flex de .form-inline. */
.proui-compat .dataTables_wrapper.form-inline { display: block; }
.proui-compat .dataTables_wrapper::after { content: ""; display: table; clear: both; }
.proui-compat .dataTables_filter label, .proui-compat .dataTables_length label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; color: var(--color-suave); font-size: 13px; }
.proui-compat .dataTables_length { float: left; margin-bottom: 10px; }
.proui-compat .dataTables_filter { float: right; margin-bottom: 10px; }
.proui-compat .dataTables_length select, .proui-compat .dataTables_filter input { display: inline-block; width: auto; padding: 6px 10px; border: 1px solid var(--color-borde); border-radius: 8px; margin: 0 4px; }
.proui-compat .dataTables_info { float: left; font-size: 12px; color: var(--color-tenue); padding-top: 10px; }
.proui-compat .dataTables_paginate { float: right; padding-top: 6px; }
/* plugins.css (vendor ProUI) pinta las filas del wrapper con un gris fijo:
   `.dataTables_wrapper > div { background-color: #f9fafc; border: 1px solid #eaedf1 }`.
   Son las dos tiras (la del filtro arriba y la del "Mostrando N resultados" abajo), que en
   modo oscuro quedaban blancas. Se tokenizan acá para no tocar el vendor. */
.proui-compat .dataTables_wrapper > div { background-color: var(--color-panel-suave); border-color: var(--color-borde); }
.proui-compat table.dataTable { margin: 0 !important; }

.proui-compat .pagination { display: inline-flex; gap: 4px; list-style: none; padding: 0; margin: 10px 0; }
.proui-compat .pagination > li > a, .proui-compat .pagination > li > span { display: block; padding: 6px 12px; border: 1px solid var(--color-borde); border-radius: 8px; color: var(--color-texto); font-size: 13px; text-decoration: none; }
.proui-compat .pagination > li > a:hover { background: var(--color-panel-suave); }
.proui-compat .pagination > li.active > a, .proui-compat .pagination > li.active > span { background: #d5705c; border-color: #d5705c; color: #fff; }
.proui-compat .pagination > li.disabled > a, .proui-compat .pagination > li.disabled > span { opacity: .45; pointer-events: none; }

/* Tablas de precios de ProUI (Info de Pago: table-pricing + table-featured) */
.proui-compat address { font-style: normal; margin-bottom: 16px; line-height: 1.6; }
.proui-compat .table-borderless th, .proui-compat .table-borderless td { border: none; }
.proui-compat .table-pricing { text-align: center; background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 16px; overflow: hidden; border-collapse: separate; border-spacing: 0; margin-bottom: 16px; }
.proui-compat .table-pricing th { text-align: center; font-size: 19px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--color-titulo); padding: 18px 12px; border-bottom: 1px solid var(--color-borde-suave); }
.proui-compat .table-pricing td { padding: 10px 14px; color: var(--color-texto); border: none; }
.proui-compat .table-pricing .table-price { background: var(--color-panel-suave); padding: 20px 14px; }
.proui-compat .table-pricing .table-price h1 { font-size: 40px; font-weight: 800; margin: 0; color: var(--color-titulo); line-height: 1.1; }
.proui-compat .table-pricing .table-price h1 small { display: block; font-size: 15px; color: var(--color-suave); font-weight: 400; margin-top: 4px; }
.proui-compat .table-pricing td:last-child { padding-bottom: 16px; }
/* Plan destacado (anual): header salmón + cuerpo oscuro, como el original */
.proui-compat .table-featured { border-color: #e38e7b; box-shadow: 0 6px 20px rgba(227, 142, 123, .3); }
.proui-compat .table-featured th { background: #e38e7b; color: #fff; }
.proui-compat .table-featured td { background: #1e293b; color: #cbd5e1; }
.proui-compat .table-featured .table-price { background: #0f172a; }
.proui-compat .table-featured .table-price h1 { color: #fff; }
.proui-compat .table-featured .table-price h1 small { color: #94a3b8; }

/* ============================ Labels y badges ============================ */

.proui-compat .label { display: inline-block; padding: 3px 9px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.3; }
.proui-compat .label-default { background: var(--color-panel-fuerte); color: var(--color-texto); }
.proui-compat .label-primary { background: var(--color-acento-suave); color: var(--color-acento); }
.proui-compat .label-info { background: var(--color-info-suave); color: var(--color-info); }
.proui-compat .label-success { background: var(--color-ok-suave); color: var(--color-ok); }
.proui-compat .label-warning { background: var(--color-alerta-suave); color: var(--color-alerta); }
.proui-compat .label-danger { background: var(--color-error-suave); color: var(--color-error); }
.proui-compat .badge { display: inline-block; background: var(--color-panel-fuerte); color: var(--color-texto); border-radius: 9999px; padding: 2px 8px; font-size: 11px; font-weight: 700; }

/* ============================ Widgets ============================ */

.proui-compat .widget { display: block; background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.proui-compat a.widget:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .1); transform: translateY(-1px); color: inherit; }
/* widget-simple conserva la maquetación original de ProUI (floats + text-right):
   flex acá rompe tarjetas como la de anotados en claseDetalle (avatar izq, botones der) */
.proui-compat .widget-simple { display: block; padding: 14px; }
.proui-compat .widget-simple::after { content: ""; display: table; clear: both; }
.proui-compat .widget-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; }
.proui-compat .widget-icon.pull-left { margin-right: 12px; }
.proui-compat .widget-icon.pull-right { margin-left: 12px; }
.proui-compat .widget-simple .widget-image { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.proui-compat .widget-simple .widget-image.pull-left { margin-right: 12px; }
.proui-compat .widget-content { margin: 0; font-size: 14px; line-height: 1.45; }
.proui-compat h3.widget-content, .proui-compat h2.widget-content { font-size: 15px; font-weight: 400; margin: 0; }
.proui-compat .widget-content strong { font-weight: 700; }
.proui-compat .widget-content small { color: var(--color-tenue); font-size: 12px; }
.proui-compat .widget-extra { padding: 10px 14px; }
.proui-compat .widget-extra h4 { margin: 0; }
/* Solo es "light" (blanco) sobre un fondo temático de color; suelto sobre la página va oscuro
   (ej: los días de la semana en la agenda usan esta clase sin fondo) */
.proui-compat .widget-content-light { color: var(--color-titulo); margin: 0; font-size: 13px; font-weight: 700; }
.proui-compat [class*="themed-background"] .widget-content-light { color: #fff; }
/* La bajada del header (ej: "Reservas del día: N" en la agenda) va fina y gris, no toda negrita */
.proui-compat .widget-content-light small { font-weight: 400; color: var(--color-tenue); }
.proui-compat [class*="themed-background"] .widget-content-light small { color: rgba(255, 255, 255, .75); }
.proui-compat .widget-extra-full { padding: 14px; text-align: center; }
.proui-compat .widget-extra-full .h2 { font-size: 28px; font-weight: 800; color: var(--color-titulo); }

/* Fondos temáticos de ProUI → paleta nueva (set COMPLETO relevado del admin; si aparece una
   variante nueva, agregarla acá — sin fondo, widget-content-light queda blanco sobre blanco) */
.proui-compat .themed-background { background: #0ea5e9; }
.proui-compat .themed-background-dark { background: #1e293b; }
.proui-compat .themed-background-lake { background: #0ea5e9; }
.proui-compat .themed-background-info { background: #0ea5e9; }
.proui-compat .themed-background-coral { background: #f43f5e; }
.proui-compat .themed-background-danger { background: #f43f5e; }
.proui-compat .themed-background-fire { background: #ef4444; }
.proui-compat .themed-background-dark-fire { background: #b91c1c; }
.proui-compat .themed-background-spring { background: #10b981; }
.proui-compat .themed-background-emerald { background: #10b981; }
.proui-compat .themed-background-success { background: #10b981; }
.proui-compat .themed-background-forest { background: #16a34a; }
.proui-compat .themed-background-amethyst { background: #8b5cf6; }
.proui-compat .themed-background-blackberry { background: #6d28d9; }
.proui-compat .themed-background-fancy { background: #c026d3; }
.proui-compat .themed-background-autumn { background: #f59e0b; }
.proui-compat .themed-background-night { background: #1e3a8a; }
.proui-compat .themed-background-flatie { background: #475569; }
.proui-compat .themed-background-dark-flatie { background: #334155; }

/* ============================ Tabs y navegación ============================ */

.proui-compat .nav { list-style: none; padding: 0; margin: 0; }
.proui-compat .nav-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--color-borde); margin-bottom: 16px; }
.proui-compat .nav-tabs > li > a { display: block; padding: 9px 14px; color: var(--color-suave); font-weight: 600; font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.proui-compat .nav-tabs > li > a:hover { color: var(--color-texto); background: var(--color-panel-suave); border-radius: 8px 8px 0 0; }
.proui-compat .nav-tabs > li.active > a { color: var(--color-acento); border-bottom-color: #d5705c; }
.proui-compat .tab-content > .tab-pane { display: none; }
.proui-compat .tab-content > .active { display: block; }
.proui-compat .nav-pills > li > a { display: block; padding: 8px 14px; border-radius: 9999px; color: var(--color-texto); font-weight: 600; font-size: 13px; text-decoration: none; }
.proui-compat .nav-pills > li.active > a { background: #d5705c; color: #fff; }

/* nav-horizontal de ProUI: solapas que navegan entre páginas (reportes, estadísticas) */
.proui-compat .nav-horizontal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; list-style: none; padding: 0; margin: 0 0 20px; border-bottom: 1px solid var(--color-borde); }
.proui-compat .nav-horizontal > li > a { display: block; padding: 10px 16px; color: var(--color-suave); font-weight: 600; font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.proui-compat .nav-horizontal > li > a:hover { color: var(--color-texto); background: var(--color-panel-suave); border-radius: 8px 8px 0 0; }
.proui-compat .nav-horizontal > li.active > a { color: var(--color-acento); border-bottom-color: #d5705c; }

.proui-compat .list-group { list-style: none; padding: 0; margin: 0 0 16px; border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; }
.proui-compat .list-group-item { padding: 11px 14px; background: var(--color-panel); border-bottom: 1px solid var(--color-borde-suave); display: block; }
.proui-compat .list-group-item:last-child { border-bottom: 0; }
.proui-compat a.list-group-item:hover { background: var(--color-panel-suave); }

/* ============================ Varios ============================ */

/* Breadcrumbs: la auditoría UX los eliminó de los headers; acá se ocultan de una para todo el admin */
.proui-compat .breadcrumb { display: none; }

.proui-compat .panel { background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; margin-bottom: 16px; overflow: hidden; }
.proui-compat .panel-heading { padding: 12px 16px; border-bottom: 1px solid var(--color-borde-suave); font-weight: 700; }
.proui-compat .panel-title { margin: 0; font-size: 15px; }
.proui-compat .panel-body { padding: 16px; }

.proui-compat .widget-advanced .widget-header { padding: 14px; background: var(--color-panel-suave); }
.proui-compat .widget-advanced .widget-main { padding: 14px; }

.proui-compat .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.proui-compat .form-inline .form-control { display: inline-block; width: auto; }
/* Bootstrap 3 achicaba el input-group dentro de form-inline (botón al costado, no abajo) */
.proui-compat .form-inline .form-group { display: flex; align-items: center; gap: 8px; margin-bottom: 0; }
.proui-compat .form-inline .input-group { width: auto; }

.proui-compat .nav-stacked { display: block; }
.proui-compat .nav-stacked > li > a { display: block; padding: 8px 12px; border-radius: 8px; color: var(--color-texto); text-decoration: none; }
.proui-compat .nav-stacked > li > a:hover { background: var(--color-panel-suave); }
.proui-compat .nav-stacked > li.active > a { background: var(--color-acento-suave); color: var(--color-acento); }

/* Store de vender.html (antes venía del CSS frontend de ProUI, que se dejó de cargar).
   OJO: .store-items ya es un .row — la grilla la dan las col-*, no agregar flex/gap acá. */
.proui-compat .store-item { background: var(--color-panel); border: 1px solid var(--color-borde); border-radius: 12px; overflow: hidden; margin-bottom: 16px; transition: box-shadow .15s; }
.proui-compat .store-item:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .1); }
.proui-compat .store-item-image { display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--color-panel-suave); }
.proui-compat .store-item-image img { max-height: 100%; object-fit: cover; }
.proui-compat .store-item-info { padding: 12px; }
.proui-compat .store-item-price { font-weight: 800; font-size: 16px; }

/* Videos embebidos responsive de Bootstrap 3 (tutoriales) */
.proui-compat .embed-responsive { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border-radius: 12px; }
.proui-compat .embed-responsive::before { display: block; content: ""; }
.proui-compat .embed-responsive-16by9::before { padding-top: 56.25%; }
.proui-compat .embed-responsive-4by3::before { padding-top: 75%; }
.proui-compat .embed-responsive .embed-responsive-item, .proui-compat .embed-responsive iframe,
.proui-compat .embed-responsive embed, .proui-compat .embed-responsive object, .proui-compat .embed-responsive video { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; border: 0; }

/* ============================ Progreso ============================ */

/* Con altura para que el label de porcentaje adentro de la barra se lea (perfil: presentismo,
   utilización). min-width fit-content evita que "100.0%" se corte cuando la barra es corta. */
.proui-compat .progress { background: var(--color-panel-fuerte); border-radius: 9999px; height: 18px; overflow: hidden; margin-bottom: 8px; }
.proui-compat .progress-mini { height: 6px; }
.proui-compat .progress-bar { display: flex; align-items: center; justify-content: center; height: 100%; background: #0ea5e9; color: #fff; font-size: 11px; font-weight: 600; white-space: nowrap; min-width: fit-content; padding: 0 8px; transition: width .3s; }
.proui-compat .progress-mini .progress-bar { min-width: 0; padding: 0; }
.proui-compat .progress-bar-info { background: #0ea5e9; }
.proui-compat .progress-bar-success { background: #10b981; }
.proui-compat .progress-bar-warning { background: #f59e0b; }
.proui-compat .progress-bar-danger { background: #f43f5e; }

/* Links de datos verdes (text-success heredado del admin viejo) → azul de links */
.proui-compat .table a.text-success, .proui-compat .table a .text-success { color: var(--color-link); }

/* Avatares chicos en tablas: nunca se achican ni se ovalan aunque la columna se apriete */
.proui-compat img.crossfy-avatar-usuario-mini { width: 44px; height: 44px; min-width: 44px; max-width: none; object-fit: cover; border-radius: 50%; }

/* Estados contextuales de fondo (tarjetas de turnos en detalle de clase, referidos):
   en ProUI venían de main.css. PRESENTE verde, RESERVADO ámbar, deuda rojo. */
.proui-compat .bg-success { background-color: var(--color-ok-suave) !important; }
.proui-compat .bg-warning { background-color: var(--color-alerta-suave) !important; }
.proui-compat .bg-danger { background-color: var(--color-error-suave) !important; }
.proui-compat .bg-info { background-color: var(--color-info-suave) !important; }
.proui-compat .bg-disabled { background-color: var(--color-panel-fuerte) !important; }

/* Inputs editables adentro de tablas (ej: nombre del profesor): que nunca queden ilegibles de angostos */
.proui-compat .table td .input-group > .form-control { min-width: 140px; }

/* Perfil del socio: header con botonera de acciones a la derecha */
.proui-compat .crossfy-perfil-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; }
.proui-compat .crossfy-perfil-header h1 { margin: 0; }
.proui-compat .crossfy-perfil-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
/* Perfil del socio: avatar chico al lado del nombre (pisa el tamaño grande global del avatar) */
.proui-compat .crossfy-perfil-persona { display: flex; align-items: center; gap: 14px; }
.proui-compat .crossfy-perfil-persona img.crossfy-avatar-usuario { width: 72px; height: 72px; min-width: 72px; max-width: none; object-fit: cover; }
.proui-compat .crossfy-perfil-persona h3 { margin: 0 0 5px; font-size: 17px; }
/* Perfil del socio: medidores (barra con etiqueta y % afuera, no adentro de la barra) */
.proui-compat .crossfy-medidor { padding: 2px 0 12px; }
.proui-compat .crossfy-medidor-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.proui-compat .crossfy-medidor .progress { height: 10px; margin-bottom: 0; }
.proui-compat .crossfy-medidor .progress-bar { min-width: 0; padding: 0; font-size: 0; }

/* Typeahead (bootstrap3-typeahead) dentro de compat: la regla de tipografía
   .proui-compat ul le metía viñetas y sangría al desplegable de resultados */
.proui-compat ul.dropdown-menu { list-style: none; padding: 6px; margin: 4px 0 0; }
.proui-compat .dropdown-menu > li.active > a { background: var(--color-panel-fuerte); color: var(--color-titulo); }

/* Generador de rutinas: robot + globo centrados en la columna derecha */
.proui-compat .crossfy-gym-robot { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 420px; height: 100%; gap: 6px; }
/* Panel lateral de los generadores (WOD y Gym). Antes eran un PNG + un GIF de un robot:
   quedaban como un ladrillo blanco en modo oscuro y ya no aportaban novedad. Ahora es un
   estado en CSS puro (reposo / generando) que sirve en los dos temas. */
.proui-compat .crossfy-gym-robot .crossfy-gen-reposo,
.proui-compat .crossfy-gym-robot .crossfy-gen-trabajando { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 28px 16px; color: var(--color-suave); }
.proui-compat .crossfy-gym-robot .crossfy-gen-trabajando { display: none; }
.proui-compat .crossfy-gym-robot.crossfy-gen-activo .crossfy-gen-reposo { display: none; }
.proui-compat .crossfy-gym-robot.crossfy-gen-activo .crossfy-gen-trabajando { display: flex; }
.proui-compat .crossfy-gym-robot p { margin: 0; font-size: 14px; max-width: 260px; }
.proui-compat .crossfy-gym-robot .fa { font-size: 40px; color: var(--color-borde); }
.proui-compat .crossfy-gen-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--color-borde); border-top-color: var(--color-acento); animation: crossfy-gen-girar .8s linear infinite; }
@keyframes crossfy-gen-girar { to { transform: rotate(360deg); } }
/* Respeta a quien pidió menos movimiento en el sistema operativo */
@media (prefers-reduced-motion: reduce) {
    .proui-compat .crossfy-gen-spinner { animation-duration: 3s; }
}

/* Form de rutina: el ejercicio elegido se muestra readonly (click abre el buscador), que no parezca placeholder */
.proui-compat .ejercicio-busqueda[readonly] { background: var(--color-panel); color: var(--color-titulo); cursor: pointer; }
/* Form de rutina: numéricos angostos (series/reps) sin recortar el valor contra el spinner */
.proui-compat .dia-panel input[type="number"].input-sm { padding-left: 8px; padding-right: 2px; }
/* Form de rutina: desplegables de resultados (socio y ejercicios); vacíos no se muestran */
.proui-compat .ejercicio-resultados, .proui-compat #resultados-busqueda { border: 1px solid var(--color-borde); border-radius: 10px; padding: 4px; }
/* El de ejercicios abre dentro de una celda angosta: que se ensanche para poder leer las opciones */
.proui-compat .ejercicio-resultados { min-width: 240px; max-width: 320px; z-index: 300; background: var(--color-panel); }
.proui-compat .ejercicio-resultados:empty, .proui-compat #resultados-busqueda:empty { display: none; }
.proui-compat .ejercicio-resultados a, .proui-compat #resultados-busqueda a { display: block; padding: 7px 10px; border: 0; border-radius: 6px; color: var(--color-texto); text-decoration: none; cursor: pointer; }
.proui-compat .ejercicio-resultados a:hover, .proui-compat .ejercicio-resultados a.active,
.proui-compat #resultados-busqueda a:hover, .proui-compat #resultados-busqueda a.active { background: var(--color-panel-fuerte); }

/* Config Mercado Pago: select de caja + Guardar en una misma fila */
.proui-compat .crossfy-mp-caja-fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.proui-compat .crossfy-mp-caja-fila .form-control { flex: 1 1 220px; }

/* Perfil del socio: resumen de estadísticas como contadores horizontales a lo ancho */
.proui-compat .crossfy-resumen-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.proui-compat .crossfy-resumen-stats > div { flex: 1 1 140px; background: var(--color-panel-suave); border-radius: 10px; padding: 12px 14px; text-align: center; }
.proui-compat .crossfy-resumen-stats > div strong { display: block; font-size: 20px; }
.proui-compat .crossfy-resumen-stats > div span { font-size: 12px; color: var(--color-suave); }

/* Chat (chatui de ProUI, su CSS vivía en main.css): mensajes arriba con scroll, input abajo */
.proui-compat .chatui-talk { height: 420px; overflow-y: auto; padding: 4px 2px; }
.proui-compat .chatui-talk ul { list-style: none; padding: 0; margin: 0; }
/* Burbujas: los mensajes propios (highlight) van a la derecha en salmón, el resto a la izquierda en gris */
.proui-compat .chatui-talk-msg {
    position: relative;
    width: fit-content;
    max-width: 82%;
    padding: 8px 30px 6px 12px;
    margin: 0 0 10px;
    background: var(--color-panel-fuerte);
    border-radius: 12px 12px 12px 3px;
    overflow-wrap: break-word;
}
.proui-compat .chatui-talk-msg.chatui-talk-msg-highlight {
    margin-left: auto;
    background: var(--color-acento-suave);
    border-radius: 12px 12px 3px 12px;
}
/* El <br> del template rompía el flujo de la burbuja; la hora pasa a ser bloque propio */
.proui-compat .chatui-talk-msg br { display: none; }
.proui-compat .chatui-talk-msg small { display: block; text-align: right; font-size: 10px; line-height: 1; color: var(--color-tenue); margin-top: 4px; }
/* Botón borrar: chiquito en la esquina de la burbuja (el template trae color inline, va con !important) */
.proui-compat .chatui-talk-msg .sidebar-header-options { position: absolute; top: 7px; right: 9px; margin: 0; float: none; }
.proui-compat .chatui-talk-msg .sidebar-header-options a { color: var(--color-tenue) !important; cursor: pointer; font-size: 11px; }
.proui-compat .chatui-talk-msg .sidebar-header-options a:hover { color: #ef4444 !important; }
.proui-compat .chatui-input { border-top: 1px solid var(--color-borde-suave); padding-top: 10px; }
.proui-compat .chatui-talk a .text-success { color: var(--color-link); }

/* ==================== Ajustes mobile (QA desde el celu, 27/08) ==================== */
@media (max-width: 767px) {
    /* Paginado (50) y Filtrar en la MISMA línea, compactos */
    .proui-compat .dataTables_wrapper .row { align-items: center; }
    .proui-compat .dataTables_wrapper .row > [class*="col-"] { width: auto; flex: 1 1 auto; }
    .proui-compat .dataTables_length { float: none; margin: 0; }
    .proui-compat .dataTables_filter { float: none; margin: 0; }
    .proui-compat .dataTables_filter label { flex-wrap: nowrap; }
    .proui-compat .dataTables_filter input { min-width: 0; flex: 1; }
    /* Chips de filtro de la agenda: UNA línea deslizable (sin scrollbar), no una pila de botones */
    .proui-compat .crossfy-filtros-agenda .btn-group { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .proui-compat .crossfy-filtros-agenda .btn-group::-webkit-scrollbar { display: none; }
    .proui-compat .crossfy-filtros-agenda .btn-group > .btn { border-radius: 8px; margin-left: 0; white-space: nowrap; flex: 0 0 auto; }
    /* Formularios inline (filtros de reportes, rangos de fechas): apilados a ancho completo */
    .proui-compat .form-inline:not(.dataTables_wrapper):not(.crossfy-filtro-rango) { display: block; }
    .proui-compat .form-inline:not(.dataTables_wrapper) .form-group { margin-bottom: 8px; }
    .proui-compat .form-inline:not(.dataTables_wrapper):not(.crossfy-filtro-rango) .form-control,
    .proui-compat .form-inline:not(.dataTables_wrapper):not(.crossfy-filtro-rango) .input-group { width: 100%; }
    /* Filtro de rango de fechas (reporte de profesores): desde/hasta lado a lado */
    .proui-compat .crossfy-filtro-rango { display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; justify-content: flex-start; text-align: left; }
    .proui-compat .crossfy-filtro-rango .form-control { flex: 1 1 100px; width: auto !important; }
    /* El form-group interno también se apila: sin esto queda en flex-row y aplasta al daterange */
    .proui-compat .form-inline:not(.dataTables_wrapper):not(.crossfy-filtro-rango) .form-group { display: block; width: 100%; }
    /* Rango de fechas (Desde > Hasta): fila propia con los inputs repartidos, no cajitas mini (ej: historial de ventas) */
    .proui-compat .input-group.input-daterange { display: flex; width: 100%; margin-bottom: 8px; }
    .proui-compat .input-group.input-daterange .form-control { flex: 1 1 90px; width: auto !important; min-width: 0; }
    .proui-compat .input-group.input-daterange .input-group-addon { flex: 0 0 auto; display: flex; align-items: center; }
    /* Botones flotados directos del block (ej: Descargar resumen de ventas): dejan de flotar y no se enciman */
    .proui-compat .block > .block-options.pull-right { float: none; text-align: right; margin-bottom: 8px; }
    /* Botoneras de headers (ej: WODs con 4 botones): envuelven en vez de estirar la página */
    .proui-compat .block-options { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
    /* Acciones de formularios (Guardar/Publicar/Cancelar...): apiladas a lo ancho con aire, no amontonadas */
    .proui-compat .form-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
    .proui-compat .form-actions .btn { width: 100%; margin: 0; }
    /* Chat en mobile: la lista de conversaciones ARRIBA, la conversación con su input abajo */
    .proui-compat .crossfy-chat-lista { order: -1; }
    /* Avatar del perfil: 220px es media pantalla en un celu */
    .proui-compat .crossfy-avatar-usuario { width: 140px; height: 140px; }
    /* El chat ocupa lo que da la pantalla */
    .proui-compat .chatui-talk { height: 55vh; }
}

/* Tooltip de los gráficos Flot (reportes de socios/clases/cajas). La clase vivía en el
   main.css de ProUI, que ya no se carga. Va SIN prefijo .proui-compat porque el JS
   appendea el div directo al <body>, fuera del wrapper. */
.chart-tooltip {
    position: absolute;
    display: none;
    color: #fff;
    background-color: #0f172a;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 13px;
    z-index: 3000;
    pointer-events: none;
}

/* ===================== CKEditor 4 (modo oscuro) =====================
   El chrome del editor (toolbar, barra de ruta, paneles de los combos) es DOM normal y se
   estiliza acá; el area de edicion es un iframe aparte y va por static/css/ckeditor-contenido.css.
   Los paneles de los combos se insertan en el <body>, fuera de .proui-compat: por eso estos
   selectores son globales bajo .dark. !important porque CKEditor trae su CSS inline propio. */
.dark .cke, .dark .cke_chrome { border-color: var(--color-borde) !important; box-shadow: none !important; }
.dark .cke_top, .dark .cke_bottom { background: var(--color-panel-suave) !important; border-color: var(--color-borde) !important; box-shadow: none !important; }
.dark .cke_contents { border-color: var(--color-borde) !important; }
.dark .cke_toolgroup, .dark .cke_combo_button { background: var(--color-panel) !important; border-color: var(--color-borde) !important; box-shadow: none !important; }
.dark .cke_button_label, .dark .cke_combo_text, .dark .cke_path_item, .dark .cke_path_empty { color: var(--color-suave) !important; }
.dark .cke_button:hover, .dark .cke_button:focus, .dark .cke_button__on,
.dark .cke_combo_button:hover, .dark .cke_combo_button:focus { background: var(--color-panel-fuerte) !important; }
.dark .cke_panel, .dark .cke_panel_block { background: var(--color-panel) !important; border-color: var(--color-borde) !important; color: var(--color-texto) !important; }
.dark .cke_panel_listItem a { color: var(--color-texto) !important; }
.dark .cke_panel_listItem a:hover { background: var(--color-panel-fuerte) !important; }
/* Los iconos son un sprite PNG pensado para fondo claro: se invierten para que se vean. */
.dark .cke_button_icon, .dark .cke_combo_open { filter: invert(0.85) hue-rotate(180deg); }