:root {
  --blue: #0A5AFF;
  --blue-mid: #002E94;
  --blue-dark: #0A0A56;
  --bg: #070B16;
  --text: #EAF0FF;
  --muted: rgba(234, 240, 255, .72);

  --card: rgba(255, 255, 255, .08);
  --stroke: rgba(255, 255, 255, .14);
  --radius: 22px;

  --shadow: 0 26px 70px rgba(0, 0, 0, .55);
  --shadow-sm: 0 12px 30px rgba(0, 0, 0, .35);

  --focus: 0 0 0 3px rgba(10, 90, 255, .35);

  /* fondo */
  --bgImage: url("https://engsilicon.com/wp-content/uploads/2026/01/475358243_1165712235167461_3014391947886350603_n-1.jpg");

  /* cursor glow (se actualiza por JS) */
  --mx: 50%;
  --my: 50%;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}

a {
  color: inherit
}

.muted {
  color: var(--muted)
}

.stack {
  display: grid;
  gap: 14px
}

.row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap
}

.row>* {
  flex: 1;
  min-width: 220px
}

code {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 2px 8px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .92);
}

input {
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(10, 12, 18, .55);
  color: rgba(255, 255, 255, .92);
  outline: none;
}

/* Sobrecarga para fondos claros */
.wpCard input,
.wpCard select,
.wpCard textarea {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  color: #111827 !important;
}

input::placeholder {
  color: rgba(255, 255, 255, .55)
}

.wpCard input::placeholder {
  color: #9ca3af !important;
}

input:focus {
  box-shadow: var(--focus);
  border-color: rgba(10, 90, 255, .55)
}

.btn {
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, rgba(10, 90, 255, 1), rgba(0, 46, 148, 1));
  color: #fff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(10, 90, 255, .22);
  transition: transform .08s ease, filter .08s ease;
}

.btn:hover {
  filter: brightness(1.05)
}

.btn:active {
  transform: translateY(1px)
}

.btn:focus {
  box-shadow: var(--focus)
}

.btn:disabled {
  opacity: .6;
  cursor: not-allowed
}

.btn.ghost {
  background: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(10, 90, 255, .16);
  border: 1px solid rgba(10, 90, 255, .30);
  color: rgba(255, 255, 255, .92);
}

.muted {
  color: rgba(144, 160, 195, .85) !important; 
}

/* Mejora de visibilidad en modo claro / wpCard */
[data-theme="light"] .muted,
.wpCard .muted {
  color: rgba(50, 65, 95, .88) !important; /* Mucho más oscuro para contraste real */
}

/* Forzar mayor visibilidad en textos de ayuda */
.hint {
  font-size: 12.5px;
  color: rgba(60, 75, 100, .75);
  line-height: 1.35;
}
[data-theme="dark"] .hint {
  color: rgba(234, 238, 255, .75);
}

/* ===== MODERN TABS (Premium redesign) ===== */
.wpTabs {
  display: flex;
  gap: 24px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.wpTabs::-webkit-scrollbar {
  display: none; /* WebKit */
}

.wpTab {
  position: relative;
  padding: 12px 4px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(30, 41, 59, .55); /* Oscuro por defecto (Staff light background) */
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}

[data-theme="dark"] .wpTab,
.clientApp .wpTab {
  color: rgba(255, 255, 255, .50);
}

.wpTab:hover {
  color: rgba(30, 41, 59, .90);
}
[data-theme="dark"] .wpTab:hover,
.clientApp .wpTab:hover {
  color: rgba(255, 255, 255, .85);
}

.wpTab.active {
  color: var(--wp-accent, #0a5aff); /* Usar accent de layout.css */
}
[data-theme="dark"] .wpTab.active,
.clientApp .wpTab.active {
  color: #fff;
}

.wpTab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--wp-p, #0a5aff);
  border-radius: 4px 4px 0 0;
  box-shadow: 0 -2px 10px rgba(10, 90, 255, .3);
}

.wpCard .wpTabs {
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.wpCard .wpTab {
  color: rgba(0, 0, 0, .65); /* Más oscuro por defecto */
}
.wpCard .wpTab:hover {
  color: rgba(0, 0, 0, .90);
}
.wpCard .wpTab.active {
  color: var(--wp-accent, #0a5aff);
  font-weight: 900;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  position: relative;
  isolation: isolate;
  background: var(--bg);
}

/* Imagen + overlay elegante (sin “logo gigante” recortado) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 520px at 18% 16%, rgba(10, 90, 255, .18), transparent 60%),
    radial-gradient(900px 520px at 86% 18%, rgba(0, 46, 148, .18), transparent 60%),
    linear-gradient(180deg, rgba(7, 11, 22, .88) 0%, rgba(7, 11, 22, .70) 55%, rgba(7, 11, 22, .88) 100%),
    var(--bgImage);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* clave: cover para que se vea pro */
  filter: saturate(1.05) contrast(1.05);
  z-index: -2;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 420px at 50% 18%, rgba(255, 255, 255, .06), transparent 60%),
    linear-gradient(90deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .10), rgba(0, 0, 0, .30));
  z-index: -1;
}

/* ===== LAYOUT 2 BLOQUES ===== */
.shell {
  width: min(1180px, 96vw);
  display: grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 18px;
  align-items: stretch;
}

