@font-face{font-family:'DIN';src:url('fonts/DIN-Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-LightItalic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-RegularItalic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'DIN';src:url('fonts/DIN-BlackItalic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'DIN Condensed';src:url('fonts/DINCond-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DIN Condensed';src:url('fonts/DINCond-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{--p:#913485;--pd:#6b2563;--pl:#c278b8;--pbg:#f5edf3;--b:rgba(145,52,133,.15);--bs:rgba(145,52,133,.3);--t:#2d1a2a;--tm:#6b7280;--tl:#9ca3af;--ok:#059669;--wa:#d97706;--er:#dc2626;--in:#2563eb;--sw:240px;--r:12px;--rs:8px;--sh:0 4px 24px rgba(145,52,133,.10);--ss:0 2px 8px rgba(145,52,133,.08)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DIN',Arial,sans-serif;background:#fdf5fb;min-height:100vh;color:var(--t);font-size:14px}
#ls{min-height:100vh;display:flex;flex-direction:column;align-items:stretch;background:linear-gradient(135deg,#fdf5fb,#f5edf3,#e8cfe0)}
.lc{background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border:1px solid var(--bs);border-radius:20px;padding:2.5rem;width:100%;max-width:400px;box-shadow:var(--sh)}
.ll{text-align:center;margin-bottom:2rem}
.li{width:56px;height:56px;background:var(--p);border-radius:14px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;letter-spacing:-1px;margin-bottom:10px}
.lb{font-size:22px;font-weight:800;color:var(--p)}
.ls2{font-size:11px;color:var(--tm);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.fg{margin-bottom:1rem}
.fg label{display:block;font-size:11px;font-weight:600;color:var(--tm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.fg input{width:100%;padding:10px 14px;border:1.5px solid var(--bs);border-radius:var(--rs);font-size:14px;background:#fff;color:var(--t);outline:none;transition:border-color .2s}
.fg input:focus{border-color:var(--p)}
.btp{width:100%;padding:12px;background:var(--p);color:#fff;border:none;border-radius:var(--rs);font-size:15px;font-weight:600;cursor:pointer;margin-top:.5rem;transition:background .2s}
.btp:hover{background:var(--pd)}
.le{background:#fef2f2;border:1px solid #fecaca;color:var(--er);padding:10px 14px;border-radius:var(--rs);font-size:13px;margin-bottom:1rem;display:none}
#app{display:none;min-height:100vh}
.sb{width:var(--sw);background:rgba(255,255,255,.9);backdrop-filter:blur(20px);border-right:1px solid var(--bs);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100}
.slogo{padding:1.25rem;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:10px}
.sico{width:36px;height:36px;background:var(--p);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;letter-spacing:-1px;flex-shrink:0}
.snm{font-size:14px;font-weight:700;color:var(--p)}
.ssb{font-size:10px;color:var(--tm);text-transform:uppercase;letter-spacing:.5px}
nav{flex:1;padding:1rem .75rem;overflow-y:auto}
.nsec{margin-bottom:1.5rem}
.nlb{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--tl);padding:0 .5rem;margin-bottom:.5rem}
.ni{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--rs);color:var(--tm);cursor:pointer;transition:all .15s;font-size:13.5px;font-weight:500;margin-bottom:2px;border:none;background:none;width:100%;text-align:left}
.ni:hover{background:var(--pbg);color:var(--p)}
.ni.active{background:var(--p);color:#fff}
.sft{padding:1rem .75rem;border-top:1px solid var(--b)}
.ur{display:flex;align-items:center;gap:10px;padding:8px 10px}
.uav{width:32px;height:32px;background:var(--p);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;flex-shrink:0}
.unm{font-size:13px;font-weight:600;color:var(--t)}
.url{font-size:11px;color:var(--tm)}
.blo{width:100%;margin-top:8px;padding:8px;background:none;border:1px solid var(--bs);border-radius:var(--rs);color:var(--tm);font-size:13px;cursor:pointer;transition:all .15s}
.blo:hover{background:#fef2f2;border-color:#fecaca;color:var(--er)}
.mn{margin-left:var(--sw);padding:1.5rem;min-height:100vh;display:flex;flex-direction:column}
.ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.75rem}
.ptit{font-size:22px;font-weight:700;color:var(--t)}
.psub{font-size:13px;color:var(--tm);margin-top:2px}
.card{background:rgba(255,255,255,.9);border:1px solid var(--bs);border-radius:var(--r);padding:1.25rem;box-shadow:var(--ss)}
.sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.5rem}
.sc{background:rgba(255,255,255,.9);border:1px solid var(--bs);border-radius:var(--r);padding:1.25rem;box-shadow:var(--ss);position:relative;overflow:hidden}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--p)}
.sc.g::before{background:var(--ok)}.sc.a::before{background:var(--wa)}.sc.r::before{background:var(--er)}.sc.b::before{background:var(--in)}
.slb{font-size:11px;color:var(--tm);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.svl{font-size:28px;font-weight:700;color:var(--t);line-height:1}
.qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.75rem;margin-bottom:1.5rem}
.qb{background:rgba(255,255,255,.9);border:1.5px solid var(--bs);border-radius:var(--r);padding:1rem;text-align:center;cursor:pointer;transition:all .15s;color:var(--tm);font-size:13px;font-weight:600}
.qb:hover{border-color:var(--p);color:var(--p);background:var(--pbg);transform:translateY(-1px)}
.qb svg{display:block;margin:0 auto 6px}
.tw{overflow-x:scroll}
table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--tm);border-bottom:2px solid var(--bs);background:rgba(245,237,243,.5)}
tbody tr{border-bottom:1px solid var(--b);transition:background .1s}
tbody tr:hover{background:rgba(245,237,243,.35)}
tbody td{padding:11px 12px;color:var(--t)}
.badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.bg{background:#d1fae5;color:#065f46}.ba{background:#fef3c7;color:#92400e}.br{background:#fee2e2;color:#991b1b}.bb{background:#dbeafe;color:#1e40af}.bp{background:var(--pbg);color:var(--pd)}.bx{background:#f3f4f6;color:#374151}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--rs);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:inherit}
.sm{padding:6px 12px;font-size:12px}
.bv{background:var(--p);color:#fff}.bv:hover{background:var(--pd)}
.bo{background:transparent;border:1.5px solid var(--bs);color:var(--tm)}.bo:hover{border-color:var(--p);color:var(--p);background:var(--pbg)}
.bgb{background:transparent;border:none;color:var(--tm);padding:6px 8px;cursor:pointer;font-size:14px}.bgb:hover{color:var(--p)}
.tb2{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.sw{position:relative;flex:1;min-width:200px}
.sw svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tl);pointer-events:none}
.si{width:100%;padding:9px 14px 9px 34px;border:1.5px solid var(--bs);border-radius:var(--rs);font-size:13px;background:#fff;color:var(--t);outline:none;transition:border-color .2s}
.si:focus{border-color:var(--p)}
.fs{padding:9px 12px;border:1.5px solid var(--bs);border-radius:var(--rs);font-size:13px;background:#fff;color:var(--t);outline:none;cursor:pointer}
.mo{position:fixed;inset:0;background:rgba(30,27,75,.4);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
.mo.open{display:flex}
.md{background:#fff;border-radius:16px;padding:1.75rem;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(124,58,237,.2);max-height:90vh;overflow-y:auto}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.mt{font-size:18px;font-weight:700;color:var(--t)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ff{margin-bottom:1rem}
.ff label{display:block;font-size:11px;font-weight:600;color:var(--tm);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.ff input,.ff select,.ff textarea{width:100%;padding:9px 12px;border:1.5px solid #e5e7eb;border-radius:var(--rs);font-size:13.5px;color:var(--t);background:#fff;outline:none;transition:border-color .2s;font-family:inherit}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--p)}
.ff textarea{resize:vertical;min-height:80px}
.ma{display:flex;gap:.75rem;justify-content:flex-end;margin-top:1.5rem}
.page{display:none}.page.active{display:block}
.ld{display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--tm);gap:10px}
.sp{width:20px;height:20px;border:2px solid var(--bs);border-top-color:var(--p);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.es{text-align:center;padding:3rem 1rem;color:var(--tm)}
.tc{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:.5rem}
.toast{background:#fff;border-radius:var(--rs);padding:12px 16px;box-shadow:0 4px 20px rgba(0,0,0,.15);border-left:4px solid var(--p);font-size:13.5px;color:var(--t);min-width:260px;animation:tsi .3s ease}
.toast.success{border-color:var(--ok)}.toast.error{border-color:var(--er)}
@keyframes tsi{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.pg{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:1rem;font-size:13px;color:var(--tm)}
.pbt{padding:5px 10px;border:1px solid var(--bs);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;color:var(--tm)}
.pbt:hover{border-color:var(--p);color:var(--p)}
.pbt.active{background:var(--p);color:#fff;border-color:var(--p)}
.stit{font-size:15px;font-weight:700;margin-bottom:1rem;color:var(--t)}

/* MINI CALENDARIO */
.mini-cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.mini-cal-mes { font-size:11px; font-weight:700; color:var(--p); text-transform:uppercase; letter-spacing:.5px; }
.mini-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.mini-cal-dia-nombre { font-size:9px; font-weight:600; color:var(--tl); text-align:center; padding:2px 0; text-transform:uppercase; }
.mini-cal-dia { font-size:10px; text-align:center; padding:2px 1px; border-radius:50%; color:var(--tm); line-height:1.6; width:20px; height:20px; display:flex; align-items:center; justify-content:center; margin:0 auto; }
.mini-cal-dia.hoy { background:var(--p); color:white; font-weight:700; border-radius:50%; }
.mini-cal-dia.otro-mes { color:var(--tl); }
#mini-cal:hover { background:rgba(145,52,133,.05); }
#mini-cal { transition:background .15s; border-radius:0; }

/* CALENDARIO COMPLETO */
.cal-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.cal-nav-btn { background:none; border:1.5px solid var(--bs); border-radius:var(--rs); padding:6px 14px; cursor:pointer; font-size:16px; color:var(--p); transition:all .15s; }
.cal-nav-btn:hover { background:var(--pbg); }
.cal-mes-titulo { font-size:20px; font-weight:700; color:var(--t); text-transform:capitalize; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dia-nombre { text-align:center; font-size:11px; font-weight:700; color:var(--tm); text-transform:uppercase; letter-spacing:.5px; padding:8px 0; }
.cal-dia { min-height:70px; border:1.5px solid var(--border, rgba(145,52,133,.15)); border-radius:var(--rs); padding:6px; cursor:pointer; transition:all .15s; position:relative; }
.cal-dia:hover { border-color:var(--p); background:var(--pbg); }
.cal-dia.hoy { border-color:var(--p); background:var(--pbg); }
.cal-dia.hoy .cal-num { background:var(--p); color:white; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.cal-dia.otro-mes { opacity:.35; }
.cal-num { font-size:13px; font-weight:600; color:var(--t); width:26px; height:26px; display:flex; align-items:center; justify-content:center; margin-bottom:4px; }
.cal-evento { font-size:10px; background:var(--p); color:white; border-radius:4px; padding:1px 5px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-evento:hover { filter:brightness(1.12); }
.cal-evento.ev-manual { background:#7c3aed; }
.cal-evento.ev-vencimiento_cobro { background:#d97706; }
.cal-evento.ev-vencimiento_contrato { background:#059669; }
.cal-evento.ev-otro { background:#6b7280; }
.cal-mas { font-size:9px; color:var(--tm); cursor:pointer; padding:1px 4px; }
.cal-mas:hover { color:var(--p); }

/* Panel lateral de día */
.cal-panel { display:none; background:rgba(255,255,255,0.75); backdrop-filter:blur(24px); border:1px solid rgba(255,255,255,0.75); border-radius:var(--r); box-shadow:0 8px 32px rgba(145,52,133,.12); padding:1.25rem; min-width:260px; max-width:300px; flex-shrink:0; }
.cal-panel.open { display:block; }
.cal-panel-fecha { font-size:13px; font-weight:700; color:var(--p); margin-bottom:1rem; text-transform:capitalize; }
.cal-panel-ev { display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:var(--rs); margin-bottom:6px; background:rgba(145,52,133,0.05); border:1px solid rgba(145,52,133,0.1); cursor:pointer; transition:all .15s; }
.cal-panel-ev:hover { background:rgba(145,52,133,0.1); }
.cal-panel-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; margin-top:3px; }
.cal-panel-titulo { font-size:13px; font-weight:600; color:var(--t); line-height:1.3; }
.cal-panel-sub { font-size:11px; color:var(--tm); margin-top:2px; }
.cal-wrapper { display:flex; gap:1.25rem; align-items:flex-start; }
.cal-main { flex:1; min-width:0; }
.ev-dot-manual { background:#7c3aed; }
.ev-dot-vencimiento_cobro { background:#d97706; }
.ev-dot-vencimiento_contrato { background:#059669; }
.ev-dot-otro { background:#6b7280; }
.ev-dot-default { background:var(--p); }
.cal-leyenda { display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; font-size:11px; color:var(--tm); }
.cal-leyenda-item { display:flex; align-items:center; gap:5px; }
.cal-leyenda-dot { width:8px; height:8px; border-radius:50%; }


/* ===== LIQUID GLASS ===== */

/* Fondo animado */
body {
  background: linear-gradient(135deg, #fdf5fb 0%, #f5edf3 30%, #ede0f0 60%, #e8d5ec 100%);
  background-size: 400% 400%;
  animation: bgShift 12s ease infinite;
}
@keyframes bgShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Sidebar liquid glass */
.sb {
  background: rgba(255,255,255,0.45) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-right: 1px solid rgba(255,255,255,0.6) !important;
  box-shadow: 4px 0 32px rgba(145,52,133,0.08), inset -1px 0 0 rgba(255,255,255,0.5) !important;
}

/* Logo area */
.slogo {
  background: linear-gradient(135deg, rgba(145,52,133,0.12), rgba(145,52,133,0.04));
  border-bottom: 1px solid rgba(145,52,133,0.12) !important;
}

/* Nav items hover liquid */
.ni {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.ni::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(145,52,133,0.15), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: var(--rs);
}
.ni:hover::before { opacity: 1; }
.ni:hover {
  transform: translateX(3px);
  background: rgba(145,52,133,0.1) !important;
  color: var(--p) !important;
}
.ni.active {
  background: linear-gradient(135deg, var(--p), var(--pd)) !important;
  box-shadow: 0 4px 15px rgba(145,52,133,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateX(2px);
}
.ni.active:hover {
  color: white !important;
  background: linear-gradient(135deg, var(--p), var(--pd)) !important;
}
.ni.active::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
}

/* Cards glass */
.card, .sc {
  background: rgba(255,255,255,0.55) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  box-shadow: 0 8px 32px rgba(145,52,133,0.08), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s !important;
}
.card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(145,52,133,0.12), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}
.sc:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(145,52,133,0.15), inset 0 1px 0 rgba(255,255,255,0.9) !important;
}

/* Quick action buttons */
.qb {
  background: rgba(255,255,255,0.5) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  box-shadow: 0 4px 16px rgba(145,52,133,0.06), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important;
  position: relative;
  overflow: hidden;
}
.qb::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(145,52,133,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
}
.qb:hover::before { opacity: 1; }
.qb:hover {
  transform: translateY(-3px) scale(1.02) !important;
  border-color: rgba(145,52,133,0.35) !important;
  box-shadow: 0 12px 32px rgba(145,52,133,0.18), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  color: var(--p) !important;
}

/* Botones primarios */
.bv {
  background: linear-gradient(135deg, var(--p), var(--pd)) !important;
  box-shadow: 0 4px 15px rgba(145,52,133,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
  position: relative;
  overflow: hidden;
}
.bv::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s;
}
.bv:hover::after { left: 100%; }
.bv:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 25px rgba(145,52,133,0.45), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.bv:active { transform: scale(0.97) !important; }

/* Botones outline */
.bo {
  background: rgba(255,255,255,0.4) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(145,52,133,0.25) !important;
  transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.bo:hover {
  background: rgba(145,52,133,0.08) !important;
  border-color: rgba(145,52,133,0.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(145,52,133,0.12) !important;
}

/* Modales */
.mo.open { animation: fadeInOverlay 0.2s ease; }
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.md {
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 24px 64px rgba(145,52,133,0.2), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  animation: slideUpModal 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes slideUpModal {
  from { transform: translateY(20px) scale(0.97); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Overlay modal */
.mo {
  background: rgba(30,10,40,0.35) !important;
  backdrop-filter: blur(6px) !important;
}

/* Tabla hover */
tbody tr {
  transition: background 0.15s, transform 0.1s !important;
}
tbody tr:hover {
  background: rgba(145,52,133,0.06) !important;
  transform: scale(1.001);
}

/* Sidebar footer */
.sft {
  background: linear-gradient(to top, rgba(145,52,133,0.06), transparent);
  border-top: 1px solid rgba(255,255,255,0.5) !important;
}

/* Logout button */
.blo {
  background: rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(145,52,133,0.15) !important;
  transition: all 0.2s !important;
}
.blo:hover {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.3) !important;
  color: var(--er) !important;
  transform: translateY(-1px) !important;
}

/* Mini calendario glass */
#mini-cal {
  background: rgba(255,255,255,0.3) !important;
  backdrop-filter: blur(12px) !important;
  transition: background 0.2s !important;
}
#mini-cal:hover {
  background: rgba(145,52,133,0.08) !important;
}

/* Inputs focus glow */
.ff input:focus, .ff select:focus, .ff textarea:focus,
.fg input:focus, .si:focus, .fs:focus {
  box-shadow: 0 0 0 3px rgba(145,52,133,0.15), 0 1px 3px rgba(145,52,133,0.1) !important;
  border-color: var(--p) !important;
}

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(145,52,133,0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(145,52,133,0.5); }

/* Page transitions */
.page.active {
  animation: pageIn 0.2s ease;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stat card glow on hover */
.sc::before {
  transition: height 0.2s !important;
}
.sc:hover::before {
  height: 4px !important;
}


/* ===== COLORES POR SECCION ===== */
:root {
  --color-cobros: #00B050;
  --color-ventas: #913485;
  --color-reportes: #2E75B6;
  --color-default: #913485;
}

/* Modo cobros */
body.modo-cobros .bv { background: linear-gradient(135deg, #00B050, #009040) !important; box-shadow: 0 4px 15px rgba(0,176,80,.35), inset 0 1px 0 rgba(255,255,255,.2) !important; }
body.modo-cobros .bv:hover { box-shadow: 0 8px 25px rgba(0,176,80,.45) !important; }
body.modo-cobros .ni.active { background: linear-gradient(135deg, #00B050, #009040) !important; box-shadow: 0 4px 15px rgba(0,176,80,.35) !important; }
body.modo-cobros .ff input:focus, body.modo-cobros .ff select:focus, body.modo-cobros .ff textarea:focus { border-color: #00B050 !important; box-shadow: 0 0 0 3px rgba(0,176,80,.15) !important; }

/* Modo reportes */
body.modo-reportes .bv { background: linear-gradient(135deg, #2E75B6, #1a5a9a) !important; box-shadow: 0 4px 15px rgba(46,117,182,.35), inset 0 1px 0 rgba(255,255,255,.2) !important; }
body.modo-reportes .bv:hover { box-shadow: 0 8px 25px rgba(46,117,182,.45) !important; }
body.modo-reportes .ni.active { background: linear-gradient(135deg, #2E75B6, #1a5a9a) !important; box-shadow: 0 4px 15px rgba(46,117,182,.35) !important; }

/* Modo ventas/contratos - usa el violeta por defecto */
body.modo-ventas .bv { background: linear-gradient(135deg, #913485, #6b2563) !important; }
body.modo-ventas .ni.active { background: linear-gradient(135deg, #913485, #6b2563) !important; }


/* ===== FONDO CON IMAGEN ===== */
.mn {
  position: relative;
  isolation: isolate;
}

.mn::before {
  content: '';
  position: fixed;
  top: 0;
  left: 210px; /* ancho del sidebar */
  right: 0;
  bottom: 0;
  background: url('bg.jpg') center center / cover no-repeat;
  filter: blur(3px) brightness(0.92);
  z-index: -1;
  transform: scale(1.02); /* evita bordes blancos del blur */
}

/* Overlay para suavizar mas y mantener legibilidad */
.mn::after {
  content: '';
  position: fixed;
  top: 0;
  left: 210px;
  right: 0;
  bottom: 0;
  background: rgba(245, 237, 243, 0.72);
  z-index: -1;
}

/* Las cards y elementos deben seguir siendo legibles */
.card, .sc, .qb {
  background: rgba(255,255,255,0.70) !important;
}

/* ===== FOOTER ===== */
.app-footer {
  margin-top: auto;
  padding: 14px 1.5rem;
  background: rgba(255,255,255,0.45);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-top: 1px solid rgba(145,52,133,0.18);
  border-radius: var(--r) var(--r) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.app-footer-left {
  font-size: 11px;
  color: var(--tm);
  line-height: 1.6;
}
.app-footer-left strong {
  color: var(--p);
  font-weight: 700;
}
.app-footer-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.app-footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(145,52,133,0.2);
  background: rgba(255,255,255,0.5);
  color: var(--tm);
  transition: all 0.2s;
  text-decoration: none;
}
.app-footer-social a:hover {
  border-color: var(--p);
  background: rgba(145,52,133,0.08);
  color: var(--p);
  transform: translateY(-1px);
}
.app-footer-credit {
  font-size: 11px;
  color: var(--tm);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.app-footer-credit .heart {
  color: #e05c8a;
  font-size: 12px;
}
.app-footer-credit strong {
  color: var(--p);
  font-weight: 600;
}
/* Ocultar flechas en inputs numéricos del recibo */
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.no-spin { -moz-appearance:textfield; }

/* ═══════════════════════════════════════════════════════════════
   CHECKBOXES Y RADIOS — estilo cuadrado global
   Aplica a TODOS los input[type] y también a .chk / .rdo
   ═══════════════════════════════════════════════════════════════ */
input[type="checkbox"],
input[type="radio"],
.chk, .rdo {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  border: 2px solid #ccc !important;
  border-radius: 3px !important;
  background-color: #fff !important;
  cursor: pointer !important;
  position: relative !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  box-sizing: border-box !important;
  transition: border-color .15s, background-color .15s !important;
  margin: 0 !important;
  padding: 0 !important;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked,
.chk:checked,
.rdo:checked {
  border-color: var(--p) !important;
  background-color: var(--p) !important;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after,
.chk:checked::after,
.rdo:checked::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -62%) rotate(45deg) !important;
  width: 4px !important;
  height: 7px !important;
  border-right: 2px solid white !important;
  border-bottom: 2px solid white !important;
  border-radius: 0 !important;
  background: transparent !important;
  display: block !important;
}

input[type="checkbox"]:hover,
input[type="radio"]:hover,
.chk:hover,
.rdo:hover {
  border-color: var(--p) !important;
}

/* ── Labels para checks y radios ─────────────────────────────── */
.chk-label, .rdo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--t);
}

/* ── Panel Servicios (Reservas) ─────────────────────────────── */
.btn-servicios-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 9px 14px;
  background: var(--s, #f3eaf8);
  border: 1.5px solid var(--p, #913485);
  border-radius: var(--rs);
  color: var(--p, #913485);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, box-shadow .18s;
}
.btn-servicios-toggle:hover {
  background: #ede0f5;
  box-shadow: 0 2px 8px rgba(145,52,133,.13);
}
.servicios-chevron {
  margin-left: auto;
  transition: transform .22s ease;
}
.servicios-chevron.open {
  transform: rotate(180deg);
}
.servicios-panel {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 14px;
  background: #faf5fd;
  border: 1.5px solid #e8d5f0;
  border-radius: var(--rs);
  animation: fadeSlideDown .2s ease;
}
.servicios-panel.open {
  display: flex;
}
.chk-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--t);
  cursor: pointer;
  user-select: none;
}
.chk-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--p, #913485);
  cursor: pointer;
  flex-shrink: 0;
}
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Campana mensajes recibo ────────────────────────────── */
@keyframes campanear {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  30%  { transform: rotate(-12deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-8deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}