:root {
  --negro: #0d0d0d; --negro2: #1a1a1a; --oro: var(--gold); --oro2: #b8952b; --oro-suave: #f6edd0;
  --fondo: #f7f4ec; --tarjeta: #fff; --texto: #1d1d1d; --gris: #6f6a5f; --borde: #e6dfcc;
  --ok: #1f7a3d; --ok-suave: #e3f3e8; --mal: #b3261e; --mal-suave: #fbe4e2; --alerta: #8a5a00; --alerta-suave: #fdf1d6;
  --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body.sin-uso { background: var(--fondo); color: var(--texto); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
button, input, select, textarea { font: inherit; }
.cargando-viejo { display: grid; place-items: center; height: 100vh; color: var(--oro); background: var(--negro); font-weight: 800; letter-spacing: .2em; }

/* ---------- Piezas ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--r); padding: 16px; }
.btn { border: 0; border-radius: 10px; padding: 12px 18px; font-weight: 700; cursor: pointer; background: var(--oro); color: var(--negro); }
.btn:hover { background: var(--oro2); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.negro { background: var(--negro); color: var(--oro); }
.btn.claro { background: #fff; color: var(--texto); border: 1px solid var(--borde); }
.btn.peligro { background: var(--mal); color: #fff; }
.btn.chico { padding: 7px 12px; font-size: 14px; }
.btn.grande { width: 100%; padding: 16px; font-size: 18px; }
.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 13px; color: var(--gris); margin-bottom: 4px; font-weight: 600; }
.campo input, .campo textarea, .campo select { width: 100%; padding: 11px 12px; border: 1px solid var(--borde); border-radius: 10px; background: #fff; }
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--oro); border-color: transparent; }
.aviso-error, .aviso-ok, .aviso-alerta { border-radius: 10px; padding: 11px 13px; font-weight: 600; }
.aviso-error { background: var(--mal-suave); color: var(--mal); }
.aviso-ok { background: var(--ok-suave); color: var(--ok); }
.aviso-alerta { background: var(--alerta-suave); color: var(--alerta); }
.gris { color: var(--gris); }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dinero { font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- Cobrar ---------- */
.cobrar { display: grid; grid-template-columns: 1fr 370px; gap: 18px; align-items: start; }
@media (max-width: 980px) { .cobrar { grid-template-columns: 1fr; } }
.buscador { position: relative; }
.resultados { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--borde); border-radius: 10px; z-index: 10; max-height: 300px; overflow: auto; box-shadow: 0 8px 24px #0002; }
.resultados button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; background: none; cursor: pointer; border-bottom: 1px solid #f0ebdd; }
.resultados button:hover { background: var(--oro-suave); }
.cliente-elegido { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--negro); color: #fff; border-radius: 10px; padding: 10px 14px; }
.cliente-elegido small { color: #bbb; display: block; }
.tabs { display: flex; gap: 6px; margin: 16px 0 10px; }
.tabs button { border: 1px solid var(--borde); background: #fff; border-radius: 999px; padding: 7px 14px; font-weight: 600; cursor: pointer; }
.tabs button.activo { background: var(--negro); color: var(--oro); border-color: var(--negro); }
.mosaico { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.item { text-align: left; background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 84px; }
.item:hover { border-color: var(--oro); box-shadow: 0 0 0 2px var(--oro-suave); }
.item b { font-size: 14px; }
.item .dinero { color: var(--oro2); margin-top: auto; }
.item.agotado { opacity: .45; cursor: not-allowed; }
.item .opciones { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.item .opciones button { border: 1px solid var(--oro); background: var(--oro-suave); border-radius: 8px; padding: 4px 7px; font-size: 12px; cursor: pointer; font-weight: 600; }
.cuenta { position: sticky; top: 16px; }
.lineas { list-style: none; margin: 0 0 12px; padding: 0; }
.lineas li { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--borde); }
.lineas input[type=number] { width: 56px; padding: 6px; border: 1px solid var(--borde); border-radius: 8px; text-align: center; }
.lineas .marca-abono { grid-column: 1 / -1; font-size: 13px; color: var(--gris); }
.total { display: flex; justify-content: space-between; font-size: 22px; font-weight: 800; padding: 8px 0 12px; }
.formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.formas button { border: 1px solid var(--borde); background: #fff; border-radius: 10px; padding: 9px 4px; font-size: 13px; font-weight: 700; cursor: pointer; }
.formas button.activo { background: var(--oro); border-color: var(--oro); }

/* ---------- Caja ---------- */
.cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.caja-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.estado { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.estado.abierta { background: var(--ok-suave); color: var(--ok); }
.estado.cerrada { background: #eee; color: #666; }
.cuadre { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.cuadre td { padding: 4px 0; }
.cuadre td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.cuadre tr.fuerte td { font-weight: 800; border-top: 1px solid var(--borde); padding-top: 7px; font-size: 16px; }

/* ---------- Ventana ---------- */
.velo { position: fixed; inset: 0; background: #000a; display: grid; place-items: center; z-index: 50; padding: 16px; }
.ventana { background: #fff; border-radius: 16px; padding: 20px; width: min(440px, 100%); max-height: 90vh; overflow: auto; }
.ventana h2 { margin-bottom: 12px; }
.ventana .acciones { display: grid; gap: 8px; margin-top: 14px; }


/* ---------- Cobros de hoy ---------- */
.hoy { margin-top: 18px; }
.hoy-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tabla-hoy { max-height: 420px; overflow: auto; }
.tabla-hoy table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-hoy td { padding: 8px 6px; border-top: 1px solid #f0ebdd; vertical-align: top; }
.tabla-hoy tr.anulado td { opacity: .5; text-decoration: line-through; }
.etiqueta { display: inline-block; margin-top: 3px; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 999px; text-decoration: none; }
.etiqueta.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta.mal { background: var(--mal-suave); color: var(--mal); }
.etiqueta.alerta { background: var(--alerta-suave); color: var(--alerta); }

/* Módulos nuevos dentro del marco original */
.content h1 { margin: 0 0 16px; font-size: 34px; letter-spacing: -.04em; }
.content h2 { margin: 0 0 10px; font-size: 17px; }
.pendiente-modulo { text-align: center; padding: 40px 24px; }
.pendiente-modulo h2 { font-size: 22px; }
.cargando { display: grid; place-items: center; height: 100vh; color: var(--gold2); background: #0a0a0b; font-weight: 900; letter-spacing: .2em; }
.side-logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 8px; background: #fff; }
.toast.bad { background: #b72e2e; }
.stat .home-detail-link { color: #8a6806; }
.role-pill.sin-red { color: #ff6b6b; }
.topbar { gap: 10px; }
.topbar > div { flex: 1; }
#aviso { position: fixed; right: 22px; bottom: 22px; left: auto; transform: none; z-index: 60; display: grid; gap: 8px; }
#aviso .toast { position: static; }
@media (max-width: 760px) { #aviso { left: 12px; right: 12px; bottom: 12px; width: auto; } }
.content .cobrar { margin-top: 0; }
a.nav-btn { display: block; text-decoration: none; }
.income-total.home-stat-click { color: #fff; }
/* Clientes y Membresías: estilos v4.4.5 y v4.4.7 del original (5 columnas en fila con barra de arriba) */
.membership-column.expired445{background:#fff8f3;border-color:#e9b8a7}.membership-column.expired445 h2{color:#9c4939}
#clientCards{max-width:100%;overflow-x:auto;scrollbar-width:thin}.membership-board{grid-template-columns:repeat(5,minmax(280px,1fr))!important;min-width:1470px!important}#clientesActivosCol{order:1}#clientesDiariosCol{order:2}#clientesPendientesCol{order:3}#clientesSinMembresiaCol{order:4}#clientesVencidosCol{order:5}#barraClientes447{height:22px;max-width:100%;overflow-x:auto;overflow-y:hidden;margin:7px 0 13px;scrollbar-color:#bf9e24 #f0eee7;scrollbar-width:auto}#barraClientes447>div{height:1px}
.membership-list{grid-template-columns:1fr!important}
@media(max-width:640px){.membership-board{grid-template-columns:repeat(5,minmax(82vw,82vw))!important;min-width:max-content!important;gap:10px}#clientCards{scroll-snap-type:x proximity}}
/* Inicio 2.ª parte (igual al original) */
.pending-home-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.pending-home-card{display:flex;flex-direction:column;gap:6px;cursor:pointer;font:inherit;color:inherit}
.pending-home-card strong{font-size:17px}.pending-home-card small{color:#74747c}.pending-home-card b{color:#8a6806;font-size:18px}
@media(max-width:1100px){.pending-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.pending-home-grid{grid-template-columns:1fr}}
.ingreso-rapido-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #eee;flex-wrap:wrap}
.ingreso-rapido-fila small{display:block;color:#74747c}.ingreso-rapido-botones{display:flex;gap:8px;flex-wrap:wrap}
.quick button{position:relative}.noti-badge{background:#d94b4b;color:#fff;border-radius:999px;padding:1px 8px;font-size:12px;margin-left:6px}
.cumple-card{margin-top:16px;padding:14px;border:1px solid #eadca8;border-radius:16px;background:linear-gradient(135deg,#fffdf5,#f7f1dc)}.cumple-card h3{margin:0 0 6px}
.saludo-enviado{color:#1e8e3e!important;font-weight:800;background:#e6f6ea;border:1px solid #b7e2c1;border-radius:999px!important}
.cerrar440{float:right;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:#fff;font-size:22px;cursor:pointer}
details.acciones439{display:inline-block;position:relative}details.acciones439 summary{cursor:pointer;border:1px solid #ddd;border-radius:10px;padding:8px 12px;list-style:none;font-weight:400;color:#171719}
details.acciones439>div{position:absolute;right:0;top:110%;background:#fff;border:1px solid #e5e5e1;border-radius:12px;padding:8px;z-index:5;box-shadow:0 10px 24px rgba(0,0,0,.12);white-space:nowrap}
.danger-link{color:#b72e2e}
/* Notificaciones y cumpleaños (v5.2.0 del original) */
.noti-cumple{border:1px solid #eadca8;border-left:5px solid var(--gold);border-radius:16px;background:#fffdf6;padding:16px 18px;margin-top:12px;display:grid;gap:6px}
.noti-cumple small{color:#74747c}.noti-cumple-acciones{display:flex;justify-content:flex-end;align-items:center;gap:10px;flex-wrap:wrap}
.cumple-card{margin-top:16px;padding:16px;border:1px solid #f1c8c8;border-radius:20px;background:linear-gradient(135deg,#fff6e8,#fde7ef);box-shadow:0 8px 20px rgba(0,0,0,.05)}
.cumple-cab{display:flex;align-items:center;gap:12px;margin-bottom:6px}.cumple-cab h3{margin:0}.cumple-cab small{color:#74747c}.cumple-torta{font-size:40px}
.cumple-cab .cumple-x{margin-left:auto}
.cumple-sec{font-weight:800;color:#b03a5b;margin:10px 0 4px;padding-bottom:4px;border-bottom:1px dashed #e9c7cf}
.cumple-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0}.cumple-fila small{display:block;color:#74747c}
.cumple-der{display:flex;align-items:center;gap:8px}.cumple-manana{color:#8a6806;font-weight:800;font-size:14px}
.cumple-x{width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.06);cursor:pointer}
.saludo-btn{background:#25d366;color:#fff!important;text-decoration:none;font-weight:800;padding:7px 12px;border-radius:999px;font-size:13px;white-space:nowrap}
.ver-ingresos{border-color:var(--gold)!important;color:#8a6806;font-weight:800;margin:6px 0}
/* Cobrar (v3 del original) */
.cb-unico input{border:1.5px solid var(--gold)!important;padding:16px 18px!important;font-size:17px;border-radius:14px!important}
.opciones-scoop{display:flex;flex-direction:column;gap:6px;margin-top:6px}.opciones-scoop button{border:1px solid #1d8f4e;background:#eef8f1;border-radius:8px;padding:6px 8px;text-align:left;cursor:pointer;font-size:13px}
.opciones-scoop button:disabled{opacity:.4;cursor:not-allowed}
.cobro-hist-card-simple.anulado{opacity:.6}.cobro-hist-card-simple.consumo{border-left:5px solid #8a6806}
@media(max-width:980px){.cobro-v3{grid-template-columns:1fr}.cuenta-v3{position:static}.items-v3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.template-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.template-card{border:1px solid #e5e4dc;border-radius:16px;padding:14px}
.msg-history-actions{display:flex;gap:6px;flex-wrap:wrap}
@media(max-width:640px){.template-grid{grid-template-columns:1fr}}

/* Editar fechas de la membresía (igual al original v4.3.7 / v5.3.6) */
.em-otra{display:block;width:100%;margin:6px 0;text-align:left}
.em-cliente{margin:0}
.config-note .em-vence{width:auto;display:inline-block;padding:4px 6px;margin-left:4px}
.aviso536-fondo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100001;display:flex;align-items:center;justify-content:center;padding:16px}
.aviso536{background:#fff;border-radius:16px;max-width:470px;width:100%;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.aviso536-cab{background:#c25400;color:#fff;padding:14px 18px;font-weight:800;font-size:18px}
.aviso536-cuerpo{padding:16px 18px;font-size:15px;line-height:1.45;color:#222}
.aviso536-cuerpo p{margin:0 0 8px}
.aviso536-nota{color:#666;font-size:13px;margin:0}
.aviso536-botones{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 16px;flex-wrap:wrap}
.aviso536-corregir{background:#1f7a3a;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}

/* R-6.4 · "Revisa cómo se va a cobrar" y deudas de una persona (igual al original v5.3.3/v5.3.9) */
.rev-fondo{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100001;display:flex;align-items:center;justify-content:center;padding:16px}
.rev-caja{background:#fff;border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.rev-cab{color:#fff;padding:14px 18px;font-weight:800;font-size:18px}.rev-cab.ok{background:#1e8c4e}.rev-cab.falta{background:#b3261e}
.rev-cuerpo{padding:14px 18px;font-size:15px;color:#222}.rev-cuerpo p{margin:0 0 8px}
.rev-alerta{padding:10px 12px;border-radius:10px;background:#fdecea;color:#8a1c14;font-weight:700}
.rev-fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid #eee}.rev-fila small{color:#666}
.rev-monto{width:96px;text-align:right;padding:8px;border:1px solid #ccc;border-radius:8px}
.rev-suma{margin:10px 0 0;font-size:14px}.rev-error{color:#b3261e;font-weight:700}.rev-ok{color:#1e8c4e;font-weight:700}
.rev-queda{margin-top:10px;padding:10px 12px;border-radius:10px;background:#f6f6f6}
.rev-botones{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 16px;flex-wrap:wrap}
.rev-si{background:#1e8c4e;color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:800;cursor:pointer}.rev-si:disabled{opacity:.5;cursor:not-allowed}
.deuda-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.deuda-check input{width:18px;height:18px}
.deuda-venta{background:#f6f6f6;border-radius:8px}.deuda-linea{padding-left:34px}
.deuda-dias{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fff4e5;color:#7a4b00;font-size:14px}
.met-abono{display:flex;gap:8px;flex-wrap:wrap}.met-abono button[aria-pressed="true"]{background:#111;color:#f0d66a;border-color:#111}

/* Recuadros de aviso como el sistema de Lorena (v5.3.3): oscuros, abajo a la derecha, franja de color */
#aviso { display: flex; flex-direction: column; gap: 8px; max-width: 420px; z-index: 100002; }
.recuadro-aviso { position: relative; background: #111; color: #fff; border-radius: 12px; padding: 14px 38px 14px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.35); font-size: 15px; border-left: 6px solid #c9a227; line-height: 1.35; }
.recuadro-aviso strong { display: block; }
.recuadro-aviso div { margin-top: 3px; color: #e8e8e8; font-size: 14px; }
.recuadro-aviso.verde { border-left-color: #1e8c4e; } .recuadro-aviso.rojo { border-left-color: #b3261e; } .recuadro-aviso.dorado { border-left-color: #c9a227; }
.recuadro-x { position: absolute; top: 8px; right: 8px; background: transparent; border: 0; color: #aaa; font-size: 14px; cursor: pointer; padding: 4px; }
.alerta-fija-fondo { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100003; display: flex; align-items: center; justify-content: center; padding: 16px; }
.alerta-fija { background: #fff; border-radius: 16px; max-width: 460px; width: 100%; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.alerta-fija-cab { background: #b3261e; color: #fff; padding: 14px 18px; font-weight: 800; font-size: 18px; }
.alerta-fija-cuerpo { padding: 16px 18px; font-size: 15px; line-height: 1.45; color: #222; }
.alerta-fija-botones { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.alerta-fija-botones button { background: #b3261e; color: #fff; border: 0; border-radius: 10px; padding: 10px 14px; font-weight: 800; cursor: pointer; }

/* Detalle de cobros (original v4.4.0 + v4.6.4 + v4.6.5 + v5.3.4) */
.consulta440{background:#176b64!important;color:white!important;border:1px solid #176b64!important;border-radius:12px;padding:14px 24px;min-height:48px;margin-top:16px;cursor:pointer;font-size:16px}
.historial440 .form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.historial440 .form-control:first-child{grid-column:1/-1}
.historial440 input{width:100%;min-height:48px;padding:12px;border:1px solid #c7a52c;border-radius:10px;box-sizing:border-box}
@media(max-width:500px){.historial440 .form-grid{grid-template-columns:1fr}}
.categorias-cobros-v464{display:grid;grid-template-columns:repeat(5,minmax(160px,1fr));gap:10px;overflow-x:auto;margin:16px 0}
.categoria-cobro-v464{display:flex;flex-direction:column;gap:5px;text-align:left;min-height:104px;padding:14px;border:1px solid #ddd;border-radius:12px;background:#fff;color:#172320;cursor:pointer;font:inherit}
.categoria-cobro-v464 strong{font-size:17px}.categoria-cobro-v464.activa{border:2px solid #c6a329;background:#fff9e5}.categoria-cobro-v464 b{color:#916d00}
@media(max-width:900px){.categorias-cobros-v464{grid-template-columns:repeat(5,170px)}}
.cobro-detalle438 h3{margin:0 0 6px}.cobro-detalle438 p{margin:4px 0}
.consumo-interno534{background:#fff8ec!important;border:2px solid #f0b35a!important}
.no-cobro534{font-size:13px;font-weight:700;color:#8a5a00;background:#ffe6bf;border-radius:999px;padding:2px 10px;margin-left:6px}
.consumo-detalle-v465{border-top:1px solid #f1d9b0;padding:10px 0}.consumo-detalle-v465 summary{cursor:pointer;font-weight:600}
.boton-consumo534{border-color:#f0b35a!important;color:#8a5a00!important;background:#fff4e2!important}

/* Detalle de cobros — diseño fácil de leer (31-oct) */
.det-filtros{padding:18px 20px}
.det-rangos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.det-rangos button{border:1px solid #d9c06b;background:#fff;border-radius:999px;padding:9px 18px;font-weight:700;cursor:pointer;font:inherit;font-weight:700}
.det-rangos button[aria-pressed="true"]{background:#111;color:#f0d66a;border-color:#111}
.det-campos{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:12px;align-items:end}
.det-campos input{width:100%;min-height:46px;padding:10px 12px;border:1px solid #d5d5d1;border-radius:10px;box-sizing:border-box;font:inherit}
.det-campos label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:800;color:#666;text-transform:uppercase;letter-spacing:.06em}
.det-campos .consulta440{margin-top:0;min-height:46px;padding:10px 22px}
.det-estado{margin:12px 0 0;color:#666;font-weight:600}
.det-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.det-kpi{background:#fff;border:1px solid #e5e5e1;border-radius:18px;padding:18px 20px;border-top:5px solid #c9a227}
.det-kpi span{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#777}
.det-kpi strong{display:block;font-size:34px;font-weight:900;margin:6px 0 2px}.det-kpi small{color:#888}
.det-kpi.ok{border-top-color:#1e8c4e}.det-kpi.ok strong{color:#1e8c4e}.det-kpi.mal{border-top-color:#b3261e}.det-kpi.mal strong{color:#b3261e}
.det-cajas h3,.det-lista h3{margin:0 0 14px;display:flex;align-items:center;gap:8px}
.det-barra{display:grid;grid-template-columns:150px 1fr 110px;grid-template-rows:auto auto;column-gap:12px;align-items:center;width:100%;background:#fff;border:1px solid transparent;border-radius:12px;padding:8px 10px;cursor:pointer;font:inherit;text-align:left}
.det-barra:hover{background:#faf7ec}.det-barra.activa{border-color:#c6a329;background:#fff9e5}
.det-barra-nombre{font-weight:800}.det-barra-fondo{height:14px;background:#f0efe9;border-radius:999px;overflow:hidden}
.det-barra-llena{display:block;height:100%;background:linear-gradient(90deg,#c9a227,#e2c35a);border-radius:999px;min-width:2px}
.det-barra-monto{font-weight:900;text-align:right}.det-barra small{grid-column:2/4;color:#888;font-size:12px}
.det-nota{margin:10px 0 0;color:#888;font-size:13px}
.det-cuenta{background:#111;color:#f0d66a;border-radius:999px;font-size:13px;padding:2px 10px}
.det-fila{border:1px solid #ecebe5;border-radius:14px;margin-bottom:8px;background:#fff;border-left:5px solid #1e8c4e}
.det-fila.debe{border-left-color:#b3261e}
.det-fila summary{display:grid;grid-template-columns:70px 1fr auto 120px;gap:12px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.det-fila summary::-webkit-details-marker{display:none}
.det-hora{font-weight:900;font-size:17px;display:flex;flex-direction:column}.det-hora small{font-weight:600;color:#999;font-size:12px}
.det-quien{display:flex;flex-direction:column;min-width:0}.det-quien small{color:#777;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.det-monto{text-align:right;display:flex;flex-direction:column}.det-monto strong{font-size:18px}.det-monto .rojo{color:#b3261e;font-weight:800}.det-monto .verde{color:#1e8c4e;font-weight:700}
.det-chip{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;background:#eee;color:#444;white-space:nowrap}
.det-chip.m-efectivo{background:#e6f4ea;color:#1e6b3a}.det-chip.m-transferencia{background:#e7efff;color:#2a4a8a}.det-chip.m-mixto{background:#efe7ff;color:#5a3a8a}
.det-chip.m-abono,.det-chip.m-pendiente{background:#fdecea;color:#8a1c14}.det-chip.m-anterior{background:#f2f2f2;color:#666}
.det-abierto{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 16px 14px 96px}
.det-col h4{margin:4px 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#777}
.det-col p{display:flex;justify-content:space-between;gap:10px;margin:4px 0}
.consumo-interno534 summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-weight:800;font-size:17px;list-style:none}
.consumo-interno534 summary b{background:#f0b35a;color:#fff;border-radius:999px;padding:2px 10px;font-size:13px}
.det-consumo{border-top:1px solid #f1d9b0;padding:10px 0;margin-top:10px}.det-consumo p{margin:3px 0;display:flex;justify-content:space-between;gap:10px}
@media(max-width:760px){
  .det-campos{grid-template-columns:1fr 1fr}.det-campos input[type=search]{grid-column:1/-1}.det-campos .consulta440{grid-column:1/-1}
  .det-kpis{grid-template-columns:1fr 1fr}.det-kpi:first-child{grid-column:1/-1}.det-kpi strong{font-size:26px}
  .det-barra{grid-template-columns:110px 1fr 80px}
  .det-fila summary{grid-template-columns:52px 1fr 92px}.det-fila .det-chip{grid-column:2;justify-self:start;grid-row:2}
  .det-abierto{grid-template-columns:1fr;padding:0 14px 12px}
}
.det-campos > *, .det-campos input { min-width: 0; max-width: 100%; }
.det-filtros { overflow: hidden; }

/* Cobrar → Cobros del día (mismo diseño que Detalle de cobros, 31-oct) */
#cbDia .cd-cab{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
#cbDia .cd-cab h3{margin:0}
.cd-dia{display:flex;align-items:center;gap:6px}
.cd-flecha{border:1px solid #d9c06b;background:#fff;border-radius:999px;width:40px;height:40px;font-size:15px;cursor:pointer}
.cd-flecha:disabled{opacity:.35;cursor:default}
.cd-fecha{position:relative;display:flex;align-items:center;gap:8px;border:1px solid #d9c06b;border-radius:999px;padding:8px 14px;font-weight:800;background:var(--gold-claro)}
.cd-fecha input{border:0;background:transparent;font:inherit;font-weight:600;color:#666;width:140px}
.cd-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:14px 0}
.cd-kpis>div{background:#fafaf7;border:1px solid #ecebe5;border-radius:14px;padding:10px 14px}
.cd-kpis span{display:block;font-size:11px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#888}
.cd-kpis strong{font-size:22px;font-weight:900}.cd-kpis .verde{color:#1e8c4e}.cd-kpis .rojo{color:#b3261e}
.cd-filtros{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.cd-filtros input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #d5d5d1;border-radius:10px;box-sizing:border-box;font:inherit}
.cd-filtros .det-rangos{margin:0}.cd-filtros .det-rangos button{padding:7px 14px;font-size:14px}
.cd-acciones{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.det-fila.anulado{opacity:.6;border-left-color:#999}.det-fila.anulado .det-quien strong{text-decoration:line-through}
.det-fila.consumo{border-left-color:#f0b35a;background:#fffaf2}
.det-chip.m-consumo{background:#ffe6bf;color:#8a5a00}.det-chip.m-deuda_dia{background:#fdecea;color:#8a1c14}

/* ---------- Sin internet: guardado en este equipo ---------- */
.aviso-cola { border-radius: 10px; padding: 11px 13px; font-weight: 600; background: #fff6dc; color: #7a5b00; border: 1px solid #f0d68a; }
.role-pill.con-cola { cursor: pointer; background: #fff6dc; color: #7a5b00; border-color: #f0d68a; }
.role-pill.con-cola.sin-red { background: #fde8e6; color: #b3261e; }
.pend-cola { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 12px; border: 1px solid var(--line, #e5e5e5); border-radius: 10px; margin: 8px 0; }
.pend-cola small { display: block; color: #666; }
.pend-cola small.rojo { color: #b3261e; font-weight: 600; }
.pend-cola.revisar { border-color: #f1b0aa; background: #fff7f6; }
.cd-cola { margin: 10px 0; display: grid; gap: 6px; }
.cd-cola-fila { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 10px; background: #fff6dc; border: 1px dashed #e0b84a; }
.cd-cola-fila small { display: block; color: #6b5a2a; overflow-wrap: anywhere; }
.cd-cola-fila.revisar { background: #fff1ef; border-color: #e58b82; }
.cd-chip { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #111; color: #fff; white-space: nowrap; }

/* ---------- Inventario + Kardex ---------- */
.kx-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.kx-cab h2 { margin: 0; }
.kx-kpis { grid-template-columns: repeat(4, 1fr); }
.kx-kpis .det-kpi strong { font-size: 24px; }
.kx-aviso { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #fff6dc; color: #6b5200; border: 1px solid #f0d68a; }
.kx-tabla { margin-top: 16px; display: grid; gap: 4px; }
.kx-fila { display: grid; grid-template-columns: 62px minmax(0,1fr) 70px 70px; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; background: #fafafa; }
.kx-fila small { display: block; color: #666; overflow-wrap: anywhere; }
.kx-tit { background: none; font-size: 12px; font-weight: 900; letter-spacing: .08em; color: #888; text-transform: uppercase; }
.kx-cant, .kx-saldo { text-align: right; font-weight: 800; }
.kx-cant.pos { color: #176b3a; } .kx-cant.neg { color: #a52828; }
.kx-debe { font-style: normal; font-size: 12px; background: #fde8e6; color: #b3261e; padding: 1px 6px; border-radius: 999px; }
.kx-fila.t-ajuste { background: #fff6dc; } .kx-fila.t-venta_anulada, .kx-fila.t-consumo_anulado { background: #f1f6ff; }
@media (max-width: 700px) { .kx-kpis { grid-template-columns: 1fr 1fr; } .kx-fila { grid-template-columns: 48px minmax(0,1fr) 54px 54px; gap: 6px; } }
.kx .det-campos { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 700px) { .kx .det-campos { grid-template-columns: 1fr 1fr; } .kx .det-campos input[type=search] { grid-column: 1 / -1; } }

/* ---------- Inventario (módulo completo) ---------- */
.inv-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.inv-acciones .inv-grupo { flex: 1 1 auto; }
.inv-grupo > div { flex-wrap: nowrap; }
.inv-nom small.rojo { color: #b3261e; }
.inv-grupo { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 12px 14px; }
.inv-grupo > span { display: block; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-osc); margin-bottom: 8px; }
.inv-grupo > div { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-btn { border: 1px solid #d9d9d4; background: #fff; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.inv-btn:hover { border-color: #111; }
.inv-btn.oro { background: var(--gold); border-color: #c49c22; color: #111; }
.inv-btn.sube { border-color: #9fd3b2; background: #f0faf3; color: #176b3a; }
.inv-btn.baja { border-color: #f1b0aa; background: #fff5f4; color: #a52828; }
.inv-filtros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 8px; }
.inv-filtros .det-rangos { margin: 0; }
#invBuscar { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d5d5d1; border-radius: 10px; box-sizing: border-box; font: inherit; }
.inv-nota { margin: 6px 0 10px; color: #7a5b00; background: #fff6dc; border-radius: 10px; padding: 8px 12px; }
.inv-tabla { display: grid; gap: 2px; }
.inv-fila { display: grid; grid-template-columns: 44px 80px minmax(160px, 1fr) 64px 76px 96px 84px 214px; gap: 10px; align-items: center; padding: 10px 8px; border-bottom: 1px solid #f0f0ee; }
.inv-tabla.sin-costo .inv-fila { grid-template-columns: 44px 80px minmax(160px, 1fr) 76px 96px 84px 110px; }
.inv-cat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link.inv-nom-btn { text-decoration: none; color: #111; text-align: left; } .link.inv-nom-btn:hover { text-decoration: underline; }
.inv-mini { border: 1px solid #e3e3df; background: #fff; border-radius: 8px; padding: 6px 9px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.inv-mini:hover { border-color: #111; } .inv-mini.rojo { color: #b3261e; }
.inv-st small { font-weight: 600; }
.inv-tit { font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #888; border-bottom: 2px solid #eee; }
.inv-ico { width: 44px; height: 44px; display: grid; place-items: center; background: #fbf3d9; border-radius: 10px; font-size: 22px; }
.inv-cod { font-weight: 800; }
.inv-nom small, .inv-fila small { display: block; color: #777; font-size: 12px; }
.inv-nom .link { text-align: left; padding: 0; }
.inv-st { font-weight: 800; } .inv-st.bajo { color: #b07a00; } .inv-st.cero { color: #b3261e; }
.inv-est { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em; background: #e8f6ee; color: #176b3a; padding: 4px 10px; border-radius: 999px; }
.inv-est.off { background: #f1f1f1; color: #777; }
.inv-acc { display: flex; gap: 6px; flex-wrap: nowrap; justify-content: flex-end; }
.link { background: none; border: 0; color: #8a6d00; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.link.rojo, .rojo { color: #b3261e; } .verde { color: #176b3a; }
.pr-stock-fijo { padding: 8px 0; } .pr-stock-fijo small { display: block; color: #777; }
.modal.modal-ancho { width: min(1400px, 96vw); max-width: none; max-height: 92vh; overflow: auto; }
.kx-botones { display: flex; gap: 8px; } .kx-cab h2 small { font-size: 14px; color: #888; font-weight: 600; }
/* Tabla tipo Excel */
.xl-cab { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.xl-cab h3 { margin: 0; } .xl-cab p { margin: 4px 0 0; color: #666; }
.xl-barra { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 10px; }
.xl-barra button { border: 1px solid #d9c06b; background: #fff; border-radius: 10px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.xl-motivo { margin-top: 12px; } .xl-motivo input { width: 100%; }
.xl-wrap { overflow: auto; max-height: 55vh; border: 1px solid #e5e5e5; border-radius: 12px; }
.xl { border-collapse: collapse; min-width: 100%; font-size: 14px; }
.xl thead th { position: sticky; top: 0; background: #111; color: #f0d66a; text-align: left; padding: 10px 8px; white-space: nowrap; z-index: 1; }
.xl td { border-bottom: 1px solid #eee; border-right: 1px solid #f3f3f3; padding: 0; }
.xl td input, .xl td select { width: 100%; min-width: 110px; border: 0; padding: 10px 8px; font: inherit; background: transparent; box-sizing: border-box; }
.xl td input:focus, .xl td select:focus { outline: 2px solid var(--gold); outline-offset: -2px; background: #fffdf4; }
.xl-n { text-align: center; color: #888; background: #fafafa; width: 36px; padding: 0 8px !important; }
.xl-ver { padding: 0 10px !important; white-space: nowrap; color: #555; }
.xl-off { text-align: center; color: #bbb; }
.xl-x { border: 0; background: none; color: #bbb; cursor: pointer; padding: 6px 10px; } .xl-x:hover { color: #b3261e; }
.xl-pie { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 1250px) {
  .inv-grupo > div { flex-wrap: wrap; }
  .inv-tit { display: none; }
  .inv-fila, .inv-tabla.sin-costo .inv-fila { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "ico nom st" "ico pre est" "acc acc acc"; row-gap: 4px; }
  .inv-fila .inv-ico { grid-area: ico; } .inv-fila .inv-nom { grid-area: nom; } .inv-fila .inv-st { grid-area: st; text-align: right; }
  .inv-fila .inv-pre { grid-area: pre; color: #555; } .inv-fila .inv-estado { grid-area: est; text-align: right; }
  .inv-fila .inv-acc { grid-area: acc; justify-content: flex-start; }
  .inv-fila .inv-cod, .inv-fila .inv-costo { display: none; }
  .inv-acc { flex-wrap: wrap; }
  .inv-filtros { grid-template-columns: 1fr; }
}
button.guardar { background: var(--gold); border: 1px solid #c49c22; color: #111; font-weight: 800; border-radius: 10px; padding: 10px 18px; cursor: pointer; font: inherit; font-weight: 800; }
button.guardar:disabled { opacity: .6; cursor: wait; }

/* ---------- Kardex (estilo Luppy con colores GYM BOX: negro y dorado) ---------- */
.inv-btn.kx-btn { background: #111; color: #f0d66a; border-color: #111; }
.kx2-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.kx2-cab h2 { margin: 0; font-size: 26px; }
.kx2-filtros { display: grid; grid-template-columns: minmax(220px, 2fr) 1fr 1fr 1.2fr auto; gap: 10px; align-items: end; margin-top: 14px; }
.kx2-filtros input, .kx2-filtros select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #d9c06b; border-radius: 12px; box-sizing: border-box; font: inherit; background: #fff; }
.kx2-filtros label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-osc); }
.kx2-excel { min-height: 46px; border: 1px solid #d9c06b; background: #fffbea; color: #6b5200; border-radius: 12px; padding: 0 16px; font: inherit; font-weight: 800; cursor: pointer; white-space: nowrap; }
.kx2-vacio { margin: 18px 0; padding: 36px 20px; text-align: center; border: 2px dashed #e6d38f; border-radius: 16px; color: #6b5200; background: #fffdf4; font-size: 16px; }
.kx2-prod { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 16px 0 12px; }
.kx2-prod h3 { margin: 0; font-size: 24px; font-weight: 900; } .kx2-prod span { color: var(--gold-osc); font-weight: 800; }
.kx2-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kx2-kpis.tres { grid-template-columns: repeat(3, 1fr); }
.kx2-kpis > div { border-radius: 16px; padding: 14px 18px; border: 1px solid #eee; }
.kx2-kpis span { display: block; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.kx2-kpis strong { display: block; font-size: 32px; font-weight: 900; margin-top: 4px; }
.kx2-kpis .ini { background: #fff6dc; border-color: #f0d68a; } .kx2-kpis .ini strong { color: #6b5200; }
.kx2-kpis .ent { background: #eaf7ef; border-color: #b8e2c7; } .kx2-kpis .ent strong { color: #176b3a; }
.kx2-kpis .sal { background: #fdeceb; border-color: #f1b0aa; } .kx2-kpis .sal strong { color: #a52828; }
.kx2-kpis .act { background: #111; border-color: #111; } .kx2-kpis .act span { color: #c9b26a; } .kx2-kpis .act strong { color: #f0d66a; }
.kx2-aviso { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: #fff6dc; color: #6b5200; border: 1px solid #f0d68a; }
.kx2-wrap { margin-top: 16px; overflow: auto; max-height: 52vh; border: 1px solid #ece7d4; border-radius: 16px; }
.kx2-t { width: 100%; border-collapse: collapse; font-size: 14px; }
.kx2-t thead th { position: sticky; top: 0; background: #111; color: #f0d66a; text-align: left; padding: 12px 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; z-index: 1; }
.kx2-t thead th[data-orden] { cursor: pointer; } .kx2-t thead th span { opacity: .6; font-size: 11px; } .kx2-t thead th.activo { background: #2a2410; }
.kx2-t th.num, .kx2-t td.num { text-align: right; }
.kx2-t td { padding: 10px; border-bottom: 1px solid #f1eee3; vertical-align: top; }
.kx2-t td small { display: block; color: #777; font-size: 12px; }
.kx2-t tbody tr:nth-child(even) { background: #fdfcf7; }
.kx2-t td.ent { color: #176b3a; font-weight: 800; } .kx2-t td.sal { color: #a52828; font-weight: 800; }
.kx2-t tr.t-ajuste, .kx2-t tr.t-subir, .kx2-t tr.t-bajar, .kx2-t tr.t-inicial { background: #fffbea !important; }
.kx2-sin { text-align: center; padding: 28px !important; color: #6b5200; }
.kx2-nota { margin: 12px 0 0; font-size: 12px; color: var(--gold-osc); }
@media (max-width: 900px) { .kx2-filtros { grid-template-columns: 1fr 1fr; } .kx2-filtros #kxQ { grid-column: 1 / -1; } .kx2-kpis { grid-template-columns: 1fr 1fr; } .kx2-kpis.tres { grid-template-columns: 1fr 1fr 1fr; } .kx2-kpis strong { font-size: 24px; } }
.kx2-t td.kx2-usr { white-space: nowrap; font-weight: 700; color: #6b5200; }
.caja-cab-mod { grid-column: 1 / -1; }

/* ---------- Compras (03-nov) ---------- */
.cp-cab .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cp-cab #cpBuscar { min-width: min(380px, 100%); padding: 11px 13px; border: 1px solid #d9d9d4; border-radius: 10px; font: inherit; }
.cp-sec { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cp-sec h2 { margin: 0; font-size: 20px; }
.cp-pagar { border-color: #f1d48a; background: #fffdf5; }
.cp-total-deuda { color: #a52828; font-size: 17px; }
.cp-prov-deuda { border: 1px solid #ece6d2; border-radius: 14px; padding: 10px 14px; margin-top: 10px; background: #fff; }
.cp-prov-nom { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; padding-bottom: 6px; border-bottom: 1px solid #f0ece0; }
.cp-prov-nom span { color: #a52828; font-weight: 800; }
.cp-deuda { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #f4f1e8; flex-wrap: wrap; }
.cp-deuda:last-child { border-bottom: 0; }
.cp-deuda small { display: block; color: #777; }
.cp-deuda-m { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cp-deuda-m span { color: #777; font-size: 13px; }
.cp-deuda-m strong { font-size: 17px; }
.cp-tabla { display: grid; gap: 0; }
.cp-fila { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.3fr) 118px 74px 92px 96px 96px; gap: 10px; align-items: center; padding: 11px 6px; border-bottom: 1px solid #ecece8; font-size: 14px; }
.cp-fila .cp-acc { flex-direction: column; align-items: flex-start; gap: 4px; }
.cp-fila small { display: block; color: #888; font-size: 12px; }
.cp-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: #777; font-weight: 700; }
.cp-prods { color: #444; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cp-acc { display: flex; gap: 10px; flex-wrap: wrap; }
.cp-chip { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 20px; letter-spacing: .03em; white-space: nowrap; }
.cp-chip.ok { background: #e7f7ef; color: #1d8a56; }
.cp-chip.pend { background: #fde8e6; color: #b3261e; }
.cp-provs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.cp-prov { display: flex; align-items: center; gap: 10px; justify-content: space-between; border: 1px solid #ece6d2; background: #fffdf7; border-radius: 14px; padding: 12px 14px; }
.cp-prov > div { flex: 1; min-width: 0; }
.cp-prov small { display: block; color: #888; }
.verde { color: #1d8a56; font-weight: 700; }
.oro-t { color: #9a7b12; font-weight: 800; }
.cp-modal .cp-datos { grid-template-columns: 2fr 1fr 1fr; margin-top: 12px; }
.cp-pago { margin: 6px 0 12px; }
.cp-lbl { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #555; margin-bottom: 6px; }
.cp-metodos { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.cp-metodos button { border: 1px solid #d9d9d4; background: #fff; border-radius: 10px; padding: 10px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.cp-metodos button[aria-pressed="true"] { background: #111; color: #f0d66a; border-color: #111; }
.cp-pago-info { margin-top: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cp-pago-info select { padding: 8px 10px; border-radius: 9px; border: 1px solid #ccc; font: inherit; margin-left: 6px; }
.cp-nota-pago { background: #f7f5ee; border-radius: 10px; padding: 10px 12px; }
.cp-pie { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; position: sticky; bottom: -25px; background: #fff; padding: 12px 0; border-top: 1px solid #eee; }
.cp-totales { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.cp-total strong { font-size: 20px; }
.xl-ver small { display: block; color: #888; font-size: 11px; }
.cp-det-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cp-det-cab h3 { margin: 0; }
.cp-datos2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.cp-dato { background: #f7f5ee; border-radius: 12px; padding: 10px 12px; }
.cp-dato span { display: block; font-size: 12px; color: #777; }
.cp-dato strong { font-size: 17px; }
.cp-det-sec { border: 1px solid #ecece8; border-radius: 14px; padding: 10px 14px; margin-top: 10px; }
.cp-det-sec h4 { margin: 4px 0 6px; }
.cp-det-lin { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #f2f2ee; }
.cp-det-lin:last-child { border-bottom: 0; }
.cp-det-lin small { display: block; color: #777; }
.cp-det-lin.anulado { opacity: .55; text-decoration: line-through; }
.cp-det-m { text-align: right; }
.cp-debe { font-size: 16px; margin: 8px 0 12px; }
.cp-debe strong { color: #a52828; font-size: 22px; }
@media (max-width: 1150px) {
  .cp-tit { display: none; }
  .cp-fila { grid-template-columns: 1fr auto; grid-template-areas: "f e" "p t" "pr pr" "pg s" "a a"; gap: 4px 12px; padding: 12px 4px; }
  .cf-f { grid-area: f; color: #777; font-size: 13px; } .cf-e { grid-area: e; justify-self: end; } .cf-p { grid-area: p; } .cf-t { grid-area: t; justify-self: end; font-size: 16px; }
  .cf-pr { grid-area: pr; } .cf-pg { grid-area: pg; color: #555; } .cf-s { grid-area: s; justify-self: end; } .cf-a { grid-area: a; }
  .cp-fila .cp-acc { flex-direction: row; gap: 14px; margin-top: 4px; }
}
@media (max-width: 700px) { .cp-modal .cp-datos, .cp-datos2 { grid-template-columns: 1fr; } .cp-deuda-m { width: 100%; justify-content: space-between; } }

/* ---------- WOD (03-nov) ---------- */
.wod-list-card img { cursor: zoom-in; }
.wod-sin-foto { width: 140px; height: 100px; border-radius: 12px; font-size: 38px; }
.wod-texto { min-width: 0; }
.wod-texto p { overflow-wrap: anywhere; }
.wod-acciones { margin: 0; flex-wrap: wrap; justify-content: flex-end; }
.wod-inactivo { opacity: .6; }
.wod-chip { background: #eee; color: #555; border-radius: 99px; padding: 2px 8px; font-weight: 700; font-size: 11px; }
.wod-foto-edit { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.wod-foto-edit img, .wod-foto-edit .wod-sin-foto { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; }
.wod-foto-edit small { display: block; margin-top: 6px; }
.wod-subir { display: inline-block; cursor: pointer; }
.wod-foto-grande { width: 100%; max-height: 75vh; object-fit: contain; border-radius: 12px; }
@media (max-width: 760px) {
  .wod-list-card { grid-template-columns: 1fr; gap: 10px; }
  .wod-list-card img, .wod-sin-foto { width: 100%; height: auto; max-height: 260px; }
  .wod-sin-foto { height: 80px; }
  .wod-acciones { display: flex; justify-content: flex-start; align-items: center; gap: 16px; }
  .wod-acciones > button { flex: 0 0 auto; }
  .wod-acciones > .secondary { flex: 1 1 100%; }
}
.wod-ia-prev { white-space: pre-wrap; background: #fff; border-radius: 8px; padding: 8px 10px; max-height: 180px; overflow: auto; font: inherit; font-weight: 400; margin: 8px 0; }
#wIAMsg { grid-column: 1 / -1; }

/* ---------- Caja igual al original (04-nov): estiloCaja457 + egresos v4.4.8 ---------- */
.caja-zona .caja-simple457 { margin: 0; }
.caja-simple457-head { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.caja-simple457 h2 { margin: 0; font-size: 25px; }
.caja-simple457-head p { margin: 4px 0 0; }
.caja-estado457 { padding: 6px 12px; border-radius: 100px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.caja-estado457.abierta { background: #e7f4e9; color: #116a36; }
.caja-estado457.cerrada { background: #f2f2f2; color: #555; }
.caja-resultado457 { display: grid; gap: 3px; background: #142522; color: #fff; border-radius: 16px; padding: 18px; margin: 16px 0; }
.caja-resultado457 strong { font-size: 34px; color: #fff; }
.caja-resultado457 small { color: #e6f0ea; }
.caja-resumen457 { margin: 14px 0; }
.fila-caja457 { display: flex; justify-content: space-between; gap: 15px; padding: 8px 0; border-bottom: 1px solid #eae9e2; }
.fila-caja457 strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.caja-fisico457 { background: #fff6d9; border: 1px solid var(--gold); padding: 12px; border-radius: 10px; margin-top: 10px; }
.caja-nota457 { color: #59605d; font-size: 14px; }
.caja-acciones457 { display: flex; flex-wrap: wrap; gap: 9px; }
.caja-acciones457 button { flex: 1; min-width: 130px; }
.caja-acciones457 button:disabled { opacity: .5; cursor: not-allowed; }
.cierre-fila457 { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid #eee; align-items: center; }
.cierre-fila457 small { display: block; color: #66716d; }
.cajas-sec-v432 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.caja-principal-v432 { border: 2px solid var(--gold) !important; }
.egresos-caja448 { border-top: 1px solid #e8e5d9; margin-top: 16px; padding-top: 14px; }
.egresos-caja448 summary { cursor: pointer; color: #8c6d00; font-weight: 800; }
.egreso-fila448 { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #eee; }
.egreso-fila448 small { display: block; color: #69706e; margin-top: 4px; }
.egreso-fila448 .actions { margin-top: 6px; }
.actions.left { justify-content: flex-start; }
.historial-v432 .page-head { margin: 0; }
.historial-v432 h3 { margin-top: 0; }
.modal.modal-ancho-cambio { width: min(860px, 96vw); max-width: none; max-height: 92vh; overflow: auto; }
@media (max-width: 850px) {
  .cajas-sec-v432 { grid-template-columns: 1fr; }
  .cierre-fila457 { flex-wrap: wrap; }
  .caja-cab-mod .actions { flex-wrap: wrap; justify-content: flex-start; }
  .caja-resultado457 strong { font-size: 30px; }
}
.caja-cab-mod .actions { flex-wrap: wrap; }
.caja-cab-mod .actions button { white-space: nowrap; }

/* ---------- Pagar deudas más claro (Melissa 04-nov): nada marcado; completo o abono en bloques de color ---------- */
.pago-aviso { margin: 14px 0 10px; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #7a5a00; font-weight: 800; }
.pago-aviso.listo { background: #e7f4e9; color: #116a36; }
.pago-deuda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pago-bloque { border-radius: 16px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.pago-bloque h4 { margin: 0; font-size: 16px; }
.pago-bloque small { color: #666; }
.pago-bloque .form-grid { gap: 10px; }
.pago-bloque.completo { background: #eef7f0; border: 2px solid #2e8b57; }
.pago-bloque.abono { background: #fff8e6; border: 2px solid var(--gold); }
.btn-pago { border: 0; border-radius: 12px; padding: 14px 16px; font-weight: 900; font-size: 16px; color: #fff; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.btn-pago.efe { background: #1f7a45; }
.btn-pago.tra { background: #1f5fa8; }
.btn-pago.abono { background: #b8901c; justify-content: center; }
.btn-pago:disabled { background: #c9c9c4; color: #f4f4f2; cursor: not-allowed; }
@media (max-width: 720px) { .pago-deuda-grid { grid-template-columns: 1fr; } }
/* Los dos campos del abono siempre a la misma altura (Melissa 04-nov: "Transferencia" quedaba más abajo) */
.pago-bloque .form-grid { grid-template-columns: 1fr 1fr !important; align-items: end; }
.pago-bloque .form-control label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pago-bloque .form-control { min-width: 0; }

/* ---------- Progreso (04-nov): tarjeta por cliente con su línea de peso ---------- */
.pg-barra { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 6px 0 16px; }
.pg-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.pg-filtro { border: 1px solid #ddd8c6; background: #fff; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 700; color: #3a3a3a; cursor: pointer; }
.pg-filtro b { margin-left: 4px; color: #8c6d00; }
.pg-filtro.activo { background: #151515; border-color: #151515; color: #fff; }
.pg-filtro.activo b { color: #f0d66a; }
.pg-barra input[type=search] { flex: 0 1 280px; min-width: 200px; border: 1px solid #d5d5d1; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.pg-tarjeta { text-align: left; font: inherit; color: #151515; background: #fff; border: 1px solid #e6e1d0; border-radius: 18px; padding: 16px 16px 0; cursor: pointer; display: flex; flex-direction: column; gap: 6px; overflow: hidden; transition: border-color .15s, transform .15s; }
.pg-tarjeta:hover { border-color: var(--gold); transform: translateY(-2px); }
.pg-tarjeta:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pg-cab { display: flex; gap: 12px; align-items: center; }
.pg-cab h3 { margin: 0; font-size: 17px; line-height: 1.2; }
.pg-cab small { color: #6b6b6b; }
.pg-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #151515; color: #f0d66a; display: grid; place-items: center; font-weight: 900; font-size: 15px; letter-spacing: .5px; }
.pg-avatar.grande { width: 56px; height: 56px; font-size: 20px; }
.pg-cambio { font-size: 26px; font-weight: 900; color: #8c6d00; margin-top: 6px; letter-spacing: -.3px; }
.pg-cambio.inicial { color: #151515; font-size: 22px; }
.pg-linea { width: 100%; height: 46px; display: block; }
.pg-linea .pg-base { stroke: #e6dfc4; stroke-width: 2; stroke-dasharray: 4 5; }
.pg-linea .pg-trazo { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.pg-linea .pg-area { fill: var(--gold); opacity: .12; }
.pg-linea .pg-punto { fill: #fff; stroke: #b8901c; stroke-width: 2; }
.pg-linea .pg-punto.ult { fill: #151515; stroke: var(--gold); }
.pg-linea.grande { height: 170px; }
.pg-linea .pg-valor { font-size: 12px; font-weight: 800; fill: #151515; text-anchor: middle; }
.pg-linea .pg-fecha { font-size: 11px; fill: #777; text-anchor: middle; }
.pg-pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: #444; }
.pg-imc { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 800; background: #eee; color: #444; }
.pg-imc.bajo { background: #e6f0fb; color: #1f5fa8; }
.pg-imc.normal { background: #e7f4e9; color: #116a36; }
.pg-imc.sobre { background: #fff1d6; color: #8a5a00; }
.pg-imc.obes { background: #fde8e6; color: #a52828; }
.pg-prox { margin: 8px -16px 0; padding: 10px 16px; background: var(--gold-claro); border-top: 1px solid #eee8d6; font-size: 13.5px; color: #555; }
.pg-prox.toca { background: #151515; color: #f0d66a; font-weight: 800; border-top-color: #151515; }
.pg-vacio { text-align: center; color: #666; padding: 36px 20px; }
/* Detalle */
.modal.pg-modal { width: min(720px, 96vw); max-width: none; max-height: 92vh; overflow: auto; }
.pg-det-cab { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pg-det-cab h3 { margin: 0; }
.pg-det-cab small { color: #6b6b6b; }
.pg-det-cambio { margin-left: auto; font-size: 22px; font-weight: 900; color: #8c6d00; }
.pg-grafico { margin: 14px 0 4px; padding: 8px 6px 0; border-radius: 14px; background: #fcfaf3; border: 1px solid #efe8d2; }
.pg-resumen { margin: 12px 0; padding: 12px 14px; border-left: 4px solid var(--gold); background: #fbf8eb; border-radius: 0 12px 12px 0; }
.pg-resumen p { margin: 0 0 6px; line-height: 1.5; }
.pg-resumen .pg-prox { margin: 6px 0 0; padding: 6px 10px; border-radius: 8px; border: 0; display: inline-block; }
.pg-tiempo { list-style: none; padding: 0 0 0 22px; margin: 6px 0 0; border-left: 2px solid #e6dfc4; margin-left: 8px; }
.pg-med { position: relative; padding: 2px 0 14px 4px; }
.pg-med::before { content: ''; position: absolute; left: -31px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); }
.pg-med.ultima::before { background: #151515; }
.pg-med-cab { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pg-med-dif { color: #8c6d00; font-weight: 800; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.pg-chip { display: inline-flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: #f6f5f0; line-height: 1.2; }
.pg-chip small { color: #777; font-size: 11.5px; }
.pg-chip.pg-imc { border-radius: 10px; font-size: inherit; }
.pg-chip.pg-imc small { color: inherit; opacity: .8; }
.pg-obs { margin: 6px 0 2px; color: #555; font-size: 14px; line-height: 1.45; }
/* Formulario */
.pg-campo { display: grid; gap: 6px; margin-bottom: 12px; }
.pg-campo > span { font-weight: 800; font-size: 13.5px; color: #333; }
.pg-campo > span small { font-weight: 400; color: #777; }
.pg-campo input, .pg-campo textarea { width: 100%; box-sizing: border-box; border: 1px solid #d5d5d1; border-radius: 10px; padding: 11px; font: inherit; background: #fff; }
.pg-campo input:focus, .pg-campo textarea:focus { outline: 0; border-color: var(--gold); }
.pg-form-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-form-tit { margin: 4px 0 10px; }
.pg-form-tit small { font-weight: 400; color: #777; }
.pg-form-medidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.pg-unidad { position: relative; display: block; }
.pg-unidad input { padding-right: 40px; }
.pg-unidad i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-style: normal; color: #8c6d00; font-weight: 800; font-size: 13px; pointer-events: none; }
.pg-cli-elegido { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #fbf8eb; border: 1px solid #ecdfae; margin-bottom: 12px; }
.pg-cli-elegido .link-btn { margin-left: auto; }
.pg-comp { margin: 2px 0 14px; padding: 12px 14px; border-radius: 12px; background: #fbf8eb; border: 1px solid #ecdfae; }
.pg-comp p { margin: 6px 0; }
.pg-comp-fila { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pg-comp-fila span { display: grid; background: #fff; border-radius: 10px; padding: 8px 10px; }
.pg-comp-fila span.hoy { background: #151515; color: #fff; }
.pg-comp-fila small { color: #777; font-size: 12px; }
.pg-comp-fila .hoy small { color: #f0d66a; }
.pg-comp-fila b { font-size: 17px; }
@media (max-width: 720px) {
  .pg-barra input[type=search] { flex: 1 1 100%; }
  .pg-form-medidas { grid-template-columns: 1fr 1fr; }
  .pg-det-cambio { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .pg-tarjeta { transition: none; } .pg-tarjeta:hover { transform: none; } }
.pg-unidad input::-webkit-outer-spin-button, .pg-unidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pg-unidad input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* ---------- Mensajes en columnas (Melissa 04-nov) ---------- */
.msg-barra { margin: 4px 0 14px; }
.msg-barra input { width: min(380px, 100%); border: 1px solid #d5d5d1; border-radius: 10px; padding: 10px 12px; font: inherit; background: #fff; box-sizing: border-box; }
.msg-tablero-wrap { overflow-x: auto; padding-bottom: 10px; scrollbar-color: #bf9e24 #f0eee7; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.msg-tablero { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 14px; align-items: start; }
.msg-col { background: #f7f6f1; border: 1px solid #e5e2d6; border-radius: 18px; overflow: hidden; scroll-snap-align: start; }
.msg-col header { padding: 14px 14px 12px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border-top: 5px solid var(--msg-color, var(--gold)); background: #fff; border-bottom: 1px solid #ece9dc; }
.msg-col h2 { margin: 0; font-size: 17px; }
.msg-col header small { grid-column: 1 / -1; color: #6b6b6b; }
.msg-cuenta { align-self: center; min-width: 26px; text-align: center; border-radius: 999px; padding: 3px 9px; font-weight: 900; font-size: 13px; background: var(--msg-color, var(--gold)); color: #fff; }
.col-por_vencer { --msg-color: #c98a00; }
.col-vencido { --msg-color: #b3261e; }
.col-pago_pendiente { --msg-color: #8c6d00; }
.col-seguimiento { --msg-color: #1f5fa8; }
.col-cumpleanos { --msg-color: #b4447a; }
.col-nuevo { --msg-color: #1f7a45; }
.msg-lista { padding: 10px; display: grid; gap: 10px; max-height: 68vh; overflow-y: auto; }
.msg-tarjeta { background: #fff; border: 1px solid #e8e5d9; border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.msg-tarjeta.enviado { opacity: .62; }
.msg-tar-cab { display: flex; gap: 10px; align-items: center; }
.msg-tar-cab .pg-avatar { width: 36px; height: 36px; font-size: 13px; }
.msg-tar-cab h3 { margin: 0; font-size: 15px; }
.msg-tar-cab small { color: var(--msg-color, #8c6d00); font-weight: 800; }
.msg-texto { margin: 0; font-size: 13.5px; line-height: 1.45; color: #3a3a3a; background: #faf9f5; border-radius: 10px; padding: 9px 10px; cursor: text; }
.msg-texto span { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.msg-texto:hover { background: #f4f1e6; }
.msg-sin-tel { margin: 0; font-size: 12.5px; color: #8a5a00; }
.msg-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.msg-acciones .link-btn { margin-right: auto; font-size: 13px; }
.msg-hecho { font-weight: 800; color: #116a36; font-size: 13px; margin-right: auto; }
.msg-hecho + .link-btn { margin-right: 0; }
.msg-wa { border: 0; border-radius: 10px; padding: 9px 14px; font: inherit; font-weight: 900; color: #fff; background: #1f9d55; cursor: pointer; }
.msg-wa:hover { background: #17834a; }
.msg-wa.otra { background: #e9efe9; color: #116a36; }
.msg-vacia { margin: 6px 4px; color: #777; font-size: 14px; }
#msgHist summary { cursor: pointer; list-style: none; }
#msgHist summary::-webkit-details-marker { display: none; }
#msgHist summary h3 { margin: 0; display: inline; }
#msgHist summary h3::after { content: ' ▾'; color: #8c6d00; }
.msg-hist { display: grid; grid-template-columns: 220px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0efe9; }
.msg-hist small { display: block; color: #777; }
.msg-hist p { margin: 0; color: #444; font-size: 14px; }
@media (max-width: 720px) {
  .msg-tablero { grid-auto-columns: 84vw; }
  .msg-hist { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Membresía corta por pases: ¿cuándo empieza? (04-nov) ---------- */
.mc-rapido { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 12px; }
.mc-dia { border: 1px solid #ddd8c6; background: #fff; border-radius: 999px; padding: 9px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.mc-dia.activo { background: #151515; border-color: #151515; color: #f0d66a; }
.mc-resumen { background: #fbf8eb; border-left: 4px solid var(--gold); border-radius: 0 10px 10px 0; padding: 10px 12px; margin: 4px 0 0; }

/* ---------- Aviso bonito (Melissa 04-nov) y "Sin stock" en Cobrar ---------- */
.aviso-bon { z-index: 100003; }
.aviso-bon-caja { background: #fff; border-radius: 22px; width: min(440px, 100%); padding: 26px 24px 20px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.35); border-top: 6px solid var(--gold); animation: avisoBon .18s ease-out; }
.aviso-bon-icono { width: 64px; height: 64px; margin: -58px auto 10px; border-radius: 50%; background: #151515; color: #f0d66a; display: grid; place-items: center; font-size: 30px; border: 4px solid #fff; }
.aviso-bon-caja h3 { margin: 4px 0 8px; font-size: 21px; }
.aviso-bon-caja p { margin: 0 auto 18px; color: #444; line-height: 1.5; max-width: 36ch; }
.aviso-bon-botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.aviso-bon-botones button { min-width: 140px; }
@keyframes avisoBon { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aviso-bon-caja { animation: none; } }
.stock-v3.sin { color: #b3261e; font-weight: 800; }

/* ---------- Pases programados (como el original v4.8.0, 04-nov) ---------- */
.modal.ps-modal { width: min(560px, 96vw); }
.ps-grupo { border: 1px solid #e6e1d0; border-radius: 16px; padding: 12px 14px; margin: 10px 0; }
.ps-grupo header { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 8px; }
.ps-grupo header small { display: block; color: #6b6b6b; }
.ps-quedan { background: #151515; color: #f0d66a; border-radius: 999px; padding: 4px 12px; font-weight: 900; font-size: 13px; white-space: nowrap; }
.ps-quedan.vencido { background: #fde8e6; color: #a52828; }
.ps-fila { display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid #f0efe9; }
.ps-fila small { display: block; color: #6b6b6b; }
.ps-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; background: #f3f1ea; color: #555; }
.ps-fila.libre .ps-num { background: var(--gold); color: #151515; }
.ps-fila.libre strong { color: #116a36; }
.ps-fila.vencido .ps-num { background: #fde8e6; color: #a52828; }
.ps-fila.vencido strong { color: #a52828; }
.ps-fila.usado { opacity: .7; }
.ps-fila.expirado { opacity: .55; }

/* ---------- Reportes claros: el libro del mes (TAL CUAL v5.3.8, 04-nov) ---------- */
.r538{max-width:1100px;margin:0 auto}.r538 h1{margin:0;display:flex;align-items:center;gap:10px}.r538 .sub{color:#666;margin:4px 0 14px;font-size:16px}.r538 .sub small{color:#999}
.r538-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px}.r538-chips button{border:1px solid #ccc;background:#fff;border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;font:inherit;font-weight:700}.r538-chips button.on{background:#111;color:#fff;border-color:#111}
.r538-fechas{display:none;gap:8px;align-items:center;flex-wrap:wrap;margin:-6px 0 16px}.r538-fechas.on{display:flex}.r538-fechas input{padding:9px;border:1px solid #ccc;border-radius:10px;font:inherit}
.r538-big{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.r538-card{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.r538-card .t{font-size:14px;font-weight:800;letter-spacing:.06em;color:#666}.r538-card .v{font-size:38px;font-weight:900;margin:6px 0 4px}.r538-card .s{color:#555;font-size:14px;line-height:1.5}
.r538-entro .v{color:#176b3a}.r538-salio .v{color:#a52828}.r538-quedo{background:#111;color:#fff}.r538-quedo .t,.r538-quedo .s{color:#ccc}.r538-quedo .v{color:#ffd54a}
.r538-frase{font-size:18px;margin:16px 4px 20px;line-height:1.5}
.r538-libro{background:#fffdf4;border:1px solid #eadfb8;border-radius:18px;padding:18px 20px;margin-bottom:14px;box-shadow:inset 6px 0 0 var(--gold)}
.r538-libro h3{margin:0 0 4px;font-size:20px}.r538-libro p{margin:0 0 10px;color:#777;font-size:13px}
.r538-libro table{width:100%;border-collapse:collapse;font-size:15px}.r538-libro th{text-align:right;font-size:12px;letter-spacing:.06em;color:var(--gold-osc);padding:6px 8px;border-bottom:2px solid #e3d59c}.r538-libro th:first-child,.r538-libro td:first-child{text-align:left}
.r538-libro td{text-align:right;padding:7px 8px;border-bottom:1px solid #efe6c6;white-space:nowrap}.r538-libro tr.vacio td{color:#bbb}.r538-libro tr.hoy td{background:#fff3c4;font-weight:800}.r538-libro .neg{color:#a52828}.r538-libro .pos{color:#176b3a}.r538-libro tfoot td{border-top:2px solid #e3d59c;font-weight:900;border-bottom:0}
.r538-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}.r538-sec h3{margin:0 0 12px;font-size:19px}
.r538-fila{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #f0f0f0;font-size:15px}.r538-fila:last-child{border-bottom:0}.r538-fila b{white-space:nowrap}
.r538-bar{height:8px;background:#f1f1f1;border-radius:9px;margin:4px 0 10px;overflow:hidden}.r538-bar i{display:block;height:100%;background:var(--gold);border-radius:9px}
.r538-num{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.r538-num div{background:#f7f7f7;border-radius:14px;padding:12px;text-align:center}.r538-num b{display:block;font-size:26px}.r538-num span{font-size:13px;color:#555}
.r538-mini{color:#777;font-size:13px;margin:8px 0 0}.r538-nombres{font-size:14px;color:#333;line-height:1.6;margin-top:6px}.r538-pie{display:flex;justify-content:center;margin:18px 0 30px}
.r538-gris{color:transparent!important;background:linear-gradient(90deg,#eee,#f6f6f6,#eee);background-size:200% 100%;animation:r538brillo 1.2s infinite;border-radius:8px}@keyframes r538brillo{0%{background-position:200% 0}100%{background-position:-200% 0}}
.r538-girando{display:inline-block;animation:r538gira 1s linear infinite}@keyframes r538gira{to{transform:rotate(360deg)}}
.r538-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:4px 0 12px}.r538-filtros input{flex:1 1 240px;border:1px solid #d5d5d1;border-radius:10px;padding:9px 12px;font:inherit}
.r538-chipm{border:1px solid #ccc;background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer}.r538-chipm.on{background:#111;color:#fff;border-color:#111}
.r538-total td{font-weight:900;border-top:2px solid #111}
.r538 .neg,.panel .neg{color:#a52828}
@media(max-width:850px){.r538-big,.r538-grid{grid-template-columns:1fr}.r538-num{grid-template-columns:1fr 1fr}.r538-card .v{font-size:32px}.r538-libro td,.r538-libro th{padding:6px 4px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.r538-gris,.r538-girando{animation:none}}

/* ---------- Reportes (04-nov): Entró · Salió · Quedó ---------- */
.rp-barra { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.rp-rangos { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { border: 1px solid #ddd8c6; background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; color: #333; cursor: pointer; }
.rp-chip.activo { background: #151515; border-color: #151515; color: #f0d66a; }
.rp-fechas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #555; }
.rp-fechas label { display: flex; gap: 6px; align-items: center; font-weight: 700; font-size: 14px; }
.rp-fechas input { border: 1px solid #d5d5d1; border-radius: 10px; padding: 8px 10px; font: inherit; }
.rp-rango-txt { font-weight: 800; color: #444; }
.rp-hero { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 0; background: #151515; color: #fff; border-radius: 22px; overflow: hidden; }
.rp-hero-item { padding: 22px 24px; display: grid; gap: 4px; align-content: start; border-right: 1px solid #2c2c2c; }
.rp-hero-item span { color: #bdbdbd; font-weight: 700; }
.rp-hero-item strong { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.rp-hero-item.quedo { background: #1d1a10; border-right: 0; }
.rp-hero-item.quedo strong { color: #f0d66a; font-size: clamp(34px, 4.4vw, 52px); }
.rp-hero-item.quedo strong.neg { color: #ff9b8f; }
.rp-comp { font-weight: 700; font-size: 13px; color: #9a9a9a; }
.rp-comp.bien { color: #7fd69e; }
.rp-comp.mal { color: #ff9b8f; }
.panel .rp-comp.bien { color: #116a36; }
.panel .rp-comp.mal { color: #a52828; }
.rp-hero-nota { grid-column: 1 / -1; margin: 0; padding: 12px 24px; font-size: 13px; color: #a8a8a8; border-top: 1px solid #2c2c2c; }
.rp-graf { overflow: hidden; }
.rp-sec-cab { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.rp-sec-cab h2, .panel > h2 { margin: 0 0 12px; font-size: 19px; }
.rp-leyenda { display: flex; gap: 14px; font-size: 14px; color: #444; }
.rp-leyenda i, .rp-met i, .rp-tip i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rp-graf-wrap { position: relative; overflow-x: auto; }
.rp-graf-wrap svg { display: block; min-width: 100%; height: auto; }
.rp-grid { stroke: #ecebe5; stroke-width: 1; }
.rp-eje { font-size: 11px; fill: #777; text-anchor: middle; }
.rp-eje.y { text-anchor: end; }
.rp-col { cursor: pointer; transition: opacity .12s; }
.rp-col.apagada { opacity: .35; }
.rp-tip { position: absolute; top: 6px; background: #151515; color: #fff; border-radius: 10px; padding: 8px 10px; font-size: 13px; display: grid; gap: 2px; pointer-events: none; min-width: 150px; box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.rp-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.rp-hbar { margin: 10px 0; }
.rp-hbar-cab { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.rp-hbar-cab small { color: #777; font-weight: 400; }
.rp-hbar-pista { height: 10px; border-radius: 999px; background: #f1efe7; overflow: hidden; }
.rp-hbar-pista div { height: 100%; background: #a8800f; border-radius: 999px; }
.rp-pila { display: flex; gap: 2px; height: 18px; border-radius: 999px; overflow: hidden; margin: 6px 0 14px; }
.rp-met { display: grid; gap: 8px; }
.rp-met div { display: grid; grid-template-columns: auto 1fr auto 48px; gap: 8px; align-items: center; }
.rp-met small { color: #777; text-align: right; }
.rp-salidas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rp-salidas div { background: #faf9f5; border: 1px solid #eee9d9; border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.rp-salidas b { font-size: 24px; }
.rp-salidas small, .rp-nota { color: #6b6b6b; font-size: 13px; }
.rp-det { margin-top: 12px; }
.rp-det summary { cursor: pointer; font-weight: 800; color: #8c6d00; }
.rp-tag { display: inline-block; border-radius: 999px; padding: 2px 8px; font-size: 12px; font-weight: 800; background: #f1efe7; color: #555; }
.rp-tag.in { background: #e7f4e9; color: #116a36; }
.rp-tag.out { background: #eef2fb; color: #3f5fb0; }
.rp-tabla td, .rp-tabla th { white-space: nowrap; }
.rp-tabla tfoot td { font-weight: 900; border-top: 2px solid #151515; }
.rp-tabla .rp-gen td { background: #faf9f5; }
td.pos, .pos { color: #116a36; }
td.neg, .neg { color: #a52828; }
.rp-lista { display: grid; }
.rp-lista > div { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 9px 0; border-bottom: 1px solid #f0efe9; }
.rp-lista small { grid-column: 1; color: #777; }
.rp-lista > div > b { grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.rp-deuda { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rp-deuda strong { font-size: 30px; color: #a52828; }
.rp-deuda span { color: #666; }
.rp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rp-kpis.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-kpis div { background: #faf9f5; border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; }
.rp-kpis b { font-size: 24px; }
.rp-kpis span { color: #555; font-size: 13.5px; }
.rp-kpis div.ojo { background: #fff6e0; }
.rp-mov-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.rp-mov-filtros input { flex: 1 1 240px; border: 1px solid #d5d5d1; border-radius: 10px; padding: 9px 12px; font: inherit; }
@media (max-width: 900px) {
  .rp-hero { grid-template-columns: 1fr 1fr; }
  .rp-hero-item.quedo { grid-column: 1 / -1; }
  .rp-dos, .rp-salidas, .rp-kpis.tres { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .rp-hero { grid-template-columns: 1fr; } .rp-hero-item { border-right: 0; border-bottom: 1px solid #2c2c2c; } .rp-kpis { grid-template-columns: 1fr 1fr; } }
.rp-tip[hidden] { display: none; }
.rp-libro { margin: 18px 0; }
/* Timer GymCross (04-nov): panel a la derecha, igual al del original; GYM BOX sigue usable al lado. */
.timer-dock { position: fixed; right: 0; top: 0; bottom: 0; width: 36vw; z-index: 9000; background: #121212; color: #fff; display: grid; grid-template-rows: auto 1fr auto; box-shadow: -10px 0 30px rgba(0,0,0,.25); }
.timer-dock[hidden] { display: none; }
.timer-PEQUENO .timer-dock { width: 24vw; } .timer-GRANDE .timer-dock { width: 50vw; }
.timer-open .main { margin-right: 36vw; } .timer-open.timer-PEQUENO .main { margin-right: 24vw; } .timer-open.timer-GRANDE .main { margin-right: 50vw; }
.timer-open.timer-min .main { margin-right: 0; }
.timer-dock.min { top: auto; bottom: 16px; right: 16px; width: auto !important; min-width: 0; height: auto; grid-template-rows: auto; border-radius: 14px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.32); }
.timer-dock.min [data-t=tam], .timer-dock.min [data-t=aparte] { display: none; }
.timer-dock.min .timer-dock-head strong { font-size: 13px; }
.timer-dock.min iframe, .timer-dock.min .timer-dock-help { display: none; }
.timer-dock-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: #1b1b1b; }
.timer-dock-head strong { font-size: 16px; }
.timer-controls { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.timer-controls button { background: var(--gold); color: #111; border: 0; border-radius: 10px; padding: 8px 11px; font-weight: 800; cursor: pointer; }
.timer-dock iframe { width: 100%; height: 100%; border: 0; background: #121212; }
.timer-dock-help { padding: 8px 12px; font-size: 12px; color: #bbb; background: #1b1b1b; }
@media (max-width: 900px) { .timer-dock, .timer-PEQUENO .timer-dock, .timer-GRANDE .timer-dock { width: 100vw; } .timer-open .main, .timer-open.timer-PEQUENO .main, .timer-open.timer-GRANDE .main { margin-right: 0; } [data-t=tam] { display: none; } }

/* Mensajes: botones para elegir la columna (05-nov). */
.msg-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 14px; }
.msg-filtro { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #ddd8c4; background: #fff; border-radius: 999px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer; color: #222; }
.msg-filtro b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--gold-claro); color: var(--gold-osc); display: inline-grid; place-items: center; font-size: 12px; }
.msg-filtro:hover { border-color: var(--gold); }
.msg-filtro.activo { background: #111; color: #fff; border-color: #111; }
.msg-filtro.activo b { background: var(--gold); color: #111; }
.msg-filtro:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.msg-tablero.una { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
.msg-tablero.una .msg-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; max-height: none; }
/* Reportes: botones de caja, gráfica y secciones con botón (05-nov). */
.rp-cajas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.rp-caja { border: 1px solid #ddd8c4; background: #fff; border-radius: 12px; padding: 9px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.rp-caja:hover { border-color: var(--gold); } .rp-caja.activo { background: var(--gold); border-color: var(--gold); color: #111; }
.rp-caja:focus-visible, .rp-boton:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.rp-botones { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 16px; }
.rp-botones.arriba { justify-content: flex-start; margin: -6px 0 14px; }
.rp-boton { border: 1px solid #111; background: #fff; color: #111; border-radius: 12px; padding: 11px 18px; font: inherit; font-weight: 800; cursor: pointer; }
.rp-boton.activo { background: #111; color: #fff; }
.rp-graf { margin-bottom: 14px; }
.rp-graf-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-graf-cab h3 { margin: 0; font-size: 19px; }
.rp-g { position: relative; } .rp-g svg { width: 100%; height: auto; display: block; touch-action: pan-y; }
.rp-g-grid { stroke: #ececea; stroke-width: 1; } .rp-g-eje { font-size: 11px; fill: #777; } .rp-g-et { font-size: 12px; fill: #333; font-weight: 700; }
.rp-g-cruz { stroke: #999; stroke-width: 1; stroke-dasharray: 3 3; }
.rp-g-tip { position: absolute; top: 6px; background: #fff; border: 1px solid #e2e2df; border-radius: 10px; padding: 8px 10px; font-size: 13px; box-shadow: 0 6px 18px rgba(0,0,0,.12); pointer-events: none; min-width: 140px; }
.rp-g-tip[hidden] { display: none; }
.rp-g-tip div { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .rp-g-tip div b { margin-left: auto; padding-left: 8px; }
.rp-g-tip i, .rp-g-leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rp-g-leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #333; margin: 0 0 6px; }
.rp-g-leyenda span { display: inline-flex; align-items: center; gap: 6px; }

/* Usuarios (05-nov): tarjetas por persona y Nuevo/Editar en 3 pasos (estilo "Vendedoras", colores GYM BOX). */
.us-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 18px; }
.us-card { background: #fff; border: 1px solid #e7e4da; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.us-card.inactivo { opacity: .65; }
.us-cab { display: flex; gap: 12px; align-items: center; } .us-cab h3 { margin: 0; font-size: 18px; } .us-cab small { color: #777; } .us-yo { color: var(--gold-osc); font-weight: 700; }
.us-avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: #111; color: var(--gold); flex: none; }
.us-avatar.r-recepcion { background: #1f5e57; color: #fff; } .us-avatar.r-personalizado { background: var(--gold-claro); color: var(--gold-osc); }
.us-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.us-rol { background: var(--gold-claro); color: var(--gold-osc); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 13px; }
.us-rol.r-administradora { background: #111; color: var(--gold); }
.us-estado { border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 12px; letter-spacing: .04em; } .us-estado.on { background: #dff7ec; color: #137348; } .us-estado.off { background: #f5dfdf; color: #8d2727; }
.us-acceso { margin: 0; color: #555; font-size: 14px; }
.us-puede { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--gold-claro); border-radius: 12px; padding: 10px; }
.us-puede span { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--gold-osc); margin-right: 4px; }
.us-puede i { font-style: normal; background: #fff; border: 1px solid #eadfb8; border-radius: 999px; padding: 3px 10px; font-size: 13px; } .us-puede i.nada { color: #888; }
.us-acciones { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: auto; }
.us-clave-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; } .us-clave-form .aviso-error, .us-clave-form button { grid-column: 1 / -1; justify-self: end; } .us-clave-form .aviso-error { justify-self: stretch; }
.us-modal { width: min(860px, 100%); } .modal:has(.us-modal) { width: min(900px, 100%); }
.us-paso { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .08em; color: var(--gold-osc); margin: 18px 0 10px; font-size: 14px; }
.us-paso span { width: 30px; height: 30px; border-radius: 50%; background: #111; color: var(--gold); display: grid; place-items: center; letter-spacing: 0; }
.us-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.us-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.us-rolcard { border: 2px solid #e7e4da; background: #fff; border-radius: 16px; padding: 14px 12px; display: grid; gap: 4px; justify-items: center; text-align: center; cursor: pointer; font: inherit; }
.us-rolcard b { font-size: 26px; } .us-rolcard strong { font-size: 16px; } .us-rolcard small { color: #666; font-size: 12px; line-height: 1.35; }
.us-rolcard:hover { border-color: var(--gold); } .us-rolcard.activo { border-color: var(--gold); background: var(--gold-claro); box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.25); }
.us-rolcard:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
.us-grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.us-grupo { border: 1px solid #ece8dc; border-radius: 14px; padding: 12px 14px; } .us-grupo h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; color: var(--gold-osc); }
.us-grupo.solo-admin { background: var(--gold-claro); }
.us-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; cursor: pointer; font-weight: 700; }
.us-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.us-switch i { width: 46px; height: 26px; border-radius: 999px; background: #ddd; position: relative; flex: none; transition: background .15s; }
.us-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.us-switch input:checked + i { background: var(--gold); } .us-switch input:checked + i::after { transform: translateX(20px); }
.us-switch input:focus-visible + i { outline: 3px solid #111; outline-offset: 2px; }
.us-switch.fijo { cursor: default; color: #666; } .us-switch.fijo i { opacity: .7; }
.us-activo { border: 1px solid #ece8dc; border-radius: 12px; padding: 10px 12px; }
.us-nota { grid-column: 1 / -1; margin: 0; color: #666; font-size: 13px; }
@media (max-width: 700px) { .us-campos, .us-roles, .us-grupos, .us-clave-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .us-switch i, .us-switch i::after { transition: none; } }

/* Inicio: listas de Por vencer y Pagos pendientes (05-nov, como el original). */
.lista-inicio { display: grid; gap: 10px; max-height: 60vh; overflow: auto; }
.lista-inicio-item { display: flex; flex-wrap: wrap; gap: 4px 10px; justify-content: center; align-items: baseline; border: 1px solid #ddd8c4; background: #fff; border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 16px; cursor: pointer; text-align: center; }
.lista-inicio-item:hover { border-color: var(--gold); background: var(--gold-claro); }
.lista-inicio-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.lista-inicio-item span { color: #555; }

/* Importar clientes (05-nov). */
.imp-cli { width: min(760px, 100%); }
.imp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.imp-kpis div { background: #f7f7f5; border-radius: 14px; padding: 12px; text-align: center; } .imp-kpis b { display: block; font-size: 26px; } .imp-kpis span { font-size: 13px; color: #555; }
.imp-kpis .ok { background: #eef8f1; } .imp-kpis .ok b { color: #176b3a; } .imp-kpis .mal { background: #fbeceb; } .imp-kpis .mal b { color: #a52828; }
.imp-lista { display: grid; gap: 4px; max-height: 260px; overflow: auto; } .imp-lista div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #f0f0f0; } .imp-lista small { color: #666; }
.imp-cli .aviso-error ul { margin: 6px 0 0; padding-left: 18px; }

/* Configuración (05-nov): tarjetas ordenadas, vista previa del menú, papelera y respaldo. */
.cfg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.cfg-card { background: #fff; border: 1px solid #e7e4da; border-radius: 18px; padding: 18px 20px; display: grid; gap: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.cfg-card h2 { margin: 0; font-size: 19px; } .cfg-card h2 small { color: #888; font-weight: 600; } .cfg-card p { margin: 0; color: #555; }
.cfg-ancho { margin-top: 14px; }
.cfg-logo { display: flex; gap: 14px; align-items: center; } .cfg-logo img { width: 84px; height: 84px; border-radius: 18px; object-fit: contain; background: #fff; border: 1px solid #eee; }
.cfg-logo > div { display: grid; gap: 6px; justify-items: start; } .cfg-logo small { color: #777; }
.cfg-vista { background: #141416; border-radius: 14px; padding: 12px 14px; } .cfg-vista > span { display: block; color: #9a9a9a; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
.cfg-vista .side-brand { padding: 0; border: 0; }
.cfg-num { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; background: var(--gold-claro); border-radius: 14px; }
.cfg-num b { display: block; } .cfg-num small { color: var(--gold-osc); }
.cfg-paso { display: flex; align-items: center; border: 1px solid #ddd8c4; border-radius: 12px; overflow: hidden; background: #fff; flex: none; }
.cfg-paso button { width: 40px; height: 42px; border: 0; background: #fff; font-size: 20px; font-weight: 800; cursor: pointer; } .cfg-paso button:hover { background: #f4efdc; }
.cfg-paso input { width: 58px; height: 42px; border: 0; border-left: 1px solid #ddd8c4; border-right: 1px solid #ddd8c4; text-align: center; font: inherit; font-size: 18px; font-weight: 800; -moz-appearance: textfield; }
.cfg-paso input::-webkit-inner-spin-button, .cfg-paso input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cfg-nota { font-size: 13px; color: #777 !important; }
.cfg-ia { display: grid; gap: 6px; background: #f3f6fb; border: 1px solid #dbe4f3; border-radius: 14px; padding: 12px 14px; font-size: 14px; } .cfg-ia code { background: #fff; padding: 1px 6px; border-radius: 6px; }
.cfg-guardar { grid-column: 1 / -1; position: sticky; bottom: 10px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #111; color: #ddd; border-radius: 16px; padding: 10px 12px 10px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.cfg-guardar span.pend { color: #ffd54a; font-weight: 800; } .cfg-guardar button:disabled { opacity: .5; cursor: default; }
.cfg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.cfg-papelera { display: grid; gap: 8px; } .cfg-pap { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; border: 1px solid #eee; border-radius: 12px; padding: 10px 12px; }
.cfg-pap small { display: block; color: #666; } .cfg-pap-tipo { font-size: 13px; background: #f4f1e6; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
@media (max-width: 800px) { .cfg-grid { grid-template-columns: 1fr; } .cfg-pap { grid-template-columns: 1fr; } .cfg-num { flex-wrap: wrap; } }

/* ===== Colores (05-nov): 6 opciones por gimnasio. Cambian el acento y el menú. ===== */
html[data-tema="ROJO"]   { --gold: #e5484d; --gold-rgb: 229,72,77;  --gold2: #ff9a9c; --gold-osc: #8f1d22; --gold-claro: #fdf1f1; --side1: #160b0c; --side2: #241113; }
html[data-tema="AZUL"]   { --gold: #3b82f6; --gold-rgb: 59,130,246; --gold2: #93c0ff; --gold-osc: #1d4f9e; --gold-claro: #eff5ff; --side1: #0a1020; --side2: #111a30; }
html[data-tema="VERDE"]  { --gold: #22c55e; --gold-rgb: 34,197,94;  --gold2: #86efac; --gold-osc: #146c35; --gold-claro: #eefbf2; --side1: #08130c; --side2: #0f1f15; }
html[data-tema="MORADO"] { --gold: #8b5cf6; --gold-rgb: 139,92,246; --gold2: #c4b0ff; --gold-osc: #5a32b3; --gold-claro: #f4f0ff; --side1: #110c1d; --side2: #1b1430; }
html[data-tema="ROSA"]   { --gold: #ec4899; --gold-rgb: 236,72,153; --gold2: #f9a8d4; --gold-osc: #9d1d5c; --gold-claro: #fdf0f6; --side1: #1a0a12; --side2: #2a1020; }

/* ===== Temas festivos: se ponen encima del color elegido. ===== */
html[data-fiesta="NAVIDAD"]      { --gold: #d93a3f; --gold-rgb: 217,58,63;  --gold2: #ffd166; --gold-osc: #8d1d21; --gold-claro: #fdf1ef; --side1: #0b2416; --side2: #12341f; }
html[data-fiesta="ANIO_NUEVO"]   { --gold: #e8c547; --gold-rgb: 232,197,71; --gold2: #fff1a8; --gold-osc: #7a6418; --gold-claro: #fbf8ee; --side1: #050507; --side2: #14121f; }
html[data-fiesta="SAN_VALENTIN"] { --gold: #e8457c; --gold-rgb: 232,69,124; --gold2: #ffb3cb; --gold-osc: #9b1f4a; --gold-claro: #fff0f5; --side1: #23091a; --side2: #3a0f27; }
html[data-fiesta="CARNAVAL"]     { --gold: #f59e0b; --gold-rgb: 245,158,11; --gold2: #fde68a; --gold-osc: #8a5a06; --gold-claro: #fff7e6; --side1: #1e0b33; --side2: #0c2a3b; }
html[data-fiesta="MUJER"]        { --gold: #9b5de5; --gold-rgb: 155,93,229; --gold2: #d6bcff; --gold-osc: #5b2d99; --gold-claro: #f5efff; --side1: #170d26; --side2: #241338; }
html[data-fiesta="MADRE"]        { --gold: #f27a8a; --gold-rgb: 242,122,138;--gold2: #ffc4cc; --gold-osc: #a03142; --gold-claro: #fff1f2; --side1: #22101a; --side2: #351726; }
html[data-fiesta="HALLOWEEN"]    { --gold: #ff7a1a; --gold-rgb: 255,122,26; --gold2: #ffc18f; --gold-osc: #9a420a; --gold-claro: #fff3e9; --side1: #120a1c; --side2: #1f1030; }
/* Adorno: unas pocas figuras que caen despacio (no tapan nada ni se pueden tocar). */
.fiesta-capa { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.fiesta-capa span { position: absolute; top: -40px; font-size: 22px; opacity: .55; animation: fiestaCae linear infinite; }
@keyframes fiestaCae { from { transform: translateY(-40px) rotate(0); } to { transform: translateY(110vh) rotate(300deg); } }
@media (prefers-reduced-motion: reduce) { .fiesta-capa span { animation: none; top: auto; bottom: 8px; opacity: .35; } }
.fiesta-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: 16px; background: linear-gradient(90deg, var(--side1), var(--side2)); color: #fff; font-weight: 800; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.fiesta-banner b { font-size: 26px; } .fiesta-banner small { display: block; color: var(--gold2); font-weight: 600; }
.side-fiesta { margin-left: auto; font-size: 20px; }
/* Configuración → Colores y temas */
.tema-colores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tema-color { display: grid; gap: 6px; justify-items: start; text-align: left; border: 2px solid #e7e4da; border-radius: 14px; padding: 10px; background: #fff; cursor: pointer; font: inherit; }
.tema-color .muestra { width: 100%; height: 34px; border-radius: 10px; display: flex; overflow: hidden; } .tema-color .muestra i { flex: 1; } .tema-color small { color: #666; }
.tema-color.activo { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .25); }
.tema-fiestas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tema-fiesta { border: 2px solid #e7e4da; border-radius: 14px; padding: 10px; background: #fff; cursor: pointer; font: inherit; text-align: left; display: grid; gap: 2px; }
.tema-fiesta b { font-size: 22px; } .tema-fiesta small { color: #666; font-size: 12px; }
.tema-fiesta.activo { border-color: var(--gold); background: var(--gold-claro); }
.tema-color:focus-visible, .tema-fiesta:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
@media (max-width: 700px) { .tema-colores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.actions .secondary.peligro { color: var(--mal); border-color: #e8b4b0; }

/* ---------- Diseño 09-nov: menú por secciones, encabezado y plan (como el POS de ELAINEX) ---------- */
:root { --titulo: Georgia, "Times New Roman", serif; }   /* sin fuentes de internet: abre igual sin conexión */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app { grid-template-columns: 272px 1fr; transition: grid-template-columns .2s ease; background: #f6f5f1; }
.sidebar { padding: 0 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.side-brand { padding: 22px 6px 20px; margin: 0 -14px 0; padding-left: 20px; padding-right: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.side-brand .side-logo-img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(var(--gold-rgb),.55); background: #fff; }
.side-brand strong { font-family: var(--titulo); font-size: 21px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.side-brand small { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.nav { padding: 6px 0 12px; gap: 3px; }
.nav-sec { margin: 18px 10px 6px; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.42); }
a.nav-btn { display: flex; align-items: center; gap: 13px; padding: 10px 16px; border-radius: 999px; color: rgba(255,255,255,.82); font-weight: 600; font-size: 15.5px; transition: background .15s, color .15s; }
a.nav-btn .ico { opacity: .9; }
a.nav-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
a.nav-btn.active { background: var(--gold); color: #141414; font-weight: 800; box-shadow: 0 8px 20px rgba(var(--gold-rgb),.28); }
a.nav-btn:focus-visible { outline: 3px solid var(--gold2); outline-offset: 2px; }
.side-foot { border-top: 1px solid rgba(255,255,255,.08); padding: 14px 4px 4px; }
.side-plan { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, rgba(var(--gold-rgb),.26), rgba(var(--gold-rgb),.06)); border: 1px solid rgba(var(--gold-rgb),.45); }
.side-plan .ico { color: var(--gold2); fill: rgba(var(--gold-rgb),.35); width: 24px; height: 24px; }
.side-plan b { display: block; color: #fff; font-size: 13.5px; letter-spacing: .02em; }
.side-plan small { color: rgba(255,255,255,.6); font-size: 12px; }

.side-plan { margin-bottom: 14px; }
.pie-sistema { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 18px 16px 22px; font-size: 11px; color: #a7a39a; letter-spacing: .02em; }
.pie-sistema .ico { width: 12px; height: 12px; }
@media (max-width: 820px) { .sidebar { width: 272px; left: -290px; } }

/* Subir respaldo (09-nov) */
.cfg-nota { font-size: 13.5px; margin: 10px 0 0; }
.resp-resumen { display: grid; gap: 4px; }
.resp-fila { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed #e6e2d6; }
.resp-fila b { font-variant-numeric: tabular-nums; text-align: right; }
.resp-resumen .notice { margin-top: 12px; }
.resp-avisos { margin-top: 10px; } .resp-avisos summary { cursor: pointer; font-weight: 800; color: var(--alerta); } .resp-avisos ul { max-height: 220px; overflow: auto; font-size: 13.5px; }