.cardglass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  position: relative;
}

.cardglass.soft {
  background: rgba(255, 255, 255, .06);
}

.cardglass.primary {
  background:
    linear-gradient(180deg, rgba(0, 46, 148, .35), rgba(10, 10, 86, .40));
  border-color: rgba(10, 90, 255, .28);
}

/* Glow que sigue al cursor SOLO en panel derecho */
.cardglass.primary::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(380px 280px at var(--mx) var(--my), rgba(10, 90, 255, .35), transparent 60%),
    radial-gradient(520px 360px at calc(var(--mx) + 18%) calc(var(--my) + 8%), rgba(0, 46, 148, .22), transparent 65%);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}

.cardglass.primary>* {
  position: relative;
  z-index: 1;
}

.header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 12px;
}

.brandlogo {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
}

.brandlogo img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.titleblock h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: .2px;
}

.titleblock .sub {
  margin-top: 3px;
  color: rgba(234, 240, 255, .72);
  font-size: 13px
}

.header .right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Badge Verified */
.brandbadge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  font-size: 12px;
}

.brandbadge .v {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(10, 90, 255, .25);
  border: 1px solid rgba(10, 90, 255, .45);
}

/* ===== PANEL IZQUIERDO (slider) ===== */
.left {
  padding: 8px 18px 18px;
  display: grid;
  gap: 14px;
}

.heroTitle {
  font-size: 38px;
  line-height: 1.05;
  margin: 0;
  font-weight: 1000;
  letter-spacing: .2px;
  text-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

.heroDesc {
  margin: 0;
  color: rgba(234, 240, 255, .74);
  max-width: 56ch;
  line-height: 1.45;
}

.chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .90);
  font-weight: 900;
  font-size: 12px;
}

.chip .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(10, 90, 255, 1);
  box-shadow: 0 0 0 4px rgba(10, 90, 255, .18);
}

.slider {
  position: relative;
  height: 110px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  padding: 16px;
  display: grid;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .38s ease, transform .38s ease;
}

.slide.on {
  opacity: 1;
  transform: translateY(0);
}

.slideTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.slideKpi {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 1000;
}

.kpiIcon {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(10, 90, 255, .18);
  border: 1px solid rgba(10, 90, 255, .34);
}

.slideText {
  color: rgba(234, 240, 255, .72);
  font-size: 13px;
  line-height: 1.35;
  margin: 0;
}

/* ===== PANEL DERECHO (login) ===== */
.right {
  padding: 8px 18px 18px;
  display: grid;
  gap: 14px;
}

.rightTopTitle {
  margin: 0;
  font-size: 16px;
  font-weight: 1000;
}

.rightTopSub {
  margin: 4px 0 0 0;
  color: rgba(234, 240, 255, .70);
  font-size: 13px;
  line-height: 1.35;
}

/* Tabs */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tab {
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: transform .08s ease, border-color .12s ease, filter .12s ease;
}

.tab:hover {
  filter: brightness(1.03);
  border-color: rgba(10, 90, 255, .40)
}

.tab:active {
  transform: translateY(1px)
}

.tab.on {
  background: linear-gradient(180deg, rgba(10, 90, 255, .20), rgba(0, 46, 148, .16));
  border-color: rgba(10, 90, 255, .55);
}

.tab small {
  color: rgba(234, 240, 255, .72);
  font-weight: 900;
  text-transform: lowercase
}

.tab strong {
  font-weight: 1000
}

.formbox {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .16);
  padding: 16px;
  display: grid;
  gap: 10px;
}

.formTitleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.formTitle {
  margin: 0;
  font-weight: 1000;
  font-size: 14px;
}

.securePill {
  font-size: 12px;
  font-weight: 1000;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
}

.msg {
  min-height: 18px;
  font-size: 12.5px;
  color: rgba(234, 240, 255, .78);
}

.note {
  padding: 0 18px 18px;
  color: rgba(234, 240, 255, .65);
  font-size: 12px;
}

/* Efecto chispa al click */
.spark {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  pointer-events: none;
  background: rgba(10, 90, 255, 1);
  box-shadow:
    0 0 0 6px rgba(10, 90, 255, .18),
    0 0 24px rgba(10, 90, 255, .55),
    0 0 42px rgba(0, 46, 148, .35);
  animation: spark .55s ease-out forwards;
  z-index: 5;
}

@keyframes spark {
  0% {
    transform: translate(-50%, -50%) scale(.7);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
  }
}

@media(max-width:980px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .heroTitle {
    font-size: 32px;
  }
}

/* ===== Mobile Optimization ===== */
@media (max-width: 980px) {
  .hero {
    padding: 16px;
  }

  .shell {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* En móvil, mostramos primero el login (derecha) */
  #rightCard {
    order: 1;
  }

  #leftCard {
    order: 2;
  }

  .header {
    padding: 14px 14px 10px;
  }

  .left,
  .right {
    padding: 6px 14px 14px;
  }

  .brandlogo {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .titleblock h1 {
    font-size: 18px;
  }

  .titleblock .sub {
    font-size: 12.5px;
  }

  .heroTitle {
    font-size: 28px;
    line-height: 1.05;
  }

  .slider {
    height: auto;
    min-height: 110px;
  }
}

