@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg-deep:#050a1f;
  --bg-panel:rgba(11,19,43,0.72);
  --bg-card:rgba(255,255,255,0.04);
  --sidebar:rgba(5,10,31,0.95);
  --cian:#00d2ff;
  --naranja:#ff7a1a;
  --verde:#25d366;
  --rojo:#ff4d4d;
  --morado:#a78bfa;
  --text:#ffffff;
  --text-dim:#a0aec0;
  --border:rgba(0,210,255,0.18);
  --border-glow:rgba(0,210,255,0.6);
  --cian-dim:rgba(0,210,255,0.12);
}
*{box-sizing:border-box; margin:0; padding:0; scrollbar-width:thin; scrollbar-color:var(--cian) var(--bg-deep);}
:root{ color-scheme: dark; }
input, select, textarea{ accent-color: var(--cian); color-scheme: dark; }
select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2300d2ff' d='M1 1l5 5 5-5' stroke='%2300d2ff' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; background-size:11px;
  padding-right:34px !important;
  cursor:pointer;
}
body{
  font-family:'Montserrat',sans-serif;
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(circle at 8% 8%, rgba(0,210,255,0.07) 0%, transparent 45%),
    radial-gradient(circle at 92% 92%, rgba(255,122,26,0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 0%, #142449 0%, var(--bg-deep) 75%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:cover;
  color:var(--text);
  min-height:100vh;
}
::-webkit-scrollbar{width:7px; height:7px;}
::-webkit-scrollbar-track{background:var(--bg-deep);}
::-webkit-scrollbar-thumb{background:rgba(0,210,255,.4); border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:var(--cian);}
select option{background:#0b1330; color:#fff; padding:8px;}
a{color:inherit; text-decoration:none;}

@keyframes pulseElite{
  0%{transform:scale(.98); box-shadow:0 0 0 0 rgba(37,211,102,.6);}
  70%{transform:scale(1); box-shadow:0 0 0 9px rgba(37,211,102,0);}
  100%{transform:scale(.98); box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

/* ---- app shell ---- */
.app-shell{display:flex; min-height:100vh;}

.sidebar{
  width:250px; flex-shrink:0;
  background:var(--sidebar); backdrop-filter:blur(22px);
  border-right:1px solid var(--border);
  padding:0; display:flex; flex-direction:column;
  transition:.2s;
  position:sticky; top:0; height:100vh; align-self:flex-start;
}
.sidebar .brand{
  display:flex; align-items:center; gap:10px; padding:20px 20px;
}
.brand-mark{
  width:34px; height:34px; border-radius:10px;
  background:linear-gradient(135deg, var(--cian), #00d2ff);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:15px; color:#050a1f; flex-shrink:0;
  box-shadow:0 0 15px rgba(0,210,255,.45);
}
.brand-name{font-weight:800; font-size:15px; letter-spacing:.3px;}
.brand-sub{font-size:10px; color:var(--text-dim); letter-spacing:1px;}

.nav{flex:1; overflow-y:auto; padding:14px 10px;}
.nav-label{font-size:10px; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-dim); font-weight:800; padding:14px 12px 6px;}
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:10px 13px; border-radius:10px; font-size:13px; color:var(--text-dim); font-weight:600;
  margin-bottom:2px; cursor:pointer; user-select:none; border:1px solid transparent;
  transition:all .25s cubic-bezier(.16,1,.3,1);
}
.nav-item .ico{width:18px; text-align:center; flex-shrink:0; font-size:14px; color:var(--text-dim); transition:color .25s;}
.nav-item .chev{margin-left:auto; font-size:10px; transition:transform .25s; color:var(--text-dim);}
.nav-item:hover{background:var(--cian-dim); color:var(--cian); border-color:rgba(0,210,255,.35);}
.nav-item:hover .ico{color:var(--cian);}
.nav-item.active-group{background:var(--cian-dim); color:var(--cian); font-weight:700; border-color:rgba(0,210,255,.35); box-shadow:inset 0 0 15px rgba(0,210,255,.08);}
.nav-item.active-group .ico{color:var(--cian); text-shadow:0 0 8px var(--cian);}
.nav-item.active-group .chev{transform:rotate(180deg);}
.nav-item.group-toggle.open .chev{transform:rotate(180deg);}
.nav-single{text-decoration:none;}
.nav-single.active{background:var(--cian-dim); color:var(--cian); font-weight:700; border-color:rgba(0,210,255,.35); box-shadow:inset 0 0 15px rgba(0,210,255,.08);}
.nav-single.active .ico{color:var(--cian); text-shadow:0 0 8px var(--cian);}
.nav-single.disabled{opacity:.35; cursor:default; pointer-events:none;}

.submenu{padding-left:20px; position:relative; margin-bottom:4px;}
.submenu::before{content:""; position:absolute; left:12px; top:0; bottom:10px; width:1px; background:var(--border);}
.submenu a{
  display:flex; align-items:center; gap:10px; padding:8px 12px 8px 14px; border-radius:8px;
  font-size:12.5px; color:var(--text-dim); text-decoration:none; margin-bottom:1px; font-weight:500;
  transition:all .2s;
}
.submenu a:hover{color:var(--cian); background:rgba(0,210,255,0.05); padding-left:17px;}
.submenu a.active{color:var(--cian); font-weight:700; background:rgba(0,210,255,0.05);}
.submenu a.disabled{opacity:.35; cursor:default; pointer-events:none;}
.submenu a .dot{width:5px; height:5px; border-radius:50%; background:var(--text-dim); flex-shrink:0; transition:all .2s;}
.submenu a:hover .dot{background:var(--cian); transform:scale(1.4); box-shadow:0 0 8px var(--cian);}
.submenu a.active .dot{background:var(--cian); box-shadow:0 0 8px var(--cian);}

.main{flex:1; min-width:0;}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  height:68px; padding:0 28px; flex-shrink:0;
  background:rgba(5,10,31,0.75); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:60;
}
.topbar-title{font-size:16px; font-weight:800; letter-spacing:.2px;}
.reloj-vivo{
  display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12.5px;
  color:var(--text-dim); border-left:1px solid var(--border); padding-left:16px; white-space:nowrap;
}
.reloj-vivo i{color:var(--cian);}
.reloj-vivo b{color:var(--text); font-weight:700;}
.clima-strip{display:flex; gap:6px; border-left:1px solid var(--border); padding-left:16px;}
.clima-dia{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:var(--text-dim); width:34px;}
.clima-dia i{font-size:13px; color:#ffcc4d; margin:2px 0;}
.clima-dia b{color:var(--text); font-size:10.5px; font-family:'JetBrains Mono',monospace;}
.status-pill{
  display:flex; align-items:center; gap:9px;
  background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.35);
  padding:6px 14px; border-radius:20px; font-size:11px; font-weight:800;
  color:var(--verde); font-family:'JetBrains Mono',monospace; letter-spacing:.3px;
}
.pulse-dot{width:7px; height:7px; background:var(--verde); border-radius:50%; animation:pulseElite 2s infinite;}
.user-chip{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--text-dim);}
.logout-btn{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim);
  padding:7px 14px; border-radius:8px; font-family:inherit; font-size:12px;
  cursor:pointer; transition:.2s;
}
.logout-btn:hover{border-color:var(--naranja); color:var(--naranja); box-shadow:0 0 12px rgba(255,122,26,.25);}

.content{padding:26px 28px 60px;}

/* ---- stat cards ---- */
.stat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-bottom:22px;}
.stat-card{
  border-radius:16px; padding:22px 24px; position:relative; overflow:hidden;
  color:#052229; transition:all .3s cubic-bezier(.16,1,.3,1);
}
.stat-card::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity:0; transition:opacity .3s;
}
.stat-card:hover{transform:translateY(-5px);}
.stat-card:hover::before{opacity:1;}
.stat-card.teal{background:linear-gradient(135deg,#2dd4bf,#0d9488); box-shadow:0 15px 35px rgba(13,148,136,.25);}
.stat-card.blue{background:linear-gradient(135deg,#38bdf8,#0284c7); box-shadow:0 15px 35px rgba(2,132,199,.25);}
.stat-card.purple{background:linear-gradient(135deg,#a78bfa,#7c3aed); color:#f5f3ff; box-shadow:0 15px 35px rgba(124,58,237,.25);}
.stat-card.dark{background:var(--bg-panel); backdrop-filter:blur(15px); color:var(--text); border:1px solid var(--border); box-shadow:0 15px 35px rgba(0,0,0,.4);}
.stat-card.dark:hover{border-color:var(--border-glow); box-shadow:0 20px 45px rgba(0,210,255,.15);}
.stat-label{font-size:11px; text-transform:uppercase; letter-spacing:1px; opacity:.9; margin-bottom:9px; font-weight:700;}
.stat-value{font-size:28px; font-weight:900; margin-bottom:4px; font-family:'JetBrains Mono',monospace;}
.stat-sub{font-size:12px; opacity:.85;}
.stat-link{font-size:12px; font-weight:700; margin-top:10px; display:inline-block; opacity:.95;}

/* ---- panel cards ---- */
.panel{
  background:var(--bg-panel); backdrop-filter:blur(18px); border:1px solid var(--border);
  border-radius:16px; margin-bottom:20px; overflow:hidden; box-shadow:0 15px 35px rgba(0,0,0,.35);
}
.panel-head{padding:16px 20px; font-size:13px; font-weight:800; border-bottom:1px solid var(--border); letter-spacing:.2px;}
.panel-body{padding:0;}

.grid-2{display:grid; grid-template-columns:1.4fr 1fr; gap:16px;}

.table{width:100%; border-collapse:collapse;}
.table th{
  text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:1px; color:var(--cian);
  padding:13px 20px; border-bottom:1px solid var(--border); background:rgba(255,255,255,0.02);
  font-family:'JetBrains Mono',monospace; font-weight:700;
}
.table td{padding:13px 20px; font-size:13px; border-bottom:1px solid var(--border);}
.table tr:last-child td{border-bottom:none;}
.table tr:hover td{background:rgba(0,210,255,0.035);}

.badge{
  display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:20px;
  font-size:10.5px; font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:.3px;
  text-transform:uppercase; border:1px solid transparent; white-space:nowrap; flex-shrink:0;
}
.badge.activo{background:rgba(37,211,102,.13); color:var(--verde); border-color:rgba(37,211,102,.35);}
.badge.suspendido{background:rgba(255,77,77,.13); color:var(--rojo); border-color:rgba(255,77,77,.35);}
.badge.baja{background:rgba(160,174,192,.13); color:var(--text-dim); border-color:rgba(160,174,192,.3);}
.badge.pagado{background:rgba(37,211,102,.13); color:var(--verde); border-color:rgba(37,211,102,.35);}
.badge.pendiente{background:rgba(255,122,26,.13); color:var(--naranja); border-color:rgba(255,122,26,.35);}
.badge.vencido{background:rgba(255,77,77,.13); color:var(--rojo); border-color:rgba(255,77,77,.35);}
.badge.cancelado{background:rgba(160,174,192,.13); color:var(--text-dim); border-color:rgba(160,174,192,.3);}
.badge.offline{background:rgba(255,77,77,.13); color:var(--rojo); border-color:rgba(255,77,77,.35);}
.badge.online{background:rgba(37,211,102,.13); color:var(--verde); border-color:rgba(37,211,102,.35);}
.badge.sin_servicios{background:rgba(160,174,192,.13); color:var(--text-dim); border-color:rgba(160,174,192,.3);}

.btn{
  border:none; border-radius:9px; padding:9px 15px; font-size:12px; font-weight:700;
  cursor:pointer; font-family:inherit; display:inline-flex; align-items:center; gap:6px;
  transition:all .25s;
}
.btn-primary{background:linear-gradient(135deg, var(--cian), #00d2ff); color:#052229; box-shadow:0 0 18px rgba(0,210,255,.3);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 28px rgba(0,210,255,.55);}
.btn-outline{background:var(--cian-dim); border:1px solid rgba(0,210,255,.3); color:var(--cian);}
.btn-outline:hover{background:var(--cian); color:#052229; box-shadow:0 0 18px rgba(0,210,255,.4);}
.btn-danger{background:rgba(255,77,77,.1); border:1px solid rgba(255,77,77,.4); color:var(--rojo);}
.btn-danger:hover{background:var(--rojo); color:#2a0505; box-shadow:0 0 18px rgba(255,77,77,.4);}
.btn-sm{padding:6px 11px; font-size:11px;}
.btn:disabled{opacity:.4; cursor:default; transform:none !important; box-shadow:none !important;}

.toolbar{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; gap:12px; flex-wrap:wrap;}
.search-input{
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  padding:9px 14px; border-radius:9px; font-family:inherit; font-size:13px; min-width:220px;
  transition:border-color .2s;
}
.search-input:focus{border-color:var(--cian); outline:none; box-shadow:0 0 12px rgba(0,210,255,.2);}

/* ---- modal ---- */
.modal-backdrop{
  display:none; position:fixed; inset:0; background:rgba(3,6,18,.75); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; z-index:80; padding:20px;
}
.modal-backdrop.open{display:flex;}
.modal{
  background:var(--bg-panel); backdrop-filter:blur(24px); border:1px solid var(--border-glow);
  border-radius:18px; padding:26px; width:100%; max-width:440px; max-height:90vh; overflow-y:auto;
  box-shadow:0 25px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,210,255,.08);
}
.modal h3{font-size:15px; margin-bottom:18px; font-weight:800;}
.field{margin-bottom:14px;}
.field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; font-weight:600;}
.field input, .field select{
  width:100%; padding:10px 12px; border-radius:9px;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  font-family:inherit; font-size:13px; outline:none; transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus{border-color:var(--cian); box-shadow:0 0 12px rgba(0,210,255,.2);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}

/* Filas de campos lado a lado (fuera de .servicio-card y #lineas-factura, que tienen su propio .fila) */
.fila{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:14px;}
.fila .field{margin-bottom:0;}
.decoy{position:absolute; left:-9999px; top:-9999px; opacity:0; height:0; width:0;}

/* Tabs (usado en Clientes, Ficha de cliente, y cualquier página con pestañas) */
.tabs{display:flex; gap:4px; margin-bottom:16px; border-bottom:1px solid var(--border); overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap;}
.tabs::-webkit-scrollbar{height:4px;}
.tab-btn{background:none; border:none; color:var(--text-dim); padding:10px 16px; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; border-bottom:2px solid transparent; transition:all .2s; white-space:nowrap; flex-shrink:0;}
.tab-btn:hover{color:var(--text);}
.tab-btn.active{color:var(--cian); border-bottom-color:var(--cian); font-weight:700; text-shadow:0 0 10px rgba(0,210,255,.4);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.org-subtab{display:none;}
.org-subtab.active{display:block;}
.servicio-card{background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px; margin-bottom:10px;}
.servicio-card .fila{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:8px;}
.servicio-card input, .servicio-card select{width:100%; padding:7px 9px; border-radius:7px; background:rgba(255,255,255,.03); border:1px solid var(--border); color:var(--text); font-size:12px; font-family:inherit;}
.servicio-card .fila-acciones{display:flex; justify-content:space-between; align-items:center;}

/* Líneas de factura (Producto/Servicio/Personalizado) */
#lineas-factura{overflow-x:auto;}
#lineas-factura .fila{min-width:520px;}
#lineas-factura input, #lineas-factura select{
  width:100%; padding:6px 8px; border-radius:7px; background:var(--bg-card); border:1px solid var(--border);
  color:var(--text); font-size:11px; font-family:inherit;
}

/* Filtros por columna y paginador (Clientes) */
.filtro-col{width:100%; background:var(--bg-card); border:1px solid var(--border); border-radius:7px; color:var(--text); font-family:inherit; font-size:11px; padding:5px 7px;}
.page-btn{background:var(--bg-card); border:1px solid var(--border); color:var(--text); border-radius:7px; padding:5px 11px; font-size:12px; font-family:'JetBrains Mono',monospace; cursor:pointer; transition:all .2s;}
.page-btn:hover{border-color:var(--cian); color:var(--cian);}
.page-btn.active{background:var(--cian); color:#052229; border-color:var(--cian); font-weight:800; box-shadow:0 0 14px rgba(0,210,255,.4);}
.periodo-desc.active{background:var(--cian); color:#052229; border-color:var(--cian); font-weight:700;}

.th-ordenable{cursor:pointer; user-select:none;}
.th-ordenable:hover{color:var(--cian); text-shadow:0 0 8px var(--cian);}
.flecha-orden{font-size:9px; margin-left:3px; color:var(--cian);}

/* Dropdown de sugerencias de Google Places Autocomplete */
.pac-container{
  z-index:9999 !important; background:#0b1330 !important; border:1px solid var(--border-glow) !important;
  border-radius:12px !important; margin-top:4px; font-family:'Montserrat',sans-serif !important;
  box-shadow:0 15px 40px rgba(0,0,0,.6), 0 0 25px rgba(0,210,255,.15) !important;
}
.pac-item{color:var(--text-dim) !important; border-top:1px solid var(--border) !important; padding:9px 10px !important; font-size:12.5px !important;}
.pac-item:hover{background:rgba(0,210,255,.06) !important;}
.pac-item-query{color:var(--text) !important;}
.pac-matched{color:var(--cian) !important;}
.pac-icon{filter:invert(0.7);}

/* ---- login (admin) ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:var(--bg-panel); backdrop-filter:blur(24px); border:1px solid var(--border-glow); border-radius:18px; padding:36px 32px; width:100%; max-width:360px; box-shadow:0 25px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,210,255,.1);}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:28px;}
.login-brand .brand-mark{width:48px; height:48px; font-size:20px; box-shadow:0 0 25px rgba(0,210,255,.5);}
.login-title{font-size:15px; font-weight:800;}
.login-sub{font-size:12px; color:var(--text-dim);}
.btn-login{
  width:100%; margin-top:6px;
  background:linear-gradient(135deg, var(--cian), #00d2ff);
  color:#052229; border:none; font-weight:800; font-size:14px;
  padding:12px; border-radius:10px; cursor:pointer; font-family:inherit;
  box-shadow:0 0 20px rgba(0,210,255,.35); transition:all .25s;
}
.btn-login:hover{transform:translateY(-2px); box-shadow:0 0 32px rgba(0,210,255,.55);}
.error-msg{
  background:rgba(255,77,77,.12); border:1px solid rgba(255,77,77,.35); color:var(--rojo);
  font-size:12px; padding:10px 14px; border-radius:10px; margin-bottom:16px;
}

/* ---- mobile ---- */
.menu-toggle{display:none;}
.tab-cerrar-menu{display:none;}
@media (max-width: 880px){
  .sidebar.open .tab-cerrar-menu{
    display:flex; align-items:center; justify-content:center;
    position:absolute; top:50%; right:-16px; transform:translateY(-50%);
    width:16px; height:52px; background:var(--sidebar); border:1px solid var(--border); border-left:none;
    border-radius:0 10px 10px 0; color:var(--cian); box-shadow:2px 0 10px rgba(0,0,0,.3);
    cursor:pointer; padding:0; font-size:11px; z-index:1;
  }
}
@media (max-width: 880px){
  .sidebar{position:fixed; left:0; top:0; bottom:0; z-index:70; transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .reloj-vivo, .clima-strip{display:none;}
  .user-chip{gap:8px;}
  .status-pill, .admin-nombre{display:none;}
  .logout-btn{padding:7px 10px; font-size:11px; white-space:nowrap;}
  .panel-body{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .table{min-width:520px;}
  .menu-toggle{
    display:flex; align-items:center; justify-content:center;
    width:38px; height:38px; border-radius:10px; background:var(--bg-card);
    border:1px solid var(--border); color:var(--text); cursor:pointer;
  }
  .stat-grid{grid-template-columns:1fr 1fr;}
  .grid-2{grid-template-columns:1fr;}
  .content{padding:18px 14px 50px;}
  .modal-form-2col{grid-template-columns:1fr !important;}
}

/* ---- Custom select (reemplaza el <select> nativo — ver assets/custom-select.js) ---- */
.cs-wrap{position:relative;}
.cs-wrap select{display:none;}
.cs-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  background:var(--bg-card); border:1px solid var(--border); color:var(--text);
  padding:10px 12px; border-radius:9px; font-family:inherit; font-size:13px;
  cursor:pointer; transition:border-color .2s, box-shadow .2s; user-select:none;
}
.cs-wrap.cs-sm .cs-trigger{padding:9px 14px; border-radius:9px; font-size:13px;}
.cs-trigger:hover{border-color:rgba(0,210,255,.4);}
.cs-wrap.open .cs-trigger{border-color:var(--cian); box-shadow:0 0 12px rgba(0,210,255,.25);}
.cs-trigger-text{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cs-trigger-text.placeholder{color:var(--text-dim);}
.cs-arrow{width:11px; height:8px; flex-shrink:0; transition:transform .25s; color:var(--cian);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2300d2ff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;}
.cs-wrap.open .cs-arrow{transform:rotate(180deg);}
.cs-wrap.disabled .cs-trigger{opacity:.5; cursor:default; pointer-events:none;}

.cs-panel{
  display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:200;
  background:#0b1330; backdrop-filter:blur(20px); border:1px solid var(--border-glow); border-radius:12px;
  box-shadow:0 20px 45px rgba(0,0,0,.6), 0 0 25px rgba(0,210,255,.15);
  max-height:260px; overflow-y:auto; padding:6px;
}
.cs-wrap.cs-drop-up .cs-panel{top:auto; bottom:calc(100% + 6px);}
.cs-wrap.open .cs-panel{display:block;}
.cs-option{
  padding:9px 12px; border-radius:8px; font-size:13px; color:var(--text-dim); cursor:pointer;
  transition:all .15s;
}
.cs-option:hover, .cs-option.cs-highlighted{background:var(--cian-dim); color:var(--cian);}
.cs-option.selected{background:rgba(0,210,255,.15); color:var(--cian); font-weight:700;}
.cs-option.cs-disabled{opacity:.4; cursor:default; pointer-events:none;}
.cs-panel-empty{padding:10px 12px; font-size:12px; color:var(--text-dim);}

/* Ícono del selector de fecha nativo (invisible por defecto sobre fondo oscuro) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(0.85) brightness(1.3);
  cursor:pointer;
  opacity:1;
  padding:3px;
}

/* ---- Dashboard: módulos movibles (arrastrar/ocultar) ---- */
.dashboard-widgets{display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-flow:dense; gap:20px; align-items:start;}
.dash-widget.ancho-25{grid-column:span 1;}
.dash-widget.ancho-50{grid-column:span 2;}
.dash-widget.ancho-75{grid-column:span 3;}
.dash-widget.ancho-100{grid-column:span 4;}

/* Este override tiene que ir DESPUÉS de las reglas .ancho-* de arriba — mismo peso de
   especificidad, así que si estuviera antes en el archivo, las reglas de escritorio ganaban
   igual dentro del media query y las tarjetas quedaban amontonadas en mobile. */
@media (max-width: 880px){
  .dashboard-widgets{grid-template-columns:1fr;}
  .dash-widget.ancho-25, .dash-widget.ancho-50, .dash-widget.ancho-75, .dash-widget.ancho-100{grid-column:1/-1;}
}
.ancho-picker{display:none; gap:3px; background:var(--bg-panel); border:1px solid var(--border-glow); border-radius:7px; padding:3px; box-shadow:0 4px 12px rgba(0,0,0,.4);}
.editando-dashboard .ancho-picker{display:flex;}
.ancho-picker button{
  background:none; border:none; color:var(--text-dim); font-size:10px; font-weight:800; font-family:'JetBrains Mono',monospace;
  padding:4px 6px; border-radius:5px; cursor:pointer;
}
.ancho-picker button:hover{color:var(--cian);}
.ancho-picker button.activo{background:var(--cian); color:#052229;}
.dash-widget{position:relative; min-width:0;}
.dash-widget-controls{display:none; position:absolute; top:10px; right:10px; z-index:5; gap:6px;}
.editando-dashboard .dash-widget-controls{display:flex;}
.editando-dashboard .dash-widget > .panel, .editando-dashboard .dash-widget > .stat-grid{outline:1px dashed var(--border-glow); outline-offset:3px; border-radius:18px;}
.dash-drag-handle, .dash-hide-btn{
  cursor:grab; background:var(--bg-panel); backdrop-filter:blur(10px); border:1px solid var(--border-glow);
  border-radius:7px; width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  color:var(--cian); font-size:12px; box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.dash-hide-btn{cursor:pointer;}
.dash-hide-btn:hover{background:var(--cian); color:#052229;}
.dash-widget.sortable-ghost{opacity:.25;}
.dash-widget.sortable-chosen .panel, .dash-widget.sortable-chosen .stat-grid{box-shadow:0 0 30px rgba(0,210,255,.3);}
.widgets-ocultos-tray{display:none; flex-wrap:wrap; gap:8px; margin-bottom:16px;}
.editando-dashboard .widgets-ocultos-tray.tiene-ocultos{display:flex;}
.chip-widget-oculto{
  display:flex; align-items:center; gap:8px; background:var(--bg-card); border:1px solid var(--border);
  border-radius:20px; padding:6px 8px 6px 14px; font-size:12px; color:var(--text-dim);
}
.chip-widget-oculto button{background:var(--cian-dim); border:1px solid rgba(0,210,255,.3); color:var(--cian); border-radius:50%; width:22px; height:22px; cursor:pointer; font-size:11px;}

/* Íconos de tipo de documento (ficha de cliente → Documentos) */
.badge-icon-pdf{background:rgba(255,77,77,.15); color:#ff6b6b;}
.badge-icon-word{background:rgba(0,120,255,.15); color:#4d9fff;}
.badge-icon-excel{background:rgba(37,211,102,.15); color:var(--verde);}

/* Zona de arrastrar y soltar (Documentos / Fotos en la ficha de cliente) */
#dropzone-documentos, #dropzone-fotos{transition:box-shadow .2s, border-color .2s; border:1px solid var(--border);}
.dropzone-activo{border-color:var(--cian) !important; box-shadow:0 0 0 2px rgba(0,210,255,.15), 0 0 24px rgba(0,210,255,.25) !important; background:rgba(0,210,255,.04);}