/* Teléfonos pequeños */
@media (max-width: 520px) {
  .heroTitle {
    font-size: 24px;
  }

  .heroDesc {
    font-size: 13.5px;
  }

  /* Inputs + botones siempre en columna */
  .row {
    flex-direction: column;
    gap: 10px;
  }

  .row>* {
    min-width: 0;
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  /* Tabs más compactas */
  .tabs {
    gap: 8px;
  }

  .tab {
    padding: 11px 12px;
  }

  /* Reduce un poco sombras para rendimiento */
  .cardglass {
    box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  }
}

/* Mejoras táctiles */
@media (hover: none) {

  .option:hover,
  .tab:hover {
    filter: none;
    transform: none;
  }
}

/* ===== Menú de acciones (drawer) ===== */
.menuWrap {
  position: relative;
}

.menuBtn {
  border: 1px solid var(--wp-border);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 950;
  cursor: pointer;
}

.menuPanel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: #fff;
  border: 1px solid var(--wp-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .14);
  min-width: 220px;
  padding: 6px;
  display: none;
  z-index: 10001;
}

.menuPanel.open {
  display: block;
}

.menuItem {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 850;
  cursor: pointer;
}

.menuItem:hover {
  background: rgba(0, 0, 0, .04);
}

.menuItem.danger {
  color: #b32d2e;
}

.menuSep {
  height: 1px;
  background: var(--wp-border);
  margin: 6px 0;
}

/* Botón X */
.iconX {
  border: 1px solid var(--wp-border);
  background: #fff;
  border-radius: 12px;
  width: 42px;
  height: 42px;
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  line-height: 1;
}

/* ===== DROPDOWN MENU (Exportar / Acciones) ===== */
.ddWrap {
  position: relative;
  display: inline-block;
}

.ddBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ddMenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 210px;
  background: #fff;
  border: 1px solid var(--wp-border);
  border-radius: 12px;
  box-shadow: var(--wp-shadow-lg);
  padding: 6px;
  display: none;
  z-index: 9999;
}

.ddMenu.open {
  display: block;
}

.ddItem {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 750;
  color: var(--wp-text);
}

.ddItem:hover {
  background: var(--wp-page-bg);
}

.ddSep {
  height: 1px;
  margin: 6px 8px;
  background: var(--wp-border);
}

.ddDanger {
  color: #b32d2e;
}

/* ===== RIGHT DRAWER (Lead) ===== */
.drawerOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .22);
  display: none;
  z-index: 9998;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(520px, 92vw);
  background: #fff;
  border-left: 1px solid var(--wp-border);
  box-shadow: var(--wp-shadow-lg);
  transform: translateX(100%);
  transition: transform .18s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}

.drawerOverlay.open {
  display: block;
}

.drawer.open {
  transform: translateX(0);
}

/* Modal Centralizado */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 10002;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modalOverlay.open {
  display: flex;
}

.modalCenter {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35);
  border: 1px solid var(--wp-border);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modalCenter .drawerHead {
  background: #fafafa;
}

/* Envolturas responsivas para evitar overflow en tablas de modulos */
.tableResponsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.tableResponsive table {
  width: 100%;
}

/* Envoltura responsiva para evitar overflow */
.table-responsive-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  border: 1px solid var(--wp-border);
  border-radius: 12px;
}

.table-responsive-wrap table {
  min-width: 600px;
  width: 100%;
}

.drawerHead {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--wp-border);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.drawerTitle {
  font-weight: 950;
  font-size: 15px;
  margin: 0;
}

.drawerSub {
  margin-top: 3px;
  color: var(--wp-muted);
  font-size: 12.5px;
}

.drawerActions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.iconBtn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--wp-border);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.iconBtn:hover {
  filter: brightness(.98);
}

.drawerTabs {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--wp-border);
}

.tabBtn {
  border: 1px solid var(--wp-border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 850;
  font-size: 12.5px;
}

.tabBtn.active {
  background: rgba(34, 113, 177, .12);
  border-color: rgba(34, 113, 177, .35);
}

.drawerBody {
  padding: 14px;
  overflow: auto;
  flex: 1;
}

.formGrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width:520px) {
  .formGrid2 {
    grid-template-columns: 1fr;
  }
}

.field {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  outline: 0;
  font-weight: 650;
  background: #f8fafc;
  color: #0f172a;
  transition: border-color .15s ease, background .15s ease;
}

.field:focus {
  border-color: #0a5aff;
  background: #ffffff;
}

.field::placeholder {
  color: #94a3b8 !important;
  font-weight: 500;
}

[data-theme="dark"] .field {
  border: 1px solid var(--wp-border);
  background: rgba(0, 0, 0, .20);
  color: rgba(255, 255, 255, .92);
}

[data-theme="dark"] .field:focus {
  background: rgba(0, 0, 0, .35);
  border-color: #0a5aff;
}

[data-theme="dark"] .field::placeholder {
  color: rgba(255, 255, 255, .45) !important;
}

/* =========================
   CALENDAR 2.0
   ========================= */
.calTop {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
}

.calControls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.calRange {
  font-weight: 900;
  padding: 8px 10px;
  border: 1px solid var(--wp-border);
  border-radius: 10px;
  background: var(--wp-card-bg);
}

.calTog {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--wp-border);
  border-radius: 10px;
  background: var(--wp-card-bg);
  font-size: 13px;
  color: var(--wp-muted);
}

.calTog input {
  width: 16px;
  height: 16px;
}

.calStage {
  margin-top: 12px;
  border: 1px solid var(--wp-border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--wp-card-bg);
  box-shadow: var(--wp-shadow);
}

/* Time-grid */
.calTG {
  width: 100%;
}

.calTGHead {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--wp-border);
  background: #fafafa;
}

.calTGCorner {
  border-right: 1px solid var(--wp-border);
}

.calTGDayHead {
  padding: 10px 10px;
  border-right: 1px solid var(--wp-border);
}

.calTGDayHead .d1 {
  font-weight: 950;
  color: var(--wp-text);
}

.calTGBody {
  display: grid;
  grid-template-columns: 70px repeat(7, minmax(0, 1fr));
}

.calTimeCol {
  position: relative;
  border-right: 1px solid var(--wp-border);
  background: #fbfbfc;
}

.calTimeTick {
  position: absolute;
  left: 10px;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--wp-muted);
}

.calDayCol {
  position: relative;
  border-right: 1px solid var(--wp-border);
  overflow: hidden;
}

.calGridLines {
  width: 100%;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0px,
      transparent 71px,
      rgba(220, 220, 222, .7) 72px);
}

.calNow {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(220, 0, 0, .55);
  pointer-events: none;
}

.calEv {
  position: absolute;
  margin: 0;
  border: 1px solid var(--wp-border);
  border-left-width: 6px;
  border-radius: 12px;
  padding: 8px 8px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .05);
  text-align: left;
  cursor: pointer;
}

.calEv .t {
  font-weight: 950;
  font-size: 12.5px;
  color: var(--wp-text);
  line-height: 1.2;
}

.calEv .s {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--wp-muted);
}

.calEv.is-done {
  opacity: .7;
}

.calEv.is-cancelled {
  opacity: .65;
  text-decoration: line-through;
}

/* Type colors */
.cal-visita {
  border-left-color: #0A5AFF;
  background: rgba(10, 90, 255, .07);
}

.cal-mantenimiento {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, .08);
}

.cal-reparacion {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, .10);
}

.cal-llamada {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, .09);
}

.cal-reunion {
  border-left-color: #0891b2;
  background: rgba(8, 145, 178, .09);
}

.cal-pago {
  border-left-color: #b45309;
  background: rgba(180, 83, 9, .10);
}

.cal-otro {
  border-left-color: #6b7280;
  background: rgba(107, 114, 128, .10);
}

/* Month */
.calMonthHead {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--wp-border);
  background: #fafafa;
}

.calMonthDow {
  padding: 10px;
  font-weight: 900;
  color: var(--wp-muted);
  font-size: 12px;
  border-right: 1px solid var(--wp-border);
}

.calMonthGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calCell {
  min-height: 140px;
  border-right: 1px solid var(--wp-border);
  border-bottom: 1px solid var(--wp-border);
  padding: 8px;
  cursor: pointer;
}

.calCell.is-out {
  background: #fbfbfc;
  opacity: .75;
}

.calCellTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calDayNum {
  font-weight: 950;
  color: var(--wp-text);
}

.calChip {
  width: 100%;
  display: block;
  border: 1px solid var(--wp-border);
  border-left-width: 6px;
  border-radius: 12px;
  padding: 6px 8px;
  margin-top: 6px;
  text-align: left;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}

.calChip.cal-visita {
  border-left-color: #0A5AFF;
  background: rgba(10, 90, 255, .06);
}

.calChip.cal-mantenimiento {
  border-left-color: #16a34a;
  background: rgba(22, 163, 74, .07);
}

.calChip.cal-reparacion {
  border-left-color: #f97316;
  background: rgba(249, 115, 22, .08);
}

.calChip.cal-llamada {
  border-left-color: #7c3aed;
  background: rgba(124, 58, 237, .08);
}

.calChip.cal-reunion {
  border-left-color: #0891b2;
  background: rgba(8, 145, 178, .08);
}

.calChip.cal-pago {
  border-left-color: #b45309;
  background: rgba(180, 83, 9, .09);
}

.calChip.cal-otro {
  border-left-color: #6b7280;
  background: rgba(107, 114, 128, .09);
}

/* Year */
.calYear {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  background: var(--wp-page-bg);
}

.calMini {
  border: 1px solid var(--wp-border);
  border-radius: 14px;
  background: #fff;
  padding: 10px;
}

.calMiniName {
  font-weight: 950;
  color: var(--wp-text);
  margin-bottom: 8px;
}

.calMiniGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.calMiniDay {
  height: 12px;
  border-radius: 6px;
  border: 1px solid var(--wp-border);
  background: #fff;
  cursor: pointer;
}

.calMiniDay.has {
  background: rgba(10, 90, 255, .18);
  border-color: rgba(10, 90, 255, .35);
}

.calMiniDay.is-out {
  opacity: .35;
}

@media (max-width: 980px) {
  .calYear {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .calYear {
    grid-template-columns: 1fr;
  }

  .calTimeGrid.isWeek {
    min-width: 700px;
    padding-bottom: 15px;
  }

  .calMonthHeader,
  .calMonthGrid {
    min-width: 700px;
  }

  /* Ajuste para 1 columna en inspectos del calendario (modales) */
  .calRow2 {
    display: flex;
    flex-direction: column !important;
    gap: 12px;
  }

  .calRow2>* {
    width: 100%;
  }

  /* Mejora de touch targets */
  .calQuickBtn,
  .calInsCloseBtn,
  .wpBtn {
    min-height: 44px;
  }
}




/* =========================================================
   CLIENT PORTAL — Premium NeoGlass (SOLO .clientApp)
   No afecta al staff (wpShell/wpSidebar/wpTopbar).
   ========================================================= */
.clientApp {
  --c-accent: var(--blue, #0A5AFF);
  --c-accent2: var(--blue-mid, #002E94);
  --c-text: rgba(234, 240, 255, .96);
  --c-muted: rgba(234, 240, 255, .68);
  --c-border: rgba(255, 255, 255, .14);
  --c-glass: rgba(255, 255, 255, .06);
  --c-glass2: rgba(255, 255, 255, .035);
  --c-shadow: 0 22px 70px rgba(0, 0, 0, .55);
  --c-radius: 26px;
}

/* Fondo premium en interior cliente (sin romper login) */
.clientApp.appShell {
  padding: 18px;
  background:
    radial-gradient(1000px 560px at 14% 14%, rgba(10, 90, 255, .18), transparent 60%),
    radial-gradient(900px 520px at 88% 18%, rgba(0, 46, 148, .16), transparent 60%),
    radial-gradient(760px 520px at 56% 90%, rgba(255, 255, 255, .05), transparent 65%),
    linear-gradient(180deg, rgba(7, 11, 22, .92), rgba(7, 11, 22, .86));
  color: var(--c-text);
}

/* Layout */
.clientApp .cShell {
  min-height: calc(100vh - 36px);
  display: flex;
  overflow: hidden;

  border-radius: var(--c-radius);
  border: 1px solid var(--c-border);
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--c-shadow);
  position: relative; /* necesario para el overlay y sidebar fixed */
}

/* Sidebar premium */
.clientApp .cSidebar {
  width: 270px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 520px at 25% 10%, rgba(10, 90, 255, .18), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02)),
    rgba(8, 10, 18, .62);
  border-right: 1px solid rgba(255, 255, 255, .10);
}

.clientApp .cBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

.clientApp .cLogo {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35);
}

.clientApp .cBrandText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.clientApp .cBrandTop {
  font-weight: 950;
  letter-spacing: .2px;
}

.clientApp .cBrandSub {
  font-weight: 800;
  font-size: 12px;
  color: var(--c-muted);
}

.clientApp .cSecurePill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .92);
  font-size: 12px;
  font-weight: 900;
}

.clientApp .cSecurePill .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #46b450;
}

.clientApp .cMenu {
  padding: 12px 10px;
  display: grid;
  gap: 6px;
}

.clientApp .cMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, .82);
  transition: background .12s ease, border-color .12s ease, transform .08s ease, filter .12s ease;
}

.clientApp .cMenuItem:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .92);
}

.clientApp .cMenuItem:active {
  transform: translateY(1px);
}

.clientApp .cMenuItem.active {
  background:
    radial-gradient(520px 240px at 18% 50%, rgba(10, 90, 255, .22), transparent 62%),
    rgba(255, 255, 255, .06);
  border-color: rgba(10, 90, 255, .30);
  box-shadow: 0 14px 30px rgba(10, 90, 255, .10);
  color: rgba(255, 255, 255, .95);
}

.clientApp .cIco {
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .10);
}

.clientApp .cLbl {
  font-weight: 900;
  font-size: 13.5px;
}

.clientApp .cSideFooter {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
}

.clientApp .cFootNote {
  font-size: 12px;
  color: var(--c-muted);
}

/* Main */
.clientApp .cMain {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Topbar premium */
.clientApp .cTopbar {
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 16px;

  background: rgba(255, 255, 255, .05);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.clientApp .cTopLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.clientApp .cTitleBlock {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.clientApp .cTitle {
  font-weight: 950;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clientApp .cSub {
  font-size: 12px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clientApp .cTopRight {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon button */
.clientApp .cIconBtn {
  width: 42px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}

.clientApp .cIconBtn:hover {
  filter: brightness(1.06);
}

.clientApp .cIconBtn:active {
  transform: translateY(1px);
}

.clientApp .cUserPill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .92);
  font-weight: 900;
  max-width: 420px;
}

.clientApp .cAvatar {
  width: 30px;
  height: 30px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(10, 90, 255, .18);
  border: 1px solid rgba(10, 90, 255, .30);
  font-weight: 950;
}

.clientApp .cEmail {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Buttons */
.clientApp .cBtn {
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .92);
  font-weight: 950;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}

.clientApp .cBtn:hover {
  filter: brightness(1.06);
}

.clientApp .cBtn:active {
  transform: translateY(1px);
}

.clientApp .cBtn.primary {
  background: linear-gradient(180deg, rgba(10, 90, 255, 1), rgba(0, 46, 148, 1));
  border-color: rgba(10, 90, 255, .35);
  box-shadow: 0 14px 34px rgba(10, 90, 255, .22);
}

/* Content */
.clientApp .cContent {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  min-height: 0; /* importante para que el flex hijo haga scroll */
}

/* “cards” dentro del portal cliente (reutiliza tu wpCard pero premium) */
.clientApp .wpCard {
  background: var(--c-glass);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35);
}

.clientApp .wpMuted,
.clientApp .muted {
  color: var(--c-muted) !important;
}

/* Inputs en portal cliente */
.clientApp .wpInput,
.clientApp input,
.clientApp select,
.clientApp textarea {
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(0, 0, 0, .18);
  color: rgba(255, 255, 255, .92);
}

.clientApp .wpInput:focus,
.clientApp input:focus,
.clientApp select:focus,
.clientApp textarea:focus {
  box-shadow: 0 0 0 3px rgba(10, 90, 255, .35);
  border-color: rgba(10, 90, 255, .45);
}

/* Tablas en portal cliente */
.clientApp table th {
  background: rgba(255, 255, 255, .03);
  color: rgba(255, 255, 255, .72);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.clientApp table td {
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Responsive: sidebar tipo drawer en movil */
@media(max-width:980px) {
  .clientApp.appShell {
    padding: 10px;
  }

  .clientApp .cShell {
    overflow: visible;
    position: relative;
  }

  .clientApp .cMain {
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100svh;
    overflow: hidden;
  }

  .clientApp .cSidebar {
    position: fixed;
    left: 10px;
    top: 10px;
    bottom: 74px;
    z-index: 9999;
    border-radius: 22px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .65);
    transform: translateX(calc(-100% - 20px));
    transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1);
    width: 280px;
  }

  .clientApp.sidebar-open .cSidebar {
    transform: translateX(0);
  }

  .clientApp .cTopbar {
    height: 56px;
    padding: 0 12px;
    flex-shrink: 0;
  }

  .clientApp .cContent {
    padding: 14px 14px 80px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
  }
}

@media (max-width: 480px) {
  /* Sin padding en móvil pequeño */
  .clientApp.appShell {
    padding: 0;
    background-attachment: fixed;
  }

  .clientApp .cShell {
    border-radius: 0;
    border: 0;
    min-height: 100svh;
  }

  /* Sidebar toca el borde izquierdo en móvil pequeño */
  .clientApp .cSidebar {
    left: 0;
    top: 0;
    bottom: 64px; /* exactamente el alto del bottom nav */
    border-radius: 0 20px 20px 0;
  }

  .clientApp .cContent {
    padding: 12px 12px 80px;
  }

  .clientApp .cTopbar {
    height: 52px;
    gap: 6px;
  }

  /* Ocultar subtitulo en móvil */
  .clientApp .cSub { display: none; }

  /* Ocultar nombre en userPill en móvil */
  .clientApp .cName { display: none; }

  /* Ocultar botón Salir en móvil (accesible desde sidebar) */
  #btnClientSignOut { display: none; }
}

/* ====== BOTTOM NAV (Portal Cliente) ====== */
.clientApp .cBottomNav {
  display: none;
}

@media (max-width: 980px) {
  .clientApp .cBottomNav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: rgba(7, 11, 22, .95);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .10);
    z-index: 9998;
    padding: 0 4px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .4);
  }

  .clientApp .cBnItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .45);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    transition: color .15s, background .15s;
    min-height: 52px;
    font-family: inherit;
  }
  .clientApp .cBnItem:hover,
  .clientApp .cBnItem.active {
    color: #fff;
    background: rgba(255, 255, 255, .06);
  }
  .clientApp .cBnItem.active {
    color: #60a5fa;
  }
  .clientApp .cBnItem svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .clientApp .cBnLabel {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* Overlay móvil */
.clientApp .cOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: none;
  z-index: 9997;
}

.clientApp.sidebar-open .cOverlay {
  display: block;
}

/* --- Equipos (Cliente) : modo claro (fondo blanco + tarjetas sólidas) ---
   El portal cliente es "premium oscuro", pero este módulo se ve mejor en claro
   porque las fotos de equipos vienen con fondo blanco.
*/

/* Contenedor principal del módulo */
.clientApp .wpCard.ceEco {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
  color: #0f172a;
}

.clientApp .wpCard.ceEco .dashSub {
  color: #64748b;
}

.clientApp .wpCard.ceEco .wpMuted,
.clientApp .wpCard.ceEco .wpSubtle {
  color: #64748b !important;
}

.clientApp .wpCard.ceEco .wpInput {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}

.clientApp .wpCard.ceEco .wpInput::placeholder {
  color: #94a3b8;
}

.clientApp .wpCard.ceEco .wpBtn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}

.clientApp .wpCard.ceEco .wpBtn:hover {
  background: #f1f5f9;
}

.clientApp .wpCard.ceEco .wpBtn.primary {
  background: #0a5aff;
  border-color: #0a5aff;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(10, 90, 255, .18);
}

.clientApp .wpCard.ceEco .wpBtn.primary:hover {
  filter: brightness(1.02);
}

/* Drawer (Agregar equipo) en blanco */
.clientApp .drawerOverlay.ceEcoOverlay {
  background: rgba(15, 23, 42, .45);
}

.clientApp .ceEcoOverlay .drawer {
  background: #ffffff;
  border-left: 1px solid #e5e7eb;
  color: #0f172a;
}

.clientApp .ceEcoOverlay .drawerHead {
  border-bottom: 1px solid #e5e7eb;
}

.clientApp .ceEcoOverlay .drawerHead h3 {
  color: #0f172a;
}

.clientApp .ceEcoOverlay .drawerHead .wpMuted {
  color: #64748b !important;
}

.clientApp .ceEcoOverlay .iconBtn {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}

.clientApp .ceEcoOverlay .iconBtn:hover {
  background: #f1f5f9;
}

.clientApp .ceEcoOverlay .wpInput {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  color: #0f172a;
}

.clientApp .ceEcoOverlay .ceSection {
  margin-top: 16px;
  border-top: 1px solid #e5e7eb;
  padding-top: 14px;
}

.clientApp .ceEcoOverlay .cePhotoPreview,
.clientApp .ceEcoOverlay .ceDetailPhoto {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
}

.clientApp .ceEcoOverlay .cePhotoPreview {
  max-height: 160px;
}

.clientApp .ceEcoOverlay .ceNoteArea {
  width: 100%;
  min-height: 84px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #0f172a;
  resize: vertical;
}

/* Selector de Grupo / Categoría / Tipo */
.clientApp .cePickGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.clientApp .cePickGrid.cePickGridWide {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 820px) {
  .clientApp .cePickGrid {
    grid-template-columns: 1fr;
  }

  .clientApp .cePickGrid.cePickGridWide {
    grid-template-columns: 1fr;
  }
}

.clientApp .cePickCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.clientApp .cePickCard:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .10);
}

.clientApp .cePickInfo {
  min-width: 0;
}

.clientApp .cePickName {
  font-weight: 850;
  letter-spacing: .2px;
  color: #0f172a;
  line-height: 1.15;
}

.clientApp .cePickSub {
  display: none;
}

.clientApp .cePickImg {
  width: clamp(120px, 18vw, 190px);
  height: clamp(72px, 10vw, 110px);
  object-fit: contain;
  flex: 0 0 auto;
}

.clientApp .cePickImgFallback {
  width: clamp(120px, 18vw, 190px);
  height: clamp(72px, 10vw, 110px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #94a3b8;
  flex: 0 0 auto;
}

.clientApp .cePickPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  font-size: 12px;
  color: #0f172a;
}

.clientApp .ceTypeSelected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}

.clientApp .ceTypeTitle {
  font-weight: 900;
  color: #0f172a;
}

.clientApp .ceTypeMeta {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

.clientApp .ceFormLock {
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px dashed #cbd5e1;
  background: #f8fafc;
  color: #64748b;
}

/* Lista de equipos ya registrados (fila grande por equipo) */
.clientApp .ceDeviceList {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.clientApp .ceDeviceRow {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

.clientApp .ceDeviceLeft {
  min-width: 0;
}

.clientApp .ceDeviceName {
  font-weight: 950;
  font-size: 22px;
  color: #0f172a;
}

.clientApp .ceDeviceMeta {
  font-size: 13px;
  color: #64748b;
  margin-top: 3px;
}

.clientApp .ceDevicePath {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 6px;
}

.clientApp .ceDeviceRight {
  flex: 0 0 auto;
  width: clamp(240px, 28vw, 340px);
  height: clamp(130px, 16vw, 190px);
  border-radius: 18px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.clientApp .ceDeviceArt {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .14));
}

.clientApp .ceDeviceFallback {
  font-size: 12px;
  color: #64748b;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 10px 12px;
  background: #ffffff;
}

@media(max-width:900px) {
  .clientApp .cePickGrid.cePickGridWide {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:760px) {
  .clientApp .cePickGrid {
    grid-template-columns: 1fr;
  }

  .clientApp .ceDeviceRow {
    flex-direction: column;
  }

  .clientApp .ceDeviceRight {
    width: 100%;
  }
}

/* =========================================
   UI / UX Enhancements: TABS & CARDS
========================================= */
.tabBtn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--wp-muted);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.tabBtn:hover {
  color: var(--wp-text);
  background: rgba(0, 0, 0, 0.03);
}

.tabBtn.active {
  color: var(--wp-primary);
  border-bottom: 3px solid var(--wp-primary);
  background: rgba(0, 0, 0, 0.02);
}

#quotesModuleContainer .wpCard,
#workOrdersModuleContainer .wpCard {
  box-shadow: none;
  border: 1px solid var(--wp-border);
  border-radius: 8px;
}

/* Users Module - Checklist Permissions UI (Compact) */
.uModGroup {
  margin-top: 18px;
}

.uModGroupTitle {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--wp-muted);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  padding-left: 6px;
  border-left: 2px solid var(--wp-primary);
  line-height: 1;
}

.uModList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uModItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border: 1px solid var(--wp-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.uModItem:hover {
  border-color: var(--wp-primary);
  background: rgba(10, 90, 255, 0.02);
  transform: translateX(4px);
}

.uModItem:has(input:checked) {
  border-color: var(--wp-primary);
  background: rgba(10, 90, 255, 0.04);
}

.uModChk {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--wp-primary);
}

.uModIco {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 5px;
  color: var(--wp-muted);
  transition: all 0.2s ease;
}

.uModIco svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.uModItem:has(input:checked) .uModIco {
  background: var(--wp-primary);
  color: #fff;
}

.uModName {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--wp-text);
}
/* ===== Smart Proofread Global ===== */
.proof-wrap {
  position: relative;
  width: 100%;
}
.proof-mirror {
  position: absolute;
  pointer-events: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background: transparent !important;
  z-index: 1;
  overflow: hidden;
  user-select: none;
}
.proof-typo-spelling {
  text-decoration: underline wavy #ff4d4d;
  text-decoration-color: #ff4d4d !important;
  text-decoration-thickness: 2px;
}
.proof-typo-grammar {
  text-decoration: underline wavy #4d94ff;
  text-decoration-color: #4d94ff !important;
  text-decoration-thickness: 2px;
}
.proof-popup {
  position: fixed;
  background: #fff;
  border: 1px solid var(--wp-border, #ccc);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  padding: 8px;
  z-index: 100000;
  min-width: 180px;
  color: #333;
  font-family: system-ui, -apple-system, sans-serif;
  animation: proof-fade-in 0.2s ease-out;
}
@keyframes proof-fade-in { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
.proof-popup-title { padding: 6px 10px; font-size: 11px; text-transform: uppercase; font-weight: 800; color: #888; border-bottom: 1px solid #eee; margin-bottom: 6px; }
.proof-popup-list { display: grid; gap: 4px; }
.proof-popup-item { width: 100%; text-align: left; padding: 8px 12px; border-radius: 8px; border: 0; background: transparent; font-weight: 700; font-size: 14px; cursor: pointer; color: #0A5AFF; }
.proof-popup-item:hover { background: rgba(10, 90, 255, 0.08); }
.proof-popup-none { padding: 10px; font-size: 13px; color: #999; font-style: italic; }


/* ===== SETTINGS TABS ===== */
.tabBtn {
  padding: 14px 18px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-weight: 950;
  color: var(--wp-muted);
  transition: all 0.2s;
  font-size: 14px;
}
.tabBtn:hover {
  color: var(--wp-text);
}
.tabBtn.active {
  color: var(--wp-accent);
  border-bottom-color: var(--wp-accent);
}
.tabPane {
  display: none;
  animation: fadeIn 0.3s ease-out;
}
.tabPane.active {
  display: block;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ====================================================
   GLOBAL MOBILE / TABLET OPTIMIZATIONS
   Aplica a todos los módulos del staff (wpContent)
   ==================================================== */

/* ── Drawers: ancho completo en móvil ── */
@media (max-width: 640px) {
  .wpContent {
    overflow-wrap: anywhere;
  }

  .drawer {
    width: 100vw !important;
    border-left: 0;
    border-radius: 20px 20px 0 0;
    top: auto;
    bottom: 0;
    height: 92svh;
    transform: translateY(100%);
  }

  .drawer.open {
    transform: translateY(0);
    transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Modales: hoja inferior en móvil */
  .modalOverlay {
    padding: 0;
    align-items: flex-end;
  }

  .modalCenter {
    border-radius: 20px 20px 0 0;
    max-width: 100%;
    max-height: 92svh;
    overflow-y: auto;
  }

  /* drawerActions en columna para no comprimir botones */
  .drawerActions {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Tabs del drawer en scroll horizontal */
  .drawerTabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .drawerTabs::-webkit-scrollbar { display: none; }

  /* wpCard padding más compacto */
  .wpCard, .card, .moduleContainer {
    padding: 14px;
    max-width: 100%;
  }

  /* formGrid2 siempre en columna en móvil */
  .formGrid2 {
    grid-template-columns: 1fr !important;
  }

  /* wpTabs: scroll horizontal */
  .wpTabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }
  .wpTabs::-webkit-scrollbar { display: none; }

  /* Inputs y campos más altos para touch */
  .field, input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Menú de acciones: panel de ancho completo centrado */
  .menuPanel, .ddMenu {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: min(280px, 92vw);
  }

  /* Dropdowns y menus contextuales */
  .ddMenu {
    position: fixed !important;
    bottom: 80px;
    top: auto;
  }
}

/* ── Tablet (600-900px) ── */
@media (min-width: 600px) and (max-width: 900px) {
  /* Drawer más ancho en tablet */
  .drawer {
    width: min(480px, 88vw) !important;
  }

  /* Grids de 2 col en tablets */
  .formGrid2 {
    grid-template-columns: 1fr 1fr;
  }

  /* Cards con padding normal */
  .wpCard, .card, .moduleContainer {
    padding: 18px;
  }
}

/* ── Touch targets universales ── */
@media (hover: none) and (pointer: coarse) {
  button, .btn, .wpBtn, [role="button"] {
    min-height: 44px;
  }

  /* Eliminar efectos hover en dispositivos táctiles */
  .hero-card:hover,
  .module-card:hover {
    background: inherit;
  }

  /* Mejor área de toque para items de tabla */
  td, .listItem {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ── Viewport meta safety ── */
html {
  /* Prevenir zoom en inputs en iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Tablas responsivas globales ── */
@media (max-width: 760px) {
  .tableResponsive {
    margin-left: -2px;
    margin-right: -2px;
    padding-bottom: 2px;
  }

  .table-responsive-wrap {
    border-radius: 8px;
  }

  /* Hacer tablas scrollables horizontalmente */
  table {
    font-size: 13px;
  }

  th, td {
    padding: 8px 10px !important;
  }
}

/* ── Paginación en columna en móvil ── */
@media (max-width: 520px) {
  .paginationRow,
  [class*="pagination"] {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .paginationRow button,
  [class*="pagination"] button {
    width: 100%;
  }
}